Add a filter('editor.FeaturedImage') for the FeaturedImage component

[adamsilverstein]

Description

Enables developers to change what is displayed for the post's featured image panel, or append to it.

Fixes #6533.

Similar to the current core admin_post_thumbnail_html filter, this enables filtering of the featured image component.

How has this been tested?

Using the console, I tested replacing and appending to the panel.

Replacing the panel

// Replace the panel.
wp.hooks.addFilter( 
	'editor.PostFeaturedImage', 
	'myhook', 
	function() { 
		return function() { 
			return wp.element.createElement( 
				'div', 
				{}, 
				'This is a test' 
			); 
		} 
	} 
);

Appending to the panel

wp.hooks.addFilter( 
	'editor.PostFeaturedImage', 
	'myhook', 
	function( original ) { 
		return function() { 
			return (
				wp.element.createElement( 
					'div', 
					{ key: 'outer' + Math.random() }, 
					[
						_.extend( original( {} ), { key: 'below' + Math.random() } ),
						'Add something below...' 
					]
				)
			);
		} 
	} 
);

Screenshots

Types of changes

Filters the FeaturedImage component.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[danielbachhuber]

@adamsilverstein @gziolo Prior to merging, can one of you open a PR against https://github.com/danielbachhuber/gutenberg-migration-guide/blob/master/filter-admin-post-thumbnail-html.md with documentation on how this works?

[gziolo]

Did you consider adding this filter directly on the editor component instead of on the panel wrapper?

My concern is that you rather don’t want to allow plugin developers to replace this panel with anything else. You rather would expect to replace panel’s content with something else, prepend or append HTML code or disable the panel completely.

I think that we should rather tackle removing individual panels separately and focus here on the Featured Image itself

[adamsilverstein]

Did you consider adding this filter directly on the editor component instead of on the panel wrapper?

Good suggestion, I’ll give that a try.

[adamsilverstein]

Did you consider adding this filter directly on the editor component instead of on the panel wrapper?

@gziolo I did this in 77a4366 and this fixes the issues I noted originally. Let me know what you think and if it looks good I can try to update docs as well.

[gziolo]

All good, it’s exactly what I thought about. Let’s add docs and get it in!

[adamsilverstein]

@danielbachhuber opened a PR - danielbachhuber/gutenberg-migration-guide#8

@gziolo took a pass at adding a readme for the component, is this what you had in mind?

[gziolo]

This is confusing to use random here. I think you don't need it at all. I also wanted to note that you probably can refactor it as:

const el = wp.element.createElement;

el( 
	'div', 
	{}, 
	'Prepend above',
	el( OriginalComponent, props ),
	'Append below' 
)

[adamsilverstein]

right, that was bad! thanks for fixing that and cleanup generally.

[gziolo]

@adamsilverstein thanks for working on this one, I updated docs to follow other examples. In other files we use ES.Next but I personally prefer to have all the examples using filters to use ES5 so you could paste them in the JS console.

[adamsilverstein]

I personally prefer to have all the examples using filters to use ES5 so you could paste them in the JS console.

For sure that is great, thanks for updating those examples!