Gutenberg Inspector Controls

时间:2018-03-20 作者:Danny Cooper

我想做一个简单的古腾堡积木<InspectorControls>, 但无论我使用哪个组件,我都会得到一个React错误。

const { __ } = wp.i18n;
const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    TextControl
} = wp.blocks;

registerBlockType( \'gutenberg-examples/example-04-controls-esnext\', {
    title: __( \'Example: Controls (esnext)\' ),
    icon: \'universal-access-alt\',
    category: \'layout\',
    attributes: {
        content: {
            type: \'array\',
            selector: \'p\',
        },
    },
    edit: props => {
        const {
            attributes: {
                content,
                alignment,
                text
            },
            focus,
            className,
            setFocus
        } = props;

        const onChangeContent = newContent => {
            props.setAttributes( { content: newContent } );
        };

        const onChangeAlignment = newAlignment => {
            props.setAttributes( { alignment: newAlignment } );
        };

        const onChangeText = newText => {
            props.setAttributes( { text: newText } );
        };

        return (
            <div>
                {
                    !! focus && (
                        <InspectorControls>
                            <AlignmentToolbar
                                value={ alignment }
                                onChange={ onChangeAlignment }
                            />
                            <TextControl
                                label=\'Additional CSS Class\'
                                value={ text }
                                onChange={ onChangeText }
                            />
                        </InspectorControls>
                    )
                }
                <RichText
                    className={ className }
                    style={ { textAlign: alignment } }
                    onChange={ onChangeContent }
                    value={ content }
                    focus={ focus }
                    onFocus={ setFocus }
                    />
            </div>
        );
    },
    save: props => {
        // ignore for now
    }
} );
我正在使用“创建guten block”开发工具包。

错误:

react-dom.min.3583f8be.js:162 Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at l (react-dom.min.3583f8be.js:12)
    at qc (react-dom.min.3583f8be.js:43)
    at K (react-dom.min.3583f8be.js:53)
    at n (react-dom.min.3583f8be.js:57)
    at react-dom.min.3583f8be.js:62
    at f (react-dom.min.3583f8be.js:130)
    at beginWork (react-dom.min.3583f8be.js:136)
    at d (react-dom.min.3583f8be.js:158)
    at f (react-dom.min.3583f8be.js:159)
    at g (react-dom.min.3583f8be.js:159)

3 个回复
最合适的回答,由SO网友:David Sword 整理而成

TextControl 来自wp.componentswp.blocks.

const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
} = wp.blocks;
const {
    TextControl
} = wp.components;
更改后,我可以使您的块正常工作,而不是出错Gutenberg 2.2.0.

enter image description here

SO网友:Tom J Nowell

InspectorControls 自v2起已弃用。4.

https://github.com/WordPress/gutenberg/blob/9ebb918176c1efd0c41561d67ea3273bae5d3d6a/docs/deprecated.md#L15

wp。块。检查员控制。*组件已移除。请使用wp。组件。*而不是组件。

这位于代码的顶部:

const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    TextControl
} = wp.blocks;
具体而言:

const {
    ...
    InspectorControls,
    ...
} = wp.blocks;
正如古腾堡回购协议(Gutenberg repo)上被否决的文件所说,这是不赞成的,也行不通的:

wp。块。检查员控制。*组件已移除。请使用wp。组件。*而不是组件。

SO网友:davi_singh

不知道有多少人也被困在这里。如果插件的文件夹结构如下所示,则需要编辑2个文件

my-guten-block
|-> /src
||-> block.js
|-> plugin.php
Theplugin.php 需要添加的依赖项的文件wp-editor 当脚本排队时

const dependencies = array(\'wp-editor\');

wp_enqueue_script( handle: \'my-guten-block\',
                   src: plugin_dir_url(__FILE__) . \'src/block.js\',
                   dependencies)
然后您可以添加到block.js 文件

const { InspectorControls } = wp.editor

并根据需要使用。

结束

相关推荐