Структура theme.json
Ниже рассмотрим все возможные параметры файла theme.json.
Аналогичная документация по block.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 файла из темы twentytwentyfive:
Доступ к пресетам в другом месте файла theme.json
Чтобы получить значения пресетов из раздела settings, например в разделе styles, можно использовать css-переменную:
"color": "var(--wp--preset--color--base)"
Или специальную схему var:preset|{type}|{slug}:
"color": "var:preset|color|base" "fontSize": "var:preset|font-size|xx-large"
Важно: {type} и {slug} должны быть такие же какие они получатся при генерации пременной. Тут важно знать, что при геренации переменной camelCase превращается в snake-case и числа отделяются знаком -. Например:
"settings": {
"typography": {
"fontSizes": [
{ "name":"2xs", "slug":"2xs", "size":"20px" }
]
}
}
Получим переменную --wp--preset--font-size--2-xs, т.е. указывать нужно как: var:preset|font-size|2-xs
$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 (bool)
Включить/отключить сразу несколько настроек оформления. По умолчанию: 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(bool)
Разрешает пользователю добавлять фоновое изображение.
По умолчанию: false
- backgroundSize(bool)
Включает UI для управления параметрами фонового изображения.
После выбора изображения, можно будет кликнуть на него и вы увидите всплывающее меню с возможностями указать параметры установки фоновой картинки:
Какие параметры можно настраивать:
- Задать фокус-поинт изображения: перетащить маркер или ввести координаты Left/Top в %.
- Включить/отключить фиксированный фон (параллакс-scroll).
- Выбрать режим масштабирования: Cover, Contain или Tile.
- Указать собственную ширину (Auto / px).
- Включить/отключить повторение изображения (Repeat).
По умолчанию: false
border
Позволяет управлять глобальными настройками границ (border) для блоков. Влияет на доступность настроек в интерфейсе, а не на сами стили границ.
По умолчанию: false:
{
"settings": {
"border": {
"color": false,
"style": false,
"width": false,
"radius": false,
"radiusSizes": []
}
}
}
Каждая из настроек соответствует определённому элементу управления, позволяет включить или отключить определённую возможность указав true или false:
color: включает/отключает выбор цвета границы.style: включает/отключает выбор стиля границы (solid, dashed, dotted).width: включает/отключает ввод ширины границы.radius: включает/отключает выбор радиуса скругления.radiusSizes: Пресеты для выбора border radius в формате:[ { name, slug, size } ]
С 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 (bool)
- link (bool)
- background (bool)
Настройки цветов текста, фона и ссылок. Отвечают за показ/скрытие UI-элементов.
Эти настройки будут доступны, только если блок их поддерживает.
По умолчанию: все true
"settings": { "color": { "background": true, "link": true, "text": true } }
Некоторые блоки (включая сторонние) могут иметь свои нестандартные параметры цвета, которые не управляются через theme.json.
- custom(bool)
Включает возможность задавать произвольные цвета с помощью цветового выбора (color picker).
Если отключить, все равно останется возможность добавлять произвольные цвета в палитру через Редактор сайта > Стили.
По умолчанию: все true
"settings": { "color": { "custom": true } }
Настройка пригодится, когда вы хотите сохранить заданную цветовую систему — например, в клиентском проекте.
- defaultPalette(bool)
Включает/отключает стандартные пресеты палитры цветов, которые предоставляются 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
- 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.
- customGradient(bool)
Позволяет задавать произвольные градиенты, а не ограничиваться градиентами из пресетов темы.
По умолчанию (true) пользователи могут создавать собственные градиенты и применять их к фону блоков, которые это поддерживают (например, Cover).
По умолчанию: все true
"settings": { "color": { "customGradient": true } }
- defaultGradients(bool)
Включает/отключает пресеты градиентов, которые предоставляются 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
- 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 { ... }
- customDuotone (bool)
Разрешает пользователю задавать произвольные дуетон-фильтры (эффекты наложения двух цветов).
Дуетон (duotone) применяется как цветовой фильтр поверх изображений (или другого медиа), создавая эффект наложения двух цветов: тени и света. Реализуется через css свойство
filter:#svg_id(svg фильтр генерируется налету).Этот эффект поддерживается блоками, отображающими изображения. Пользователь может выбрать два цвета — для тени (shadow) и для света (highlight).
По умолчанию: все true
"settings": { "color": { "customDuotone": true } }
- defaultDuotone (bool)
Включает/отключает пресеты дуетон-фильтров, которые предоставляются 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
- duotone(array)
Позволяют зарегистрировать кастомные пресеты дуотон-фильтров (наложений на изображения), которые пользователь сможет применять к изображениям и другим блокам с поддержкой дуетона.
Каждый дуетон-фильтр задаётся объектом с 3 полями:
-
colors— массив из двух CSS-цветов (тень и свет).Поддерживатеся только
hexилиrgbстроки. Если укзаать например значение переменно, то мы получим такое сообщение:Function WP_Duotone::get_filter_svg() was called incorrectly.
var(--var-base)in theme.jsonsettings.color.duotoneis not a hex or rgb string. -
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.
shadow
Управляет пресетами теней (box-shadow). Не относится к text-shadow.
Параметры:
- defaultPresets(true|false)
- Вкл/откл стандартные пресеты WordPress.
По умолчанию: true. - presets(array)
- Список пользовательских пресетов теней.
Для каждого пресета создаётся переменная:
--wp--preset--shadow--{slug}
Стандартные пресеты WordPress (при defaultPresets: true):
natural: 6px 6px 9px rgba(0,0,0,0.2)deep: 12px 12px 50px rgba(0,0,0,0.4)sharp: 6px 6px 0 rgba(0,0,0,0.2)outlined: 6px 6px 0 -3px rgba(255,255,255,1), 6px 6px rgba(0,0,0,1)crisp: 6px 6px 0 rgba(0,0,0,1)
Пример: Отключение стандартных теней:
{
"settings": {
"shadow": {
"defaultPresets": false
}
}
}
Пример: Добавление своих теней
{
"settings": {
"shadow": {
"defaultPresets": false,
"presets": [
{ "name": "Small", "slug": "sm",
"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
{ "name": "Medium", "slug": "md",
"shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
{ "name": "Large", "slug": "lg",
"shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
{ "name": "XL", "slug": "xl",
"shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" },
{ "name": "2XL", "slug": "2-xl",
"shadow": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" },
{ "name": "Inner", "slug": "inner",
"shadow": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" }
]
}
}
}
Применение:
-
В админке: Внешний вид → Редактор → Styles → Style Book → Button → Effects → Shadow.
- В коде: box-shadow: var(--wp--preset--shadow--sm).
dimensions
Позволяет управлять глобальными настройками размеров для блоков.
Позволяет определить, какие элементы управления размерами будут доступны в UI.
Пока (WP 6.8) существует только одно свойство - minHeight.
По умолчанию:
{
"version": 3,
"settings": {
"dimensions": {
"minHeight": false,
"width": false,
"aspectRatio": false,
"aspectRatios": [],
"defaultAspectRatios": true
}
}
}
- minHeight(bool)
Определяет будет ли отображаться настройка "Минимальная высота" для блоков, поддерживающих эту функцию.
Укажите true, чтобы включить поддержку этого элемента управления:
"settings": { "dimensions": { "minHeight": true } }Получим:
Встроенные блоки, которые поддерживают опцию "minHeight" — Group и Post Content. Справедливо для WP 6.3.
- width(bool)
Allow users to set custom width.
Default: false
- aspectRatio(bool)
Allow users to set an aspect ratio.
Default: false
- aspectRatios
Allow users to define aspect ratios for some blocks.
Default: []
- defaultAspectRatios(bool)
Allow users to choose aspect ratios from the default set of aspect ratios.
Default: true
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 (bool)
Включает UI-контролы, чтобы вручную задавать размеры ширины контента и alignWide-элементов.
По умолчанию: true
"settings": { "layout": { "allowCustomContentAndWideSize": true } }
- allowEditing (bool)
Управляет тем, можно ли в целом редактировать 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 (bool)
- margin (bool)
Включает/отключает в UI возможность указывать отступы. По умолачию: true
- blockGap(bool/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 (bool)
Рзрешить ли нет юзерам указывать произвольные отступы (margin/padding/gap) у блоков которые их поддерживают.
Список поддерживаемых единиц:
px % em rem vw vh vmin vmax ch ex cm mm in pc pt
- defaultSpacingSizes (bool)
Определяет, будет ли 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 (bool)
Буквица. По умолчанию: true.
- fontStyle (bool)
_TODO_ Allow users to set custom font styles.
Default: true
- fontWeight (bool)
_TODO_ Allow users to set custom font weights.
Default: true
- letterSpacing (bool)
_TODO_ Allow users to set custom letter spacing.
Default: true
- lineHeight (bool)
Позволяет пользователям устанавливать произвольный размер высоты строки.
По умолчанию: false
- textAlign (bool)
_TODO_ Allow users to set the text align.
Default: true
- textColumns (bool)
_TODO_ Allow users to set the number of text columns.
Default: false
- textDecoration (bool)
_TODO_ Allow users to set custom text decorations.
Default: true
- textTransform (bool)
- _TODO_
- writingMode (bool)
_TODO_ Allow users to set the writing mode.
Default: false
- defaultFontSizes (bool)
_TODO_ Allow users to choose font sizes from the default font size presets.
Default: true
- customFontSize (bool)
Показывать ли UI для ввода произвольного значения font-size. По умолчанию: true.
- fontSizes(array)
Задает список размеров шрифтов, которые можно будет выбрать в редакторе.
"fontSizes": [ { "name": "Small", "slug": "small", "size": "13px" }, { "name": "Normal", "slug": "normal", "size": "16px" } ]
Параметр fluid:
Параметр
fluidвнутри массиваfontSizesпозволяет задать гибкий (адаптивный) размер шрифта, который меняется в зависимости от ширины экрана.Например:
"fontSizes": [ { "name": "Small", "slug": "sm", "size": "2rem", "fluid": true, }, { "name": "Medium", "slug": "md", "size": "3rem", "fluid": { "min":"1rem", "max":"3rem" } }, ]Возможные значения параметра fluid:
- true — Указанный размер будет взять как максимальный, а минимальные будут высчитаны атоматически.
- false — Флюид-типографика будет отключена.
- object — Включает адаптацию под указанные
{ min, max }размеры.
Подробнее смотрите параметре settings.typography.fluid, где также можно настроить глобальные параметры.
- fluid
Включает и позволяет указать настройки для адаптивных размеров шрифта (fluid typography) для всех размеров шрифта указанных в
fontSizes."typography": { "fluid": { "minFontSize": "12px", "minViewportWidth": "375px", "maxViewportWidth": "1280px" } }Параметры:
-
true — Включает адаптивные размеры шрифтов.
-
false — Отключает адаптивные размеры шрифтов. Однако можно будет указать адаптивный размер для отдельного размера ширфта в fontSizes.
-
object — Параметры для подсчета значений в clamp() функции.
-
minFontSize — (px, rem) Нижняя граница возможного размера шрифта. Если формула предполагает размер меньше, то будет взят этот размер.
По умолчанию: 16px -
minViewportWidth — (px, rem) Минимальная ширина экрана начиная с которой шрифт будет увеличиваться.
По умолчанию: 320px - maxViewportWidth — (px, rem) Максимальная ширина экрана дойдя до которой шрифт перестанет увеличиваться.
По умолчанию: 1280px
-
Как работает:
Если указать fluid, WordPress автоматически сгенерирует значение размера шрифта как clamp():
--wp--preset--font-size--myslug: clamp( min, calc(...), max );
Пример результата:
clamp(2.364rem, 2.364rem + ((1vw - 0.2rem) * 3.497), 4.375rem);
Благодаря этому размер будет плавно масштабироваться между min и max при изменении ширины окна.
Как высчитывается:
Смотрите функцию wp_get_typography_font_size_value()
/** * Гайд по расчету Fluid-отступов * ------------------------------ * Шаг 1: Определяем значение 1vw в rem для ключевых брейкпоинтов: * Формула: vw_rem = (ширина_экрана_px / 100) / размер_корневого_шрифта_px * Пример: (375 / 100) / 16 = 0.234rem * * Значения 1vw: * 375px → 0.234rem * 576px → 0.360rem * 768px → 0.480rem * 1024px → 0.640rem * 1280px → 0.800rem * 1440px → 0.900rem * 1920px → 1.200rem * * Шаг 2: Считаем наклон (slope) для clamp(): * font_min = 1rem (16px) * font_max = 3rem (48px) * font_range = font_max - font_min * = 3rem - 1rem = 2rem (32px) * * vw_range = 1vw(1440) - 1vw(768) * = 0.900rem - 0.480rem = 0.420rem (6.72px) * * slope = font_range / vw_range * = 2rem / 0.420rem = 4.761 (≈76.19px на 1vw изменения) * * Шаг 3: Итоговая формула clamp(): * clamp( * font_min, // минимум при ≤768px * font_min + ((1vw - 0.480rem) * slope), // рост между 768px–1440px * font_max // максимум при ≥1440px * ) * * Пример (768→1440px, середина ~2rem): * --fluid-space: clamp(1rem, 1rem + ((1vw - 0.480rem) * 4.761), 3rem); * ИЛИ короче (раскроем скобки): * --fluid-space: clamp(1rem, -1.285rem + 4.761vw, 3rem); */
Онлайн сервис: https://clamp.font-size.app/
-
- fontFamilies(array)
Позволяет регистрировать шрифты, которые будут доступны в панели настроек блока (если блок поддерживает выбор шрифта) Typography → Font.
В значении нужно передать массив объектов. Каждый объект может иметь следующие свойства:
-
name(обязательно)
Название шрифта. Отображается при выборе в настройках. -
slug(обязательно)
Слаг (ярлык).Используется в CSS-переменной:
--wp--preset--font-family--{slug}Рекомендуется указывать семантическое имя (primary, secondary), чтобы не зависеть от конкретного шрифта.
-
fontFamily(обязательно)
Значение для CSSfont-family. Обычно стек шрифтов:system-ui, sans-serif. -
fontFace
Массив объектов. Каждый объект описывает данные@font-face. Все что указано в этом параметре будет сгенерировано на странице.Если не указать этот параметр - то это будет означать, что шрифты указанные в
fontFamily- системные шрифты.Каждый объект может содержать свойства из дескриптора @font-face, вот некоторые:
"fontFace": [ { "fontFamily": "Open Sans", "fontWeight": "300 800", "fontStyle": "normal", "fontStretch": "normal", "fontDisplay": "swap" "src": [ "file:./assets/fonts/open-sans.woff2" ] }, { "fontFamily": "", "fontWeight": "400", "fontStretch": "", "fontStyle": "", "fontVariant": "", "fontDisplay": "fallback", "src": "", "ascentOverride": "", "descentOverride": "", "fontFeatureSettings": "", "fontVariationSettings": "", "lineGapOverride": "", "sizeAdjust": "", "unicodeRange": "" } ]Путь в
srcдолжен быть относительным (file
— WordPress дополнит его сам.
Использование:
- В theme.json
var:preset|font-family|{slug} - В CSS
var(--wp--preset--font-family--{slug})
Пример: Добавыим свои шрифты
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3, "settings": { "typography": { "fontFamilies": [ { "name": "Basic", "slug": "basic", "fontFamily": "FuturaPT, sans-serif", "fontFace": [ { "fontFamily": "FuturaPT", "fontWeight": "400", "fontStyle": "normal", "fontDisplay": "swap", "src": [ "file:./assets/fonts/FuturaPT-Book.woff2" ] } ] }, { "name": "Headers", "slug": "headers", "fontFamily": "TTFors, sans-serif", "fontFace": [ { "fontFamily": "TTFors", "fontWeight": "400 500", "fontStyle": "normal", "fontDisplay": "swap", "src": [ "file:./assets/fonts/TTFors-Medium.woff2" ] }, { "fontFamily": "TTFors", "fontWeight": "600 800", "fontStyle": "normal", "fontDisplay": "swap", "src": [ "file:./assets/fonts/TTFors-Bold.woff2" ] } ] }, { "name": "Alt", "slug": "alt", "fontFamily": "BigNoodleTitling, serif", "fontFace": [ { "fontFamily": "BigNoodleTitling", "fontWeight": "300 700", "fontStyle": "normal", "src": [ "file:./assets/fonts/BigNoodleTitling.woff2" ] } ] } ] } } } }В UI это будет выглядеть так:
WordPress создаст CSS переменные:
--wp--preset--font-family--basic: FuturaPT, sans-serif; --wp--preset--font-family--headers: TTFors, sans-serif; --wp--preset--font-family--alt: BigNoodleTitling, serif;
Cоздаст CSS класс:
.has-{slug}-font-familyИ добавит регистрацию шрифтов в HTML:
<style class='wp-fonts-local'> @font-face { font-family: FuturaPT; font-style: normal; font-weight: 400; font-display: swap; src: url('http://example.loc/wp-content/themes/mytheme/assets/fonts/FuturaPT-Book.woff2') format('woff2'); } @font-face { font-family: TTFors; font-style: normal; font-weight: 400 500; font-display: swap; src: url('http://example.loc/wp-content/themes/mytheme/assets/fonts/TTFors-Medium.woff2') format('woff2'); } @font-face { font-family: TTFors; font-style: normal; font-weight: 600 800; font-display: swap; src: url('http://example.loc/wp-content/themes/mytheme/assets/fonts/TTFors-DemiBold.woff2') format('woff2'); } @font-face { font-family: BigNoodleTitling; font-style: normal; font-weight: 300 700; font-display: fallback; src: url('http://example.loc/wp-content/themes/mytheme/assets/fonts/BigNoodleTitling-Tracked.woff2') format('woff2'); } </style>-
lightbox
Включает функцию увеличения изображения при клике (lightbox). Для блоков, которые это поддерживают.
Доступно с WordPress 6.4 и только для блока core/image.
Параметры:
- enabled (true|false)
- Включает/отключает lightbox для всех изображений.
По умолчанию: false (отключено). - allowEditing (true|false)
Разрешает или запрещает пользователю включать/отключать lightbox для конкретного блока через интерфейс.
При
true, в редакторе у блока Image появится опция Expand on Click.По умолчанию: true.
Пример: Включим lightbox для всех изображений и Запретим пользователю менять настройку.
{
"settings": {
"blocks": {
"core/image": {
"lightbox": {
"enabled": true,
"allowEditing": false
}
}
}
}
}
position
Позволяет включить/отключить поддержку "липкого" (Sticky) позиционирования для блоков, которые эту фукнцию поддерживают.
Управляет только доступностью опций в интерфейсе, а не CSS-стилями.
Параметры:
Пример: Включим поддержку "липкого" позиционирования для блоков:
"settings": {
"position": {
"sticky": true
}
}
После включения в настройках блока появится опция Position с вариантами: Default и Sticky:
Заметки:
-
Функция работает только для блоков с поддержкой
position(например, Group). - Для "липкой" шапки нельзя применять
stickyнапрямую к блоку Header. Вместо этого нужно обернуть шапку в Group и задать sticky для этой группы.
custom
Позволяет создавать собственные CSS-переменные, доступные в теме. WordPress автоматически их сгенерирует из указанных ключей и значений.
Формат создаваемых переменных:
--wp--custom--{key}: {value}
CamelCaseпреобразуется вkebab-case. Например:lineHeight→line-height.- Числа разделяются дефисами. Например:
abc123→abc-1-2-3.
Пример:
"settings": {
"custom": {
"fruit": "apple"
}
}
Получим в CSS:
body {
--wp--custom--fruit: apple;
}
Можно создавать вложенные объекты для групп переменных:
{
"settings": {
"custom": {
"lineHeight": {
"xs": "1",
"sm": "1.25",
"md": "1.5",
"lg": "1.75"
}
}
}
}
Результат:
body {
--wp--custom--line-height--xs: 1;
--wp--custom--line-height--sm: 1.25;
--wp--custom--line-height--md: 1.5;
--wp--custom--line-height--lg: 1.75;
}
Использование в других местах theme.json через var:custom|…:
{
"version": 3,
"settings": {
"custom": {
"lineHeight": {
"xs": "1",
"sm": "1.25",
"md": "1.5",
"lg": "1.75"
}
}
},
"styles": {
"typography": {
"lineHeight": "var:custom|line-height|md"
},
"blocks": {
"core/paragraph": {
"typography": {
"lineHeight": "var:custom|line-height|lg"
}
}
}
}
}
Или в css напрямую:
.example-class {
line-height: var(--wp--custom--line-height--sm);
}
useRootPaddingAwareAlignments (true|false)
Note: Свойство только верхнего уровня. Недоступно в блоках.
Управляет тем, куда 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>. - Итог: весь сайт визуально сжимается внутри горизонтальных отступов.
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 по умолчанию включает некоторые настройки для блоков (для совместимости со старыми версиями). Например:
{
"settings": {
"blocks": {
"core/button": {
"border": { "radius": true }
},
"core/pullquote": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
}
}
}
}
Если глобальные настройки не работают на некоторых блоках — возможно, они переопределены на уровне блока. Чтобы изменить поведение, задайте свои значения в settings.blocks.
styles
Позволяет настраивать CSS стили в theme.json, как для body в целом, для отдельных элементов и блоков. Такое указание стилей позволит изменить их через страницу админки Appearance > Editor > Styles.
Актуальный список поддерживаемых параметров смотрите в константе WP_Theme_JSON::VALID_STYLES.
Стилизация делится на три уровня:
- Корень (body)
- Элементы
- Блоки
{
"version": 3,
"styles": {
"color": {
"text": "#000000",
"background": "#ffffff"
},
"elements": {
"button": {
"color": {
"text": "#ffffff",
"background": "#000000"
}
}
},
"blocks": {
"core/code": {
"color": {
"text": "#ffffff",
"background": "#000000"
}
}
}
}
}
- Стили на верхнем уровне будут добавлены в селектор
body. - Стили в "elements" будут работа для указанных HTML элементов.
- Для блоков будут применяться к блокам.
- Корневые стили (body-стили)
Корневой элемент - тег
<body>. Стили указанные непосредствено в "styles" будут применены для селектораbody.Пример с установкой цвета текста и фона:
{ "version": 3, "styles": { "color": { "text": "#000000", "background": "#f5f1ea" } } }Получим CSS:
body { background: #f5f1ea; color: #000000; }Эти стили будут использоваться по умолчанию везде, где нет более специфичного правила.
Корневой элемент поддерживает почти все свойства стилей описанные в settings.
Свойство
styles.spacing.paddingимеет особый кейс при использовании с settings.useRootPaddingAwareAlignments- elements
Раздел где можно задать базовые стили для HTML-элементов (не блоков).
Всё, что объявлено здесь, WordPress выводит в качестве CSS-переменных и правил, применяемых к соответствующим HTML тегам на фронтенде и в редакторе.
Поддерживаются элементы из коробки:
button link heading h1 h2 h3 h4 h5 h6 caption cite
Какие свойства можно задавать:
Внутри каждого элемента разрешён тот же пакет, что и вstyles:colortypographyspacingbordershadowdimensions- Псевдоселекторы:
- :hover
- :focus
- :active
- :visited
Например:
"styles": { "elements": { "button": { "color": { "text": "#ffffff", "background": "#aa3f33" } } } }Получим при генерации:
.wp-element-button, .wp-block-button__link { background-color: #aa3f33; color: #ffffff; }Пример ховера для кнопки:
"styles": { "elements": { "button": { "color": { "text": "#ffffff", "background": "#aa3f33" }, ":hover": { "color": { "background": "#822f27" } } } } }Еще Пример:
"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/image.Пример: скруглить углы у Image блока:
"styles": { "blocks": { "core/image": { "border": { "radius": "6px" } } } }WordPress сгенерирует:
.wp-block-image img { border-radius: 6px; }Стилизация элементов внутри блоков
Пример: задать font-size для
core/pullquoteи другой font-size для его<cite>:{ "version": 2, "styles": { "elements": { "core/pullquote": { "typography": { "fontSize": "2.25rem" }, "elements": { "cite": { "typography": { "fontSize": "max( 50%, 1.5rem )" } } } } } } }CSS:
.wp-block-pullquote { font-size: 2.25rem; } .wp-block-pullquote cite { font-size: max( 50%, 1.5rem ); }Стилизация вариаций стилей блоков
Цель - переопределить стили конкретной вариации без кастомного CSS.
Пример: стиль
outlineдляcore/button:"styles": { "blocks": { "core/button": { "variations": { "outline": { "border": { "color": "currentColor", "style": "solid", "width": "2px" } } } } } }Доступные вариации (пользовательские вариации пока не поддерживаются):
- core/button: outline, fill
- core/image: rounded
- core/quote: plain
- core/site-logo: rounded
- core/separator: wide, dots
- core/social-links: logos-only, pill-shape
- core/table: stripes
- core/tag-cloud: outline
- 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.
templateParts
_TODO_ Additional metadata for template parts defined in the parts folder.
-
name (string) - Filename, without extension, of the template in the parts folder.
-
title (string) - Title of the template, translatable.
- area (string) - The area the template part is used for. Variations for header and footer are used when area matches.
patterns
_TODO_ An array of pattern slugs to be registered from the Pattern Directory.
customTemplates
WordPress позволяет регистрировать шаблоны для отдельных записей, страниц и произвольных типов записей (CPT) через свойство customTemplates в theme.json. Эти шаблоны выбираются на экране редактирования записи, и их разметка используется на фронтенде.
Ограничение: шаблоны предназначены только для одиночных записей/страниц/CPT.
Свойства:
- name — имя файла шаблона без расширения (файл должен быть в
/templates). - title — название шаблона (можно переводить).
- postTypes — массив типов записей (по умолчанию
page).
Пример регистрации в файле /theme.json:
{
"customTemplates": [
{
"name": "content-canvas",
"title": "Content Canvas",
"postTypes": ["page", "post"]
}
]
}
После добавления шаблон появится в выпадающем списке «Шаблон» в редакторе записи/страницы:
Файл /templates/content-canvas.html:
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
<main class="wp-block-group">
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
Чтобы увидеть, как это выглядит в редакторе сайта, перейдите в Внешний вид > Редактор в админке WordPress. Затем выберите Контентный холст в разделе Шаблоны:
title / slug / description / blockTypes
Эти параметры относятся к вариациям стилей, читайте о них в соотвествующей статье.
--
Источники: