我正在开发一个定制的古腾堡积木。我可以让字段显示出来，并且可以在将其添加到页面时与之交互。但是，当突出显示块时，不会出现允许您删除块的菜单。我指的是下面截图中的菜单

我使用的是esnext语法，这就是我的主块js文件的样子

    import "./style.scss";
import "./editor.scss";

const { __, setLocaleData } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;
const {
    RichText,
    MediaUpload,
} = wp.editor;
const { Button } = wp.components;

registerBlockType( \'tc-blocks/hero-block\', {
    title: __( \'Hero Block\', \'tc-blocks\' ),
    icon: \'index-card\',
    category: \'layout\',
    attributes: {
        title: {
            type: \'string\',
            source: \'attribute\',
            selector: \'h2\',
        },
        mediaID: {
            type: \'number\',
        },
        mediaURL: {
            type: \'string\',
            source: \'attribute\',
            selector: \'img\',
            attribute: \'src\',
        },
    },
    edit: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaID,
                mediaURL,
            },
            setAttributes,
        } = props;
        const onChangeTitle = ( value ) => {
            setAttributes( { title: value } );
        };

        const onSelectImage = ( media ) => {
            setAttributes( {
                mediaURL: media.url,
                mediaID: media.id,
            } );
        };

        return (
            <div className={ className }>
                <RichText
                    tagName="h2"
                    placeholder={ __( \'Write Title…\', \'tc-blocks\' ) }
                    value={ title }
                    onChange={ onChangeTitle }
                />
                <div className="tc-image">
                    <MediaUpload
                        onSelect={ onSelectImage }
                        allowedTypes="image"
                        value={ mediaID }
                        render={ ( { open } ) => (
                            <Button className={ mediaID ? \'image-button\' : \'button button-large\' } onClick={ open }>
                                { ! mediaID ? __( \'Upload Image\', \'tc-blocks\' ) : <img src={ mediaURL } alt={ __( \'Upload Image\', \'tc-blocks\' ) } /> }
                            </Button>
                        ) }
                    />
                </div>
            </div>
        );
    },
    save: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaURL,
            },
        } = props;
        return (
            <div className={ className }>
                <RichText.Content tagName="h2" value={ title } />

                {
                    mediaURL && (
                        <img className="tc-image" src={ mediaURL } alt={ __( \'Image\', \'tc-blocks\' ) } />
                    )
                }
            </div>
        );
    },
} );

下面是如何在索引中注册块类型。php文件

function tc_blocks_hero_block_block_init() {
    register_block_type_from_metadata( __DIR__ );
}
add_action( \'init\', \'tc_blocks_hero_block_block_init\' );

这是我的街区。json文件

{
"apiVersion": 2,
"name": "tc-blocks/hero-block",
"title": "Hero Block",
"category": "widgets",
"icon": "smiley",
"description": "This is a header block built for a large hero image and text",
"supports": {
    "html": false
},
"textdomain": "hero-block",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
 }

我已经将我的代码与这里找到的古腾堡示例代码进行了比较https://github.com/WordPress/gutenberg-examples 但我似乎找不到任何可能导致问题的主要差异，我也没有在控制台中看到任何js错误。

如何使“删除块”菜单显示在自定义块中？

更新：我在dom中注意到的一件事是，附加了菜单的块具有唯一的id和各种其他属性，如下面所示

<p id="block-761ca223-cfd6-4dc4-8f28-36c2e1326feb" tabindex="0" role="group" aria-label="Block: Starter Block" data-block="761ca223-cfd6-4dc4-8f28-36c2e1326feb" data-type="create-block/starter-block" data-title="Starter Block" class="wp-block-create-block-starter-block block-editor-block-list__block wp-block is-selected">Starter Block – hello from the editor!</p>

我的版本由一个没有属性的div封装。

<div {...useBlockProps()}>