WordPress 6 - встроенные стили контейнера ломают мой сайт

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение

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

Я только что обновил проект до WordPress 6.0.1, и теперь у меня куча встроенных стилей wp-container-*, которые ломают мой сайт:

<style>.wp-container-2 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-2 > * { margin: 0; }</style>
<style>.wp-container-3 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-3 > * { margin: 0; }</style>
<style>.wp-container-5 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-5 > * { margin: 0; }</style>
<style>.wp-container-6 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-6 > * { margin: 0; }</style>
<style>.wp-container-8 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-8 > * { margin: 0; }</style>
<style>.wp-container-9 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-9 > * { margin: 0; }</style>
<style>.wp-container-11 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-11 > * { margin: 0; }</style>
<style>.wp-container-12 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-12 > * { margin: 0; }</style>

Кроме того, также присутствуют стили, которые переопределяют мой стиль для блоков Галереи – например:

<style> .wp-block-gallery-4{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style>

Это переопределяет мой Tailwind CSS, и я не могу понять, откуда они берутся.

Кто-нибудь сталкивался с этим/решал это?

Эти стили применяются через панель настроек блока.

Этот код удалит класс wp-container-id для каждого блока:

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );

Это было найдено на этой странице. Там есть больше советов по удалению стилей блоков и их изменению.

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

function prefix_remove_core_block_styles() {
global $wp_styles;

foreach ( $wp_styles->queue as $key => $handle ) {
    if ( strpos( $handle, 'wp-block-' ) === 0 ) {
        wp_dequeue_style( $handle );
    }
}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );

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

Вопрос, с которым вы столкнулись, связан с нововведением в WordPress 6.0.1, где автоматически генерируются стили <style>, применяемые к блокам с классами wp-container-*. Эта ситуация может создавать конфликты с вашими пользовательскими стилями, например, с Tailwind CSS, и отрицательно влиять на внешний вид вашего сайта.

Теория

Начиная с версии WordPress 5.8 и выше, стало уделяться больше внимания поддержке блоковой структуры (Block Editor и Full Site Editing). В рамках этого подхода стили автоматически добавляются к блокам через классы, такие как wp-container-*, что позволяет более гибко управлять макетом и стильными вариациями блоков. Однако это также означает, что ваши пользовательские стили могут быть переписаны, если их специфичность или порядок включения меньше, чем у этих автоматических стилей.

Пример

В приведенном вами примере наблюдаются стили display: flex;, gap: 0.5em;, и другие, которые применяются к контейнерам. Эти стили призваны помогать в размещении и выравнивании контента, предоставляя функциональность, подобную CSS Grid и Flexbox. Однако они могут причинять неудобства, если применяются там, где вы ожидаете другие оформления.

Применение

Чтобы устранить эту проблему, вы можете использовать несколько стратегий:

Удаление автоматических стилей контейнера:
Используйте функцию remove_filter для удаления стилей контейнера. Код ниже отключит присвоение классов wp-container-*:
```
remove_filter('render_block', 'wp_render_layout_support_flag', 10, 2);
```
Удаление всех стандартных стилей блоков:
Для этого вы можете воспользоваться следующим кодом, который удаляет регистрации всех стилей блоков при загрузке скриптов:
```
function prefix_remove_core_block_styles() {
   global $wp_styles;

   foreach ($wp_styles->queue as $key => $handle) {
       if (strpos($handle, 'wp-block-') === 0) {
           wp_dequeue_style($handle);
       }
   }
}
add_action('wp_enqueue_scripts', 'prefix_remove_core_block_styles');
```
Использование более специфичных стилей:
Сделайте пользовательские стили более специфичными, чтобы они имели преимущество. Например, добавьте дополнительные родительские селекторы перед вашими Tailwind-классами.
Ручное управление стилями:
Если необходимо сохранить автоматическое форматирование, вы можете скопировать нужные стили вручную в свою тему и также изменить или переопределить их там по необходимости.

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

WordPress 6 – встроенные стили контейнера ломают мой сайт

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

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

Теория

Пример

Применение