Create custom settings for custom Gutenberg block

Question

I created custom Gutenberg block for social links but I would need to add input fields where user can paste the url to that social profile. Here is where I would like to put the field (same as paragraph block has alignment settings there for example):

This is my code for the block:

const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;

registerBlockType('social-block/social', {
    title: __('Social'),
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {type: 'string'},
        color: {type: 'string'}
    },
    edit: function (props) {

        return React.createElement(
            "div",
            {style: {
                    display: 'flex',
                    justifyContent: 'center'
                }},

            // facebook
            React.createElement(
                'a',
                {
                    'href': '',
                    'rel': 'noopener noreferrer',
                    'target': '_blank'
                },
                React.createElement(
                    'svg',
                    {
                        'xmlns': "http://www.w3.org/2000/svg",
                        'xmlns:xlink': "http://www.w3.org/1999/xlink",
                        'viewBox': "0 0 24 24",
                        'fill': "currentColor",
                        'width': "48px",
                        'height':"48px"
                    },
                    React.createElement(
                        'path',
                        {
                            'fill-rule': "evenodd",
                            'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
                        }
                    )
                ),
            ),
}
});

I tried implementing https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/ but its not the behavior that I need, anyone has a suggestion where to look or what to do?

Mehmood Ahmad Mehmood Ahmad · Accepted Answer · 2019-05-24T14:57:23

First of all I will recommend you to use the ES6 syntax as it will make your code a lot easier. For ES6 whenever you see any code in WordPress docs then you can choose ESNEXT tab from top of snippet that will then shows you ES6 code.

Now your answer. Gutenberg provides us two kind of controls BlockControl and InspectorControl both of these provides you the way to manipulate your block but the difference is that BlockControl is a toolbar that appears on top of block (its the same link that you shared) while InspectorControls serves as a sidebar setting option the thing that you wanted to do. Here is the actual documentation of Inspector Controls and here is one working example from Image block of Gutenberg core.

Create custom settings for custom Gutenberg block

1 Answers