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

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);