Множественные компоненты более высокого порядка в Gutenberg и ESNext

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

        );
    },
} );

Небольшое руководство было бы признательно.

1 ответ

Решение

Я бы посоветовал использовать утилиты 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.

Другие вопросы по тегам