[Parent] JSON Updates for LSX Design Theme

[ashleyshaw]

Objective

To transition the LSX Design theme from CSS-based block styling to a more maintainable, flexible, and modern JSON-based setup using theme.json. This task includes updating various aspects of the theme to leverage WordPress' latest features, such as predefined block styles, typography sets, section styles, and accessibility enhancements.

• Pinned Discussion: Converting Block CSS to JSON
  • Migrate block-specific CSS into JSON and store these in /lsx-design/styles/blocks/, reducing reliance on CSS for block styling.
• Defining Block Styles via theme.json & custom block styles #189. 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.
• Transitioning from CSS Block Styling to theme.json in LSX Design Theme #188. Current Setup Overview After reviewing the current approach to block styling in the LSX Design theme, it’s evident that the team has relied heavily on CSS for block-specific styles. This includes: Headings (heading.css): Font sizes, weights, and …

Sub-Tasks

• Discussion 10: Implementing Section Styles
  Define and implement section styles for core/group, core/columns, and other block types to improve layout modularity and flexibility.

• Discussion 1: Typography Sets for LSX Design
  Create new typography sets in /lsx-design/styles/typography/. Split the current typography setup into sets and introduce alternatives like Roboto Slab and Manrope.

• Discussion 2: Moving to WordPress Standard Spacing and Font Sizes
  Transition from custom spacing and font size presets to WordPress standardized size values. Test these changes against the design system to ensure consistency.

• Discussion 3: Implementing Color Palettes
  Add color palettes using WordPress style variations and presets under /lsx-design/styles/colors/.

• Discussion 4: Adding Post Formats Support
  Enable support for post formats in LSX Design for more flexible content representation, including formats like audio, quote, and gallery.

• Discussion 5: Registering Block Bindings for Copyright
  Register block bindings to dynamically update the copyright footer via theme.json and callback functions.

• Discussion 6: Defining New Block Patterns and Categories
  Create structured block patterns and categories in theme.json for better organization and usability.

• Accessibility Testing and ARIA Support
  Expand accessibility features in theme.json by adding ARIA roles, labels, and focus styles. Use automated accessibility testing tools like Axe, Pa11y, or Lighthouse to ensure compliance with WCAG standards.

• Implementing Color Palettes in LSX Design #187 - color palettes allows for easier customization without affecting more

• Exploring adding Block Variations for display WooCommerce Brands Plugin Shortcodes #186

• Testing for Accessibility in LSX Design #198 - LSX Design lacks structured accessibility checks within its theme.json setup.

• Adding Post Format Support #196 -WordPress now supports enabling post formats for block themes, offering flexibility in how different content types are styled.

• Review the Template Parts in LSX Design #197 - Redundancy and overlap in header, footer, and other template parts, making maintenance difficult.

• Defining New Block Patterns and Categories for LSX Design theme #194
  Current State LSX Design has block patterns, but they are not well-defined or categorised. Block patterns in LSX Design are not well-categorized, making it difficult for users to navigate through available patterns. WordPress 6.7 and previous ver…

Adding Post Format Support #196
Current State Post formats are currently disabled in LSX Design. WordPress now supports enabling post formats for block themes, offering flexibility in how different content types are styled. Issues No Post Formats: Post formats are not yet imple…

• Moving to WordPress Standard Spacing and Font Sizes #195 - adopt new WordPress standardized size values and units for fonts and spacing in recent releases.

• Registering Block Bindings for Copyright #193 - Block bindings are a new feature in WordPress that allow for dynamic and flexible updates to block content.

• Implementing Section Styles in LSX Design #192 - define section styles using theme.json, enabling greater flexibility and modularity for page layouts.

• Implementing Color Palettes in LSX Design #187 - color palettes allows for easier customization.

• Exploring adding Block Variations for display WooCommerce Brands Plugin Shortcodes #186 - The WooCommerce Brands plugin currently supports shortcode output for brand lists and thumbnails. We’re exploring the idea of creating block-based variations for a more modern WordPress editing experience.

---

Deliverables

1. Complete transition of all block, typography, section, and color styles to theme.json.
2. Enhanced accessibility through focus states, ARIA support, and automated testing.
3. Fully restructured block patterns and categories for improved usability and flexibility.
4. Removal of redundant CSS files and full reliance on theme.json for style management.
5. Documentation on how to use these updates within the LSX Design theme for developers and users.

---

Dependencies

• GitHub Discussions: Each of the sub-tasks has its own detailed discussion to guide the implementation of specific JSON updates. Ensure each task is linked appropriately.

• Testing and QA: Automated tests and visual testing will be required to validate the transition from CSS to JSON.

Progress Tracking

• Section Styles Implementation: Link to Discussion 10
• Typography Sets: Link to Discussion 11
• Spacing and Font Sizes: Link to Discussion 12
• Color Palettes: Link to Discussion 13
• Post Formats Support: Link to Discussion 14
• Block Bindings: Link to Discussion 15
• Block Patterns: Link to Discussion 16
• Block CSS to JSON: Link to Discussion 17
• Accessibility Testing: Link to Accessibility Testing and ARIA Support Discussion