Как добавить иконки в WordPress блоки Gutenberg без плагинов

Автор: Ксения Полякова | Опубликовано: 03.04.2026

Добавление иконок в блоки Gutenberg — частая задача для разработчиков, стремящихся улучшить визуальное восприятие контента без использования сторонних плагинов. В этой статье мы подробно разберём, как внедрить иконки в свои блоки Gutenberg с помощью чистого кода, используя возможности JavaScript (React) и PHP.

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

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

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

Как создать кастомный блок с иконкой в Gutenberg

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

Регистрация блока и добавление SVG иконки

В файле index.js вашего блока подключите необходимые модули и определите иконку как SVG прямо в коде:

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

const wpiconsGetIcon = () => (
  <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="#000" strokeWidth="2"/>
    <path d="M8 12l2 2 4-4" stroke="#000" strokeWidth="2"/>
  </svg>
);

registerBlockType('wpicons/custom-icon-block', {
  title: 'Блок с иконкой',
  icon: wpiconsGetIcon(),
  category: 'common',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    return (
      <div className="wpicons-block-with-icon">
        {wpiconsGetIcon()}
        <RichText
          tagName="p"
          value={attributes.content}
          onChange={(content) => setAttributes({ content })}
          placeholder="Введите текст..."
        />
      </div>
    );
  },
  save({ attributes }) {
    return (
      <div className="wpicons-block-with-icon">
        {wpiconsGetIcon()}
        <p>{attributes.content}</p>
      </div>
    );
  },
});

Этот пример показывает, как встроить SVG-иконку в описание блока и в сам блок на сайте. Вы можете заменить SVG на свою иконку, адаптировать размер и цвет.

Добавление иконок из FontAwesome в Gutenberg блоки без плагинов

Если вы предпочитаете использовать шрифты иконок, например FontAwesome, можно подключить их вручную и использовать классы иконок прямо в блоках.

Подключение FontAwesome

Добавьте подключение CSS FontAwesome в файл functions.php вашей темы или плагина:

function wpicons_enqueue_fontawesome() {
  wp_enqueue_style('wpicons-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', [], null);
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');
add_action('enqueue_block_editor_assets', 'wpicons_enqueue_fontawesome');

Этот код подключит стили FontAwesome как на сайте, так и в редакторе Gutenberg.

Использование иконок FontAwesome в блоках

В вашем блоке можно вставлять иконки с помощью классов FontAwesome. Пример для блока с иконкой:

registerBlockType('wpicons/fa-icon-block', {
  title: 'Блок с FontAwesome иконкой',
  icon: 'smiley',
  category: 'common',
  edit({ attributes, setAttributes }) {
    return (
      <div className="wpicons-fa-block">
        <i className="fas fa-smile" style={{ fontSize: '24px', color: '#ff6600', marginRight: '8px' }}></i>
        <RichText
          tagName="p"
          value={attributes.content}
          onChange={(content) => setAttributes({ content })}
          placeholder="Введите текст..."
        />
      </div>
    );
  },
  save({ attributes }) {
    return (
      <div className="wpicons-fa-block">
        <i className="fas fa-smile" style={{ fontSize: '24px', color: '#ff6600', marginRight: '8px' }}></i>
        <p>{attributes.content}</p>
      </div>
    );
  },
});

Так вы сможете быстро добавить иконки FontAwesome в свои блоки без плагинов и с минимальными усилиями.

Оптимизация иконок и их стилизация в Gutenberg блоках

После добавления иконок важно правильно их стилизовать и оптимизировать:

Используйте минималистичные SVG или шрифты с нужным набором иконок, чтобы не грузить лишние файлы.
Добавляйте стили через CSS-модули или inline-стили, чтобы легко менять цвет, размер и отступы иконок.
Обеспечьте доступность: добавьте атрибуты aria-hidden="true" для декоративных иконок и используйте aria-label или скрытые тексты для функциональных.

Пример CSS для блока с иконками:

.wpicons-block-with-icon svg {
  vertical-align: middle;
  margin-right: 8px;
  fill: #0073aa;
}

.wpicons-fa-block i {
  vertical-align: middle;
}

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

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

Это реализуется через InspectorControls и состояние React. Ниже упрощённый пример:

import { InspectorControls } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';

const icons = {
  check: <svg>...</svg>,
  smile: <svg>...</svg>,
  star: <svg>...</svg>,
};

registerBlockType('wpicons/dynamic-icon-block', {
  title: 'Динамический блок с иконками',
  icon: 'smiley',
  category: 'common',
  attributes: {
    iconName: { type: 'string', default: 'check' },
    content: { type: 'string', source: 'html', selector: 'p' },
  },
  edit({ attributes, setAttributes }) {
    return (
      <>
        <InspectorControls>
          <SelectControl
            label="Выберите иконку"
            value={attributes.iconName}
            options={Object.keys(icons).map(name => ({ label: name, value: name }))}
            onChange={iconName => setAttributes({ iconName })}
          />
        </InspectorControls>
        <div className="wpicons-dynamic-icon-block">
          {icons[attributes.iconName]}
          <RichText
            tagName="p"
            value={attributes.content}
            onChange={content => setAttributes({ content })}
            placeholder="Введите текст..."
          />
        </div>
      </>
    );
  },
  save({ attributes }) {
    return (
      <div className="wpicons-dynamic-icon-block">
        {icons[attributes.iconName]}
        <p>{attributes.content}</p>
      </div>
    );
  },
});

Таким образом, вы даёте пользователю возможность самостоятельно выбирать иконки, не прибегая к плагинам.

Заключение по добавлению иконок в Gutenberg блоки без плагинов

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

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