theme.json Presets
WordPress themes can define presets in their theme.json — a curated spacing scale, a set of font sizes, and font families. Nectarblocks surfaces those presets directly inside its block controls, so the values you pick in a block stay in lock-step with the active theme's design tokens. Presets are read from both the theme's static theme.json and any custom presets added through the WordPress Styles interface.
Where presets appear
| theme.json preset | Where it shows up in Nectarblocks |
|---|---|
spacing.spacingSizes | A row of preset buttons in the Spacing popover for each margin/padding side. |
typography.fontSizes | A row of preset buttons in the Font Settings popover (the Font Size control). |
typography.fontFamilies | A dedicated Theme Fonts section in the Typography font selector, listed below Core Fonts and your Custom Fonts. |
When a control has presets available, choosing one stores the preset (not a raw value), so the block automatically follows any later change to that preset in the theme.
Defining presets
Add the presets to your theme's theme.json (or a child theme's). For example:
{
"version": 3,
"settings": {
"spacing": {
"spacingSizes": [
{ "slug": "small", "name": "Small", "size": "1rem" },
{ "slug": "medium", "name": "Medium", "size": "2rem" },
{ "slug": "large", "name": "Large", "size": "4rem" }
]
},
"typography": {
"fontSizes": [
{ "slug": "body", "name": "Body", "size": "1rem" },
{ "slug": "heading", "name": "Heading", "size": "2.5rem" }
],
"fontFamilies": [
{ "slug": "sans", "name": "Sans", "fontFamily": "Inter, sans-serif" }
]
}
}
}
Reload the editor and the presets appear automatically in the controls above — there's nothing to enable in Nectarblocks.
Good to know
- Selecting a preset locks the manual input. When a spacing or font-size preset is active, the manual value field for that control is disabled so the preset can't be accidentally overwritten — switch back to a manual value by deselecting the preset.
- Spacing presets replace the quick buttons. When spacing presets exist, the preset row takes the place of the built-in common-spacing buttons (5px, 10px, …); only one of the two is shown at a time.
- Theme vs. custom presets. Presets defined in
theme.json("theme") and presets you add through the WordPress Styles UI ("custom") are listed together, theme presets first.
theme.json presets come from the theme and are ideal for block-theme / Full Site Editing setups. They are separate from Nectarblocks' own Global Colors and Global Typography, which are managed in the Nectarblocks admin and apply regardless of theme. You can use either or both.