在Gutenberg中实现面板颜色检查器控制

时间：2018-05-26 作者：Nathan Johnson

我试图在自定义块的Inspector控件中实现面板颜色，但似乎无法理解。下面是尝试使用它的JSX代码。它渲染块，但当它处于焦点时，会遇到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>
        );
    },
} );

3 个回复

最合适的回答,由SO网友:developerjack 整理而成

许多的wp.blocks.* 控件已移动到wp.editor.* （参见release notes).

明确地wp.blocks.InspectorControls 现在是wp.editor.InspectorControls - 您需要更改代码的第一行。

注：registerBlockType 仍从导入wp.blocks.* iirc

作为补充，我还发现focus && 不再需要技巧，因为当块聚焦时，GB会自动显示InspectorControl。

SO网友:Biskrem Muhammad

我要给你介绍一下要点，因为我也很挣扎：）

首先导入InspectorControls

const { InspectorControls } = wp.editor;

然后导入组件，如ColorPalette

const { ColorPalette } = wp.components;

为了保存状态，必须定义一个属性：

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
    }
},

然后在edit 作用定义onChangeColorHandler 和一个变量，用于在JSX, 因为你当然不能从css。

在return part返回两个元素的数组[] 这个Inspector 和渲染的div 在编辑器中

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>
    ];
},

** 最后：**保存方法，只需为样式创建变量并提供渲染div 该值的JSX样式。

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

SO网友:auco

PanelColor 已弃用，请使用PanelColorSettings 而是：

const {
    PanelColorSettings,
    …
} = wp.editor;

…

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

结束

小码农CODE

在Gutenberg中实现面板颜色检查器控制

相关推荐