0

我正在尝试在 Gutenberg 中使用 HOC withInstanceId（生成唯一标识符以用作 HTML 中的 ID）和withColors（在侧边栏中使用颜色选择器），但我不确定 ESNext 语法是否正确。（而且我认为技术上正确的非 ESNext 语法......）

这是我的出发点，但显然不正确：

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;
const { withColors } = wp.editor;
const { withInstanceId } = wp.compose;

registerBlockType( 'blocksetc/test', {
    title: __( 'title' ),
    attributes: {
        highlightColor: {
            type: "string"
        },
    },
    edit: withColors( 'highlightColor' )( function ({ attributes, setAttributes, className, instanceId }) {
        return (

        );
    },

    save( { attributes } ) {
        return (

        );
    },
} );

一点指导将不胜感激。

4

1 回答 1

0

我建议使用Gutenberg 实用程序来编写 HOC。我没有得到你的案例的上下文，所以我认为基本的WordPress 块示例是一个很好的起点，我将它与你的代码结合起来得到以下内容：

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;
const { withColors } = wp.editor;
const { compose, withInstanceId } = wp.compose;

const BaseHtml = ({instanceId, highlightColor}) => {
    console.log(highlightColor);
    return (<div id={'my-custom-' + instanceId}>Hello World, step 1 (from the editor).</div>)
};
const CombinedComponent = compose(withColors('highlightColor'), withInstanceId)(BaseHtml);

registerBlockType('gutenberg-examples/example-01-basic-esnext', {
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        highlightColor: {
            type: 'string'
        },
    },
    example: {},
    edit(props) {
        return <CombinedComponent {...props} />;
    },
    save() {
        return <div>Hello World, step 1 (from the frontend).</div>;
    },
});

在这种情况下，组合 HOC 的顺序无关紧要，但请记住它们是从右到左执行的。这在古腾堡撰写文档中有所描述。

请记住，核心 WordPress Gutenberg 不是 Gutenberg 团队的最新代码，我建议安装Gutenberg 插件。您将获得有用的提示和更稳定且错误更少的代码库。例如，在您的代码中，安装了 Gutenberg 插件后，它会记录以下警告：wp.editor.withColors is deprecated. Please use wp.blockEditor.withColors instead.

于 2019-11-08T09:57:48.353 回答