block editor - How do I add text or message above the featured image area in gutenberg for a CPT

admin管理员组

文章数量:1126095

I'm hoping to add text above the featured image box in the gutenberg editor to let people know what size of image to upload. I've pieced together how to do this for all posts, but I don't know enough to make it work for just one cpt. (in this case rt_brands).

Here's what I did: I created a plugin with a main file and a js directory. In the main file I added this code:

function rt_featured_img_enqueue_script() {   
    wp_enqueue_script( 'rt_featured_image', plugin_dir_url( __FILE__ ) . 'js/featured_img.js', [ 'wp-element', 'wp-hooks' ]  );
}
add_action('admin_enqueue_scripts', 'rt_featured_img_enqueue_script');

in the js directory I added a file named featured_img.js.

The contents of that file are:

var el = wp.element.createElement;

function wrapPostFeaturedImage( OriginalComponent ) { 
  return function( props ) {
      return (
          el(
              wp.element.Fragment,
              {}, 
              'Add a png or webm image (500x500px)',
              el(
                  OriginalComponent,
                  props
              ),
              ''
          )
      );
  } 
} 

wp.hooks.addFilter( 
  'editor.PostFeaturedImage', 
  'my-plugin/wrap-post-featured-image', 
  wrapPostFeaturedImage
);

This is serves to add the text "Add a png or webm image (500x500px)" to the featured image section on all posts, pages, and other post types.

How can I limit the code to just apply to the rt_brands post type?

I'm hoping to add text above the featured image box in the gutenberg editor to let people know what size of image to upload. I've pieced together how to do this for all posts, but I don't know enough to make it work for just one cpt. (in this case rt_brands).

Here's what I did: I created a plugin with a main file and a js directory. In the main file I added this code:

function rt_featured_img_enqueue_script() {   
    wp_enqueue_script( 'rt_featured_image', plugin_dir_url( __FILE__ ) . 'js/featured_img.js', [ 'wp-element', 'wp-hooks' ]  );
}
add_action('admin_enqueue_scripts', 'rt_featured_img_enqueue_script');

in the js directory I added a file named featured_img.js.

The contents of that file are:

var el = wp.element.createElement;

function wrapPostFeaturedImage( OriginalComponent ) { 
  return function( props ) {
      return (
          el(
              wp.element.Fragment,
              {}, 
              'Add a png or webm image (500x500px)',
              el(
                  OriginalComponent,
                  props
              ),
              ''
          )
      );
  } 
} 

wp.hooks.addFilter( 
  'editor.PostFeaturedImage', 
  'my-plugin/wrap-post-featured-image', 
  wrapPostFeaturedImage
);

This is serves to add the text "Add a png or webm image (500x500px)" to the featured image section on all posts, pages, and other post types.

How can I limit the code to just apply to the rt_brands post type?

• block-editor
• post-thumbnails

Share Improve this question edited Jan 23, 2024 at 5:55 rudtek asked Jan 23, 2024 at 2:48 rudtekrudtek 6,35355 gold badges3030 silver badges5252 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Try this:

function wrapPostFeaturedImage( OriginalComponent ) {
    const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType();

    // Do nothing, if the post type is not rt_brands.
    if ( 'rt_brands' !== currentPostType ) {
        return OriginalComponent;
    }

    return function( props ) {
        // Your code here.
    };
}

You can also:

• Conditionally add your filter:

  // Check if the current admin page is post-new.php or post.php, and that the
  // post type of the post being added/edited is rt_brands.
  if ( 'rt_brands' === window.typenow && 'post-php' === window.adminpage ) {
      // Add your filter, i.e. call wp.hooks.addFilter().
  }
  

• Conditionally enqueue your script:

  function rt_featured_img_enqueue_script() {
      $screen = get_current_screen();
      if ( 'rt_brands' === $screen->post_type && 'post' === $screen->base ) {
          // Enqueue your featured_img.js script, i.e. call wp_enqueue_script().
      }
  }
  

本文标签： block editorHow do I add text or message above the featured image area in gutenberg for a CPT