Data Module - withSelect & withDispatch

blocks.js

( function( blocks, element, data, components, compose ) {
    var el = element.createElement;
    
    blocks.registerBlockType( 'my-demo/demo-block-select', {
        title: 'Demo Block (Select)',

        icon: 'format-aside',

        category: 'common',

        edit: data.withSelect( function( select ) {
            return {
                status: select( 'core/editor' ).getEditedPostAttribute( 'status' )
            };
        } )( function ( props ) {
            return el( 'div', {}, props.status );
        } ),

        save: function () {
            return null;
        }
    } );
    
    blocks.registerBlockType( 'my-demo/demo-block-dispatch', {
        title: 'Demo Block (Dispatch)',

        icon: 'format-aside',

        category: 'common',

        edit: compose.compose( [
            data.withSelect( function( select ) {
                return {
                    status: select( 'core/editor' ).getEditedPostAttribute( 'status' )
                };
            } ),
            data.withDispatch( function( dispatch ) {
                return {
                    onChange: function( newStatus ) {
                        dispatch( 'core/editor' ).editPost( { status: newStatus } );
                    }
                };
            } ),
        ] )( function ( props ) {
            return el(
                components.SelectControl,
                {
                    value: props.status,
                    options: [
                        { label: 'Publish', value: 'publish' },
                        { label: 'Draft', value: 'draft' },
                        { label: 'Auto Draft', value: 'auto-draft' }
                    ],
                    onChange: props.onChange
                }
            );
        } ),

        save: function () {
            return null;
        }
    } );
} )(
    window.wp.blocks,
    window.wp.element,
    window.wp.data,
    window.wp.components,
    window.wp.compose,
);

plugin.php

<?php
/*
 * Plugin Name: Demo Block
 */

function demo_block_init() {
	wp_register_script(
		'demo-block',
		plugins_url( 'blocks.js', __FILE__ ),
		array(
			'wp-blocks',
			'wp-element',
			'wp-edit-post',
			'wp-data',
			'wp-editor',
			'wp-compose',
		)
	);

	register_block_type( 'demo/demo-block', array(
		'script' => 'demo-block',
	) );
}
add_action( 'init', 'demo_block_init' );