0

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

enter image description here

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' 
                    ]
                )
            );
        } 
    } 
);
2

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:

  • 1
    I was following a much less informative guide. This did the trick. Thank you thank you, thank you. – iRector Jul 23 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.