Как я могу вставить градиент SVG в head или footer редактора блоков?

Содержание

Вопрос или проблема
Ответ или решение
Теория: Градиенты SVG и работа с iFrames
Пример: Инъекция кодов в контекст iFrame
Приложение: Решение проблемы с внедрением стилей в iFrame

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

Я учусь использовать градиенты SVG и хочу включить их в свою блоковую тему.

У меня есть рабочее решение. Вы можете увидеть градиенты в редакторе страниц/постов, и они правильно отображаются на фронтенде. Я внедряю код, используя действие wp_footer.

add_action( 'admin_footer', 'inject_my_svg_gradients' );

Однако градиенты НЕ отображаются при редактировании шаблонов моей блоковой темы в редакторе сайта. Я подозреваю, что это из-за использования iFrame. Хотя admin_footer внедряет код, то, что находится внутри iFrame, не может его увидеть.

Я использовал инспектор браузера, чтобы вручную внедрить код в DOM внутри iFrame, и это работает, что подтверждает мою теорию. Я просто не знаю, как отфильтровать вывод iFrame, чтобы программно внедрить свой код.

Существует ли фильтр, подобный admin_footer, который может сделать это для шаблонов блоковой темы.

Я изучил действие iframe_footer, но это, похоже, не является решением (или я применил его неправильно). Я также просмотрел документацию на:
https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/

Я также не смог найти там подходящее применение, поэтому надеюсь, что кто-то с этими специфическими знаниями сможет указать мне правильное направление. Заранее спасибо.

Это мой внедренный код:

<style type="text/css">
  :root {--svg-g1: url(#primary-svg-gradient);}
</style>
<svg style="position: absolute;" aria-hidden="true" focusable="false">
  <defs>
    <linearGradient id="primary-svg-gradient">
      <stop offset="0%" stop-color="var(--wp--preset--color--gradient-1-color-1)"></stop>
      <stop offset="50%" stop-color="var(--wp--preset--color--gradient-1-color-2)"></stop>
      <stop offset="100%" stop-color="var(--wp--preset--color--gradient-1-color-3)"></stop>
    </linearGradient>
  </defs>
</svg>

Вот так я применяю градиент к SVG на странице:

<svg viewBox="0 0 24 24">
  <path fill="var(--svg-g1)" fill-rule="evenodd" d="blahblahblah"></path>
</svg>

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

Вопрос о внедрении градиентов SVG в редактор блоков WordPress имеет несколько уровней, так как затрагивает элементы стилей, внедрение их в административные интерфейсы, а также работу с iFrames. Давайте рассмотрим теоретическую часть, затем разберёмся с примером и, наконец, перейдём к практическому применению.

Теория: Градиенты SVG и работа с iFrames

SVG Градиенты: SVG (Scalable Vector Graphics) — это формат векторной графики, который используется для создания графики на веб-страницах с возможностью масштабирования. Один из мощных инструментов SVG — градиенты, которые позволяют переходить от одного цвета к другому плавным образом. Это достигается через элементы <linearGradient> и <radialGradient>, задающие цветовые переходы, управляемые параметрами offset, stop-color и др.
Работа с iFrames: iFrames (интерактивные фреймы) часто используются в WordPress для изоляции контента и создания более сложных интерфейсов. Они представляют собой "страницы внутри страниц", что создаёт проблему доступа к стилям и скриптам, находящимся вне iFrame, из-за чего стандартное внедрение стилей не всегда срабатывает. Ваша гипотеза, что iFrames мешают видеть ваши стили, вполне обоснована, поскольку код из admin_footer не перенаправляется в контекст iFrame.

Пример: Инъекция кодов в контекст iFrame

Теперь, давайте разберёмся, как вы смогли вручную внедрить код в iFrame, и почему перед вами стоит задача сделать это программно. При использовании инспектора браузера для вставки кода в DOM внутри iFrame, вы обходите ограничения безопасности, и код сразу становится видимым, что подтверждает правильность вашей гипотезы.

Приложение: Решение проблемы с внедрением стилей в iFrame

Фильтры и хуки WordPress:
- К сожалению, ни admin_footer, ни iframe_footer не отвечают вашим нуждам в данном случае. Что требуется — это использование хуков, специально предназначенных для блока редакторов.
- В WordPress существует механизм фильтров и хуков, который позволяет пользователям вмешиваться в рендеринг контента. Используйте фильтр block_editor_settings_all, который зарезервирован для настройки параметров блокового редактора. Модифицируйте его для добавления ваших SVG-кодов.
Инъекция кода в iFrame:
- Воспользуйтесь следующим методом внедрения CSS в редактор:
```
add_action( 'enqueue_block_assets', 'inject_my_svg_gradients' );
```
function inject_my_svg_gradients() {
if ( is_admin() && function_exists( ‘get_current_screen’ ) && get_current_screen()->is_block_editor() ) {
echo ‘

‘;
}
}
“`
Убедитесь в корректной загрузке стилей:
- Проверьте, чтобы ваш код выполнялся в нужное время. WordPress функцией enqueue_block_assets включает ресурсы, используемые как на фронтенде, так и в редакторе блоков, что должно помочь в вашем случае.
Тестирование и настройка:
- После внесения изменений, важно протестировать работу градиентов как в редакторе блоков, так и на фронтенде. При необходимости, можете обновить кэш браузера, чтобы изменения вступили в силу.

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