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.custom doesn't become --wp--custom--* variables.
  • Font size presets aren't fluid (settings.typography.fluid).
  • Block styles use .wp-block-x and ignore the block's selectors, so core/button styles the wrapper, not the link. elements and variations inside blocks are dropped.
  • No root padding (useRootPaddingAwareAlignments) and no appearanceTools.
  • 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-support replaces 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

Command icon 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

marcofernandes created an issue.