Структура theme.json
Ниже рассмотрим все возможные параметры файла theme.json.
Структура theme.json:
{
"$schema": 'https://schemas.wp.org/trunk/theme.json',
"version": 3,
"title": '',
"settings": {},
"styles": {},
"customTemplates": {},
"patterns": {},
"templateParts": {},
}
Структура theme.json описывается в классе WP_Theme_JSON{}.
Актуальный список возможных глобальных параметров находится в константе WP_Theme_JSON::VALID_TOP_LEVEL_KEYS.
Если в теме нет файла theme.json, то используется дефолтный файл wp-includes/theme.json.
Офф документация theme.json: https://developer.wordpress.org/themes/global-settings-and-styles/
Пример theme.json файла из темы twentytwentyfour:
$schema
В этом параметре указывается ссылка на схему theme.json файла:
https://schemas.wp.org/trunk/theme.json https://schemas.wp.org/wp/6.8/theme.json
Схема содержит информацию какие параметры и значения могут быть использованы.
Многие редакторы кода (IDE) умеют подхватывать схему и показывать подсказки для автозаполнения.
Добавьте такую строку в theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json"
}
version
Это обязательное поле! Версия theme.json схемы - параметры и значения доступные в конфигурации.
{
"version": 3,
...
}
settings
Основные базовые настройки. Блоки которые поддерживают указанные параметры, но не имеют для них кастомных настроек будут брать эти базовые настройки.
Здесь можно настроить:
- Какие параметры (настройки) должны быть доступны пользователю.
- Цвета по умолчанию, размеры шрифтов, и т.д... доступные пользователю.
- Кастомные свойства CSS и имена классов, используемые в стилях.
- Макет редактора по умолчанию (ширина и доступные выравнивания).
Список возможных параметров (WP 6.8):
Актуальный список поддерживаемых параметров смотрите в константе WP_Theme_JSON::VALID_SETTINGS.
{
"appearanceTools" : true,
"useRootPaddingAwareAlignments" : true,
"background" : { ... },
"border" : { ... },
"color" : { ... },
"custom" : { ... },
"dimensions" : { ... },
"layout" : { ... },
"lightbox" : { ... },
"position" : { ... },
"spacing" : { ... },
"shadow" : { ... },
"typography" : { ... },
}
appearanceTools (true/false)
Включить/отключить сразу несколько настроек оформления. По умолчанию: false.
Если включить то для блоков станет доступны дополнительные настройки: margins, paddings, border-radius.
"settings": {
"appearanceTools": true
}
Это равнозначно включению следующих параметров:
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
},
"color": {
"link": true
},
"dimensions": {
"minHeight": true
},
"position": {
"sticky": true
},
"spacing": {
"blockGap": true,
"margin": true,
"padding": true
},
"typography": {
"lineHeight": true
}
}
Можно переопределить отдельные параметры, например:
"appearanceTools": true,
"position": {
"sticky": false
}
Минусы:
- В будущем WordPress может автоматически включать новые функции, что может быть нежелательно для кастомных тем.
Вывод:
- Для публичных тем — удобно, можно включать.
- Для клиентских проектов — лучше избегать, чтобы не появлялись лишние настройки.
background
Управляет возможностью добавлять фоновые изображения и их настройки в редакторе блоков. C WP 6.3.
По умолчанию отключено:
{
"settings": {
"background": {
"backgroundImage": false,
"backgroundSize": false
}
}
}
Если всключить, то пользвоатель сможет задать фоновое изображение через редактор. Включение этих параметров, включит соответствующие UI-контролы в блоках, которые поддерживают фон (например, Cover, Group).
- backgroundImage(true/false)
Разрешает пользователю добавлять фоновое изображение.
По умолчанию: false
- backgroundSize(true/false)
Включает UI для управления параметрами фонового изображения.
После выбора изображения, можно будет кликнуть на него и вы увидите всплывающее меню с возможностями указать параметры установки фоновой картинки:
Какие параметры можно настраивать:
- Задать фокус-поинт изображения: перетащить маркер или ввести координаты Left/Top в %.
- Включить/отключить фиксированный фон (параллакс-scroll).
- Выбрать режим масштабирования: Cover, Contain или Tile.
- Указать собственную ширину (Auto / px).
- Включить/отключить повторение изображения (Repeat).
По умолчанию: false
border
Позволяет управлять глобальными настройками границ (border) для блоков. Влияет на доступность настроек в интерфейсе, а не на сами стили границ.
По умолчанию: false:
{
"settings": {
"border": {
"color": false,
"style": false,
"width": false,
"radius": false
}
}
}
Каждая из настроек соответствует определённому элементу управления, позволяет включить или отключить определённую возможность указав true или false:
color: включает/отключает выбор цвета границы.style: включает/отключает выбор стиля границы (solid, dashed, dotted).width: включает/отключает ввод ширины границы.radius: включает/отключает выбор радиуса скругления.
С WP 6.3, свойства color, style и width связаны между собой: если одно из них установлено в true, остальные также становятся доступными в интерфейсе.
Установка radius: false не работает для блока button.
color
Настройки связанные с цветами: управление палитрами, дуотонами, градиентами.
Структура поля color:
{
"settings": {
"color": {
"text": true,
"link": true,
"background": true,
"custom": true,
"customGradient": true,
"customDuotone": true,
"defaultPalette": true,
"defaultGradients": true,
"defaultDuotone": true,
"palette": [],
"gradients": []
"duotone": [],
}
}
}
- text (true/false)
- link (true/false)
- background (true/false)
Настройки цветов текста, фона и ссылок. Отвечают за показ/скрытие UI-элементов.
Эти настройки будут доступны, только если сам блок их поддерживает. При этом тема тоже должна разрешить их использование в файле theme.json.
По умолчанию: все true
"settings": { "color": { "background": true, "link": true, "text": true } }
Некоторые блоки (включая сторонние) могут иметь свои нестандартные параметры цвета, которые не управляются через theme.json.
- custom(true/false)
- customGradient(true/false)
- customDuotone(true/false)
Эти настройки указывают разрешать ли пользователю использовать кастомные цвета или ограничить его только палитрой темы.
Это особенно важно, если вы хотите сохранить заданную цветовую систему — например, в клиентском проекте.
По умолчанию: все true
"settings": { "color": { "custom": true, "customDuotone": true, "customGradient": true } }-
custom — позволяет пользователю выбирать любые цвета для блока с помощью цветового выбора (color picker), а не только из заданной палитры темы.
-
customDuotone — разрешает пользователю создавать собственные дуетон-фильтры (эффекты наложения двух цветов).
Дуетон (duotone) применяется как цветовой фильтр поверх изображений (или другого медиа), создавая эффект наложения двух цветов: тени и света.
Этот эффект поддерживается блоками, отображающими изображения. Пользователь может выбрать два цвета — для тени (shadow) и для света (highlight).
-
customGradient — позволяет создавать произвольные градиенты, а не ограничиваться градиентами из пресетов темы.
По умолчанию пользователи могут создавать собственные градиенты и применять их к фону блоков, которые это поддерживают (например, Cover).
-
- defaultPalette (true/false)
Включает/отключает стандартные пресеты палитры цветов, которые предоставляются WordPress.
По умолчанию - true:
"settings": { "color": { "defaultPalette": true } }Если отключить эту опцию, WP всё равно создаст CSS-переменные для своих стандартных пресетов. Это сделано для обратной совместимости: если ранее использовалась другая тема, где такие пресеты были включены.
WordPress по умолчанию предоставляет встроенную цветовую палитру, если тема явно не отключила её. В неё входят следующие предустановленные цвета:
Название цвета Slug HEX-код Black black #000000 Cyan bluish gray cyan-bluish-gray #abb8c3 White white #ffffff Pale pink pale-pink #f78da7 Vivid red vivid-red #cf2e2e Luminous vivid orange luminous-vivid-orange #ff6900 Luminous vivid amber luminous-vivid-amber #fcb900 Light green cyan light-green-cyan #7bdcb5 Vivid green cyan vivid-green-cyan #00d084 Pale cyan blue pale-cyan-blue #8ed1fc Vivid cyan blue vivid-cyan-blue #0693e3 Vivid purple vivid-purple #9b51e0 Эти цвета доступны в выборе для текста, фона, ссылок и других цветовых настроек блоков.
Встроенная палитра WordPress автоматически превращается в набор CSS-переменных и классов.
CSS-переменные:
--wp--preset--color--{slug}--wp--preset--color--vivid-red: #cf2e2e;
CSS-классы:
.has-{slug}-color /* для текста */ .has-{slug}-background-color /* для фона */ .has-{slug}-border-color /* если поддерживается */.has-vivid-red-color { color: var(--wp--preset--color--vivid-red); } .has-vivid-red-background-color { background-color: var(--wp--preset--color--vivid-red); } .has-vivid-red-border-color { border-color: var(--wp--preset--color--vivid-red); }Актуальные данные смотрите в коде файла /wp-includes/theme.json
- defaultDuotone(true/false)
Включает/отключает пресеты дуетон-фильтров, которые предоставляются WordPress из коробки.
По умолчанию - true:
"settings": { "color": { "defaultGradients": true } }Если отключить эту опцию, WP всё равно создаст CSS-переменные для своих стандартных пресетов. Это сделано для обратной совместимости: если ранее использовалась другая тема, где такие пресеты были включены.
WordPress предоставляет несколько встроенных дуетон-фильтров, которые отображаются в блоках с поддержкой дуетона (обычно — изображения и видео). Эти фильтры применяются как наложение из двух цветов: тени и света:
Название фильтра Slug Цвета (тень / свет) Dark grayscale dark-grayscale #000000 / #7f7f7f Grayscale grayscale #000000 / #ffffff Purple and yellow purple-yellow #8c00b7 / #fcff41 Blue and red blue-red #000097 / #ff4747 Midnight midnight #000000 / #00a5ff Magenta and yellow magenta-yellow #c7005a / #fff278 Purple and green purple-green #a60072 / #67ff66 Blue and orange blue-orange #1900d8 / #ffa96b 
Актуальные данные смотрите в коде файла /wp-includes/theme.json
- defaultGradients(true/false)
Включает/отключает пресеты градиентов, которые предоставляются WordPress по умолчанию.
По умолчанию - true:
"settings": { "color": { "defaultGradients": true } }Если отключить эту опцию, WP всё равно создаст CSS-переменные для своих стандартных пресетов. Это сделано для обратной совместимости: если ранее использовалась другая тема, где такие пресеты были включены.
По умолчанию WordPress предлагает набор встроенных градиентов, которые можно использовать в блоках с поддержкой фоновых градиентов. Вот список доступных пресетов:
Название градиента Slug Пример Vivid cyan blue to vivid purple vivid-cyan-blue-to-vivid-purple Light green cyan to vivid green cyan light-green-cyan-to-vivid-green-cyan Luminous vivid amber to luminous vivid orange luminous-vivid-amber-to-luminous-vivid-orange Luminous vivid orange to vivid red luminous-vivid-orange-to-vivid-red Very light gray to cyan bluish gray very-light-gray-to-cyan-bluish-gray Cool to warm spectrum cool-to-warm-spectrum Blush light purple blush-light-purple Blush bordeaux blush-bordeaux Luminous dusk luminous-dusk Pale ocean pale-ocean Electric grass electric-grass Midnight midnight Они отображаются в интерфейсе редактора в разделе "Фон > Градиент (Background > Gradient)", если блок поддерживает такую настройку.
Актуальные данные смотрите в коде файла /wp-includes/theme.json
- palette(array)
Позволяет задать свою палитру цветов ― она заменит дефолтную. Можно создать любое количество цветов.
Каждый цвет задаётся объектом с тремя обязательными свойствами:
color— CSS-значение цвета. Например #ffffff или css переменная.name— название, отображаемое в интерфейсе.slug— уникальный ID (для генерации CSS-переменных и классов).
Пример регистрации трех цветов:
{ "version": 3, "settings": { "color": { "palette": [ { "name": "Base", "slug": "base", "color": "#ffffff" }, { "name": "Contrast", "slug": "contrast", "color": "#000000" }, { "name": "Primary", "slug": "primary", "color": "#89CFF0" } ] } } }Получим:
WordPress автоматически создаст CSS-переменную для каждого из пресетов.
// Формат: --wp--preset--color--{slug} // Примеры: --wp--preset--color--base --wp--preset--color--contrast --wp--preset--color--primaryТакже для каждого цвета будут сформированы css-переменные и css-классы. Например для цвета
base:--wp--preset--color--base— css-переменная доступная на фронте и адмнике..has-base-color— css-класс - применяется к тексту..has-base-background-color— css-класс - применяется к фону.
Нейминг
Официальной схемы нейминга цветов в WordPress нет. Однако два имени стали де-факто стандартами, введёнными темой "Twenty Twenty-Three", это:base― для фонового цвета сайта.contrast― для основного текста.
Зачем это нужно:
- повышает совместимость между темами.
- даёт плагинам предсказуемые цвета по умолчанию (fallback).
- делает тему более устойчивой к будущим изменениям в WordPress.
Доступ к пресетам в другом месте файла theme.json
Иногда может быть нужно получить значения пресетов из раздела settings, например в разделе styles. Сделать это можно через css-переменную:
"color": "var(--wp--preset--color--base)"
Или можно использовать специальную схему
var:preset|{type}|{slug}:"color": "var:preset|color|base"
- gradients(array)
Позволяют зарегистрировать кастомные пресеты градиетов. Можно добавить сколько угодно градиентов — ограничений нет.
Каждый градиент задаётся объектом с тремя полями:
gradient— CSS-значение (например, linear-gradient(...)).name— название (отображается пользователю).slug— уникальный ID (для CSS-переменных и классов).
Пример регистрации двух градиентов:
"settings": { "color": { "gradients": [ { "gradient": "linear-gradient(to right, #10b981, #64a30d)", "name": "Emerald", "slug": "emerald" }, { "gradient": "linear-gradient(-225deg,#231557,#44107a 29%,#ff1361 67%,#fff800)", "name": "Fabled Sunset", "slug": "fabled-sunset" } ] } }
После регистрации:
- градиенты появляются в редакторе блоков (в цветовой панели — «Фон → Градиент»).
- автоматически создаются CSS-переменные:
// Формат: --wp--preset--gradient--{slug} // Примеры: --wp--preset--gradient--emerald --wp--preset--gradient--fabled-sunset - создаются CSS-классы:
.has-emerald-background { ... } .has-fabled-sunset-background { ... }
- duotone(array)
Позволяют зарегистрировать кастомные пресеты дуотон-фильтров (наложений на изображения), которые пользователь сможет применять к изображениям и другим блокам с поддержкой дуетона.
Каждый дуетон-фильтр задаётся объектом с 3 полями:
colors— массив из двух CSS-цветов (тень и свет).name— название, отображаемое пользователю.slug— уникальный идентификатор (используется для классов).
Пример регистрации двух дуетон-пресетов:
"settings": { "color": { "duotone": [ { "colors": [ "#450a0a", "#fef2f2" ], "name": "Red", "slug": "red" }, { "colors": [ "#172554", "#eff6ff" ], "name": "Blue", "slug": "blue" } ] } }
После регистрации:
- WordPress автоматически создаст CSS-переменные для каждого из пресетов.
// Формат: --wp--preset--duotone--{slug} // Примеры: --wp--preset--color--red --wp--preset--color--blue
Duotone не поддерживает CSS-свойства или ссылки CSS и не может быть сгенерирован динамически. Все это обсуждается в этом тикете.
Включает UI-контролы выбора цвета текста и фона для блока Button (core/button).
false— пользователь не сможет поменять цвет кнопки.По умолчанию: true.
- caption(bool)
Добавляет UI-контролы для изменения цвета подписей.
false— цвет будет только по умолчанию, пользователь не сможет его поменять.По умолчанию: true.
- heading(bool)
Разрешает задавать цвета для заголовков (h1–h6) внутри блоков.
Включает возможность выбора цвета текста для заголовков в таких блоках, как:
core/heading,core/post-title.false— редактор не покажет палитру для заголовков — будет использоваться только заданный стиль темы.По умолчанию: true.
dimensions
Позволяет управлять глобальными настройками размеров для блоков.
Позволяет определить, какие элементы управления размерами будут доступны в UI.
Пока (WP 6.8) существует только одно свойство - minHeight.
По умолчанию:
{
"version": 3,
"settings": {
"dimensions": {
"minHeight": false
}
}
}
- minHeight
Определяет будет ли отображаться настройка "Минимальная высота" для блоков, поддерживающих эту функцию.
Укажите true, чтобы включить поддержку этого элемента управления:
"settings": { "dimensions": { "minHeight": true } }Получим:
Встроенные блоки, которые поддерживают опцию "minHeight" — Group и Post Content. Справедливо для WP 6.3.
layout
Настройки, связанные с базовыми настройками отображения (лейаута). Отвечает за ширину контента и "широких" блоков в вашей теме. Это нужно для контроля горизонтального размера блоков.
По умолчанию: не указано
{
"version": 3,
"settings": {
"layout": {
"contentSize": "40rem",
"wideSize": "64rem"
}
}
}
- contentSize(string)
Задаёт базовую ширину контента (например, текста в посте). Поддерживает
px,em,rem,vw,%. Можно выйти за пределы этого размера, указав блоку ширину «wide» или «full».Применяется к вложенным блокам внутри
Post Content,Groupи т.п., если для них включена опция “Inner blocks use content width”.
В большинстве случаев стоит ограничить ширину контента до комфортной для чтения — обычно это 45–75 символов в строке (обычно 40–50rem). На выбор влияет также шрифт и его размер.
Это значение используется как ограничение по ширине для большинства блоков.
- wideSize(string)
Задает ширину для блоков с выравниванием "wide" (.alignwide). Поддерживает
px,em,rem,vw,%.
Нужен когда дизайн позволяет блокам быть шире основной ширины (contentSize), но не на всю ширину экрана. Как правило, находится между шириной contentSize и полной шириной экрана.
wideSize aктивен, только если блок размещён внутри контейнера с
contentSize.Если
wideSizeне задан, блоки с выравниваниемwideмогут вести себя непредсказуемо. Если дизайн узкий и не предполагает широкие блоки — можно не указывать это значение.- allowCustomContentAndWideSize(true/false)
Включает UI-контролы, чтобы вручную задавать размеры ширины контента и alignWide-элементов.
По умолчанию: true
"settings": { "layout": { "allowCustomContentAndWideSize": true } }
- allowEditing(true/false)
Управляет тем, можно ли в целом редактировать layout настройки через UI редактора.
По умолчанию: true
"settings": { "layout": { "allowEditing ": true } }Если указать
false, то этот UI полсностью пропадет:
spacing
Отступы. Дефолтный список параметров:
"spacing": {
"units": [ "rem", "em", "%", "vh", "vw" ],
"blockGap": false,
"customSpacingSize": true,
"margin": false,
"padding": false,
"spacingScale": {
"increment": 1.5,
"mediumStep": 1.5,
"operator": "*",
"steps": 7,
"unit": "rem"
},
"spacingSizes": [
{
"name": "",
"size": "",
"slug": ""
}
]
}
- units(array)
Указывает какие единицы измерения можно использовать при выборе размера:
"units": [ "rem", "em", "%", "vh", "vw", "dvh", "lvh", "svh", "vmin", "vmax", "px" ]
- padding(true/false)
- margin(true/false)
Включает/отключает в UI возможность указывать отступы. По умолачию: true
- blockGap(true/false/null)
Включает/отключает в UI возможность задать расстояние между блоками или элементами flex/grid, у блоков, которые это поддерживают.
- В flow-макетах (по умолчанию) — отступ применяется через CSS-свойство
margin-topк соседним элементам. - В flex/grid-макетах — применяется CSS-свойство
gap.
Возможные значения:
null— отключает UI и авто-генерацию CSS — нужно будет задавать отступы вручную через кастомный CSS.true— включает UI и авто-генерацию стилей.false— отключает UI интерфейс, но остаются автоматически сгенерированные CSS-отступы между блоками, например:
Пример сгенерированного CSS:
.wp-container-17.wp-container-17 > :first-child:first-child { margin-block-start: 0; } .wp-container-17.wp-container-17 > * { margin-block-start: var(--wp--preset--spacing--plus-4); margin-block-end: 0; }ID (17) и значение переменной будут различаться в каждом случае.
- В flow-макетах (по умолчанию) — отступ применяется через CSS-свойство
- spacingSizes(array)
Набор предустановленных отступов для паддингов, маргинов и gap'ов в редакторе.
"settings": { "spacing": { "spacingSizes": [ { "slug": "xs", "name": "XS", "size": "0.25rem" }, { "slug": "sm", "name": "S", "size": "0.5rem" }, { "slug": "md", "name": "M", "size": "1rem" }, { "slug": "lg", "name": "L", "size": "1.5rem" }, { "slug": "xl", "name": "XL", "size": "2rem "} ] } }Где:
slug— Уникальный ID, используется в CSS и классах (10, small, md).name— Название в UI WordPress (можно с переводом).size— CSS-значение в rem, px, %, и т.д.
Для каждого пресета WordPress генерирует CSS переменную и классы:
--wp--preset--spacing--{slug} .has-{slug}-margin .has-{slug}-padding .has-{slug}-gap- spacingScale(array)
Позволяет автоматически генерировать шкалу отступов (spacing) вместо ручного задания каждого значения. Упрощает управление spacing-пресетами.
"spacingScale": { "operator": "*", // + или * - Как строится шкала: прибавлением (+) или умножением (*). "increment": 1.5, // число - Шаг увеличения между значениями. "steps": 7, // число - Сколько значений в шкале генерировать. "mediumStep": 1.5, // число - Среднее значение. "unit": "rem" // string - Единицы измерения: rem, px, em, %, vw, и т.д.. }Чтобы не генерировать такую шкалу, просто не указывайте это поле.
Пример логики
Если задать:
{ "operator": "*", "increment": 1.2, "steps": 10, "mediumStep": 1.5, "unit": "rem" }WordPress сгенерирует примерно такие шаги (css переменные), вокруг mediumStep = 1.5:
--wp--preset--spacing--10 // 1.25rem --wp--preset--spacing--20 // 1.5rem --wp--preset--spacing--30 // 1.8rem // и т.д.
- customSpacingSize(true/false)
Рзрешить ли нет юзерам указывать произвольные отступы (margin/padding/gap) у блоков которые их поддерживают.
Список поддерживаемых единиц:
px % em rem vw vh vmin vmax ch ex cm mm in pc pt
- defaultSpacingSizes (true/false)
Определяет, будет ли WordPress показывать встроенные размеры отступов (предустановки spacing) в редакторе.
"settings": { "spacing": { "defaultSpacingSizes": true } }-
true— WordPress покажет встроенные размеры отступов (например, Small, Medium, Large). false— встроенные размеры не будут отображаться, останутся только кастомные из spacingSizes (если есть).
Связанные параметры:
spacingSizes: ваши собственные размеры.spacingScale: авто-генерация шкалы.customSpacingSize: разрешает вручную вводить значения.
-
typography
Настройки, связанные с типографикой. Пример всех параметров:
"typography": {
"dropCap": false,
"fluid": false,
"letterSpacing": false,
"lineHeight": false,
"textDecoration": true,
"textTransform": true,
"customFontSize": true,
"fontSizes": [
{
"size": "100%",
"slug": "100%",
"name": "",
"fluid": {
"max": "",
"min": ""
},
}
],
"fontFamilies": [
{
"slug": "",
"name": "",
"fontFamily": "",
"fontFace": [
{
"src": "",
"ascentOverride": "",
"descentOverride": "",
"fontDisplay": "fallback",
"fontFamily": "",
"fontFeatureSettings": "",
"fontStretch": "",
"fontStyle": "",
"fontVariant": "",
"fontVariationSettings": "",
"fontWeight": "400",
"lineGapOverride": "",
"sizeAdjust": "",
"unicodeRange": ""
}
]
}
]
},
- dropCap(true/false)
Буквица. По умолчанию: true.
- fluid
- _____
- letterSpacing
- _____
- lineHeight (true/false)
Позволяет пользователям устанавливать произвольный размер высоты строки. По умолчанию: false
- textDecoration
- _____
- textTransform
- _____
- customFontSize(true/false)
Показывать ли UI для ввода произвольного значения font-size. По умолчанию: true.
- fontSizes(array)
Список размеров шрифтов.
"fontSizes": [ { "name": "Small", "slug": "small", "size": "13px" }, { "name": "Normal", "slug": "normal", "size": "16px" } ]
- fontFamilies(array)
- _TODO_
lightbox
_TODO_
position
_TODO_
shadow
_TODO_
custom
_TODO_
useRootPaddingAwareAlignments (true|false)
Управляет тем, куда WP добавит горизонтальные (left, right) паддинги, указанные в styles.spacing.padding (не связано с интерфейсом редактора).
- При
false(по умолчанию) — применяется к<body>. - При
true— применяется к контейнерным блокам (например, Group с layout constrained), а не<body>. Это позволяет элементам с ширинойfullрастягиваться до краёв экрана.
Пример:
"settings": {
"useRootPaddingAwareAlignments": true
},
"styles": {
"spacing": {
"padding": {
"top": "0",
"bottom": "0",
"left": "2rem",
"right": "2rem"
}
}
}
Вертикальные паддинги (top, bottom) не участвуют в этой логике.
Как это работает при true
Если settings.useRootPaddingAwareAlignments: true:
1) В <body> добавляются CSS-переменные:
body {
--wp--style--root--padding-left: 2rem;
--wp--style--root--padding-right: 2rem;
}
2) К блокам добавляется класс has-global-padding:
<div class="wp-block-group has-global-padding is-layout-constrained">
3) В стили добавляются свойства:
.has-global-padding {
padding-left: var(--wp--style--root--padding-left);
padding-right: var(--wp--style--root--padding-right);
}
Как это работает при false
Если settings.useRootPaddingAwareAlignments: false (или не указано):
- Горизонтальные отступы из
styles.spacing.paddingприменяются к элементу<body>. - Контейнерные блоки (например, Group) НЕ получают класс
.has-global-padding. - Полноширинные блоки (full-width) НЕ выходят за пределы паддинга — они ограничены внутренними отступами
<body>. - Итог: весь сайт визуально сжимается внутри горизонтальных отступов.
styles
Настройки стилей. Организованный способ задания CSS свойств. Стили на верхнем уровне будут добавлены в селектор body.
Актуальный список поддерживаемых параметров смотрите в константе WP_Theme_JSON::VALID_STYLES.
- spacing.pagging
Станет «глобальным» padding для корневого (body) контейнера.
"styles": { "spacing": { "padding": "2rem", // одинаковое со всех сторон // или // padding: { "top":"2rem", "right":"1rem", "bottom":"2rem", "left":"1rem" } } }
Создает класс, который применяется к контейнеру блоков или ко всем блокам, зависит от опции useRootPaddingAwareAlignments.
.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }Если включить
settings.useRootPaddingAwareAlignments: true, то это значение учитывается для full-/wide-блоков: контент внутри них будет «отпрыгивать» ровно на указанный padding.- elements
Раздел где можно задать базовые стили для HTML-элементов (не блоков). Всё, что объявлено здесь, WordPress выводит в качестве CSS-переменных и правил, применяемых ко всем соответствующим тегам на фронтенде и в редакторе.
Поддерживаются элементы из коробки:
button link heading h1 h2 h3 h4 h5 h6 caption cite
Какие свойства можно задавать:
Внутри каждого элемента разрешён тот же пакет, что и вstyles—color,typography,spacing,border,shadow,dimensions, а также псевдоселекторы:hover,:focusи т. д.Пример:
"styles": { "elements": { "p": { "typography": { "lineHeight": "var(--line-height-loose)" } }, "button": { "color": { "text": "var(--color-text-on-accent)", "background": "var(--color-accent)" }, ":hover": { "color": { "background": "var(--color-accent-dark)" } }, "spacing": { "padding": { "top": "var(--space-xs)", "bottom": "var(--space-xs)", "left": "var(--space-sm)", "right": "var(--space-sm)" } }, "typography": { "fontWeight": "var(--font-weight-medium)" } }, "h1": { "typography": { "fontSize": "var(--font-size-7xl)" } }, "h2": { "typography": { "fontSize": "var(--font-size-xl)", "fontWeight": "700", "textTransform": "uppercase" } }, "heading": { "typography": { "fontFamily": "var(--font-family-headers)", "lineHeight": "var(--line-height-tight)", "fontWeight": "500", "letterSpacing": "var(--letter-spacing-normal)" } }, "link": { "color": { "text": "currentColor" }, ":hover": { "typography": { "textDecoration": "none" } } } } }
blocks
Позволяет изменить любое свойство любого блока, если этот блок поддерживает нужную настройку.
Чтобы задать настройки для блока, нужно знать его namespace/slug. У стандартных блоков это core/имя_блока. Например: core/button, core/pullquote.
По умолчанию настроеки theme.json работают глобально — применяются ко всем блокам, которые их поддерживают.
Например, глобальные настройки могут выглядеть так:
{
"version": 3,
"settings": {
"border": {},
"color": {},
...
}
}
Но если вы хотите, чтобы конкретный блок (например, Cover) имел свои цвета или стили, вы можете переопределить глобальные настройки в settings.blocks.
Структура - такая же как и у глобальных настроек. Пример:
- Глобально:
settings.color - Для блока:
settings.blocks["core/cover"].color
Пример: своя цветовая палитра для Cover
Глобальные цвета - будут доступны во всех блоках:
{
"settings": {
"color": {
"palette": [
{ "color": "#0284c7", "name": "Base", "slug": "base" },
{ "color": "#ffffff", "name": "Contrast", "slug": "contrast" }
]
}
}
}
Укажем отдельные цвета для блока Cover:
{
"settings": {
"blocks": {
"core/cover": {
"color": {
"palette": [
{ "color": "#ea580c", "name": "Base", "slug": "base" },
{ "color": "#fff7ed", "name": "Contrast", "slug": "contrast" }
]
}
}
}
}
}
Стандартные настройки WordPress
WordPress включает некоторые настройки для блоков по умолчанию (для совместимости со старыми версиями). Пример:
{
"settings": {
"blocks": {
"core/button": {
"border": { "radius": true }
},
"core/pullquote": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
}
}
}
}
Если глобальные настройки не работают на этих блоках — скорее всего, они переопределены на уровне блока. Чтобы изменить поведение, задайте свои значения в settings.blocks.
customTemplates
_TODO_
templateParts
_TODO_
patterns
_TODO_
title / slug / description / blockTypes
Эти параметры относятся к вариациям стилей, читайте о них в соотвествующей статье.
--
Источники: