Gutenberg ServerSideRender已弃用,如何使用新的wp.serverSideRender组件?

时间:2019-12-02 作者:Shah Alom

使用时ServerSideRender wordpress gutenberg组件,我看到以下通知。

wp.components.ServerSideRender is deprecated. Please use wp.serverSideRender instead.

这是我的测试代码:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;

const { InspectorControls } = wp.blockEditor;

const {
    PanelBody, SelectControl, ServerSideRender, TextControl, ToggleControl,
} = wp.components;

registerBlockType( \'test-me/test-to-block\', {
    title: __( \'Test Me\' ),
    icon: \'shield\',
    category: \'common\',
    keywords: [
        __( \'Test Me\' ),
        __( \'Test\' ),
        __( \'msbd\' ),
    ],

    attributes: {
        adAlignment: {
            type: \'string\',
            default: \'center-align\',
        },
        isWrapper: {
            type: \'boolean\',
            default: true,
        },
    },

    edit: ( props ) => {
        const { setAttributes, attributes } = props;
        const { adAlignment, isWrapper } = attributes;

        return (
            <Fragment>
                <div className={ `test-me ${ className }` }>
                    <ServerSideRender
                        block="test-me/test-to-block"
                        attributes={ attributes }
                    />
                </div>
            </Fragment>
        );
    },

    save: ( props ) => {
        const { attributes, className = \'\' } = props;

        return (
            <div className={ `test-me ${ className }` }>
                <ServerSideRender
                    block="test-me/test-to-block"
                    attributes={ attributes }
                />
            </div>
        );
    },
} );
如何修改此脚本以使用新脚本wp.serverSideRender 组成部分

2 个回复
SO网友:Welcher

该组件仍在运行,问题在于它是如何被拉出到自己的包中的。它不再是大写,为了在JSX中使用它,您需要将其别名为:

const { serverSideRender: ServerSideRender } = wp;

看见this issue 了解更多详细信息。

SO网友:WebElaine

这只意味着他们移动了组件。更换此部件:

const {
    PanelBody, SelectControl, ServerSideRender, TextControl, ToggleControl,
} = wp.components;
使用

const { serverSideRender } = wp;
const {
    PanelBody, SelectControl, TextControl, ToggleControl,
} = wp.components;
除非他们更改了有关组件的任何其他内容,否则导入组件的位置应该是唯一需要的更新。

Be careful with the first letter of \'serverSideRender\', lower case!!

相关推荐