Transitioning from CSS Block Styling to theme.json in LSX Design Theme

[ashleyshaw]

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 line heights defined using CSS for different heading styles.
• Buttons (button.css): Extensive use of CSS for button states, hover effects, and padding settings.
• Columns (columns.css): Styling of columns with borders, shadows, and responsive adjustments in CSS.
• Group (group.css): Shadows and borders defined using CSS.
• Paragraphs (paragraph.css): Custom font sizes and subheading styles using CSS.

Additionally, there’s a custom editor-style.css to support block editor styling, which is necessary due to the reliance on CSS for block styling.

Challenges with the Current Setup

1. Extensive CSS Dependency:

   • The use of CSS to style blocks requires duplicating efforts for editor and front-end compatibility, leading to bloated stylesheets and complex maintenance.
   • It complicates making changes to block styles since both front-end and editor styles need to be updated.

2. Editor Compatibility:

   • Styles defined in CSS don’t always translate well into the block editor, creating inconsistencies between what users see in the editor and what appears on the front end.
   • The need for editor-style.css increases complexity, and editor previews aren’t as accurate.

3. Redundancy in Styling:

   • Many styles currently applied using CSS can be handled directly by theme.json. This leads to redundant styling rules that can instead be centralized in JSON.

Recommended Transition to theme.json

To optimize the LSX Design theme, it’s recommended to transition block styles from CSS to theme.json. This approach will:

• Simplify Styling Management: By defining styles in theme.json, both the front-end and editor will share the same styling definitions.
• Reduce Redundancy: Centralizing block styles in JSON eliminates the need for extensive CSS and reduces duplication between the front-end and block editor styles.
• Improve Editor Consistency: Styles defined in theme.json are automatically applied in the block editor, ensuring a true WYSIWYG experience.

Proposed Steps for Transitioning Specific Blocks

1. Headings (heading.css)

• Current Setup: Heading styles (H1 to H4) are defined using CSS for font sizes, weights, and line heights.
• Recommendation: Move these settings to theme.json using block-specific styles for core/heading.

{
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--large)",
          "fontWeight": "var(--wp--custom--font-weight--medium)",
          "lineHeight": "var(--wp--custom--line-height--heading)"
        }
      }
    }
  }
}

2. Buttons (button.css)

• Current Setup: Button paddings, hover effects, and background colors are extensively defined using CSS.
• Recommendation: Migrate button styles to theme.json, using it for hover states, background colors, and border-radius settings.

{
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": "8px"
        },
        "color": {
          "background": "var(--wp--custom--colour--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "spacing": {
          "padding": {
            "top": "10px",
            "right": "20px",
            "bottom": "10px",
            "left": "20px"
          }
        }
      }
    }
  }
}

3. Columns (columns.css)

• Current Setup: Columns are styled with borders, shadows, and responsive breakpoints in CSS.
• Recommendation: Migrate border and shadow settings into the theme.json file for the core/columns block.

{
  "styles": {
    "blocks": {
      "core/columns": {
        "border": {
          "width": "1px",
          "color": "#000"
        },
        "boxShadow": "var(--wp--preset--shadow--small)"
      }
    }
  }
}

4. Group (group.css)

• Current Setup: The wp-block-group class has box-shadow and border styles applied using CSS.
• Recommendation: Move box-shadow settings to theme.json for the core/group block.

{
  "styles": {
    "blocks": {
      "core/group": {
        "boxShadow": "var(--wp--preset--shadow--medium)",
        "border": {
          "width": "1px",
          "color": "#000"
        }
      }
    }
  }
}

5. Paragraphs (paragraph.css)

• Current Setup: CSS defines custom styles for paragraphs and subheadings.
• Recommendation: Migrate subheading styles and padding to theme.json.

{
  "styles": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)",
          "fontWeight": "var(--wp--custom--font-weight--medium)"
        },
        "spacing": {
          "padding": "20px"
        }
      }
    }
  }
}

General Benefits of Transitioning to theme.json

1. Consistency: Defining styles in JSON ensures consistency between what users see in the block editor and the final output on the website.
2. Performance: Reducing the reliance on custom CSS can lead to performance improvements, as fewer stylesheets need to be loaded.
3. Simplified Maintenance: With block styles managed centrally in theme.json, maintenance becomes simpler as all design changes are applied globally across both the editor and front-end.
4. Scalability: As you expand your theme’s functionality, it’s easier to add new styles and support for more blocks within the theme.json structure.

Conclusion

Transitioning your block styling from CSS to theme.json will greatly enhance maintainability, consistency, and performance for the LSX Design theme. By focusing on a JSON-based approach, you will simplify your styling process and improve compatibility with future WordPress updates and the block editor.

If you require further assistance with implementing this approach or need help converting additional styles, feel free to reach out!