Пользовательский блок - функция save.js не сохраняет атрибуты

Вопрос или проблема

Я пытаюсь создать базовый пользовательский блок, который отображается в редакторе и сохраняется. Я следовал нескольким руководствам и продолжаю получать один и тот же результат. Независимо от того, насколько прост мой блок, всякий раз, когда я добавляю сохраненный атрибут, я больше не могу сохранить страницу, содержащую блок. Я получаю ошибку проверки блока. Я знаю, что функция save.js не сохраняет атрибуты правильно, я просто не знаю почему. Вот раздел атрибутов в моем block.json:

    "attributes": {
      "content": {
        "type": "string",
        "source": "text",
        "selector": "p"
      }
    },

Я использую только одно поле RichText в моем edit.js:

 import { __ } from '@wordpress/i18n';
 import { useBlockProps, RichText } from '@wordpress/block-editor';
 import { TextControl } from '@wordpress/components';
 import './styles/editor.scss';

 export default function Edit( { attributes, setAttributes } ) {
    const blockProps = useBlockProps();

    const onChangeContent = ( newContent ) => {
        setAttributes( { content: newContent } );
    }

    return (
        <RichText 
            { ...blockProps }
            tagName="p"
            onChange={ onChangeContent }
            allowedFormats={ [ 'core/bold', 'core/italic' ] }
            value={ attributes.content }
            placeholder={ __( 'Write your text...' ) }
        />
    );
}

И, наконец, вот моя функция сохранения:

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <RichText.Content
            {...blockProps}
            tagName="p"
            value={ attributes.content }
        />
    );
}

Ошибка, которую я получаю после сохранения:

Content generated by `save` function:

<p class="wp-block-kateandco-kate-block"></p>

Content retrieved from post body:

<p class="wp-block-kateandco-kate-block">my inner text, saved as p</p>

Исправление обработки RichText.Content в функции save
Ваш блок использует RichText.Content в функции save, которая ожидает, что его содержимое будет непосредственно внутри блока (как текст). Однако в вашем текущем варианте реализации внутреннее содержимое не включено в тег

, так как RichText.Content использует атрибут value вместо этого. Это приводит к несоответствию между содержимым редактора и телом поста.

Решение:
Просто используйте обычный элемент p вместо RichText.Content.

Обновленный save.js

import { useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <p { ...blockProps }>
            { attributes.content }
        </p>
    );
}

Ответ или решение

Вас интересует вопрос сохранения атрибутов в наличии пользовательского блока WordPress с использованием save.js. Давайте разберем ситуацию более подробно, чтобы понять причину ошибки и предложить решение.

Теория (Theory):

Основной причиной вашей проблемы является неправильная обработка содержимого в функции сохранения блока. Вы используете RichText.Content для отображения содержимого в функции сохранения. Эта компонента предназначена для встраивания текста непосредственно внутрь блока, однако она ожидает, что содержимое будет передаваться через атрибут value. Если метаданные не совпадают с тем, что находится в теле поста, возникает ошибка валидации блока.

Когда контент генерируется функцией сохранения, тег <p> не содержит текст, что приводит к разнице между содержанием, сохраненным в редакторе, и содержанием, полученным из тела поста. Это и вызывает ошибку валидации.

Пример (Example):

В вашей текущей реализации функцией save используется следующий код:

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <RichText.Content
            {...blockProps}
            tagName="p"
            value={ attributes.content }
        />
    );
}

Для проверки совпадения содержания, сгенерированного функцией сохранения, и содержания в теле поста важно создать нужную структуру HTML, которая бы корректно сохранилась и была валидационной. Ваша структура теряет внутренний текст из-за специфики RichText.Content.

Применение (Application):

Решением вашей проблемы будет использования стандартного HTML-элемента <p>, а не RichText.Content. Это позволит прямо вставить текст в нужную структуру, устраняя разницу в содержимом и соответствие.

Вы обновите save.js работая следующим образом:

import { useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <p { ...blockProps }>
            { attributes.content }
        </p>
    );
}

Эта модификация гарантирует корректное отображение содержимого внутри тега <p>. Как только вы внесете эти изменения, ваш блок должен начинать сохранять атрибуты корректно, и ошибки валидации больше не будет.

Адаптируя данные изменения, вы обеспечите соответствие между тем, что видит пользователь в редакторе, и конечным содержимым в базе данных. Это ключевой момент в разработке пользовательских блоков в WordPress, ведь согласованность данных важна для стабильной работы вашего веб-сайта.

Дополнительные советы:

Отладка:
Если ошибка сохраняется, вы можете использовать console.log для вывода атрибутов и блока внутри функции save и на этапе редактирования. Это поможет вам увидеть на какой стадии данные перестают быть корректными.
Валидация:
Проверьте, совпадают ли версии вашего блока в работе с редактором и JSON-файлах оформленными в соответствии с документацией WordPress.
Проверка типов данных:
Убедитесь, что атрибуты имеют правильный тип данных. Например, если это строка, она должна быть корректно сериализована.

Таким образом, небольшая модификация функции сохранения обеспечит правильное функционирование вашего пользовательского блока, соответствие данных и, как следствие, стабильность работы веб-сайта.

Пользовательский блок – функция save.js не сохраняет атрибуты

Вопрос или проблема

Ответ или решение