Global Style Refactor (No Inline CSS)

[ashleyshaw]

Global Style Refactor (No Inline CSS)

Type: Parent Issue / Epic

The Tour Operator plugin currently applies many inline styles directly to blocks and markup. This leads to:

• Difficulty maintaining consistency with the theme.json global styles.
• Repetition and hard-coded spacing/margins.
• Challenges adapting to future design system updates.

Goal

Refactor the plugin’s styles to rely entirely on the global styles provided in the theme.json and design tokens of the LSX Design System.

Scope

• Remove inline style attributes from block markup wherever possible.
• Refactor templates and block variations to use class names linked to global styles.
• Ensure block spacing (margins, padding, blockGap) is controlled via theme.json or CSS classes rather than inline CSS.
• Update any hard-coded color, font size, or typography styles to design tokens.
• Test all templates and frontend rendering after refactor.

Acceptance Criteria

• Inline styles are removed from block markup for layout, spacing, fonts, and colours.
• All layout and typography are driven via theme.json, global styles, or utility classes.
• No visual regressions in frontend templates.
• Style Book (Editor) correctly reflects plugin block styling without inline overrides.
• Document changes in a developer guide for future maintainability.

References

• Theme JSON documentation: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
• LSX Design System Figma file: https://www.figma.com/community/file/1397897183253228355/lsx-tour-operator-design-system