6

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?

5
  • 1
    This might be better raised on the GB issue tracker at GitHub, but I will say that since the new picker is entirely done in React, the likelihood of an equivalent filter working the same way is very low
    – Tom J Nowell
    Commented May 1, 2018 at 15:44
  • @TomJNowell thanks for the heads-up, has posted there
    – Edward
    Commented May 4, 2018 at 7:16
  • Ah you deleted it :( what if you find the answer, and come back and post it, or somebody else opens the same question, I'd undelete it if I were you :) It does no harm sitting here, and lots of deleted answers might fool the system into thinking you're a bad actor
    – Tom J Nowell
    Commented May 4, 2018 at 16:00
  • @TomJNowell, okey, some people are very critic at what question should be posted where and I didn't want to receive down votes.
    – Edward
    Commented May 5, 2018 at 13:18
  • Little late, but maybe this is relevant: github.com/WordPress/gutenberg/tree/master/packages/editor/src/… However, I haven't yet figured out how to actually insert any components in place of "The replacement contents or components." Commented Mar 15, 2019 at 14:21

1 Answer 1

1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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