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

Содержание:

1. Настройка проекта

2. Создание пользовательского блока Гутенберга

3. Добавление элементов управления блоками и элементов управления инспектором

4. Стилизация блока Гутенберга

5. Обработка атрибутов блоков и сохранение данных

6. Тестирование и отладка блока Гутенберга

7. Упаковка и развертывание блока Гутенберга

8. Настройка проекта:
   Для начала нам нужна базовая структура проекта с необходимыми зависимостями. Создайте новый каталог для вашего проекта Gutenberg и инициализируйте его с помощью npm.

mkdir my-gutenberg-project
cd my-gutenberg-project
npm init

Далее установите необходимые зависимости:

npm install @wordpress/scripts @wordpress/block-editor @wordpress/components @wordpress/api-fetch

2. Создание пользовательского блока Гутенберга:
   Теперь давайте создадим собственный блок Гутенберга. Создайте новый файл с именем my-block.jsв каталоге проекта:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
registerBlockType('my-plugin/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <TextControl label="Enter your content" />,
  save: () => <TextControl.Content />,
});

3. Добавление элементов управления блоком и элементов управления инспектором.
   Чтобы улучшить качество редактирования, мы можем добавить элементы управления в наш блок. Измените функцию editв my-block.jsследующим образом:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl, PanelBody } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
registerBlockType('my-plugin/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: ({ attributes, setAttributes }) => (
    <>
      <InspectorControls>
        <PanelBody title="Block Settings">
          <TextControl
            label="Enter your content"
            value={attributes.content}
            onChange={(content) => setAttributes({ content })}
          />
        </PanelBody>
      </InspectorControls>
      <TextControl label="Enter your content" value={attributes.content} onChange={(content) => setAttributes({ content })} />
    </>
  ),
  save: () => null,
});

4. Стилизация блока Гутенберга.
   Чтобы стилизовать наш блок Гутенберга, мы можем создать файл CSS и импортировать его в наш проект. Создайте новый файл с именем editor.cssв каталоге проекта:

.wp-block-my-plugin-my-block {
  background-color: #f2f2f2;
  padding: 20px;
}

.

Импортируйте файл CSS в my-block.js:

import './editor.css';

5. Обработка атрибутов блока и сохранение данных.
   Чтобы обрабатывать атрибуты блока и сохранять данные, обновите функцию saveв my-block.js:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
registerBlockType('my-plugin/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      source: 'text',
      selector: '.block-content',
    },
  },
  edit: ({ attributes, setAttributes }) => (
    <TextControl
      label="Enter your content"
      value={attributes.content}
      onChange={(content) => setAttributes({ content })}
    />
  ),
  save: ({ attributes }) => <div className="block-content">{attributes.content}</div>,
});

6. Тестирование и отладка блока Гутенберга.
   Чтобы протестировать и отладить блок Гутенберга, используйте следующие команды:

npm run build
npm run start

Откройте свой экземпляр WordPress и активируйте плагин проекта Gutenberg. Теперь вы можете использовать свой собственный блок в редакторе Гутенберга.

7. Упаковка и развертывание блока Гутенберга.
   Чтобы упаковать и развернуть блок Гутенберга, выполните следующую команду:

npm run build

Это создаст папку сборки, содержащую необходимые файлы для вашего блока. Затем вы можете распространить эту папку или упаковать ее как плагин WordPress для облегчения установки.

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