Как создать собственный блок в Gutenberg WordPress: практическое руководство с примерами кода

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

Что такое блок Gutenberg и зачем создавать свой

Блоки в Gutenberg – это отдельные элементы контента, которые можно добавлять, настраивать и перемещать внутри редактора. Это не только текст и изображения, но и сложные виджеты, формы, слайдеры и многое другое.

Создание собственного блока позволяет:

Добавить уникальный дизайн и функциональность.
Облегчить работу редактора для контент-менеджеров.
Упростить повторное использование сложных элементов.

Для разработчиков это шанс интегрировать сложные интерактивные элементы напрямую в редактор WordPress.

Подготовка окружения для разработки блока Gutenberg

Для разработки блока понадобится Node.js, npm и набор инструментов @wordpress/scripts.

Для начала создайте папку блока внутри вашей темы или плагина, например my-custom-block. В терминале перейдите в эту папку и выполните:

npm init -y
npm install @wordpress/scripts --save-dev

В package.json добавьте скрипты для сборки:

{
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  }
}

Это позволит использовать современный инструмент сборки с поддержкой JSX, ESNext и CSS-модулей.

Создание простого блока: структура и регистрация

Создадим файл index.js с кодом регистрации блока:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('wpnews/custom-block', {
  title: 'WPNews: Простой блок',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    return (
      <RichText
        tagName="p"
        value={attributes.content}
        onChange={(content) => setAttributes({ content })}
        placeholder="Введите текст..."
      />
    );
  },
  save({ attributes }) {
    return <RichText.Content tagName="p" value={attributes.content} />;
  },
});

Объяснение:

registerBlockType – регистрирует блок с уникальным именем.
attributes – хранит данные блока, здесь простой текст.
edit – компонент редактора, где можно редактировать содержимое.
save – рендерит сохранённый HTML для фронтенда.

Подключение блока в WordPress

Для подключения скрипта и стилей используйте PHP в functions.php темы или плагина:

function wpnews_register_custom_block() {
  wp_register_script(
    'wpnews-custom-block-script',
    get_template_directory_uri() . '/my-custom-block/index.js',
    ['wp-blocks', 'wp-element', 'wp-editor'],
    filemtime(get_template_directory() . '/my-custom-block/index.js')
  );

  register_block_type('wpnews/custom-block', [
    'editor_script' => 'wpnews-custom-block-script',
  ]);
}
add_action('init', 'wpnews_register_custom_block');

После этого блок станет доступен в редакторе Gutenberg в категории Общие.

Расширение блока: добавление кастомных настроек

Теперь добавим панель настроек с выбором цвета текста. Для этого импортируем дополнительные компоненты и добавим атрибуты:

import { InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';

registerBlockType('wpnews/custom-block', {
  // ...
  attributes: {
    content: { type: 'string', source: 'html', selector: 'p' },
    textColor: { type: 'string', default: '#000000' },
  },
  edit({ attributes, setAttributes }) {
    return (
      <>
        <InspectorControls>
          <PanelBody title="Настройка цвета текста">
            <ColorPalette
              value={attributes.textColor}
              onChange={(textColor) => setAttributes({ textColor })}
            />
          </PanelBody>
        </InspectorControls>
        <RichText
          tagName="p"
          value={attributes.content}
          onChange={(content) => setAttributes({ content })}
          placeholder="Введите текст..."
          style={{ color: attributes.textColor }}
        />
      </>
    );
  },
  save({ attributes }) {
    return <RichText.Content tagName="p" value={attributes.content} style={{ color: attributes.textColor }} />;
  },
});

Теперь в боковой панели редактора можно выбрать цвет текста, и он сохранится вместе с содержимым блока.

Практические советы по разработке блоков Gutenberg

Некоторые рекомендации:

Используйте @wordpress/scripts для удобной сборки и разработки.
Для сложных блоков разделяйте логику на компоненты React.
Проверяйте совместимость с WP версии 5.0 и выше.
Для расширенного стайлинга подключайте CSS-модули или SCSS.
Тестируйте блок как в редакторе, так и на фронтенде.

Использование плагинов для упрощения разработки блоков

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

Clearfy Pro – содержит инструменты для оптимизации и расширения Gutenberg.
WPStories – позволяет создавать интерактивные истории, которые можно встраивать в блоки.

Использование таких плагинов может сэкономить время и добавить готовые решения для расширения редактора.

Выводы и дальнейшие шаги

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

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