The following information is based on the WordPress documentation for ease of reference only. At the time of writing, Global Styles (theme.json) and user interface customizations are being actively developed. And, of course, all of this is still very much in active development. If you notice something has changed or is incorrect, please let me know in the comments!<\/p>\n\n\n\n\n\n\n\n
theme.json<\/code><\/a><\/li>\n\n\n\n- Defining Global Settings<\/a><\/li>\n\n\n\n
- Defining Global Styles<\/a><\/li>\n\n\n\n
- How the Styles Engine Generates Classes<\/a><\/li>\n\n\n\n
- Global Styles Reference Tables<\/a> (you are here<\/em>!)<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n\n
\n Table of contents<\/h3>\n <\/summary>\n \n\n<\/li>- \nSettings<\/a>\n\t\t
- \nBorder<\/a><\/li>
- \nColor<\/a><\/li>
- \nTypography<\/a><\/li>
- \nSpacing<\/a><\/li>
- \nLayout<\/a><\/li>
- \nAppearance tools<\/a><\/li>
- \nRoot padding-aware alignments<\/a><\/li><\/ul>\n<\/li>
- \nStyles<\/a>\n\t\t
- \nTop-level styles<\/a><\/li>
- \nGlobal styles<\/a><\/li>
- \nGlobal-level styles: interactive elements<\/a><\/li>
- \nCustom<\/a><\/li>
- \nBlock-level styles<\/a><\/li><\/ul>\n<\/li>
- \nWrapping up<\/a><\/li><\/ul>\n<\/li><\/ul>\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n<\/details>\n\n\n
\n\n\nSettings<\/h3>\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"border\": {},\n \"color\": {},\n \"typography\": {},\n \"layout\": {},\n \"spacing\": {},\n \"outline\": {},\n \"appearanceTools\": true | false,\n \"useRootPaddingAwareAlignments\": true | false\n}<\/code><\/pre>\n\n\n\nWe\u2019ll start with the settings configurations, where we have broken this out into multiple tables for Typography, Colors, Custom, and Spacing.<\/p>\n\n\n\n
Remember, these \u201ctop-level\u201d styles are applied on the <body><\/code> element. And it might be helpful to recall the syntax we\u2019re dealing with:<\/p>\n\n\n\n\n- CSS Custom properties:<\/strong>
--wp--preset--{preset-category}--{preset-slug}<\/code><\/li>\n\n\n\n- CSS classes:<\/strong>
.has-{preset-slug}-{preset-category}<\/code><\/li>\n<\/ul>\n\n\nBorder<\/h4>\n\n\n
The border<\/code> section enables border controls in the editor UI.<\/p>\n\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"border\": {\n \"color\": true,\n \"radius\": true,\n \"style\": true,\n \"width\": true\n }\n}<\/code><\/pre>\n\n\n\nJSON Property<\/th> What it Does<\/th> CSS Equivalent<\/th><\/tr><\/thead> settings.border.color<\/code><\/td>Enables the border color control.<\/td> border-color<\/code><\/td><\/tr>settings.border.radius<\/code><\/td>Enables the border radius control.<\/td> border-radius<\/code><\/td><\/tr>settings.border.style<\/code><\/td>Enables the border style control.<\/td> border-style<\/code><\/td><\/tr>settings.border.width<\/code><\/td>Enables the border width control.<\/td> border-width<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\nColor<\/h4>\n\n\n
The color<\/code> section sets the theme\u2019s color palettes, gradients, and duotone effects.<\/p>\n\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"color\": {\n \"palette\": {\n \"slug\": \"\",\n \"color\": \"\",\n \"name\": \"\",\n },\n \"gradients\": [\n {\n \"slug\": \"\",\n \"gradient\": \"\",\n \"name\": \"\"\n }\n ],\n \"duotone\": {\n \"slug\": \"\",\n \"color\": \"\",\n \"name\": \"\",\n }\n \"link\": true | false\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nJSON Property<\/th> What it Does<\/th> CSS Custom Properties<\/th><\/tr><\/thead> settings.color.pallete.color<\/code><\/td>Defines color values for use throughout the theme.<\/td> --wp\u2013preset--color--{slug}<\/code><\/td><\/tr>settings.color.gradients.color<\/code><\/td>Defines gradient patterns for use throughout the theme.<\/td> --wp\u2013preset--gradient--{slug}<\/code><\/td><\/tr>settings.color.duotone<\/code><\/td>Defines duotone effects for use throughout the site.<\/td> \u2013-wp\u2013preset--duotone--{slug}<\/code><\/td><\/tr>settings.color.link<\/code><\/td>Enables the setting to change the theme\u2019s default link color in the Site Editor.<\/td> \u2013-wp\u2013preset-\u2013color-\u2013link<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\nTypography<\/h4>\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"styles\": {\n \"typography\": {\n \"dropCap\": true | false,\n \"customFontSize\": true | false,\n \"fluid\": \"<undefined>\" | false,\n \"fontSizes\": [\n {\n \"fluid\": {\n \"min\": \"\",\n \"max\": \"\"\n },\n \"slug\": \"\",\n \"size\": \"\",\n \"name\": \"\"\n },\n ],\n \"fontFamilies\": [\n {\n \"fontFamily\": \"\",\n \"name\": \"\",\n \"slug\": \"\",\n \"fontFace\": \"\"\n },\n ],\n \"lineHeight\": true | false,\n \"fontStyle\": true | false,\n \"letterSpacing\": true | false,\n \"textDecoration\": true | false,\n \"textTransform\": true | false,\n }\n }\n}<\/code><\/pre>\n\n\n\nJSON Properties<\/th> What it Does<\/th> CSS Custom Property<\/strong><\/th><\/tr><\/thead>settings.typography.fontSizes<\/code><\/td>Defines font size throughout the site.<\/td> --wp--preset--font-size--{slug}<\/code><\/td><\/tr>settings.typography.fontFamilies<\/code><\/td>Defines typographic font use throughout the site.<\/td> --wp--preset--font-family--{slug}<\/code><\/td><\/tr>settings.typography.lineHeight<\/code><\/td>Defines line height to use throughout the site.<\/td> --wp--preset--line-height--{slug}<\/code><\/td><\/tr>settings.typography.fontStyle<\/code><\/td>Defines font style to use throughout the site.<\/td> --wp--preset--line-height--{slug}<\/code><\/td><\/tr>settings.typography.fontWeight<\/code><\/td>Defines font weight for use throughout the site.<\/td> --wp--preset--font-weight--{slug}<\/code><\/td><\/tr>settings.typography.letterSpacing<\/code><\/td>Defines letter spacing for use throughout the site.<\/td> --wp--preset--letter-spacing--{slug}<\/code><\/td><\/tr>settings.typography.textDecoration<\/code><\/td>Defines text decoration for use throughout the site.<\/td> –wp-preset–text-decoration–{slug}<\/td><\/tr> settings.typography.textDecoration.line<\/code><\/td>Defines link text decoration line for use throughout the site.<\/td> --wp-preset--text-decoration--line<\/code><\/td><\/tr>settings.typography.textDecoration.style<\/code><\/td>Defines link text decoration line style for use throughout the site.<\/td> --wp-preset--text-decoration--style--{slug}<\/code><\/td><\/tr>settings.typography.textDecoration.color<\/code><\/td>Defines link text decoration color for use throughout the site.<\/td> --wp\u2013preset--text-decoration--color--{slug}<\/code><\/td><\/tr>settings.typography.textDecoration.thickness<\/code><\/td>Defines link text decoration line thickness for use throughout the site.<\/td> --wp\u2013preset--text-decoration--thickness--{slug}<\/code><\/td><\/tr>settings.typography.textTransform<\/code><\/td>Defines text transformation type (uppercase, lowercase) for use throughout the site.<\/td> --wp--preset--text-transform--{slug}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\nSpacing<\/h4>\n\n\n
These settings enable\/disable spacing controls for margin and padding in the Site Editor and allow you to set which CSS units to support.<\/p>\n\n\n\n
\"styles\": {\n \"spacing\":{\n \"padding\": true,\n \"margin\": true,\n \"units\": [ \"px\", \"em\", \"rem\", \"vh\", \"vw\", \"%\" ]\n }\n}<\/code><\/pre>\n\n\n\nThe Site and Block Editors include slider form inputs that allow you to set spacing on a scale of predefined values. We can customize that scale with the spacingScale<\/code> property:<\/p>\n\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"spacing\": {\n \"spacingScale\": {\n \"operator\": \"+\",\n \"increment\": <number>,\n \"steps\": <number>,\n \"mediumStep\": <number>,\n \"unit\": \"\"\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nJSON Property<\/th> What it Does<\/th> Example<\/th><\/tr><\/thead> settings.spacing.operator<\/code><\/td>Determines whether the control scales up or down.<\/td> +<\/code><\/td><\/tr>settings.spacing.increment<\/code><\/td>Determines much the spacing changes per step.<\/td> 0.25<\/code><\/td><\/tr>settings.spacing.steps<\/code><\/td>Determines the number of available steps on the scale.<\/td> 6<\/code><\/td><\/tr>settings.spacing.mediumStep<\/code><\/td>Sets the midpoint of the range scale.<\/td> 1.5<\/code><\/td><\/tr>settings.spacing.unit<\/code><\/td>Sets the CSS length unit of the numeric value.<\/td> rem<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nOne more thing we can do with spacing is create CSS custom properties that can be used throughout the theme:<\/p>\n\n\n\n
{\n \"version\": 2,\n \"settings\": {\n \"spacing\": {\n \"spacingSizes\": [\n {\n \"size\": \"\",\n \"slug\": \"\",\n \"name\": \"\"\n }\n ]\n }\n }\n}<\/code><\/pre>\n\n\n\nJSON Property<\/td> What it Does<\/td> Example<\/td><\/tr> settings.spacing.spacingSizes.size<\/code><\/td>Sets the custom size value, including unit.<\/td> 3.5rem<\/code><\/td><\/tr>settings.spacing.spacingSizes.slug<\/code><\/td>The slug used in the CSS custom property name.<\/td> medium<\/code><\/td><\/tr>settings.spacing.spacingSizes.name<\/code><\/td>Provides the label for the size in the Site and Block Editor UI.<\/td> Medium<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nThe resulting CSS custom property syntax is: --wp-preset--spacing--<slug><\/code><\/p>\n\n\nLayout<\/h4>\n\n\n{\n \"version\": 2,\n \"settings\": {\n \"layout\": {\n \"contentSize\": \"\",\n \"wideSize\": \"\",\n \"type\": \"\",\n }\n }\n}<\/code><\/pre>\n\n\n\nJSON Property<\/th> What it Does<\/th> Generated CSS Property<\/th><\/tr><\/thead> settings.layout.contentSize<\/code><\/td>Sets the maximum width of the default content container for pages and posts.<\/td>