Как создать иконку для WordPress блока Gutenberg с помощью React

В разработке собственных блоков Gutenberg для WordPress часто возникает необходимость добавить уникальную иконку, которая будет отображаться в редакторе рядом с названием блока. Это помогает визуально выделить блок и улучшить UX при создании контента. В данной статье подробно разберём, как создать и добавить кастомную SVG-иконку в блок Gutenberg с помощью React, а также рассмотрим несколько вариантов реализации.

Почему важно использовать кастомные иконки для блоков Gutenberg

По умолчанию при регистрации блока в WordPress можно использовать стандартные иконки Dashicons или SVG-спрайты. Однако для фирменного стиля или уникальности интерфейса часто требуется собственная иконка. Это помогает:

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

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

Как WordPress обрабатывает иконки блоков в редакторе

При регистрации блока через функцию registerBlockType в объекте настроек можно указать параметр icon. Он может принимать:

• Строку с названием Dashicon (например, "smiley").
• JSX-элемент — React-компонент с вашей SVG-иконкой.
• Объект с ключами src (строка или JSX), foreground и background для цветового оформления.

Использование JSX — наиболее гибкий способ, особенно если иконка сложная или анимированная.

Пример: добавление кастомной SVG-иконки через React

Рассмотрим простой пример, как добавить SVG-иконку прямо в код блока. Создадим компонент иконки и передадим его в параметр icon при регистрации блока.

const WpiconsIcon = () => ( 
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10" stroke="#0073aa" strokeWidth="2" />
    <path d="M8 12l2 2 4-4" stroke="#0073aa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

wp.blocks.registerBlockType('wpicons/custom-icon-block', {
  title: 'Блок с кастомной иконкой',
  icon: WpiconsIcon,
  category: 'common',
  edit() {
    return <p>Это блок с собственной иконкой</p>;
  },
  save() {
    return <p>Это блок с собственной иконкой</p>;
  }
});

В этом примере мы создали простой SVG с кругом и галочкой, закодировали его в React-компонент и передали в параметр icon. При открытии редактора блок будет отображаться с нашей иконкой.

Использование внешних SVG-файлов и оптимизация

Если иконка сложная и хранится в отдельном SVG-файле, её можно импортировать с помощью Webpack или других сборщиков, если настройка проекта это позволяет. Например:

import MyIcon from './icon.svg';

wp.blocks.registerBlockType('wpicons/custom-icon-block', {
  icon: MyIcon,
  // остальные параметры
});

Если вы не используете сборщик, можно вставить содержимое SVG в React-компонент вручную, как показано выше. Для оптимизации SVG используйте инструменты типа SVGO.

Динамическая смена цвета иконки через свойства блока

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

const WpiconsIcon = ({ color = '#0073aa' }) => ( 
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2" />
    <path d="M8 12l2 2 4-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

wp.blocks.registerBlockType('wpicons/custom-icon-block', {
  title: 'Блок с динамической иконкой',
  icon: () => <WpiconsIcon color="#d54e21" />,
  category: 'common',
  edit() {
    return <p>Блок с цветной иконкой</p>;
  },
  save() {
    return <p>Блок с цветной иконкой</p>;
  }
});

Так вы можете, например, менять цвет иконки в зависимости от состояния (активен/неактивен) или настроек в панели управления блоком.

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

Для упрощения работы с иконками можно использовать готовые плагины и библиотеки:

• WP SVG Icons — большой набор SVG-иконок с возможностью вставки в блоки и виджеты.
• Advanced Custom Fields (ACF) с поддержкой SVG для создания настраиваемых иконок в полях.
• WPGPT — плагин с расширенными возможностями генерации блоков и иконок через AI и React.

Использование таких инструментов ускоряет разработку и улучшает качество иконок.

Советы по отладке и тестированию иконок в Gutenberg

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

• Проверьте отображение иконки в разных браузерах и разрешениях.
• Убедитесь, что SVG корректно масштабируется и не искажает пропорции.
• Тестируйте иконку в темной и светлой схемах редактора, чтобы цвета были читабельны.
• Используйте инструменты разработчика для проверки кода и стилей иконки.

Это поможет избежать проблем с визуализацией и улучшить UX блоков.

Заключение

Создание кастомных иконок для блоков Gutenberg с помощью React — мощный инструмент для разработчиков, позволяющий сделать интерфейс редактора более удобным и брендированным. Используйте React-компоненты с SVG, оптимизируйте файлы и учитывайте динамическое управление цветом для максимальной гибкости.

Если хотите расширить возможности, рекомендуем обратить внимание на WPGPT — плагин, который поможет автоматизировать создание иконок и блоков на основе AI и React.