Як створити Gutenberg-блоки на React: приклад власного блоку

Редактор блоків Gutenberg у WordPress використовує React під капотом і дозволяє створювати власні блоки контенту. Це відкриває великі можливості для розробників, які хочуть надати клієнтам кастомні елементи з повним контролем над виглядом і логікою. У цій статті розглянемо, як створити свій власний блок на Gutenberg за допомогою React.

1. Підготовка середовища

Почнемо з базової структури плагіна:

Створіть папку my-custom-block у wp-content/plugins.
Додайте файл my-custom-block.php з оголошенням плагіна.

<?php
/**
 * Plugin Name: My Custom Block
 */
function my_block_assets() {
  wp_enqueue_script(
    'my-custom-block',
    plugins_url('block.js', __FILE__),
    array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components')
  );
}
add_action('enqueue_block_editor_assets', 'my_block_assets');

2. Створення JavaScript-файлу

Створіть файл block.js в корені плагіна. Приклад базового Gutenberg-блоку:

(function (blocks, element) {
  var el = element.createElement;
  blocks.registerBlockType('myplugin/hello-block', {
    title: 'Hello Block',
    icon: 'smiley',
    category: 'common',
    edit: function () {
      return el('p', null, 'Привіт з власного блоку!');
    },
    save: function () {
      return el('p', null, 'Привіт з фронтенду!');
    },
  });
})(window.wp.blocks, window.wp.element);

Цей код створює простий блок, який виводить текст у редакторі та на сайті.

3. Додавання стилів

Ви можете підключити CSS для стилізації вашого блоку:

Створіть style.css — для фронтенду.
Створіть editor.css — для редактора.

Не забудьте підключити стилі через wp_enqueue_style у функціях плагіна.

4. Компільований підхід через @wordpress/scripts

Для реальних проєктів краще використовувати npm і @wordpress/scripts:

npx @wordpress/create-block my-block

Ця команда автоматично створить структуру плагіна з підтримкою ESNext, JSX і Webpack. Вам залишиться лише редагувати файл edit.js у каталозі src.

5. Приклади практичного використання

Кастомні CTA-блоки з кнопками та стилізацією.
Галереї, слайдери або таби, які зручно редагуються.
Інтеграція з зовнішніми API (наприклад, погода, курс валют).

Висновок

Gutenberg — це не просто новий редактор, а сучасна платформа для створення гнучкого контенту. Власні блоки на React дозволяють реалізовувати найрізноманітніші компоненти — від простих до складних інтерактивних елементів. Використовуйте стандартний API WordPress або збірку через @wordpress/create-block — і розширюйте можливості редактора на повну.