Почему подключение стилей в редактор сбивает стандартные стили?

Ссылка скопирована
CSS PHP
1 ответ

Здравствуйте. Так подключаю свой файл стилей в functions.php

add_action( 'after_setup_theme', 'gutenberg_setup_theme' ); function gutenberg_setup_theme(){ 	add_theme_support( 'editor-styles' ); 	add_editor_style( 'editor-style.css' ); }

add_action( 'after_setup_theme', 'gutenberg_setup_theme' ); function gutenberg_setup_theme(){ add_theme_support( 'editor-styles' ); add_editor_style( 'editor-style.css' ); }

Но почему-то это сбивает стандартные стили редактора. Размер заголовков меньше, межстрочный интервал и прочее. Проблема не в плагинах- проверял на чистой теме. Как исправить, чтобы подключаемые стили применялись вместе со стандартными?

Дополнительные вопросы

Ответы:

Вопрос актуален. Никто из присутствующих не знает как правильно подключать стили к Гуттенбергу?

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Максим Павлов Ответ

add_editor_style() подключает ваш CSS внутрь редактора, и этот CSS становится частью среды редактирования. Если в файле есть глобальные правила вроде body, h1, p, *, они могут перебивать стандартные стили редактора. Поэтому кажется, что «сбиваются» размеры заголовков и интервалы.

Решение — писать стили редактора максимально scoped, под контентную область, а не глобально. В Gutenberg обычно используется контейнер .editor-styles-wrapper.

.editor-styles-wrapper .wp-block {
    max-width: 860px;
}
 
.editor-styles-wrapper .wp-block-heading {
    font-family: inherit;
}
 
.editor-styles-wrapper p {
    line-height: 1.7;
}

.editor-styles-wrapper .wp-block { max-width: 860px; } .editor-styles-wrapper .wp-block-heading { font-family: inherit; } .editor-styles-wrapper p { line-height: 1.7; }

Не стоит в editor-style.css делать так:

body {
    font-size: 14px;
    line-height: 1.2;
}
 
h1, h2, h3 {
    margin: 0;
}

body { font-size: 14px; line-height: 1.2; } h1, h2, h3 { margin: 0; }

Такие правила действительно меняют поведение редактора.

Если хотите добавить стили темы, а не заменить редактор, подключайте только те правила, которые нужны для визуального соответствия контента: ширина, типографика, таблицы, цитаты, кнопки. Не переносите весь frontend CSS в редактор, особенно сетки, header, footer и reset.

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

.editor-styles-wrapper .my-note-block {
    padding: 16px;
    border: 1px solid #dbe5ff;
}

.editor-styles-wrapper .my-note-block { padding: 16px; border: 1px solid #dbe5ff; }

Итог: проблема не в самом add_editor_style, а в слишком широких CSS-правилах. Ограничьте стили областью редактора и не подключайте полный фронтенд-стайл как editor-style.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ 1С-Битрикс Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками? 1 ответ