CSS блока Гутенберга не применяется для предварительного просмотра в редакторе частей шаблона

Я пытаюсь добавить поддержку частей шаблона в свою тему 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))

Но мне нужно, чтобы блок был внутри темы, а не плагина. Как я могу этого добиться?

Я исправил это, используя add_editor_style , чтобы добавить стили блока.

EinLinuus 05.04.2023 11:30
Как убрать количество товаров в категории WooCommerce
Как убрать количество товаров в категории WooCommerce
По умолчанию WooCommerce показывает количество товаров рядом с категорией, как показано ниже.
2
1
144
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Область предварительного просмотра фактически находится внутри <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 работает, но Гутенберг не загружает его в предварительном просмотре полного редактирования сайта. Это работает, если я делаю то же самое, но внутри плагина (см. обновленный вопрос).

EinLinuus 05.04.2023 08:36
Ответ принят как подходящий

Исправлено, отсутствовала следующая строка:

add_editor_style(/* url to block css */);

Другие вопросы по теме