Implementing Section Styles in LSX Design

[ashleyshaw]

Current State

LSX Design does not yet have defined section styles. WordPress 6.7 and recent versions introduced the ability to define section styles using theme.json, enabling greater flexibility and modularity for page layouts.

Issues

• No Section Styles: LSX Design lacks predefined section styles for core/group, core/columns, and similar block types.

Recommendations

• Create Section Styles Folder: Set up a new folder /lsx-design/styles/sections/ for section styles.
• Example Implementation: Define section styles similar to WordPress defaults, as shown in section-1.json.
• Leverage Theme Colors: Ensure section backgrounds and text use the theme’s color palettes.

{
  "version": 3,
  "slug": "section-1",
  "title": "Style 1",
  "blockTypes": ["core/group", "core/columns"],
  "styles": {
    "color": {
      "background": "var:preset|color|accent-1",
      "text": "var:preset|color|contrast"
    }
  }
}