Block settings with InnerBlocks and InspectorControls does not show up in settings pane

Question

I am trying to build a block element for my plugin. I want it to have block settings showing up on the right side (under the “block” tab). I am creating an InspectorControls element and returning that along side my block.

The documentation (https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbar-and-sidebar/) states if you include an InspectorControls element in the return value of your block type’s edit function, those controls will be shown in the Settings Sidebar region.

However, my settings pane does not show up when clicking my block. Only settings such as color (inheritet from core/button I assume).

I have tried to return an array of elements (2nd code example) and having the settings as a child to my block (1st code snippet)

I am sure that I am missing something or misusing something. I am totally new to WP-development.

( function( blocks, i18n, element, blockEditor, components ) {
const MY_TEMPLATE = [
    [ 'core/button', { } ]
];

var el = element.createElement;
var __ = i18n.__;
var innerBlocks = blockEditor.InnerBlocks;
var inspectorControls = blockEditor.InspectorControls;
var PanelBody = components.PanelBody;
var fragment = element.Fragment;

blocks.registerBlockType( 'plugin/the-name', {
    title: __( 'Some title', 'Some title' ),
    icon: 'controls-volumeon',
    category: 'layout',
    attributes: {},
    edit: function(props) {     
        return el(
                innerBlocks,
                {
                    template: MY_TEMPLATE,
                    templateLock: "all",
                    className: props.className
                },
                el( innerBlocks, {}, el(inspectorControls, null, el(components.Panel, {
                        header: "Test header"
                    },
                    el(components.PanelBody, {initialOpen: true, title: "Test title"}, el(components.PanelRow, {}, "Hej hej")))
                ))
            );
    },
    save: function(props) {
        //removed for brevity
    },
} );
} )( window.wp.blocks, window.wp.i18n, window.wp.element, window.wp.editor, window.wp.components );

I have also tried returning an array of elements as per https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbar-and-sidebar/

( function( blocks, i18n, element, blockEditor, components ) {
const MY_TEMPLATE = [
    [ 'core/button', { } ]
];

var el = element.createElement;
var __ = i18n.__;
var innerBlocks = blockEditor.InnerBlocks;
var inspectorControls = blockEditor.InspectorControls;
var PanelBody = components.PanelBody;
var fragment = element.Fragment;

blocks.registerBlockType( 'plugin/the-name', {
    title: __( 'Some title', 'Some title' ),
    icon: 'controls-volumeon',
    category: 'layout',
    attributes: {},
    edit: function(props) {
        console.log("hello edit2");
        
        return [el(
                innerBlocks,
                {
                    template: MY_TEMPLATE,
                    templateLock: "all",
                    className: props.className
                },
                el( innerBlocks )
            ),
            el(inspectorControls, null, el(components.Panel, {
                        header: "Test header",
                        key: "123"
                    },
                    el(components.PanelBody, {initialOpen: true, title: "Test title"}, el(components.PanelRow, {}, "Hej hej")))
            )];
    },
    save: function(props) {
        //removed for brevity
    },
} );
} )( window.wp.blocks, window.wp.i18n, window.wp.element, window.wp.editor, window.wp.components );
0
, , Andreas 1 year 2020-07-20T03:11:02-05:00 0 Answers 56 views 0

Leave an answer

Browse
Browse