Как добавить пользовательское поле в блок Gutenberg в WordPress

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

Зачем добавлять пользовательские поля в блоки Gutenberg

Пользовательские поля позволяют хранить и выводить дополнительную информацию, специфичную для конкретного блока. Например, в блоке "Отзывы" можно добавить поле "Рейтинг", в блоке "Продукт" — поле "Цена" или "Артикул". Это упрощает управление контентом и улучшает взаимодействие с конечным пользователем.

В отличие от стандартных мета-полей, интегрированных через классический редактор, поля в Gutenberg-блоках имеют преимущества:

• Интерактивный интерфейс интегрирован прямо в блок.
• Гибкость в отображении и валидации данных.
• Возможность использовать React-компоненты для расширенной логики.

Основы создания пользовательского поля в собственном блоке Gutenberg

Для примера создадим блок с дополнительным текстовым полем "Дополнительная информация". Для начала необходимо зарегистрировать блок через функцию registerBlockType с указанием атрибутов (attributes), где и определяются пользовательские поля.

wp.blocks.registerBlockType('wptemplates/custom-info-block', {
  title: 'Блок с доп. информацией',
  icon: 'info',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      default: ''
    },
    additionalInfo: {
      type: 'string',
      default: ''
    }
  },
  edit: (props) => {
    const {attributes, setAttributes} = props;
    return (
      wp.element.createElement('div', null,
        wp.element.createElement('textarea', {
          value: attributes.content,
          onChange: (e) => setAttributes({content: e.target.value}),
          placeholder: 'Основной текст'
        }),
        wp.element.createElement('input', {
          type: 'text',
          value: attributes.additionalInfo,
          onChange: (e) => setAttributes({additionalInfo: e.target.value}),
          placeholder: 'Дополнительная информация'
        })
      )
    );
  },
  save: (props) => {
    const {attributes} = props;
    return (
      wp.element.createElement('div', null,
        wp.element.createElement('p', null, attributes.content),
        attributes.additionalInfo && wp.element.createElement('small', null, attributes.additionalInfo)
      )
    );
  }
});

В этом примере в блок добавлено поле additionalInfo, которое можно заполнять в редакторе. В функции edit создаются элементы управления, а в save — разметка для отображения на сайте.

Использование плагина Advanced Custom Fields (ACF) для добавления полей в блоки Gutenberg

Если вы предпочитаете работать без написания JavaScript-кода, популярный плагин Advanced Custom Fields (ACF) поможет создавать пользовательские поля и интегрировать их в блоки Gutenberg с помощью ACF Blocks.

Преимущества использования ACF Blocks:

• Визуальный редактор для создания полей.
• Быстрая регистрация блоков через PHP.
• Гибкость в отображении и настройках.

Пример регистрации блока с полем ACF:

function wptemplates_register_acf_block_types() {
  acf_register_block_type(array(
    'name'              => 'custom-info',
    'title'             => __('Блок с доп. информацией'),
    'render_template'   => 'template-parts/blocks/custom-info/custom-info.php',
    'category'          => 'formatting',
    'icon'              => 'info',
    'keywords'          => array( 'info', 'custom' ),
  ));
}
add_action('acf/init', 'wptemplates_register_acf_block_types');

В шаблоне custom-info.php вы можете вывести поле следующим образом:

<?php
$additional_info = get_field('additional_info');
?>
<div class="custom-info-block">
  <p><?php the_field('content'); ?></p>
  <?php if ($additional_info): ?>
    <small><?php echo esc_html($additional_info); ?></small>
  <?php endif; ?>
</div>

Реализация валидации и сохранения пользовательских полей в Gutenberg блоках

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

Пример простой валидации для поля «Дополнительная информация» — ограничение длины до 100 символов:

const onChangeAdditionalInfo = (value) => {
  if (value.length <= 100) {
    setAttributes({ additionalInfo: value });
  }
};

В функции edit замените onChange для поля на onChangeAdditionalInfo. Это позволит не допускать введение слишком длинных строк.

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

Практические советы по организации кода и распределению логики

При разработке собственных блоков с пользовательскими полями рекомендуется:

• Разделять логику редактирования (edit) и сохранения (save) максимально четко.
• Использовать современные возможности ES6+ и JSX для удобства.
• Использовать хуки WordPress и React для управления состоянием.
• Если используете ACF — хранить шаблоны блоков в отдельной папке и подключать их через render_template.
• Тестировать блок на всех популярных браузерах и устройствах.

Дополнительные плагины для расширения возможностей Gutenberg-блоков

Если вам нужны расширенные варианты пользовательских полей или готовые решения для кастомизации Gutenberg, обратите внимание на следующие плагины:

• Clearfy Pro — набор оптимизаций и расширений, включая настройки блоков.
• WPRemark — расширяет функциональность комментариев и блоков.

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