Я пытаюсь добавить поддержку частей шаблона в свою тему WordPress.
У меня есть блок с таблицей стилей и скриптом, и все работает нормально. Однако в редакторе частей шаблона (Дизайн -> Части шаблона) мои стили загружаются, но не применяются к моему блоку.
Я добавил следующий CSS в таблицу стилей моего блока только для тестирования:
* {
outline: 1px solid red !important;
}
При редактировании страницы (Страницы -> (некоторая страница) -> редактировать) работает, каждый элемент получает красную рамку.
Однако в редакторе части шаблона это выглядит так:
Здесь красная рамка применяется ко всем элементам, кроме элементов в области предварительного просмотра, что означает, что мой предварительный просмотр вообще не оформлен.
Но это влияет только на превью, на обычном сайте все оформлено правильно.
Я также добавляю собственный тег стиля с помощью хука enqueue_block_assets
, и этот стиль также не применяется к окну предварительного просмотра части шаблона (но он применяется везде).
Что я делаю не так?
Я создал плагин, который делает то же самое, и он работает. Еще немного тестирования, и похоже, что это не работает, когда блок находится внутри темы.
// It works when I do this
register_block_type(ABSPATH . "/wp-content/plugins/<plugin_name>/header");
// But not when I do this
register_block_type(ABSPATH . "/wp-content/themes/<theme_name>/blocks/header");
// (both header folders are the exact same (plugin & theme))
Но мне нужно, чтобы блок был внутри темы, а не плагина. Как я могу этого добиться?
Область предварительного просмотра фактически находится внутри <iframe>
, в котором загружены встроенные стили и стили темы и блока, которые имеют приоритет над добавленным вами стилем * {...}
, например:
Холст редактора
<iframe name = "editor-canvas" tabindex = "0" srcdoc = "<!doctype html><style>html{height:auto!important;}body{margin:0}</style>...</iframe>
Хук, который вы ищете, это enqueue_block_editor_assets, если вы просто хотите добавить стили, специфичные для редактора, которые не влияют на внешний интерфейс.
Спасибо за ответ. Я провел еще несколько тестов и обновил свой вопрос - CSS работает, но Гутенберг не загружает его в предварительном просмотре полного редактирования сайта. Это работает, если я делаю то же самое, но внутри плагина (см. обновленный вопрос).
Исправлено, отсутствовала следующая строка:
add_editor_style(/* url to block css */);
Я исправил это, используя
add_editor_style
, чтобы добавить стили блока.