Руководство: разработка под Gutenberg на WordPress?

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

Зачем разрабатывать собственные блоки?

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

• Персонализация контента: Создание собственных блоков позволяет создавать уникальные макеты и стили контента, которые соответствуют потребностям и бренду.
• Улучшенная функциональность: Путем разработки собственных блоков вы можете добавить новые функции и возможности, которых нет в стандартных блоках Gutenberg, такие как интеграция с внешними сервисами, расширенные настройки и т.д.
• Улучшенный пользовательский опыт: Создание собственных блоков позволяет вам предоставить пользователям более удобные и интуитивно понятные инструменты для создания контента, что способствует улучшению их пользовательского опыта.
• Расширение возможностей тем и плагинов: Разработка собственных блоков дает возможность расширить функциональность существующих тем и плагинов, делая ваш сайт более мощным и гибким.
• Продвижение вашего контента: Уникальные и интересные блоки могут помочь вашему контенту выделиться среди множества других сайтов, что может привлечь больше посетителей и увеличить вовлеченность аудитории.

Разработка собственных блоков для редактора Gutenberg — это мощный инструмент, который позволяет вам сделать сайт на WordPress еще более эффективным и привлекательным для ваших пользователей.

Основы блоков Gutenberg

Понимание архитектуры блоков Gutenberg

Архитектура блоков в редакторе Gutenberg базируется на принципе модульности и компонентного подхода. Каждый блок представляет собой отдельный компонент, который содержит свою структуру, стили, настройки и функциональность. Эти блоки можно комбинировать и перемещать внутри редактора, создавая разнообразные макеты контента.

Пример: Например, блок «Абзац» в Gutenberg состоит из компонента, который рендерит текстовое поле для ввода контента и позволяет пользователю применять стили к этому тексту.

Различные типы блоков и их возможности

В редакторе Gutenberg существует множество типов блоков, каждый из которых обладает уникальными возможностями и настройками. Некоторые из наиболее распространенных типов блоков включают в себя:

• Текстовые блоки (абзацы, заголовки, цитаты).
• Медиа-блоки (изображения, галереи, видео, аудио).
• Блоки макета (колонки, разделители).
• Виджеты (кнопки, списки, таблицы).
• Пользовательские блоки (разработанные сторонними разработчиками или самими пользователями).

Каждый тип блока имеет свои уникальные параметры и настройки, которые позволяют пользователям кастомизировать внешний вид и функциональность контента.

Пример: Блок «Изображение» позволяет загрузить изображение, указать его размеры, добавить подпись и применить стили.

Какие инструменты нужны для создания блоков

Для создания блоков Gutenberg требуются следующие инструменты:

• Редактор кода: Необходим для написания JavaScript и React-кода блоков.
• Node.js и npm: Используются для управления зависимостями проекта и запуска сборки.
• Create React App или аналогичный инструмент: Для быстрого настройки и создания React-приложения.
• WordPress development environment: Чтобы тестировать созданные блоки в локальной или удаленной среде WordPress.
• WordPress Gutenberg Handbook: Официальное руководство по разработке блоков Gutenberg, которое содержит документацию и примеры кода.

Пример: Вы можете использовать Create React App для создания нового проекта React, а затем установить необходимые зависимости, такие как @wordpress/scripts, для разработки блока Gutenberg. Далее, вы можете начать создавать собственные блоки, используя документацию и примеры кода из WordPress Gutenberg Handbook.

Видео урок: разработка под Gutenberg на WordPress

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

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

Начало процесса:

1. Создание нового проекта: Для начала создадим новый блок с помощью @wordpress/create-block. Напомню что у вас в системе должен быть node & npm. Если вы не устанавливали ранее create-block, то сделайте это сейчас:

npm install -g @wordpress/create-block

2. Теперь вы можете запустить команду чтобы сгенерировать новый блок с помощью @wordpress/create-block. Эта команда создаст структуру проекта внутри каталога my-gutenberg-block. В нем вы найдете файлы и папки, необходимые для разработки блока.

npx @wordpress/create-block my-gutenberg-block
cd my-gutenberg-block

3. Напишем простой код, который будет выводить текст на странице. Откройте файл src/index.js и напишите код:

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <div>Hello, Gutenberg block!</div>,
  save: () => <div>Hello, Gutenberg block!</div>,
});

В этом примере мы создаем блок с заголовком «My Block«, иконкой улыбки и выводим простое сообщение «Hello, Gutenberg block!» в режимах редактирования и сохранения блока (то есть в админке и на фронт части).

