post thumbnails - Replacing Gutenberg Featured Image control?

admin管理员组

文章数量:1287650

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?

• post-thumbnails
• block-editor

Share Improve this question asked May 1, 2018 at 15:34 EdwardEdward 43933 silver badges1717 bronze badges 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/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." – helgatheviking Commented Mar 15, 2019 at 14:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签： post thumbnailsReplacing Gutenberg Featured Image control