wpnext
github wpnext
Cover Image for WordPress 6.9 добавит расширяемые кастомные иконки для блока Social Icons

WordPress 6.9 добавит расширяемые кастомные иконки для блока Social Icons

23 октября 2025

Теперь авторы тем и плагинов могут регистрировать собственные социальные сервисы, SVG-иконки и фирменные цвета без хака и форков.

Спустя почти шесть лет после появления запроса на расширяемую архитектуру для блока Social Icons, решение готово: изменения доставлены в Gutenberg 21.1 и войдут в WordPress 6.9, релиз которого запланирован на 2025-12-02.

  • Новое: поддержка расширений для Social Icons в редакторе и на фронтенде.
  • Тестировать уже можно с Gutenberg 21.1+; в продакшен — с WordPress 6.9.
  • Ключевой серверный хук: block_core_social_link_get_services.
  • Иконки в редакторе — через вариации core/social-link.
  • Бренд-стили — через CSS и wp_enqueue_block_style для core/social-links.

Как это работает

На стороне редактора иконки — это вариации блока core/social-link. Их регистрация выполняется JS-функцией registerBlockVariation из @wordpress/blocks с использованием SVG из @wordpress/primitives.

import { registerBlockVariation } from '@wordpress/blocks';
import { SVG, Path } from '@wordpress/primitives';

registerBlockVariation('core/social-link', {
  name: 'kofi',
  title: 'Ko-fi',
  icon: (
    <SVG viewBox="0 0 24 24" role="img">
      <Path d="..." />
    </SVG>
  ),
  attributes: { service: 'kofi' },
  isActive: ['service']
});

Важные поля: attributes.service — уникальный ключ сервиса; isActive — указывает, когда вариация активна.

Вывод иконок на фронтенде

Чтобы сервер знал о ваших сервисах и их SVG, используйте новый фильтр block_core_social_link_get_services. В нём добавьте имя и SVG-иконку:

add_filter( 'block_core_social_link_get_services', function( array $services ) {
  $services['kofi'] = [
    'name' => 'Ko-fi',
    'icon' => '<svg viewBox="0 0 24 24" ...><path d="..."/></svg>'
  ];
  return $services;
});

Подключение ассетов

Скрипт для редактора подключайте через enqueue_block_editor_assets после сборки с @wordpress/scripts:

add_action( 'enqueue_block_editor_assets', function() {
  // wp_enqueue_script('devblog-custom-social-icons', 'build/index.js', ...);
});

Стили брендов (например, для вариации «Logos only» и обычного режима) — через wp_enqueue_block_style для core/social-links:

:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-kofi { color: #72A5F2; }
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-kofi {
  background-color: #72A5F2; color: #fff;
}

Что учесть

  • Соблюдайте бренд-гайды: точные цвета, корректные SVG.
  • Используйте уникальные service-ключи и короткие, оптимизированные SVG.
  • Для тестов нужна Gutenberg 21.1+; после релиза 6.9 можно без плагина Gutenberg.

Итог: с WordPress 6.9 расширение Social Icons становится штатной практикой. Добавляйте нужные сети, синхронизируйте фронтенд и редактор и оформляйте по бренду — без костылей.

Ещё почитать