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

Основы разработки блоков для Гутенберга

Подготовка среды разработки:

• Убедитесь, что у вас установлены Node.js и npm.
• Создайте новую директорию для вашего проекта и инициализируйте npm:

mkdir my-gutenberg-block cd my-gutenberg-block npm init -y

Установка необходимых пакетов:

Установите необходимые зависимости, включая пакеты для разработки блоков:

npm install @wordpress/scripts @wordpress/blocks @wordpress/i18n @wordpress/element @wordpress/editor --save-dev

Создание файлов блоков:

Создайте структуру директорий и файлов:

my-gutenberg-block/
├── src/
│   └── block.js
├── style.css
├── block.json
├── package.json
└── webpack.config.js

Конфигурация Webpack:

Настройте webpack.config.js для сборки вашего блока:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
  ...defaultConfig,
  entry: './src/block.js',
  output: {
    path: __dirname + '/build',
    filename: 'block.js',
  },
};

Регистрация блока:

В файле block.js импортируйте необходимые пакеты и зарегистрируйте блок:

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

registerBlockType('my-plugin/my-custom-block', {
  title: __('My Custom Block', 'text-domain'),
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit: (props) => {
    const { attributes: { content }, setAttributes } = props;

    const onChangeContent = (newContent) => {
      setAttributes({ content: newContent });
    };

    return (
      <RichText
        tagName="p"
        value={ content }
        onChange={ onChangeContent }
        placeholder={ __('Write your text...', 'text-domain') }
      />
    );
  },
  save: (props) => {
    const { attributes: { content } } = props;
    return <RichText.Content tagName="p" value={ content } />;
  },
});

Добавление стилей:

Создайте файл стилей style.css и добавьте необходимые стили для вашего блока:

.wp-block-my-plugin-my-custom-block {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
}

Регистрация стилей и скриптов в WordPress:

Сборка и активация блока:

Соберите ваш проект с помощью команды:

npm run build

Зарегистрируйте ваш блок в PHP коде, например в файле плагина:

function my_plugin_register_block() {
  wp_register_script(
    'my-plugin-block',
    plugins_url('build/block.js', __FILE__),
    array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor'),
    filemtime(plugin_dir_path(__FILE__) . 'build/block.js')
  );

  wp_register_style(
    'my-plugin-block',
    plugins_url('style.css', __FILE__),
    array(),
    filemtime(plugin_dir_path(__FILE__) . 'style.css')
  );

  register_block_type('my-plugin/my-custom-block', array(
    'editor_script' => 'my-plugin-block',
    'style' => 'my-plugin-block',
  ));
}
add_action('init', 'my_plugin_register_block');

Итог

Разработка блоков для редактора Гутенберг предоставляет огромные возможности для кастомизации и улучшения функциональности WordPress-сайтов. Следуя вышеприведенным шагам, вы сможете создать и настроить свой собственный блок, который идеально подойдет для нужд вашего проекта.