Advanced Styling in FSE: A Deep Dive into theme.json and Global Styles
The introduction of theme.json has revolutionized how we approach styling in WordPress. Gone are the days of scattered CSS files and inconsistent design tokens. With Full Site Editing (FSE), theme.json serves as your design system's single source of truth, enabling powerful styling capabilities that were previously impossible or extremely complex to implement.
This deep dive explores advanced styling techniques in FSE, from CSS custom properties to responsive design patterns. Whether you're building a custom theme or optimizing an existing one, these techniques will help you create more maintainable, performant, and beautiful WordPress sites.
Table of Contents
- CSS Custom Properties in FSE
- Advanced Typography Settings
- Responsive Design in theme.json
- Color Palette Strategies
- Spacing and Layout Systems
- Custom CSS Integration
CSS Custom Properties in FSE
Understanding WordPress CSS Variables
WordPress automatically generates CSS custom properties from your theme.json configuration. These variables follow a specific naming convention that creates a predictable, scalable system.
Variable Generation Pattern
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#0073aa"
}
]
}
}
}
Generates:
:root {
--wp--preset--color--primary: #0073aa;
}
Advanced Custom Properties
Creating Custom CSS Variables
{
"settings": {
"custom": {
"spacing": {
"baseline": "8px",
"scale": "1.5"
},
"typography": {
"lineHeight": {
"small": "1.2",
"body": "1.6",
"heading": "1.3"
}
},
"animation": {
"duration": {
"fast": "200ms",
"normal": "300ms",
"slow": "500ms"
},
"easing": {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
"bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
}
}
}
}
}
Generates:
:root {
--wp--custom--spacing--baseline: 8px;
--wp--custom--spacing--scale: 1.5;
--wp--custom--typography--line-height--small: 1.2;
--wp--custom--typography--line-height--body: 1.6;
--wp--custom--typography--line-height--heading: 1.3;
--wp--custom--animation--duration--fast: 200ms;
--wp--custom--animation--duration--normal: 300ms;
--wp--custom--animation--duration--slow: 500ms;
--wp--custom--animation--easing--default: cubic-bezier(0.4, 0, 0.2, 1);
--wp--custom--animation--easing--bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
Using Custom Properties in Styles
{
"styles": {
"elements": {
"button": {
"css": "transition: all var(--wp--custom--animation--duration--normal) var(--wp--custom--animation--easing--default);"
}
},
"blocks": {
"core/paragraph": {
"typography": {
"lineHeight": "var(--wp--custom--typography--line-height--body)"
}
}
}
}
}
Dynamic Property Calculation
Mathematical Operations with CSS
{
"settings": {
"custom": {
"layout": {
"contentWidth": "65ch",
"sidebarWidth": "300px",
"gap": "2rem"
}
}
},
"styles": {
"css": ":root { --wp--custom--layout--total-width: calc(var(--wp--custom--layout--content-width) + var(--wp--custom--layout--sidebar-width) + var(--wp--custom--layout--gap)); }"
}
}
Creating a Modular Scale
{
"settings": {
"custom": {
"typography": {
"baseSize": "1rem",
"scale": "1.25"
}
}
},
"styles": {
"css": ":root { --wp--custom--typography--size-small: calc(var(--wp--custom--typography--base-size) / var(--wp--custom--typography--scale)); --wp--custom--typography--size-large: calc(var(--wp--custom--typography--base-size) * var(--wp--custom--typography--scale)); --wp--custom--typography--size-xlarge: calc(var(--wp--custom--typography--base-size) * var(--wp--custom--typography--scale) * var(--wp--custom--typography--scale)); }"
}
}
Advanced Typography Settings
Creating a Sophisticated Type System
Fluid Typography with Clamp
{
"settings": {
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "clamp(0.875rem, 2vw, 1rem)",
"name": "Small"
},
{
"slug": "medium",
"size": "clamp(1rem, 2.5vw, 1.25rem)",
"name": "Medium"
},
{
"slug": "large",
"size": "clamp(1.25rem, 3vw, 1.75rem)",
"name": "Large"
},
{
"slug": "x-large",
"size": "clamp(1.5rem, 4vw, 2.5rem)",
"name": "Extra Large"
},
{
"slug": "huge",
"size": "clamp(2rem, 5vw, 4rem)",
"name": "Huge"
}
]
}
}
}
Variable Fonts Configuration
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "'Inter Variable', sans-serif",
"slug": "inter-variable",
"name": "Inter Variable",
"fontFace": [
{
"fontFamily": "Inter Variable",
"fontWeight": "100 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter-variable.woff2"],
"fontDisplay": "swap"
},
{
"fontFamily": "Inter Variable",
"fontWeight": "100 900",
"fontStyle": "italic",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter-variable-italic.woff2"],
"fontDisplay": "swap"
}
]
}
]
},
"custom": {
"typography": {
"fontWeight": {
"thin": "100",
"light": "300",
"regular": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"black": "900"
}
}
}
}
}
Advanced Text Styling
Custom Drop Caps
{
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"dropCap": {
"css": "font-family: var(--wp--preset--font-family--serif); font-weight: var(--wp--custom--typography--font-weight--bold); color: var(--wp--preset--color--primary); float: left; font-size: 4em; line-height: 0.8; margin: 0.1em 0.1em 0 0;"
}
}
}
}
}
}
Typography Utility Classes
{
"styles": {
"css": ".text-balance { text-wrap: balance; } .text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; } .text-gradient { background: var(--wp--preset--gradient--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }"
}
}
Responsive Design in theme.json
Container Queries Support
{
"settings": {
"custom": {
"responsive": {
"containerQueries": true
}
}
},
"styles": {
"css": "@container (min-width: 768px) { .responsive-grid { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 1024px) { .responsive-grid { grid-template-columns: repeat(3, 1fr); } }"
}
}
Responsive Spacing System
{
"settings": {
"spacing": {
"spacingSizes": [
{
"slug": "10",
"size": "clamp(0.5rem, 2vw, 1rem)",
"name": "Extra Small"
},
{
"slug": "20",
"size": "clamp(1rem, 3vw, 1.5rem)",
"name": "Small"
},
{
"slug": "30",
"size": "clamp(1.5rem, 4vw, 2rem)",
"name": "Medium"
},
{
"slug": "40",
"size": "clamp(2rem, 5vw, 3rem)",
"name": "Large"
},
{
"slug": "50",
"size": "clamp(3rem, 6vw, 4rem)",
"name": "Extra Large"
}
]
}
}
}
Breakpoint-Based Styles
{
"settings": {
"custom": {
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
}
}
},
"styles": {
"css": "@media (min-width: 768px) { :root { --wp--custom--spacing--container-padding: 2rem; } } @media (min-width: 1024px) { :root { --wp--custom--spacing--container-padding: 3rem; } }"
}
}
Responsive Block Patterns
{
"styles": {
"blocks": {
"core/columns": {
"css": "gap: var(--wp--preset--spacing--30); @media (max-width: 767px) { flex-direction: column; }"
},
"core/group": {
"variations": {
"responsive-padding": {
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--40)",
"right": "clamp(1rem, 5vw, 3rem)",
"bottom": "var(--wp--preset--spacing--40)",
"left": "clamp(1rem, 5vw, 3rem)"
}
}
}
}
}
}
}
}
Color Palette Strategies
Creating a Comprehensive Color System
Base Color Palette
{
"settings": {
"color": {
"palette": [
{
"slug": "primary-50",
"color": "#eff6ff",
"name": "Primary 50"
},
{
"slug": "primary-100",
"color": "#dbeafe",
"name": "Primary 100"
},
{
"slug": "primary-200",
"color": "#bfdbfe",
"name": "Primary 200"
},
{
"slug": "primary-300",
"color": "#93bbfd",
"name": "Primary 300"
},
{
"slug": "primary-400",
"color": "#60a5fa",
"name": "Primary 400"
},
{
"slug": "primary-500",
"color": "#3b82f6",
"name": "Primary 500"
},
{
"slug": "primary-600",
"color": "#2563eb",
"name": "Primary 600"
},
{
"slug": "primary-700",
"color": "#1d4ed8",
"name": "Primary 700"
},
{
"slug": "primary-800",
"color": "#1e40af",
"name": "Primary 800"
},
{
"slug": "primary-900",
"color": "#1e3a8a",
"name": "Primary 900"
}
]
}
}
}
Semantic Color Mapping
{
"settings": {
"custom": {
"color": {
"semantic": {
"success": "var(--wp--preset--color--green-500)",
"warning": "var(--wp--preset--color--yellow-500)",
"error": "var(--wp--preset--color--red-500)",
"info": "var(--wp--preset--color--blue-500)"
}
}
}
}
}
Advanced Gradient Creation
{
"settings": {
"color": {
"gradients": [
{
"slug": "vibrant-sunset",
"gradient": "linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%)",
"name": "Vibrant Sunset"
},
{
"slug": "mesh-gradient",
"gradient": "radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%)",
"name": "Mesh Gradient"
},
{
"slug": "animated-gradient",
"gradient": "linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)",
"name": "Animated Gradient"
}
]
}
},
"styles": {
"css": ".animated-gradient-bg { background-size: 400% 400%; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }"
}
}
Color Accessibility Features
{
"settings": {
"custom": {
"color": {
"contrastChecker": {
"backgroundColor": "var(--wp--preset--color--background)",
"textColor": "var(--wp--preset--color--foreground)",
"minimumRatio": "4.5"
}
}
}
},
"styles": {
"css": ".high-contrast { filter: contrast(1.2); } .color-blind-safe { filter: url('#colorblind-filter'); } @media (prefers-contrast: high) { :root { --wp--preset--color--primary: #0066cc; } }"
}
}
Spacing and Layout Systems
Creating a Consistent Spacing Scale
{
"settings": {
"spacing": {
"units": ["px", "em", "rem", "%", "vw", "vh", "svw", "svh", "dvw", "dvh"],
"customSpacingSize": true,
"spacingScale": {
"operator": "*",
"increment": 1.5,
"steps": 10,
"mediumStep": 4,
"unit": "rem"
}
},
"custom": {
"spacing": {
"baseline": "0.25rem",
"gutter": {
"mobile": "1rem",
"tablet": "1.5rem",
"desktop": "2rem"
}
}
}
}
}
Advanced Grid Systems
{
"settings": {
"custom": {
"layout": {
"grid": {
"columns": 12,
"gap": "var(--wp--custom--spacing--gutter--desktop)",
"maxWidth": "1200px"
}
}
}
},
"styles": {
"css": ".grid-container { display: grid; grid-template-columns: repeat(var(--wp--custom--layout--grid--columns), 1fr); gap: var(--wp--custom--layout--grid--gap); max-width: var(--wp--custom--layout--grid--max-width); margin: 0 auto; } .col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-6 { grid-column: span 6; } .col-span-12 { grid-column: span 12; }"
}
}
Container Variations
{
"settings": {
"layout": {
"contentSize": "650px",
"wideSize": "1200px"
},
"custom": {
"layout": {
"narrow": "500px",
"readable": "65ch",
"full": "100%"
}
}
},
"styles": {
"blocks": {
"core/group": {
"variations": {
"narrow-container": {
"css": "max-width: var(--wp--custom--layout--narrow); margin-left: auto; margin-right: auto;"
},
"readable-container": {
"css": "max-width: var(--wp--custom--layout--readable); margin-left: auto; margin-right: auto;"
},
"full-bleed": {
"css": "width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;"
}
}
}
}
}
}
Custom CSS Integration
Block-Level Custom CSS
{
"styles": {
"blocks": {
"core/image": {
"css": "& img { transition: transform 0.3s ease; } &:hover img { transform: scale(1.05); } &.rounded img { border-radius: 1rem; } &.shadow img { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }"
},
"core/button": {
"css": "& .wp-block-button__link { position: relative; overflow: hidden; } & .wp-block-button__link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } & .wp-block-button__link:hover::before { left: 100%; }"
}
}
}
}
Global CSS Utilities
{
"styles": {
"css": "/* Utility Classes */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aspect-video { aspect-ratio: 16 / 9; } .aspect-square { aspect-ratio: 1 / 1; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.6s ease-out; } /* Custom Properties for JavaScript */ :root { --scroll-position: 0; --viewport-height: 100vh; }"
}
}
Advanced Pseudo-Element Styling
{
"styles": {
"elements": {
"link": {
"css": "position: relative; text-decoration: none; &::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: currentColor; transition: width 0.3s ease; } &:hover::after { width: 100%; }"
},
"h2": {
"css": "position: relative; padding-bottom: 0.5rem; &::after { content: ''; position: absolute; bottom: 0; left: 0; width: 3rem; height: 3px; background: var(--wp--preset--gradient--primary); }"
}
}
}
}
Performance-Optimized CSS
{
"settings": {
"custom": {
"performance": {
"useGPU": true,
"reduceMotion": true
}
}
},
"styles": {
"css": "/* GPU Acceleration */ .gpu-accelerated { will-change: transform; transform: translateZ(0); } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Optimize Font Loading */ .fonts-loaded body { font-family: var(--wp--preset--font-family--primary); }"
}
}
Advanced Integration Techniques
CSS Grid Areas
{
"styles": {
"blocks": {
"core/group": {
"variations": {
"layout-grid": {
"css": "display: grid; grid-template-areas: 'header header header' 'sidebar content content' 'footer footer footer'; grid-template-columns: 300px 1fr 1fr; grid-gap: var(--wp--preset--spacing--30); @media (max-width: 768px) { grid-template-areas: 'header' 'content' 'sidebar' 'footer'; grid-template-columns: 1fr; }"
}
}
}
}
}
}
Custom Scrollbar Styling
{
"styles": {
"css": "/* Custom Scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--wp--preset--color--background-secondary); } ::-webkit-scrollbar-thumb { background: var(--wp--preset--color--primary); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--primary-dark); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--primary) var(--wp--preset--color--background-secondary); }"
}
}
Best Practices and Tips
Organization Strategy
- Group Related Settings: Keep color, typography, and spacing settings organized
- Use Semantic Naming: Choose descriptive slugs that indicate purpose
- Document Custom Properties: Add comments in your theme.json
- Version Control: Track theme.json changes carefully
Performance Considerations
- Minimize Custom CSS: Use theme.json settings when possible
- Optimize Variable Usage: Reuse custom properties
- Lazy Load Fonts: Use font-display: swap
- Reduce Specificity: Let WordPress handle specificity
Maintenance Tips
- Regular Audits: Review unused styles quarterly
- Update Gradually: Test changes in staging
- Document Changes: Maintain a changelog
- Team Training: Ensure team understands theme.json
Conclusion
Advanced styling in FSE through theme.json represents a paradigm shift in WordPress theme development. By leveraging CSS custom properties, responsive design patterns, and sophisticated color systems, you can create themes that are not only beautiful but also maintainable and performant.
The key to mastery is understanding how theme.json translates to CSS and using that knowledge to build flexible, scalable design systems. Start with the basics, experiment with advanced features, and always keep performance and accessibility in mind.
Remember: theme.json is more than a configuration file—it's your design system's foundation. Use it wisely, and it will reward you with cleaner code, happier users, and easier maintenance.
Ready to explore more advanced WordPress development techniques? Check out our comprehensive Ultimate Guide to Gutenberg and Full-Site Editing for in-depth tutorials and best practices.