Вопрос или проблема
Я учусь использовать градиенты 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 обрабатывает вывод, особенно когда дело касается использования iFrame, который выступает значительным препятствием в данной задаче. Основная проблема заключается в том, что ваша функция inject_my_svg_gradients, которая срабатывает при действии admin_footer, не достигает внутреннего содержимого iFrame, в котором загружаются блоки вашего редактора тем. По этой причине градиенты не отображаются во время редактирования шаблонов в редакторе сайта. Мы рассмотрим, как решить эту проблему с учетом специфики вашей задачи.
Теоретическое обоснование
Проблема с iFrame: iFrames используются для изоляции содержимого и стилей, предотвращая неконтролируемое вмешательство в содержимое веб-страницы. Это особенно актуально для редакторов контента, которые должны оставаться стабильными и безопасными во время редактирования.
WordPress и фильтры: В WordPress имеются различные действия и фильтры, с помощью которых можно изменять и расширять функциональность. Однако фильтры для работы с контентом внутри iFrame могут не подходить под стандарты, так как требуется вмешательство непосредственно в содержимое iFrame.
Пример решения
С учетом вышеизложенного, для внедрения вашего SVG градиента в редактор тем в iFrame, попробуем другое решение:
- Добавление CSS и SVG в
enqueue_block_editor_assets: Мы будем использовать хук, который позволит добавить CSS и SVG внутри редактора блоков.
add_action('enqueue_block_editor_assets', 'inject_svg_gradient_into_editor');
function inject_svg_gradient_into_editor() {
echo '<style>
:root {--svg-g1: url(#primary-svg-gradient);}
</style>';
echo '<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 offset="50%" stop-color="var(--wp--preset--color--gradient-1-color-2)" />
<stop offset="100%" stop-color="var(--wp--preset--color--gradient-1-color-3)" />
</linearGradient>
</defs>
</svg>';
}-
Проверка корректности использования цветов: Убедитесь, что CSS-переменные, используемые для градиентов (например,
--wp--preset--color--gradient-1-color-1), определены в контексте редактора. Если используемые вами переменные цветов не объявлены, градиент не будет работать. -
Дополнительная обработка события рендера: Если предыдущие шаги не помогают, можно попробовать использовать JavaScript для динамического добавления SVG и CSS в iFrame. Если в интерфейсе WordPress не срабатывает стандартный метод, иногда динамическое обновление DOM через JavaScript оказывается более надежным:
(function($) {
$(document).ready(function() {
if (wp.data) {
wp.data.subscribe(() => {
const iframe = document.querySelector('iframe[name="editor-canvas"]');
if (iframe && !iframe.contentDocument.querySelector('#primary-svg-gradient')) {
const style = iframe.contentDocument.createElement('style');
style.innerHTML = ':root { --svg-g1: url(#primary-svg-gradient); }';
iframe.contentDocument.head.appendChild(style);
const svg = iframe.contentDocument.createElement('svg');
svg.setAttribute('style', 'position: absolute;');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
svg.innerHTML = `
<defs>
<linearGradient id="primary-svg-gradient">
<stop offset="0%" stop-color="var(--wp--preset--color--gradient-1-color-1)" />
<stop offset="50%" stop-color="var(--wp--preset--color--gradient-1-color-2)" />
<stop offset="100%" stop-color="var(--wp--preset--color--gradient-1-color-3)" />
</linearGradient>
</defs>`;
iframe.contentDocument.body.appendChild(svg);
}
});
}
});
})(jQuery);Применение на практике
Имплементация этих изменений потребует тестирования и возможно некоторых корректировок в зависимости от точной версии WordPress и других установленных плагинов, которые могут повлиять на работу редактора. Убедитесь, что все настройки и зависимости (цветовые схемы, темы) сочетаются и корректно реализованы.
Внедряя такие скрипты, всегда проверяйте совместимость с будущими обновлениями WordPress, чтобы избежать потенциальных конфликтов. Эта реализация демонстрирует возможность управления контентом внутри iFrame без потребности в сложных манипуляциях, предоставляя соответствующее взаимодействие с редактором блоков.