Несколько компонентов высшего порядка в Gutenberg и ESNext

Question

Я пытаюсь использовать HOC withInstanceId (для генерации уникального идентификатора для использования в качестве идентификатора в HTML) и 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

Я бы предложил использовать утилиты Гутенберга для составления 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 в этом случае не имеет значения, но имейте в виду, что они выполняются справа налево. Это описано в документе Gutenberg compose.

Имейте в виду, что ядро ​​WordPress Gutenberg не является новейшим кодом от команды Gutenberg, и я бы предложил установить плагин Gutenberg . Вы получите полезные советы и более стабильную кодовую базу с меньшим количеством ошибок. Например, в вашем коде с установленным плагином Gutenberg регистрируется следующее предупреждение: wp.editor.withColors is deprecated. Please use wp.blockEditor.withColors instead.