4

I am trying to implement Panel Color in the Inspector Control for a custom block but can't seem to figure it out. Below is the JSX code that attempts it. It renders the block, but when it's in focus, it encounters a Minified React error #130.

const { registerBlockType, InspectorControls, PanelColor } = wp.blocks;

registerBlockType( 'test/test', {
    title: 'Test',
    icon: 'universal-access-alt',
    category: 'layout',

    edit( { attributes, className, setAttributes } ) {
        const { backgroundColor } = attributes;
        const onChangeBackgroundColor = newBackgroundColor => {
            setAttributes( { backgroundColor: newBackgroundColor } );
        };

        return (
            <div className={ className }>
            { !! focus && (
              <InspectorControls>
                <PanelColor
                  title={ 'Background Color' }
                  value={ backgroundColor }
                  onChange={ onChangeBackgroundColor }
                />
              </InspectorControls>
            ) }
          </div>
        );
    },
    save( { attributes, className } ) {
        const { backgroundColor } = attributes;
        return (
            <div className={ className }>
            </div>
        );
    },
} );
4

Many wp.blocks.* controls have been moved to wp.editor.* (see release notes).

Specifically wp.blocks.InspectorControls is now wp.editor.InspectorControls - you'll need to change the first line of your code.

Note: registerBlockType is still imported from wp.blocks.* iirc.

As a side note, I've also found that the focus && trick no longer required as GB automatically displays the InspectorControls when the block is focused.

  • this is true, thanks that helps alot. but now most of wp.blocks moved to wp.components such as the question related ColorPalette – Biskrem Muhammad Dec 28 '18 at 22:04
1

I'm going to give you a walk through to the point, because I struggled too :)

First import the InspectorControls

const { InspectorControls } = wp.editor;

then import components such as ColorPalette

const { ColorPalette } = wp.components;

In order to save the state you have to define an attribute:

attributes: {
    // To storage background colour of the div
    background_color: { 
        type: 'string', 
        default: 'red', // Default value for newly added block
    },           
    // To storage the complete style of the div that will be 'merged' with the selected colors
    block_style: { 
        selector: 'div', // From tag a
        source: 'attribute', // binds an attribute of the tag
        attribute: 'style', // binds style of a: the dynamic colors
    }
},

Then at the edit function... Define the onChangeColorHandler and a variable to hold the changed value in the JSX, because of course you can't from the css.

In the return part return an array of two elements [] the Inspector and the rendered div in the editor

edit: function( props ) {

    var background_color = props.attributes.background_color // To bind button background color

    // Style object for the button
    // I created a style in JSX syntax to keep it here for
    // the dynamic changes
    var block_style = props.attributes.block_style // To bind the style of the button
    block_style = {
        backgroundColor: background_color,
        color: '#000',
        padding: '14px 25px',
        fontSize: '16px', 
    }

    //
    // onChange event functions
    //
    function onChangeBgColor ( content ) {
        props.setAttributes({background_color: content})
    }

    // Creates a <p class='wp-block-cgb-block-gtm-audio-block'></p>.
    return [
        <InspectorControls>
            <label class="blocks-base-control__label">background color</label>
            <ColorPalette // Element Tag for Gutenberg standard colour selector
                onChange={onChangeBgColor} // onChange event callback
            />
        </InspectorControls>
        ,
        <div className={ props.className } style={block_style}>
            <p>— Hello from the backend.</p>
        </div>
    ];
},

** FINALLY: ** the save method, just create variable for the style and give the rendered div the JSX style of that value.

save: function( props ) {

    var block_style = {
        backgroundColor: props.attributes.background_color
    }
    return (
        <div style={block_style}>
            <p>— Hello from the frontend.</p>
        </div>
    );
},

here is a complete gist of the file

0

PanelColor has been deprecated, use PanelColorSettings instead:

const {
    PanelColorSettings,
    …
} = wp.editor;

…

edit: (props) => {
    …
    return (
        …
        <InspectorControls>
            <PanelColorSettings
            title={ 'Background Color' }
            colorSettings={[{
              value: backgroundColor,
              onChange: onChangeBackgroundColor,
              label: __('Background Color')
            }]}
          />
      </InspectorControls>
      …

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.