How WordPress generates CSS from theme.json configurations.<\/p>
WordPress processes theme.json and generates:<\/p>
--wp--preset--{category}--{slug}\n--wp--custom--{path}\n--wp--style--{property}<\/code><\/pre><\/div>Settings \u2192 CSS Variables<\/h3>Setting<\/th>CSS Variable Pattern<\/th><\/tr><\/thead>color.palette<\/code><\/td>--wp--preset--color--{slug}<\/code><\/td><\/tr>color.gradients<\/code><\/td>--wp--preset--gradient--{slug}<\/code><\/td><\/tr>typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
color.palette<\/code><\/td>--wp--preset--color--{slug}<\/code><\/td><\/tr>color.gradients<\/code><\/td>--wp--preset--gradient--{slug}<\/code><\/td><\/tr>typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--color--{slug}<\/code><\/td><\/tr>color.gradients<\/code><\/td>--wp--preset--gradient--{slug}<\/code><\/td><\/tr>typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
color.gradients<\/code><\/td>--wp--preset--gradient--{slug}<\/code><\/td><\/tr>typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--gradient--{slug}<\/code><\/td><\/tr>typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
typography.fontFamilies<\/code><\/td>--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--font-family--{slug}<\/code><\/td><\/tr>typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
typography.fontSizes<\/code><\/td>--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--font-size--{slug}<\/code><\/td><\/tr>spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
spacing.spacingSizes<\/code><\/td>--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--spacing--{slug}<\/code><\/td><\/tr>shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
shadow.presets<\/code><\/td>--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--preset--shadow--{slug}<\/code><\/td><\/tr>custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
custom.*<\/code><\/td>--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
--wp--custom--{path-kebab-case}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>Example Generation<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "settings": {\n "color": {\n "palette": [\n { "slug": "primary", "color": "#0066cc", "name": "Primary" },\n { "slug": "secondary", "color": "#ff6600", "name": "Secondary" }\n ]\n },\n "typography": {\n "fontFamilies": [\n { "slug": "body", "fontFamily": "Inter, sans-serif", "name": "Body" }\n ],\n "fontSizes": [\n { "slug": "small", "size": "0.875rem", "name": "Small" },\n { "slug": "medium", "size": "1rem", "name": "Medium" }\n ]\n },\n "spacing": {\n "spacingSizes": [\n { "slug": "10", "size": "0.5rem", "name": "XS" },\n { "slug": "20", "size": "1rem", "name": "S" }\n ]\n },\n "custom": {\n "lineHeight": {\n "body": 1.6,\n "heading": 1.2\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
body {\n --wp--preset--color--primary: #0066cc;\n --wp--preset--color--secondary: #ff6600;\n --wp--preset--font-family--body: Inter, sans-serif;\n --wp--preset--font-size--small: 0.875rem;\n --wp--preset--font-size--medium: 1rem;\n --wp--preset--spacing--10: 0.5rem;\n --wp--preset--spacing--20: 1rem;\n --wp--custom--line-height--body: 1.6;\n --wp--custom--line-height--heading: 1.2;\n}<\/code><\/pre><\/div>Utility Classes<\/h2>WordPress generates utility classes for presets:<\/p>Color Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
WordPress generates utility classes for presets:<\/p>
\/* Background colors *\/\n.has-primary-background-color {\n background-color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-background-color {\n background-color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Text colors *\/\n.has-primary-color {\n color: var(--wp--preset--color--primary) !important;\n}\n.has-secondary-color {\n color: var(--wp--preset--color--secondary) !important;\n}\n\n\/* Border colors *\/\n.has-primary-border-color {\n border-color: var(--wp--preset--color--primary) !important;\n}<\/code><\/pre><\/div>Gradient Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
.has-primary-to-secondary-gradient-background {\n background: var(--wp--preset--gradient--primary-to-secondary) !important;\n}<\/code><\/pre><\/div>Font Size Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
.has-small-font-size {\n font-size: var(--wp--preset--font-size--small) !important;\n}\n.has-medium-font-size {\n font-size: var(--wp--preset--font-size--medium) !important;\n}<\/code><\/pre><\/div>Font Family Classes<\/h3>css<\/span><\/use><\/svg><\/button><\/div>.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
.has-body-font-family {\n font-family: var(--wp--preset--font-family--body) !important;\n}<\/code><\/pre><\/div>Global Styles<\/h2>Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Styles from the styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
styles<\/code> section generate CSS rules:<\/p>Root Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "styles": {\n "color": {\n "background": "#ffffff",\n "text": "#1a1a1a"\n },\n "typography": {\n "fontFamily": "var(--wp--preset--font-family--body)",\n "fontSize": "var(--wp--preset--font-size--medium)",\n "lineHeight": "1.6"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
body {\n background-color: #ffffff;\n color: #1a1a1a;\n font-family: var(--wp--preset--font-family--body);\n font-size: var(--wp--preset--font-size--medium);\n line-height: 1.6;\n}<\/code><\/pre><\/div>Element Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "styles": {\n "elements": {\n "link": {\n "color": { "text": "#0066cc" },\n ":hover": { "color": { "text": "#004499" } }\n },\n "h1": {\n "typography": { "fontSize": "2.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
a {\n color: #0066cc;\n}\na:hover {\n color: #004499;\n}\nh1 {\n font-size: 2.5rem;\n}<\/code><\/pre><\/div>Block Styles<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "styles": {\n "blocks": {\n "core\/paragraph": {\n "typography": { "lineHeight": "1.75" }\n },\n "core\/button": {\n "border": { "radius": "0.5rem" }\n }\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
.wp-block-paragraph {\n line-height: 1.75;\n}\n.wp-block-button .wp-block-button__link {\n border-radius: 0.5rem;\n}<\/code><\/pre><\/div>Layout CSS<\/h2>Content Width<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "settings": {\n "layout": {\n "contentSize": "720px",\n "wideSize": "1200px"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
body {\n --wp--style--global--content-size: 720px;\n --wp--style--global--wide-size: 1200px;\n}\n\n.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n max-width: var(--wp--style--global--content-size);\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.is-layout-constrained > .alignwide {\n max-width: var(--wp--style--global--wide-size);\n}\n\n.is-layout-constrained > .alignfull {\n max-width: none;\n}<\/code><\/pre><\/div>Block Gap<\/h3>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "styles": {\n "spacing": {\n "blockGap": "2rem"\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
body {\n --wp--style--block-gap: 2rem;\n}\n\n.is-layout-flow > * + * {\n margin-block-start: var(--wp--style--block-gap);\n}\n\n.is-layout-flex {\n gap: var(--wp--style--block-gap);\n}\n\n.is-layout-grid {\n gap: var(--wp--style--block-gap);\n}<\/code><\/pre><\/div>@font-face Generation<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "settings": {\n "typography": {\n "fontFamilies": [\n {\n "slug": "inter",\n "name": "Inter",\n "fontFamily": "'Inter', sans-serif",\n "fontFace": [\n {\n "fontFamily": "Inter",\n "fontWeight": "400",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-regular.woff2"]\n },\n {\n "fontFamily": "Inter",\n "fontWeight": "700",\n "fontStyle": "normal",\n "fontDisplay": "swap",\n "src": ["file:.\/assets\/fonts\/inter-bold.woff2"]\n }\n ]\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated CSS:<\/strong><\/p>css<\/span><\/use><\/svg><\/button><\/div>@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
@font-face {\n font-family: 'Inter';\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url('\/wp-content\/themes\/theme-slug\/assets\/fonts\/inter-bold.woff2') format('woff2');\n}\n\nbody {\n --wp--preset--font-family--inter: 'Inter', sans-serif;\n}<\/code><\/pre><\/div>Duotone Filters<\/h2>theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
theme.json:<\/strong><\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
{\n "settings": {\n "color": {\n "duotone": [\n {\n "slug": "blue-orange",\n "colors": ["#0066cc", "#ff6600"],\n "name": "Blue and Orange"\n }\n ]\n }\n }\n}<\/code><\/pre><\/div>Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
Generated Output:<\/strong><\/p>WordPress injects an SVG filter definition and CSS:<\/p>html<\/span><\/use><\/svg><\/button><\/div>
WordPress injects an SVG filter definition and CSS:<\/p>