Sample Gutenberg Container Block With Inspector Controls and More

block.js

(function (blocks, editor, editPost, i18n, element, components, plugins, _) {
    var BlockControls = editor.BlockControls;
    var AlignmentToolbar = editor.AlignmentToolbar;
    var InspectorControls = editor.InspectorControls;
    var InnerBlocks = editor.InnerBlocks;

    var PluginBlockSettingsMenuItem = editPost.PluginBlockSettingsMenuItem;
    var PluginSidebarMoreMenuItem = editPost.PluginSidebarMoreMenuItem;
    var PluginMoreMenuItem = editPost.PluginMoreMenuItem;
    var PluginSidebar = editPost.PluginSidebar;

    var __ = i18n.__;

    var el = element.createElement;
    var Fragment = element.Fragment;

    var ToggleControl = components.ToggleControl;
    var PanelBody = components.PanelBody;
    var PanelRow  = components.PanelRow;
    var BaseControl = components.BaseControl;
    var ColorPalette = components.ColorPalette;
    var TextareaControl = components.TextareaControl;
    var ButtonGroup = components.ButtonGroup;
    var Button = components.Button;

    var registerPlugin = plugins.registerPlugin;

    var colors = [ 
        { name: 'red', color: '#f00' }, 
        { name: 'white', color: '#fff' }, 
        { name: 'blue', color: '#00f' }, 
    ];

    i18n.setLocaleData(window.amp_header.localeData, 'gutenberg-theme');

    blocks.registerBlockType('gutenberg-theme/amp-header', {
        title: __('Header Block', 'gutenberg-theme'),
        description: 'Customizable header image with nested blocks.',
        icon: 'format-image',
        category: 'layout',
        styles: [
            {
                name: 'default',
                label: __( 'Rounded' ),
                isDefault: true
            },
            {
                name: 'outline',
                label: __( 'Outline' )
            },
            {
                name: 'squared',
                label: __( 'Squared' )
            },
        ],
        attributes: {
            alignment: {
                type: 'string',
            },
            applyStyles: {
                type: 'string',
                default: '',
            },
            color: {
                type: 'string',
                default: '#f00',
            }
        },
        edit: function (props) {
            var attributes = props.attributes;
    
            function onChangeAlignment( newAlignment ) {
                props.setAttributes( { alignment: newAlignment } );
            }

            function onChangeStyleSettings() {
                if ( attributes.applyStyles ) {
                    props.setAttributes( { applyStyles: '' } );
                } else {
                    props.setAttributes( { applyStyles: 'styled' } );
                }
            }

            return [
                [
                    el(
                        InspectorControls,
                        null,
                        el(
                            PanelBody,
                            {
                                title: "Test Settings",
                                initialOpen: true
                            },
                            el(
                                PanelRow,
                                null,
                                el(
                                    BaseControl,
                                    {
                                        id: "toggle-1",
                                        label: "Test Toggle Area",
                                        help: "Pick a color",
                                        children: el(
                                            ToggleControl,
                                            {
                                                id: "toggle-1",
                                                label: __('Apply Styles'),
                                                checked: !! attributes.applyStyles,
                                                onChange: onChangeStyleSettings
                                            }
                                        ),
                                    }
                                )
                            ),
                            el(
                                PanelRow,
                                null,
                                el(
                                    BaseControl,
                                    {
                                        id: "textarea-1",
                                        label: "Test Text Area",
                                        help: "Alternative text describes your image to people who can’t see it. Add a short description with its key details.",
                                        children:  el(
                                            TextareaControl,
                                            {
                                                id: "textarea-1",
                                            }
                                        ),
                                    },
                                )
                            ),
                            el(
                                PanelRow,
                                null,
                                el(
                                    BaseControl,
                                    {
                                        id: "color-1",
                                        label: "Test Color Area",
                                        help: "Pick a color",
                                        children:  el(
                                            ColorPalette,
                                            {
                                                id: "color-1",
                                                colors: colors,
                                                value: attributes.color,
                                                onChange: function(color){  props.setAttributes( { color: color } ); },
                                            }
                                        ),
                                    },
                                )
                            ),
                            el(
                                PanelRow,
                                null,
                                el(
                                    BaseControl,
                                    {
                                        id: "buttons-1",
                                        label: "Test Button Area",
                                        help: "Press a button",
                                        children:  el(
                                            ButtonGroup,
                                            {
                                                id:  "buttons-1",
                                            },
                                            el(
                                                Button,
                                                {
                                                    isLarge: true,
                                                    isDefault: true,
                                                    isToggled: true,
                                                    icon: "ellipsis"
                                                },
                                                'One'
                                            ),
                                            el(
                                                Button,
                                                {
                                                    isLarge: true,
                                                    icon: "ellipsis"
                                                },
                                                'Two'
                                            ),
                                            el(
                                                Button,
                                                {
                                                    isLarge: true,
                                                    icon: "ellipsis"
                                                },
                                                'Three'
                                            )
                                        ),
                                    },
                                )
                            )
                        ),
                    ),
                ],
                el(
                    Fragment,
                    null,
                    el(
                        BlockControls,
                        null,
                        el(
                            AlignmentToolbar,
                            {
                                value: attributes.alignment,
                                onChange: onChangeAlignment,
                            }
                        )
                    ),
                    el(
                        'div',
                        {
                            className: [props.className, attributes.alignment].join(' ')
                        },
                        ( 'undefined' !== typeof props.insertBlocksAfter ) ?
                        el(
                            InnerBlocks, {

                            }
                        ) : el( 'div' )
                    )
                )
            ];
        },
        save: function (props) {
            var attributes = props.attributes;

            return (
                el('div', {
                        className: [props.className, attributes.alignment].join(' '),
                        style: { textAlign: attributes.alignment },
                    },
                    el(InnerBlocks.Content, {

                    })
                )
            );
        },
    });

    
    function doOnClick(){
        console.log('do click plugin-name2');
        // To be called when the user clicks the menu item.
    }

    function onButtonClick() {
        console.log('do click plugin-name3');
    }

    function Component() {
        return el(
            Fragment,
            {},
            el(
                PluginSidebarMoreMenuItem,
                {
                    target: 'sidebar-name',
                },
                'My Sidebar'
            ),
            el(
                PluginSidebar,
                {
                    name: 'sidebar-name',
                    title: 'My Sidebar',
                },
                el(
                    PanelBody,
                    {
                        title: "My Block Settings",
                        icon: "welcome-widgets-menus",
                        initialOpen: true
                    },
                    el(
                        PanelRow,
                        null,
                        el(
                            BaseControl,
                            {
                                id: "textarea-1",
                                label: "Test Text Area",
                                help: "Alternative text describes your image to people who can’t see it. Add a short description with its key details.",
                                children:  el(
                                    TextareaControl,
                                    {
                                        id: "textarea-1",
                                    }
                                ),
                            },
                        )
                    ),
                 )
            )
        );
    }

    registerPlugin( 'plugin-name', {
        icon: 'smiley',
        render: Component,
    } );

        
    function MyPluginBlockSettingsMenuItem() {
        return el(
            PluginBlockSettingsMenuItem,{
                allowedBlockNames: [ 'gutenberg-theme/amp-header' ],
                icon: 'smiley',
                label: __( 'Menu item text' ),
                onClick: doOnClick,
            }
        );
    }

    registerPlugin( 'plugin-name2', {
        icon: 'smiley',
        render: MyPluginBlockSettingsMenuItem,
    } );

    function MyButtonMoreMenuItem() {
        return el(
            PluginMoreMenuItem,
            {
                icon: 'smiley',
                onClick: onButtonClick
            },
            __( 'My button title' )
        )
    }

    registerPlugin( 'plugin-name3', {
        icon: 'smiley',
        render: MyButtonMoreMenuItem,
    } );
    
}(
    window.wp.blocks,
    window.wp.editor,
    window.wp.editPost,
    window.wp.i18n,
    window.wp.element,
    window.wp.components,
    window.wp.plugins,
    window._,
));