0

I want to access the IDs of all posts of custom post type book in my custom gutenberg block voucher and then render them in option list on admin side. What i want to achieve is when i click on voucher block, a select tag should appear on admin editor with list of posts id of type voucher. I have read Dynamic block gutenbeg documentation but couldn't how i can get posts id of custom post type .

this is my code.

wp.blocks.registerBlockType('voucher/shortcode', {
    title: 'Voucher Shortcode',
    icon: 'smiley',
    category: 'common',
    attributes: {
        category: {
            type: 'string',
        }
    },
    edit: function(props) { 
        return  React.createElement(
                "div",
                null,
                React.createElement(
                    "select",
                    null,
                    React.createElement(
                    "option",
                    {
                        value: "animals"
                    },
                    "Animals"
                    ),
                    React.createElement(
                    "option",
                    {
                        value: "arch"
                    },
                    "Architecture"
                    ),
                    React.createElement(
                    "option",
                    {
                        value: "nature"
                    },
                    "Nature"
                    ),
                    React.createElement(
                    "option",
                    {
                        value: "people"
                    },
                    "People"
                    ),
                    React.createElement(
                    "option",
                    {
                        value: "tech"
                    },
                    "Tech"
                    )
                )
                );

    },
    save: function() {

          return null;
    } 
})
  • What post type you want to get in your select element as options? You talk about a list of type book and type voucher. – moped Feb 20 at 8:42
  • list of voucher @moped – billal Feb 20 at 10:18
0
var el = wp.element.createElement
var withSelect = wp.data.withSelect

wp.blocks.registerBlockType('voucher/shortcode', {
title: 'Voucher Shortcode',
icon: 'smiley',
category: 'common',
attributes: {
    category: {
        type: 'string',
    }
},

edit: withSelect( function( select ) {
            var pages = select('core').getEntityRecords('postType', 'voucher', { per_page: -1 });

            return {
                posts: pages
            };
        } )

     (function(props) { 

            if ( ! props.posts ) {
                return "Loading...";
            }

            if ( props.posts.length === 0 ) {
                return "No posts";
            }
            var className = props.className;
            var post = props.posts[ 0 ];

            var options = [];
            var option = el(
                            'option',
                            { value: '' },
                            __('Choose')
                            );
            options.push(option);

            for (var i = 0; i < props.posts.length; i++) {
                 option = el(
                                'option',
                                { value: props.posts[i].id },
                                props.posts[i].title.raw
                                );
                options.push(option);
            }

            return [
                    el('select', {
                        onChange: onSelectVoucher,
                        },
                        options
                        )
            ]
    }),

    save: function() {

          return null;
    } })

You can try this for creating a dynamic select field with your CPTs voucher.
The event-function onChange: onSelectVoucher is up to you what should happen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.