Prevent wp.hooks.addFilter() Running on Certain Custom Post Types in Gutenberg

[James White]

I have been tasked with preventing addFilter() from running on certain custom post types using the new Gutenberg API and not any WP PHP. It’s currently fed into the editor.PostFeaturedImage hook, meaning it fires every time the Gutenberg editor loads the Featured Image box.

The Filter calls a function that adds a dropdown menu underneath the featured image box to allow users to pick a contributor (which are themselves custom post types) to credit the image to.

The filter should not run on the contributor custom post type, but should run on other custom post types. There should still be a featured image box for the contributor custom post type, but no dropdown.

Letting the hook fire and then canceling within the function works but the function itself is resource heavy and the directive is to prevent the function from firing at all. The idea being that the built-in hook/function would fire instead.

Borrowing from this ticket, I attempted to place the main function setFeaturedImageArtist within an anonymous function that also printed the post type to console in addFilter(). I was able to get the post type to print, but calling setFeaturedImageArtist function didn’t work as expected.

wp.hooks.addFilter( 'editor.PostFeaturedImage', 'blocks/featured-image-artist', function() {
    console.log(wp.data.select("core/editor").getCurrentPostType())
    return setFeaturedImageArtist()
});

Placing setFeaturedImageArtistin a wrapper function like so didn’t work either. I’m assuming it’s because it’s the same thing.

function checkPostType() {
   console.log(wp.data.select("core/editor").getCurrentPostType())
   return setFeaturedImageArtist()
}

wp.hooks.addFilter( 'editor.PostFeaturedImage', 'blocks/featured-image-artist', checkPostType);

Here is the redacted component the filter is triggering:

function setFeaturedImageArtist( OriginalComponent ) {
  return ( props ) => {

      const artistSelect = compose.compose(
          ...
      )( function( props ) {
          ... // Cancelling out here works, but resources are loaded by this point.
      });
      
      return (
          el( 'div', { }, [
              el( OriginalComponent, props ),
              el( artistSelect )
          ])
      );
  }
}

wp.hooks.addFilter( 'editor.PostFeaturedImage', 'blocks/featured-image-artist', setFeaturedImageArtist	);

This is the React error being received:

Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined.

I’m not sure what the best approach to this would be, and the documentation is scant/barely applicable. Is creating a custom hook that mimics editor.PostFeaturedImage but only fires on certain custom post types a possibility? Or is there some way to call a function like setFeaturedImageArtist within a wrapper that checks the post type?

• WordPress Hooks on Github
• Hooks in WordPress Handbook

• This topic was modified 6 years, 3 months ago by James White.

[Author]

Posts