Defining Block Styles via theme.json & custom block styles

[ashleyshaw]

Introduction:

LSX Design doesn’t fully leverage the latest WordPress features introduced in versions 6.5 to 6.7, such as block variations, advanced template management, and typography presets.

As part of our continued effort to integrate the LSX Design system with key WordPress plugins, we’re planning to enhance WooCommerce compatibility. The goal is to transition from CSS-based styling to JSON configurations for seamless integration across WooCommerce product pages, cart, and checkout flows.

Current State

The LSX Design theme currently applies spacing, fonts, and layout primarily through CSS. While this approach provides control, it relies heavily on extensive stylesheets. WordPress 6.6 introduced several improvements to spacing and layout management directly via theme.json, allowing fluid design options using responsive units and predefined font pairings.

Problem/Opportunity:

Currently, WooCommerce elements in LSX Design rely partially on CSS for styling. This creates inconsistencies in UI across different components. Transitioning to JSON-based styles will ensure a more streamlined, flexible, and future-proof approach, aligning with WordPress’s evolving global style framework.

• Complex CSS: Heavy reliance on custom CSS for WooCommerce and block styling.
• Limited Accessibility: No structured accessibility implementation in theme.json.
• CSS Dependency: Spacing and fonts are managed manually through CSS, leading to large style sheets.
• Woo Block Styles:
• CSS-Heavy WooCommerce Styling: WooCommerce styling in LSX Design is primarily handled via CSS, limiting flexibility and performance optimization. Over-reliance on CSS for WooCommerce elements adds complexity and affects performance.
• Layout: Many layout configurations are hardcoded, limiting flexibility across devices.
• Underutilization of WordPress Features: LSX Design relies too much on custom CSS and legacy approaches.

Proposed Solution:

We plan to update the LSX Design system by replacing CSS styles with JSON configurations, specifically for WooCommerce components such as product listings, cart, checkout forms, and more. This will allow for deeper integration with WordPress’s block system and global style settings, ensuring design consistency and ease of customization.

• Adopt Fluid Typography: Use clamp() and other responsive techniques available in theme.json to control font scaling and layout spacing fluidly, as seen in Twenty Twenty-Five’s implementation.
• Predefined Font Pairings: Add preset font pairings like Roboto Slab and Manrope, as demonstrated in the default theme typography preset-4.json.
• Leverage Block-Based Layouts: Utilize WordPress 6.7’s layout and section enhancements to avoid manually setting styles through CSS.
• Adopt WordPress 6.7 Features: Incorporate block variations and section styles for better flexibility.
• Improve Typography: Implement predefined typography sets such as typography preset-1 for fluid and scalable fonts.
• Reduce CSS Reliance: Move WooCommerce styling to theme.json and leverage new theme.json features for cleaner, more efficient designs.
• Refactor to Block Styles: Move WooCommerce-specific styles into theme.json.
• Leverage Block Variations: Use block variations for product pages, grids, and checkout to simplify WooCommerce design management.
• Expand Accessibility: Implement accessibility checks and ARIA support within theme.json.
• Simplify CSS: Move block styles to theme.json, improving performance and maintainability.

Alternatives Considered:

We considered maintaining the current CSS setup or using third-party WooCommerce templates. However, these options lack the flexibility and future-proofing offered by JSON-based configurations, which integrate more smoothly with the WordPress block system.

Challenges:

• Ensuring compatibility with future WooCommerce and WordPress updates.
• Optimizing performance while migrating from CSS to JSON.
• Thorough testing across different devices and browsers to avoid breaking changes.

Call for Feedback:

Has anyone transitioned from CSS to JSON for theme styles in WooCommerce or other plugins? I’d appreciate any insights on potential pitfalls or best practices for this process.

Next Steps:

The next step will be to develop a prototype of WooCommerce pages using JSON-based configurations. I will share initial mockups and configurations for review before moving forward with full integration.

• @Justinabes007 could you test out adding default & alternative block styles via json for specific blocks, I recommend testing a simple block like the Add to Cart button or Price or Title or Short description.
• @ZaredRogers lets try to define some JSON values based on the design system for some basic woo blocks, then lets share here.