Problem/Motivation

The Gutenberg Base theme (themes/gutenberg_base) is new in 4.0.x and needs a round of fixes before the release.

The first one: the theme can't be installed on Drupal 12 because its base theme is Stable 9. Stable 9 has been deprecated since Drupal 11 and is no longer in Drupal 12 core.

Proposed resolution

  • Drop Stable 9 and use base theme: false, so the theme installs on Drupal 12.
  • Give a Cover the text color that goes with its overlay color, also in dark mode.
  • Make the theme an example of a theme configured like a WordPress block theme: the design tokens are the presets and custom properties of gutenberg_base.gutenberg.yml, and the CSS only uses their variables. The color schemes, the light weights and the shape are partial theme.json files in styles/ that the theme settings merge in, and dark mode maps the custom.dark colors. The styles of the body, the elements and simple blocks are global styles. Needs #3631324.
  • Redesign the theme, closer to a calm, typographic look: Mona Sans, a larger fluid type scale with semibold headings, warm neutral colors with cream and sage tints, soft corners by default (Square and Round shapes), soft panels and cards, more space between sections, and the Lime, Sand and Lavender color schemes (Lime replaces Yellow).
  • Split the site header into two plates (the branding and the actions) on a transparent bar, which take the colors of the section under them, and replace the translucent header over a hero cover with "Hide the site header on the cover": the header shows once the page scrolls past the cover. The header no longer hides when scrolling down.
  • Give the menu panel the width of the header plates and the corners of the shape, and fade and slide it in and out.
  • Add a "Text color" style to the Image block: the image is painted in the text color, e.g. a logo that shows on both dark and light covers, with the color schemes and dark mode.
  • Space the blocks in the inner container of Group blocks (the 3.x compatibility setting), which got no margins.
  • Show a bobbing chevron at the bottom of full-height covers, a hint that the page goes on below.

Remaining tasks

  • More fixes to follow, added here as they land.

User interface changes

None so far.

Issue fork gutenberg-3631302

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. See original summary.

marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Issue summary: View changes