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

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

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

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

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

Для создания блоков используется JavaScript с библиотекой React, а также PHP для регистрации блока в WordPress.

Основные шаги создания блока Gutenberg

Процесс можно разбить на несколько этапов:

1. Настройка окружения для сборки JavaScript (Webpack, Babel).
2. Создание JavaScript-файла с описанием блока.
3. Регистрация блока в WordPress через PHP.
4. Подключение скриптов и стилей блока.
5. Использование блока в редакторе и на сайте.

Для упрощения можно использовать @wordpress/create-block — официальный шаблон для быстрого старта, но в статье рассмотрим ручной пример.

Настройка окружения

Для работы с современным JavaScript и JSX необходимы инструменты сборки. Если вы знакомы с npm и node.js, создайте в папке плагина файл package.json и установите нужные зависимости:

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

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

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

Теперь можно писать код блока в файле src/index.js и собирать его командой npm run build.

Пример создания простого блока

Создадим блок с названием "WPDO Example Block", который выводит на страницу настраиваемый текст.

JavaScript код блока (src/index.js)

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

registerBlockType('wpdo/example-block', {
  title: 'WPDO Example Block',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    const { content } = attributes;
    return (
      <RichText
        tagName="p"
        onChange={(content) => setAttributes({ content })}
        value={content}
        placeholder="Введите текст..."
      />
    );
  },
  save({ attributes }) {
    const { content } = attributes;
    return <RichText.Content tagName="p" value={content} />;
  },
});

Регистрация блока в PHP (wpdo-example-block.php)

function wpdo_register_example_block() {
  wp_register_script(
    'wpdo-example-block',
    plugins_url('build/index.js', __FILE__),
    array('wp-blocks', 'wp-element', 'wp-editor'),
    filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
  );
  register_block_type('wpdo/example-block', array(
    'editor_script' => 'wpdo-example-block',
  ));
}
add_action('init', 'wpdo_register_example_block');

После сборки скрипта и активации плагина в редакторе появится новый блок, который можно использовать как обычный элемент контента.

Расширение функционала блока: атрибуты и стили

Для практического использования часто требуется добавить больше атрибутов, например, цвет текста, размер, дополнительные поля. Атрибуты описываются в объекте attributes, а их изменение — через события в методе edit. Например, добавим выбор цвета:

import { __experimentalPanelColorGradientSettings as PanelColorSettings } from '@wordpress/block-editor';

attributes: {
  content: { type: 'string', source: 'html', selector: 'p' },
  textColor: { type: 'string', default: 'black' },
},

edit({ attributes, setAttributes }) {
  return (
    <>
      <PanelColorSettings
        title="Цвет текста"
        initialOpen={true}
        colorSettings={[{
          value: attributes.textColor,
          onChange: (textColor) => setAttributes({ textColor }),
          label: 'Цвет текста',
        }]}
      />
      <RichText
        tagName="p"
        style={{ color: attributes.textColor }}
        onChange={(content) => setAttributes({ content })}
        value={attributes.content}
      />
    </>
  );
},

save({ attributes }) {
  return <RichText.Content tagName="p" style={{ color: attributes.textColor }} value={attributes.content} />;
}

Также можно подключить стили для редактора и фронтенда, зарегистрировав CSS файлы через wp_enqueue_style.

Полезные плагины и инструменты для работы с Gutenberg-блоками

Для облегчения разработки и расширения возможностей блоков рекомендуем обратить внимание на:

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

Советы по отладке и публикации блока

При создании блока важно тестировать его во всех популярных браузерах и на мобильных устройствах. Используйте консоль разработчика для поиска ошибок JavaScript и PHP-логи для серверных ошибок.

Перед публикацией плагина с блоком на сайте убедитесь, что он совместим с текущей версией WordPress и другими плагинами, чтобы избежать конфликтов.