I can replace the Featured Image control in current WP version by PHP:
add_filter( 'admin_post_thumbnail_html', 'my_admin_post_thumbnail_html', 10, 2 );
How do I do the same thing with Gutenberg?
I can replace the Featured Image control in current WP version by PHP:
add_filter( 'admin_post_thumbnail_html', 'my_admin_post_thumbnail_html', 10, 2 );
How do I do the same thing with Gutenberg?
Here is an example of adding a new component to the Featured Image area. This was taken from the official docs and updated to use JSX. I am using the @wordpress/scripts
package to build this out.
// Import from the hooks package
import { addFilter } from '@wordpress/hooks';
// Some custom component to add.
const CustomComponent = ({ id }) => {
return id ? (
<h4>You selected an image, yay!</h4>
) : (
<div>You have not selected anything</div>
);
};
// Function to be called by the hook that returns a function containing the new UI
function replacePostFeaturedImage(OriginalComponent) {
return (props) => {
const { featuredImageId } = props;
return (
<div>
<CustomComponent id={featuredImageId} />
<OriginalComponent {...props} />
</div>
);
};
}
// Register the hook.
addFilter(
'editor.PostFeaturedImage',
'my-plugin/replace-post-featured-image',
replacePostFeaturedImage
);
To replace the entire component, just remove <OriginalComponent />
from the replacePostFeaturedImage
function.
Hope it helps and happy to add any further context as needed!