4. Регистрация блока. Когда мы создаем блок с помощью @wordpress/create-block, блок автоматически регистрируется в WordPress. Регистрация блока происходит через функцию registerBlockType, которую мы использовали в нашем файле index.js. WordPress автоматически обнаруживает этот блок и делает его доступным для использования в редакторе Gutenberg.

Добавление настроек блока

Давайте добавим пользовательский атрибут content, который будет хранить текст, введенный пользователем в блок:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      default: 'Hello, Gutenberg block!',
    },
  },
  edit: ({ attributes, setAttributes }) => {
    const { content } = attributes;

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

    return (
      <div>
        <TextControl
          value={content}
          onChange={onChangeContent}
          placeholder="Enter your text..."
        />
      </div>
    );
  },
  save: ({ attributes }) => <div>{attributes.content}</div>,
});

В этом примере мы определяем атрибут content для нашего блока и используем компонент TextControl для ввода текста пользователем в режиме редактирования. Мы также используем функцию setAttributes для обновления значения атрибута при изменении содержимого. В режиме сохранения блока мы выводим содержимое атрибута content.

Стилизация блока

Применение стилей к блоку с помощью CSS и inline стилей:

CSS:

• Стилизация блоков Gutenberg осуществляется так же, как и для любых других элементов веб-страницы с помощью CSS.
• Вы можете создать файл стилей (редактировать файл style) в вашем проекте и добавить правила CSS для стилизации вашего блока. Например:

.my-block {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

Затем вы можете добавить класс .my-block к вашему блоку в файле регистрации блока для применения этих стилей.

Inline стили:

• Вы также можете применить стили непосредственно к элементам блока, используя inline стили в React-компонентах (src/index.js). Например:

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <div style={{ backgroundColor: '#f0f0f0', padding: '20px', borderRadius: '5px' }}>Hello, Gutenberg block!</div>,
  save: () => <div>Hello, Gutenberg block!</div>,
});

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

CSS-модули:

• CSS-модули предоставляют способ организации стилей, где каждый модуль имеет свою область видимости.
• Вы можете использовать CSS-модули в вашем проекте, чтобы избежать конфликтов имен и легко управлять стилями для разных компонентов блоков.
• Пример использования CSS-модулей:

/* styles.module.css */
.myBlock {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

import styles from './styles.module.css';

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <div className={styles.myBlock}>Hello, Gutenberg block!</div>,
  save: () => <div>Hello, Gutenberg block!</div>,
});

Библиотеки стилей

• Вы также можете использовать сторонние библиотеки стилей, такие как Bootstrap, Tailwind CSS или Material-UI, чтобы быстро стилизовать ваш блок с использованием готовых компонентов и классов.
• Эти библиотеки предоставляют готовые решения для создания привлекательного и адаптивного дизайна без необходимости писать много собственного CSS.
• Пример использования библиотеки стилей (например, Bootstrap):

import 'bootstrap/dist/css/bootstrap.min.css';

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <div className="bg-light p-4 rounded">Hello, Gutenberg block!</div>,
  save: () => <div>Hello, Gutenberg block!</div>,
});

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

Пример блока с простой логикой:

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

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my-gutenberg-block/my-block', {
  title: 'My Block',
  icon: 'smiley',
  category: 'common',
  edit: ({ attributes, setAttributes }) => {
    const { layout } = attributes;

    const onChangeLayout = newLayout => {
      setAttributes({ layout: newLayout });
    };

    return (
      <div>
        <RadioControl
          label="Layout"
          choices={[
            {
              label: 'Сетка',
              value: 'grid',
            },
            {
              label: 'Список',
              value: 'list',
            },
          ]}
          onChange={onChangeLayout}
          value={layout}
        />
      </div>
    );
  },
  save: ({ attributes }) => {
    const { layout } = attributes;

    switch (layout) {
      case 'grid':
        return (
          <div className="my-block-grid">
            <div>Hello, Gutenberg block!</div>
            <div>This is another block.</div>
          </div>
        );
      case 'list':
        return (
          <ul className="my-block-list">
            <li>Hello, Gutenberg block!</li>
            <li>This is another block.</li>
          </ul>
        );
      default:
        return (
          <div>Hello, Gutenberg block!</div>
        );
    }
  },
});

Заключение

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

Если вы хотите узнать больше о разработке блоков Gutenberg, я рекомендую вам пройти мой курс по WordPress FSE. Я надеюсь, что эта статья была вам полезна.