I'm wanting to add some functionality to the featured image block in the Gutenberg editor. I've got pretty close:

The problem is, I'm unable to select an image, and posts that already had a featured image assigned are not loading the image in the block.

I think this must be due to the original block object's key not being set. I've tried a random value, the post id, the media post id, 'render', 'thumbnail', and 'post-thumbnail', but no dice. What is 'my-key' suppose to be set to? Why is the featured image not loading, and not able to be set and saved?

window.wp.hooks.addFilter( 
    'editor.PostFeaturedImage', 
    'myplugin/myhook', 
    function( original ) { 
        console.log (original);
        return function() { 
            return (
                window.wp.element.createElement( 
                    'div', 
                    { key: 'outer' + Math.random() }, 
                    [
                        'Prepend above',
                        _.extend( original( {} ), { key: 'my-key' } ),
                        'Append below' 
                    ]
                )
            );
        } 
    } 
);

I'm wanting to add some functionality to the featured image block in the Gutenberg editor. I've got pretty close:

The problem is, I'm unable to select an image, and posts that already had a featured image assigned are not loading the image in the block.

I think this must be due to the original block object's key not being set. I've tried a random value, the post id, the media post id, 'render', 'thumbnail', and 'post-thumbnail', but no dice. What is 'my-key' suppose to be set to? Why is the featured image not loading, and not able to be set and saved?

window.wp.hooks.addFilter( 
    'editor.PostFeaturedImage', 
    'myplugin/myhook', 
    function( original ) { 
        console.log (original);
        return function() { 
            return (
                window.wp.element.createElement( 
                    'div', 
                    { key: 'outer' + Math.random() }, 
                    [
                        'Prepend above',
                        _.extend( original( {} ), { key: 'my-key' } ),
                        'Append below' 
                    ]
                )
            );
        } 
    } 
);

• filters
• hooks
• block-editor
• customization

1 Answer 1

From the documentation:

Prepend and append to the panel contents:

var el = wp.element.createElement;

function wrapPostFeaturedImage( OriginalComponent ) { 
  return function( props ) {
      return (
          el(
              wp.element.Fragment,
              {}, 
              'Prepend above',
              el(
                  OriginalComponent,
                  props
              ),
              'Append below'
          )
      );
  } 
} 

wp.hooks.addFilter( 
  'editor.PostFeaturedImage', 
  'my-plugin/wrap-post-featured-image', 
  wrapPostFeaturedImage
);

So did you intentionally not using wp.element.Fragment?

You may also want to check the example here:

• Gutenberg: Extending Featured Image Component