Theme JSON: abstract style/CSS logic and utilities #65728
Description
What problem does this address?
I believe there is some styles-related utility logic that could be abstracted away from WP_Theme_JSON.
Maybe some other specific theme logic as well 🤷🏻
WP_Theme_JSON and its test suites are very large and difficult to grok for newcomers, and, I'd wager, their size often contributes the friction one experiences when synching changes between Gutenberg and Core, not to mention frightening new contributions.
Not to mention the fact that, as it ages, it grows even bigger as it accommodates changes in the way WordPress expresses CSS/interprets theme.json.
Related:
What is your proposed solution?
@oandregal made a valid point in relation to the separation of concerns:
WP_Theme_JSON should deal with the core functions (sanitization, merging, etc) and delegate the style generation to other pieces.
The style engine is sitting quietly in the corner doing its thing.
It already shares some minor style utilities with theme JSON, e.g., preset var parsing and CSS rule sanitization, and I believe its scope can be widened to house theme.json tree style processing and output.
Possibly, a new class could handle theme.json tree consumption, e.g., class-wp-style-engine-theme.php
Below is a very rough start of an audit of current methods:
| theme json | style engine |
|---|---|
| convert_custom_properties | get_css_var_value + get_slug_from_preset_value |
| compute_style_properties | is_valid_style_value |
| is_safe_css_declaration | WP_Style_Engine_CSS_Declarations:filter_declaration |
| compute_theme_vars | Refactor get_css_var_value + get_slug_from_preset_value ? |
| compute_preset_vars | CSS var definitions...Refactor get_css_var_value + get_slug_from_preset_value ? |
| to_ruleset | WP_Style_Engine_CSS_Rule |
| compute_preset_classes | ? |
| get_property_value | ? |
I'd propose a gentle introduction would be to:
- replace the theme_json utils with style engine ones for parsing CSS vars and sanitizing CSS rules, then
- computing rules such as preset vars, and styles already known to the style engine (for example, colors, typography etc. The style engine has no idea about layout, duotone and other more complex, bespoke style logic).
- iterating over the theme style node tree
- ??