Problem/Motivation
Themes style the editor and the frontend with theme-support.globalStyles and the presets of __experimentalFeatures in their *.gutenberg.yml, which GlobalStylesGenerator and PresetCssGenerator turn into CSS. They only cover part of what WordPress generates from theme.json, so themes still write CSS for things a theme.json-based theme does in configuration:
- No pseudo-states (
:hover,:focus…) on the link and button elements. settings.customdoesn't become--wp--custom--*variables.- Font size presets aren't fluid (
settings.typography.fluid). - Block styles use
.wp-block-xand ignore the block'sselectors, socore/buttonstyles the wrapper, not the link.elementsandvariationsinside blocks are dropped. - No root padding (
useRootPaddingAwareAlignments) and noappearanceTools. - In the editor the global styles come after the theme's stylesheets, on the frontend before them, so the same rule can win in one and lose in the other.
- A sub-theme's
theme-supportreplaces whole keys of its base theme instead of merging into them, and the block supports read the base theme's definition only.
Proposed resolution
Port the missing parts of WP_Theme_JSON (Gutenberg 24.1) into the generators: element pseudo-states, custom properties, fluid font size presets, block selectors with elements and style variations, root padding, appearanceTools, the same stylesheet order in the editor and on the frontend, and a deep merge of base and sub-theme definitions.
Remaining tasks
- Tests for the generated CSS.
- Document the supported configuration in the README.
User interface changes
None.
Issue fork gutenberg-3631324
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments