Gutenberg InspectorControls已弃用，如何添加自定义块设置？

时间：2019-01-26 作者：user382738

如何在显示块何时处于活动状态的侧面板中添加自定义设置？例如，段落块具有“文本设置”和“自定义大小”选项，如何向自定义块添加选项？

本教程：https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/, 表示要使用InspectorControls 然而，这似乎已被弃用，而且不起作用。

以下是我目前掌握的情况：

( function( blocks, i18n, element ) {
    var el = element.createElement;
    var __ = i18n.__;
    var ServerSideRender = window.wp.components.ServerSideRender;

    blocks.registerBlockType( \'my-block/block\', {
        title: __( \'My Block\', \'my-block\' ),
        icon: \'welcome-widgets-menus\',
        category: \'widgets\',
        attributes : {},
        edit: function( props ) {
            return [
                el( ServerSideRender, {
                    block: "my-block/block",
                    attributes:  props.attributes
                } )
            ];
        },
        save: function() {
            return null;
        },
    } );
}(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element
) );
谢谢大家！

2 个回复
最合适的回答,由SO网友:obiPlabon 整理而成

事实上InspectorControls 未弃用。它已移动到另一个命名空间或另一个对象下，即wp.editor. 因此，在侧面板中添加控件的最新方法如下（在JSX中）-

// Destruct components
// Place at the top of the block file
const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;

// in edit() method
<InspectorControls>
    <PanelBody
        title={__(\'Panel Title\')}
        initialOpen={true}
    >
        {/* Panel items goes here */}
    </PanelBody>
</InspectorControls>
更新（纯JS中的示例）：

var InspectorControls = wp.editor.InspectorControls;
var PanelBody = wp.components.PanelBody;

// in edit() method
wp.element.createElement(
    InspectorControls,
    null,
    wp.element.createElement(PanelBody, {
        title: __(\'Panel Title\'),
        initialOpen: true
    })
);

SO网友:Ashiquzzaman Kiron

首先需要导入组件

const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;
然后在编辑功能中，您需要像这样放置InspectorControl-

<InspectorControls>

   <PanelBody title={ __( \'Settings One\' ) }>
   </PanelBody>

   <PanelBody title={ __( \'Settings Two\' ) }>
   </PanelBody>

   <PanelBody title={ __( \'Settings Three\' ) >
   </PanelBody>

</InspectorControls>
您有三个设置面板。下面是另一个例子-

 isSelected && (
            <InspectorControls key= { \'inspector\' } >
                    <PanelBody>
                    <RangeControl 
                        label= { __(\'Title Size\', \'tar\') }
                        value= { textSize }
                        min= \'25\'
                        max= \'50\'
                        onChange={ (set) => setAttributes({ textSize : set }) }
                    />

                    <PanelColorSettings 
                        title={ __(\'Title Color\', \'tar\') }
                        colorSettings= { [ 
                            {
                            value: textColor,
                            onChange: (colorValue) => setAttributes ( { textColor: colorValue } ),
                            label: __(\'Color\', \'tar\'),
                            },
                         ] }
                    />

                    <PanelColorSettings 
                        title={ __(\'Background Color\', \'tar\') }
                        colorSettings= { [ 
                            {
                            value: bgColor,
                            onChange: (colorValue) => setAttributes ( { bgColor: colorValue } ),
                            label: __(\'Color\', \'tar\'),
                            },
                         ] }
                    />

                </PanelBody>
            </InspectorControls>
         ),
注意到isSelected道具了吗？这意味着只有在单击块时，才会显示块侧栏设置。我希望这有帮助。

标签： block-editor   小码农  

相关推荐