Контролы инспектора блоков редактирования Гутенберга и сохранение

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

var el = wp.element.createElement,
    Fragment = wp.element.Fragment,
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.editor.RichText,
    BlockControls = wp.editor.BlockControls,
    AlignmentToolbar = wp.editor.AlignmentToolbar,
    Fields = wp.components;

var withInspectorControlsEdit = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function( props ) {
        return el(
            wp.element.Fragment,
            {},
            el( BlockEdit, props ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    Fields.PanelBody,
                    {},
                    el(
                        Fields.TextControl,
                        {
                            label: 'Тестовое поле',
                            value: props.attributes.testField,
                            onChange: function(e){
                                props.setAttributes({ testField: e });
                            }
                        }
                    )
                )   
            )
        )
    };
}, 'withInspectorControlsEdit' );
wp.hooks.addFilter( 'editor.BlockEdit', 'acf/accordion', withInspectorControlsEdit );

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

Как редактировать инспекторские управляющие блоки Gutenberg и сохранять данные

Введение

Gutenberg, редактор блоков для WordPress, предоставляет мощные инструменты для работы с контентом. Разработка пользовательских блоков может потребовать наличия инспекторских управляющих элементов, которые помогут пользователям легко редактировать метаданные. В данной статье мы рассмотрим, как правильно добавить инспекторские управляющие элементы в существующий блок и сохранить данные как метаданные.

Проблема

Вы пытаетесь добавить текстовое поле в инспекторские управляющие элементы блока, но не можете сохранить введенные данные. Это может быть связано с пропущенной настройкой в определении атрибутов блока.

Решение

1. Определение атрибутов блока

   Прежде чем вы сможете использовать атрибуты в вашем настраиваемом блоке, вам нужно убедиться, что они правильно определены при регистрации блока. Ваш текущий код не настраивает атрибут testField как метаданные. Обновите определение ваших атрибутов следующим образом:

   attributes: {
      testField: {
          type: 'string',
          source: 'meta',
          meta: 'testField',
          default: ''
      },
   },

   Убедитесь, что вы добавили правильную структуру attributes в вызов registerBlockType.

2. Добавление инспекторских управляющих элементов

   Ваш код для добавления текстового поля в инспекторский контрол выглядит корректно:

   var withInspectorControlsEdit = wp.compose.createHigherOrderComponent(function (BlockEdit) {
      return function (props) {
          return el(
              wp.element.Fragment,
              {},
              el(BlockEdit, props),
              el(
                  wp.editor.InspectorControls,
                  {},
                  el(
                      Fields.PanelBody,
                      {},
                      el(
                          Fields.TextControl,
                          {
                              label: 'Test Field',
                              value: props.attributes.testField,
                              onChange: function (e) {
                                  props.setAttributes({ testField: e });
                              }
                          }
                      )
                  )
              )
          );
      };
   }, 'withInspectorControlsEdit');
   
   wp.hooks.addFilter('editor.BlockEdit', 'acf/accordion', withInspectorControlsEdit);

   Здесь вы правильно используете setAttributes, чтобы обновить значение testField.

3. Сохранение данных

   Данные метаданных должны быть зарегистрированы на серверной стороне. Убедитесь, что вы используете register_meta для вашего метаданных. Например:

   add_action('init', function () {
      register_meta('post', 'testField', array(
          'show_in_rest' => true,
          'single' => true,
          'type' => 'string',
      ));
   });

   Этот код позволяет вашему метадату testField быть доступным через REST API, что необходимо для его сохранения.

4. Сохранение изменений

   Убедитесь, что при сохранении поста блок правильно сохраняет введенные значения. Это обеспечивается тем, что source: 'meta' и meta: 'testField' сопоставлены. Если данные все ещё не сохраняются, проверьте консоль разработчика (Developer Console) на наличие ошибок.

Заключение

Добавление инспекторских управляющих элементов и сохранение данных как метаданных в Gutenberg требует тщательной настройки как на фронтенде, так и на бэкенде. Следуя данным шагам, вы сможете успешно внедрить необходимые изменения для вашего блока и сохранить данные. Если возникнут дополнительные трудности, обратитесь к документации WordPress или рассмотрите возможность использования поддержки сообщества для получения дополнительной помощи.