创建一个div+background的区块

区块放置在左边栏

( function( blocks, element, blockEditor, components, compose ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var MediaUpload = blockEditor.MediaUpload;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody = components.PanelBody;
    var Button = components.Button;
    var withSelect = wp.data.withSelect;

    blocks.registerBlockType( 'custom/background-image-block-sidebar', {
        title: 'Background Image Container',
        icon: 'format-image',
        category: 'layout',
        attributes: {
            backgroundImage: {
                type: 'string',
                default: ''
            },
            backgroundImageId: {
                type: 'number'
            },
            className: {
                type: 'string',
            },
        },

        edit: compose.compose(
            withSelect( function( select, props ) {
                return {
                    backgroundImageData: props.attributes.backgroundImageId ? 
                        select('core').getMedia(props.attributes.backgroundImageId) : 
                        null,
                };
            } )
        )( function( props ) {
            var backgroundImage = props.attributes.backgroundImage;
            var backgroundImageId = props.attributes.backgroundImageId;

            function onSelectImage( media ) {
                props.setAttributes( { 
                    backgroundImage: media.url,
                    backgroundImageId: media.id
                } );
            }

            function onRemoveImage() {
                props.setAttributes( { 
                    backgroundImage: undefined,
                    backgroundImageId: undefined
                } );
            }

            return el(
                element.Fragment,
                null,
                el(
                    InspectorControls,
                    null,
                    el(
                        PanelBody,
                        { title: 'Background Image Settings', initialOpen: true },
                        el(
                            MediaUpload,
                            {
                                onSelect: onSelectImage,
                                allowedTypes: [ 'image' ],
                                value: backgroundImageId,
                                render: function( obj ) {
                                    return el(
                                        Button,
                                        {
                                            className: backgroundImage ? 'editor-post-featured-image__preview' : 'editor-post-featured-image__toggle',
                                            onClick: obj.open
                                        },
                                        !backgroundImage ? 'Upload Background Image' : 
                                            el( 'img', { src: backgroundImage, alt: 'Background image' } )
                                    );
                                }
                            }
                        ),
                        backgroundImage && el(
                            Button,
                            {
                                onClick: onRemoveImage,
                                isLink: true,
                                isDestructive: true
                            },
                            'Remove background image'
                        )
                    )
                ),
                el(
                    'div',
                    { 
                        className: props.className,
                        style: backgroundImage ? { 
                            backgroundImage: 'url(' + backgroundImage + ')',
                            backgroundRepeat: 'no-repeat',
                            backgroundPosition: 'center center',
                            backgroundSize: 'cover'
                        } : {}
                    },
                    el( InnerBlocks )
                )
            );
        } ),

        save: function( props ) {
            var backgroundImage = props.attributes.backgroundImage;
            return el(
                'div',
                { 
                    className: props.attributes.className,
                    style: backgroundImage ? 
                        'background:url(' + backgroundImage + ') no-repeat center center; background-size: cover;' : 
                        undefined
                },
                el( InnerBlocks.Content )
            );
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.compose );

/function.php

function enqueue_background_image_block_sidebar_script() {
    wp_enqueue_script(
        'background-image-block-sidebar-script',
        get_template_directory_uri() . '/path/to/background-image-block-sidebar.js',
        array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data' ),
        filemtime( get_template_directory() . '/path/to/background-image-block-sidebar.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_background_image_block_sidebar_script' );