Локальные стили WordPress

В блочном редакторе у каждого абзаца, группы или кнопки есть панель оформления. Если выбрать там цвет фона или поменять внутренний отступ, правка коснётся только этого блока на этой странице. Это и есть локальный стиль — самый нижний и самый сильный уровень в каскаде оформления WordPress.

Порядок уровней такой: значения по умолчанию из ядра, затем настройки темы в theme.json, затем глобальные стили, которые пользователь меняет в редакторе сайта, — для всего сайта и для отдельных типов блоков. Последними применяются локальные стили экземпляра. Чем ниже уровень, тем меньше область действия и тем выше приоритет.

Как это выглядит в разметке

Настройки сохраняются в атрибутах блока внутри HTML-комментария и одновременно превращаются в классы и встроенный атрибут style:

<!-- wp:paragraph {"backgroundColor":"accent","style":{"spacing":{"padding":{"top":"1rem"}}}} -->
<p class="has-accent-background-color has-background" style="padding-top:1rem">Текст</p>
<!-- /wp:paragraph -->

Цвет здесь выбран из палитры темы, поэтому записан как имя accent и класс. Класс ссылается на CSS-переменную темы, и смена цвета в палитре изменит этот блок тоже. Если же указать цвет вручную, в разметку попадёт конкретное значение вроде #f5f0e6, и оно останется на странице при любых правках темы.

Чем грозит злоупотребление

Типичная картина на сайте, который год наполняли разные люди: сотни блоков с вручную подобранными оттенками и отступами. Ребрендинг превращается в ручной обход страниц, а вёрстка расползается. Поэтому повторяющееся оформление выносят в глобальные стили или в стили блока — именованные варианты, которые выбирают одной кнопкой.

Как ограничить в теме

Какие панели вообще доступны блоку, определяет его поддержка функций, а тема может сузить выбор. В theme.json настройка "color": { "custom": false } убирает произвольный выбор цвета и оставляет только палитру. Для сайтов с жёстким фирменным стилем это простой способ сохранить единообразие без запретов в инструкции для редакторов.