Prevent wp.hooks.addFilter() from Running on Certain Custom Post Types in Gutenberg
I tried to recreate the script and fixed some issues:
const { createElement: el } = wp.element;const { compose } = wp.compose;const { withSelect, withDispatch } = wp.data;const { SelectControl } = wp.components;const { __ } = wp.i18n;const ArtistSelect = compose( withDispatch(function(dispatch, props) { return { setMetaValue: function(metaValue) { dispatch("core/editor").editPost({ meta: { "featured-image-artist": metaValue } }); } }; }), withSelect(function(select, props) { let query = { per_page: 20, metaKey: "_author_type", metaValue: "artist" }; return { postType: select("core/editor").getCurrentPostType(), posts: select("core").getEntityRecords("postType", "contributor", query), metaValue: select("core/editor").getEditedPostAttribute("meta")[ "featured-image-artist" ] }; }))(function(props) { var options = []; // This works in removing the dropdown for authors/artists if (props.postType === "contributor") { return null; } if (props.posts) { options.push({ value: 0, label: __("Select an artist", "blocks") }); props.posts.forEach(post => { options.push({ value: post.id, label: post.title.rendered }); }); } else { options.push({ value: 0, label: __("Loading artists...", "blocks") }); } return el(SelectControl, { label: __("Art Credit:", "blocks"), options: options, onChange: content => { props.setMetaValue(content); }, value: props.metaValue });});function setFeaturedImageArtist(OriginalComponent) { return props => { return el("div", {}, [el(OriginalComponent, props), el(ArtistSelect)]); };}wp.hooks.addFilter( "editor.PostFeaturedImage", "blocks/featured-image-artist", setFeaturedImageArtist);
ArtistSelect
is a component so we take it outside of setFeaturedImageArtist
function. withSelect
had a check for the postType
that made it return null. Instead of that we pass that variable and then return null in the components render. An alternative would be to check inside setFeaturedImageArtist
. This is a fixed version using JSX. Hope its clear:
const { compose } = wp.compose;const { withSelect, withDispatch, select } = wp.data;const { SelectControl } = wp.components;const { __ } = wp.i18n;const { addFilter } = wp.hooks;const ArtistSelect = compose( withDispatch(dispatch => { return { setMetaValue: metaValue => { dispatch("core/editor").editPost({ meta: { "featured-image-artist": metaValue } }); } }; }), withSelect(select => { const query = { per_page: 20, metaKey: "_author_type", metaValue: "artist" }; return { posts: select("core").getEntityRecords("postType", "contributor", query), metaValue: select("core/editor").getEditedPostAttribute("meta")[ "featured-image-artist" ] }; }))(props => { const { posts, setMetaValue, metaValue } = props; const options = []; if (posts) { options.push({ value: 0, label: __("Select an artist", "blocks") }); posts.forEach(post => { options.push({ value: post.id, label: post.title.rendered }); }); } else { options.push({ value: 0, label: __("Loading artists...", "blocks") }); } return ( <SelectControl label={__("Art Credit:", "blocks")} options={options} onChange={content => setMetaValue(content)} value={metaValue} /> );});const setFeaturedImageArtist = OriginalComponent => { return props => { const post_type = select("core/editor").getCurrentPostType(); if (post_type === "contributor") { return <OriginalComponent {...props} />; } return ( <div> <OriginalComponent {...props} /> <ArtistSelect /> </div> ); };};wp.hooks.addFilter( "editor.PostFeaturedImage", "blocks/featured-image-artist", setFeaturedImageArtist);