How to cascade Gutenberg SelectControl component

Question

How can I cascade the SelectControl component in Gutenberg editor.
My exact requirement is as following: My first select list contains post meta fields and on the second select list, I want to display the posts that have the post meta that was selected in the first select list.
I use getEntityRecords with custom query to fetch the custom posts.

All I want is onchange of the first select list I want to refresh the options of the second select list using getEntityRecords().

Here is the js code:

( function( blocks, blockEditor, element, components, serverSideRender  ) {
var el = element.createElement;
var InspectorControls = blockEditor.InspectorControls;
var SelectControl = components.SelectControl;
  

blocks.registerBlockType( 'custom-blocks/news-selection', {
    title: 'News (selection)',
    icon: 'universal-access-alt',
    category: 'custom-blocks',
    example: {
        attributes: {
            posts_per_page: 3
        },
    },


    edit: function( props ) {

        var options_news =  new Array();     
       
        if (props.isSelected) {

            var options_page_group = [];
    
            var page_query = {
                per_page: -1,
                parent: 0,
                orderby: 'menu_order',
                order: 'asc',
                status: 'publish,future,draft,pending,private',
            };

            (wp.data.select('core').getEntityRecords('postType', 'page', page_query)).forEach((post) => { 
                options_page_group.push({value:post.id, label:post.title.rendered});
            });

            function make_request_for_news(pgrp_id){

                props.setAttributes({news_1_id: null}); 

                var news_query = {
                    per_page: 10,
                    orderby: 'publication_date',
                    order: 'desc',
                    meta_key: 'news_page_group',
                    meta_value: pgrp_id
                };

                let p = new Promise((resolve, reject) => {
                    let news = (wp.data.select('core').getEntityRecords('postType', 'news', news_query));

                    if (news!== null) {
                        console.log('got the response');
                        resolve(news);
                    } else {
                        reject('noooo');
                    }
                });

                p.then((resp)=> {
                    populate_news_select_list(resp);
                }).catch((resp) => {
                    console.log(resp);
                });


            }


            function populate_news_select_list(resp){
                /*Here I am getting the response but from here how can I set these as options of the selectcontrol component*/
                resp.forEach(post => {
                    options_news.push({value:post.id, label:post.title.rendered});
                });



            }
            
                      

        return [ //Inspector control element
                el(InspectorControls,
                    {key: "inspector"},

                    el( SelectControl,
                        {
                            label: js_ref_obj.page_group_selection,
                            options : [{ value: -1, label: '-Select-' }].concat(options_page_group),
                            onChange: function( content ) {
                                props.setAttributes({page_group_id: content}); 
                                if (content > 0) {
                                    make_request_for_news(content);
                                }
                            },
                            value: props.attributes.page_group_id,
                        }
                    ),
                    el( "div",
                        {style : {display : props.attributes.page_group_id>0 ? "block" : "none" }},
                        el( SelectControl,
                            {
                                label: js_ref_obj.news_selection + ' 1',
                                options : [{ value: null, label: '-Select-' }].concat(options_news),
                                onChange: function( content ) {
                                    props.setAttributes({news_1_id: content}); 
                                },
                                value: props.attributes.news_1_id,
                            }
                        )
                    ),
                    
                    
                ),
                el(serverSideRender,
                    {key: "editable",
                        block: "custom-blocks/news-selection",
                        attributes: props.attributes
                    }
                )
                    
            ];
        }

        else {
            
            return [
                //serverSideRender element for live state preview.
                    el(serverSideRender,
                        {key: "editable",
                            block: "custom-blocks/news-selection",
                            attributes: props.attributes
                        }
                    )
            ];
        }
       
    

    },

    save: function( props ) {
        return null;

    },
} );
}(
    window.wp.blocks,
    window.wp.blockEditor,
    window.wp.element,
    window.wp.components,
    window.wp.serverSideRender
) );
0
f3486 2 years 2020-10-24T05:10:21-05:00 0 Answers 18 views 0

Leave an answer

Browse
Browse