Добавление пользовательских социальных иконок в блок иконок социальных сетей в редакторе Gutenberg?

Вопрос или проблема

В wp-includes/blocks/social-link.php есть функция, которая, похоже, настраивает все доступные иконки в массиве вместе с их названиями и SVG-кодом (посмотрите здесь на GitHub)

Можно ли добавить свои собственные социальные ссылки в этот блок (например, XING, которого сейчас нет), добавив функцию в файл functions.php моей темы?

Я попытался использовать add_action для добавления в массив $services_data безуспешно. Добавленная иконка не появилась в параметрах блока.

Если вдруг кто-то ищет это;

Используйте иконку Link и добавьте уникальный стиль к ссылке
добавьте индивидуальные стили ниже, например, для eventbrite

.eventbrite {
background-image:url(‘eventbrite.png’);
background-size:cover;
}
.eventbrite svg {
opacity:0;
}

Если вы используете background-image, вам нужно будет скрыть SVG, который накладывается на него, иначе оба будут видны (если прозрачны), или ваш фоновый рисунок на самом деле не будет виден. Лучше использовать content в вашем пользовательском CSS правиле и нацелиться на элемент якорной ссылки, тогда вам не нужно будет ничего больше делать:

.signal-logo a
{
  content: url("/wp-content/uploads/2025/01/Signal-Logo.svg");
  width: 19px;
  height: 19px;
  -webkit-border-radius: 2px;
  border-radius: 2px;   
}

Теперь, если вы добавите signal-logo как дополнительный CSS-класс к настройкам блока элемента иконки Link, ваша собственная SVG заменит ту, которая содержится в разметке.

Ответ или решение

Добавление пользовательских значков социальных сетей в блок значков социальных медиа в редакторе Gutenberg — это задача, которая может быть выполнена различными методами, даже если вы изначально не получаете видимого результата. Важно понимать, что редактор Gutenberg и система фреймворков WordPress могут ограничивать прямое модифицирование определенных системных функций, таких как добавление новых значков в массив $services_data из файла wp-includes/blocks/social-link.php. Однако есть обходные пути с использованием тематики вашего сайта.

Теория:

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

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

Пример:

В приведенном вами примере попытка использовать add_action для добавления новых данных в $services_data не принесла нужного результата. Вместо этого возможно применять методы CSS для изменения внешнего вида уже имеющихся элементов.

Например, можно воспользоваться стандартной иконкой ссылки и настроить её отображение с помощью CSS:

Найдите существующую иконку ссылки и добавьте ей уникальный стиль.
Используйте CSS для добавления вашего значка в виде фона или контента. При этом можно спрятать исходную SVG иконку.

CSS:

.eventbrite {
  background-image: url('eventbrite.png');
  background-size: cover;
}

.eventbrite svg {
  opacity: 0;
}

Или:

.signal-logo a {
  content: url("/wp-content/uploads/2025/01/Signal-Logo.svg");
  width: 19px;
  height: 19px;
  -webkit-border-radius: 2px;
  border-radius: 2px;   
}

Применение:

Для внедрения этих изменений необходимо добавить CSS-правила в ваш файл style.css вашей темы или в секцию "Дополнительные стили" в панели администрирования WordPress. Затем необходимо применять созданные классы к элементам в редакторе Gutenberg через дополнительные настройки блока социальных иконок.

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

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

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