Gutenberg 和 ESNext 中的多个高阶组件

Question

我正在尝试使用 HOCs 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 (

        );
    },
} );

不胜感激。

Answer 1

我建议使用 Gutenberg utilities for composing HOC's. I didn't get the context of your case so I decided that the basic WordPress block example 是一个很好的起点，我将它与您的代码结合起来得到以下内容：

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 的顺序无关紧要，但请记住它们是从右到左执行的。这在 Gutenberg compose 文档中有描述。

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

Gutenberg 和 ESNext 中的多个高阶组件

Multiple higher order components in Gutenberg and ESNext

wordpress

reactjs

wordpress-gutenberg

react-hoc