Tag: option

I’m developing a custom gutenberg block. I’m able to get the fields to appear and I’m able to interact with it when adding it to a page. But the menu that allows you to remove the block does not appear when it’s highlighted. I’m referring to the menu in the screenshot below

I’m using the esnext syntax and this is what my main block js file looks like

    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>         );     }, } ); 

Here’s how I’m registering the block type in my index.php file

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

And here’s my block.json file

{ "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"  } 

I’ve compared my code to the gutenberg examples code found here https://github.com/WordPress/gutenberg-examples but I can’t seem to find any major differences that would cause an issue and I don’t see any js errors in the console.

How do I get the remove block menu to appear in my custom block?