Filtering SelectControl items according the input from another SelectControl in Gutenberg Block (ES5, no JSX)

Question

I have 2 SelectControl from a Wordpress Gutenberg Custom Block I'm trying to build. I don't use ES6. Only ES5 and no JSX. The 2 SelectControl should work in the following way:

They fetch from REST WP Api the Post Types and all the Posts. What I want to achieve is when I select an item from SelectControl 1 (Post Types) , I get the related filtered Posts in SelectControl 2. All the posts and post types are preloaded in array at page load. I'm able with the code below to successfully populate both controls with the REST Api, but when it comes to filter the second selectcontrol according the selected value from the firstcontrol it doesn't work. No errors.

onChange: function(value) {
    selectedType = value;
}

The code above doesn't sort any effect. Also no errors. Cannot figure out what is wrong here

(function(wp) {
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextControl = wp.components.TextControl;
var ColorPalette = wp.components.ColorPalette;
var SelectControl = wp.components.SelectControl;
var Dashicon = wp.components.Dashicon;
var el = wp.element.createElement;
var withState = wp.compose.withState;
var __ = wp.i18n.__;

var options = [{
    value: 0,
    label: __('Select a Post...')
}];
var optionsfiltered = null;
var selectedType = '';
var posttypeOptions = [{
    value: 0,
    label: __('Select a Post Type...')
}];

wp.apiFetch({
    path: '/custom/v1/all-posts'
}).then(function(posts) {
    var optionsAppend = posts.map(function(post) {
        return {
            value: post.id,
            label: post.title,
            type: post.type
        }
    });
    options = options.concat(optionsAppend);
    optionsfiltered = options;
});

wp.apiFetch({
    path: '/wp/v2/types'
}).then(function(posttypes) {
    console.log(posttypes);
    for (let [key, item] of Object.entries(posttypes)) {
        posttypeOptions.push({
            value: item.slug,
            label: item.name
        });
    }
});

function TestControl(props) {
    var attributes = props.attributes;
    var setAttributes = props.setAttributes;
    var setState = props.setState;

    var inspectorControl = el(InspectorControls, {},
        el('h4', {}, el('span', {}, "Select Value")),
        el(SelectControl, {
            label: "Select a Post Type",
            value: attributes.selectedPost,
            options: posttypeOptions,
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                selectedType = value;
            }
        }),
        el(SelectControl, {
            label: "Select a Post",
            value: attributes.selectedPost,
            options: optionsfiltered.filter(function(el) {
                return el.type === selectedType;
            }),
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                setAttributes({
                    url: value
                });
            }
        })
    );
    return el('div', {
            style: {
                backgroundColor: attributes.color,
                color: "#00ff00"
            }
        },
        inspectorControl
    );
}
registerBlockType('resorcedomain/resource-cards-block', {
    title: __('Resource Cards'),
    category: 'widgets',
    icon: {
        foreground: '#46aaf8',
        src: 'store'
    },
    attributes: {
        posts: {
            type: 'string',
            default: null
        },
        orders: {
            type: 'string',
            default: null
        },
        tagfilter: {
            type: 'string',
            default: null
        }
    },
    edit: withState({})(TestControl),
    save: function(props) {
        return null;
    }
});
})(window.wp);

Claudio Ferraro Claudio Ferraro · Accepted Answer · 2020-04-27T13:04:21

I forgot that wordpress is not 100% react. So i had to use setAttributes method in the onChange method. Looks like setAttributes is similar to setState in React and makes the plugin UI to refresh and to reload my TestControl. When TestControl reloads my optionsfiltered.filter works and the array get filtered according the selection.

Filtering SelectControl items according the input from another SelectControl in Gutenberg Block (ES5, no JSX)

1 Answers