Block Styles Breakdown

[mtias]

This is an overview of the concrete tasks needed to proceed with the project scope of #9534 (see also #19611). It operates on three levels, or style origins: local blocks, theme defaults, and global modifications.

First 🌊

Goal: prototype a system that connects the three style origins and demonstrates how it works for a few top-level blocks.

Infrastructure

Ensure at all times the editor reflects the front faithfully.

• Create the concept of implicit style attributes to control the appearance of the block. Common Block Functionality #15450 Introduce a support key for support global style colors in blocks #21021
• Centralize style mappings Centralize style mappings declaration #25051
• Migrate existing attributes (font-size, color) and introduce missing properties (line-height, family). Consolidate the style attributes of blocks #22700
  • font-size: paragraph (Make font size an implicit attribute of the block #21153), heading (Add font size control for heading block #21431)
  • line-height: paragraph (Paragraph: Add LineHeightControl + Attribute #20775), heading (Heading: Add line height support #21215)
  • color: paragraph (Update the paragraph block to use the colors support key #21037), heading (Update the heading block to use the colors hook #21039)
  • set colors individually block.json: set color property individually #24927
  • weight Add font weight picking mechanism #24978
  • family Enabling global styles to handle custom font declarations #23204
• Evolve a theme.json specification for controlling the editor and the style attributes of different origins. Document experimental theme.json #22518 Block editor: Controlling the Block Editor #20588
• Merge the different style origins (block, theme, user). Consolidate overall Global Styles mechanics in the server #20047 Manage CSS for Global Styles #20290
• Generate front-end styles using the new system. Add: Global styles css variables generation mechanism #19883
• Generate editor styles using the new system. Open up theme.json processing  #22520

Interface

These are the different tools that interact with appearance values.

• Expose global styles tool in edit-site. This should be a straightforward rendering of a sidebar in the site editor displaying the global values and palette. Add global styles sidebar at edit site screen #24250
• Allow users to modify some style attributes in the global styles panel. Global styles interface with styling for v1 #20367
  • colors: link colors (link, hover / focus, active) Global styles: link color setting #21032
  • typography: font families, font size, line height. Global styles: base font and scale #21030 Global styles: heading and text font families #21028 Global styles: add text styles to blocks #20773
  • reset modifications to theme defaults. Global styles: resetting #20868
• Develop interface components to operate with new attributes. Prior art in font sizes and color panel. Global styles interface with styling for v1 #20367
  • line-height to Paragraph and Heading inspectors. Explore adding line height to paragraph and heading blocks #20339

Second 🌊

Goal: develop all necessary sub-systems.

Infrastructure

• Stabilize:
  • (one pr remaining to merge) Client: review there's no duplication and improve the way metadata is structured.
  • Server-client metadata: do not send data we already have Reduce the amount of data Global Styles sends to the client #26802
  • Server: consolidate theme.json entity Reduce the amount of data Global Styles sends to the client #26802
  • Server: consolidate theme.json processor Update mechanism that resolves Global Styles data #27237
  • Prepare a core patch for 5.7 (closed) Global Styles in WordPress 5.7 #27506
• theme.json
  • Consolidate dynamic selectors (selectors for blocks that represent multiple HTML elements, such as heading or list). Try new syntax for dynamic selectors #24423 Add: Mechanism to detect if a block instance matches a global styles selector #26945
  • Control design tools visibility (superseded) Controlling design tools visibility #27295
  • Make settings & styles top-level keys Updates to experimental-theme.json #28163
  • Split global selector into defaults and root Update theme.json: split global block selector into root and defaults #28533
    /24165.
• Style properties
  • font-style Block Support: Add font style and weight options with combined UI #26444 Block Support: Separate opt in for font style and weight options #26844
  • font-weight Block Support: Add font style and weight options with combined UI #26444 Block Support: Separate opt in for font style and weight options #26844
  • text-decoration Block Support: Add text decoration block support using CSS variables #26059
  • text-transform Block Support: Add text transform block support using CSS variables #26060
  • Padding (global UI + theme.json) Global Styles: update metadata and add support for padding #27099 Add padding control to the Global Styles sidebar #27154
  • border-radius Block Support: Add border radius support #25791
• Presets
  • Make them translatable via theme.json Extract translatable strings from theme.json files wp-cli/i18n-command#224 Global Styles: Use context when translating entries in theme.json #28246
  • Allow creating presets in contexts other than global. Automatically generate required preset classes #25768
  • Allow creating user-defined color palettes. Update: Restrict edition of theme colors by users. #27250
  • Allow presets to use other preset variables Preset controls need the preset CSS variables in scope #26511

Interface

• Make editor controls reflect styles, whether they come from theme or user. Add color reference mechanism #21490 Add link color component #22722 Global Styles Color Palette editor default to theme/core pallete. #26783 Update: Use theme and core styles as defaults on the global styles #26786
• Reset to theme defaults Global Styles: Add button to reset color palette #26975

Third 🌊

Goal: merge the non UI parts of global styles in WordPress 5.8.

block.json / block supports:

• Next iteration of block supports mechanism #28913 Add support for skip serialization to all properties. Core blocks can be migrated iteratively.
• Support for border properties  #29616 border-width, border-style, border-color
• Add a layout config to the group and theme.json and make alignments declarative #29335 Alignments
• Link Color: substitute the CSS Custom Property by the mechanism used in layout and duotone #31488 link color: make it work like layout or duotone. Link color doesn't work for author role #25151 Will also fix link color for author roles.

theme.json:

• Changes to theme.json #29891 Changes to theme.json
• Versioning theme.json from the theme, implemented as part of Update shape of theme.json #30541
• Default Colors, Theme Colors, and Custom Colors #29568 colors: allow having defaults, theme, and custom
• Custom controls, block supports, and theme.json #29778 Theme authors should be able to use any styles in theme.json independently from the block.json support.
• Make theme.json cross-platform (web & mobile) #24165 Mobile: confirm there are not blockers to make theme.json cross-platform (web & mobile).
• FSE: theme data for Global Styles and Templates #30191 Use wp_theme taxonomy instead of post_name to associate user styles with particular themes.

Internationalization:

• Themes: Translate custom templates in theme.json #29828 theme.json: customTemplates.
• block supports: allow changing UI control labels Color controls: take labels from block supports #29155 (discarded, instead we rephrased the labels to be more adequate for different contexts) Inspector Controls: Rephrase, polish, and make consistent color labels. #30075

Docs:

• Update theme.json docs to make clear what's part of WordPress 5.8 and what's part of the plugin. Update theme.json docs for WordPress 5.8 #33131
• Update theme support docs to state that link color is now stable and part of Wordpress core, using theme.json. The experimental-link-color theme support will be deprecated and removed when the plugin requires WordPress 5.8 as the minimum version. Update documentation for link color in WordPress 5.8 #33162
• Update docs for block supports, including a note about __experimentalSkipSerialization.

Extensibility:

• Add extensibility hooks to global styles infrastructure #27504 Hooking into the lifecycle of GS: stabilize API and define what sort of hooks do we need.
• How to filter block_editor_settings & global styles settings #30082 Block editor settings & global styles settings.

Bug fixes

• Disable/Enable custom colors, gradients, and font sizes Fix: Logic to enable custom colors, gradients, and font sizes. #32200
• Empty color palette should disable the feature Fix: Allow themes to disable the color and gradients palette. #32225 Enqueue core and theme colors by using separate structures per origin. #32358
• settings.color no longer have the theme colors Theme's color palette no longer returned via Block Editor settings #32027 Enqueue core and theme colors by using separate structures per origin. #32358
• Block presets generate incorrect styles Theme.json: Incorrect selectors are used when color palettes are added to blocks #31660

Fourth 🌊

Follow-ups to WordPress 5.8 release.

Block supports:

• Font Family: make it work like any other block support with presets #31489

theme.json:

• Allow disabling text and background color via theme.json #34414
• theme.json v2: track changes #34349
• Improve the way we handle custom units and how we interact with themes config. #33470
• Add a setting to opt-out of block templates using theme.json #33500
• Allow filtering the alignment options of blocks via theme.json #34317
• Disable the wide width control if the theme does not provide a layout.wideWidth value #34507

Stylesheet:

• Global Styles: consider loading user styles after theme styles #34141

Performance:

• Make the global stylesheet available for all themes #34328
• Only ship default presets once:
  • Only enqueue default colors & gradients once #34138
  • Only enqueue default font-sizes once #34006
• Theme.json: Block specific CSS is printed even if a block is not used on the current page #31642
• Use Global Styles or theme.json to style individual blocks #33977
• Track changes in the size of the global stylesheet #34329

Interface

• The Global Styles Interface #34574

Backlog

The things listed here don't need to be necessarily implemented, but should be considered.

block.json: nothing planned

• Spacer Block: Allow themes to define a default value theme.json #27614 Potential use case to add height (spacer and cover, which has a custom one at the moment).

theme.json

• Explore block style variations as packages of style attributes #33232 See also the use case for margin
• Versioning theme.json data from the user Handle an evolving theme.json shape (consider add versioning). #27230 (comment)
• Consider a standardized way to modify hover/focus/active states for blocks Consider a standardized way to modify hover/focus/active states for blocks #27075
• Allow all block-editor theme support options to be defined via theme.json Allow all Gutenberg theme support options to be defined in theme.json #26901
• Consider allowing themes to enqueue stylesheets in theme.json Consider allowing themes to enqueue stylesheets in theme.json #26902
• How to express nested content
  • Use a flat structure of selectors core/group core/paragraph. Updates to experimental-theme.json #28163
  • We could have separate files for template parts (in addition to the theme.json for the site or main "document", see Global Styles: composable styles for different contexts #27233
  • We could create CSS vars for container blocks Global Styles: Add CSS vars for root level settings #29714 (comment)
• Do we need to support dynamic values that change depending on other values? Example for colors theme.json: change text colors depending on background #24166
• Consolidate block attributes, block supports, and theme.json shape Block API: explore aligning block attributes, block supports, and theme.json shape #22887
• Schema and type validation Add type validation and/or theme.json schema #26955
• Allow CSS properties that we don't manage? Global Styles: Should we Allow CSS properties that we don't manage at the moment? #27231
• Responsive styles/media queries (styles depending on window size). Responsive Global Styles #20244
• Define if global attributes (base font, color, page background) can be conceptualized as attributes of a root Site block. [Explore] Site Block #16998 Related: consider global site width and padding Explore adding site width and padding to global styles #20771

Expand to more style properties:

• text alignment Provide a way to remove/modify text alignment for core blocks #24616
• height Separator: Add means to control height #28409
• margin Custom Margin/Padding to column block #25988
• width Add width to setting and styles #31037
• Free-form custom CSS area. Consider whether this should be per-block as in Add Custom CSS support to the Group block #25413 or global to all of them?
• API for loading font families. This should be inherently extensible and likely unopinionated. Maybe explore an API like wp_register_font_family.
• Justified text Allow making text flushed left or justified #27300

Extensibility:

• Support for child themes FSE: support for child themes #25612
• Export theme.json configs (including user preferences) as part of exporting templates & template parts Exporting Block Themes and Styles #27941 Site Editor: Export global style settings #27528
• UI extensibility: allow 3rd parties to hook into it, etc.

Interface:

• Global styles sidebar: labels for panels in the global styles sidebar (the subtitle of the "headings" panel, for example, "Headings (h1)", is taken from the __experimentalSelector of the heading block). How is this in the new UI?
• Integrate new component system Component System: Continue Integration #28399 https://status.g2-components.com/
• Do not show-sidebar if the theme doesn't have theme.json support Do not show the Global Styles sidebar in edit site if theme doesn't support theme.json #27394
• Custom controls for the Global Styles sidebar. Custom controls, block supports, and theme.json #29778
• Themes can control the visibility of UI controls. Relates to sidebars Sidebar Controls & Component System #27331 and the old proposal to control visibility Controlling design tools visibility #27295 If something is disabled via theme.json it should be disabled for both the global styles and the block sidebar.
• Blue dot on block panels that have modifications Blue dot on block panels that have modifications #27474
• Flow for editing the specific styles of a specific block type Flow for editing the styles of a specific block type #27393
• Advanced panels of blocks should show which Global Styles are affecting it Advanced panels of blocks should show which Global Styles are affecting it #27475
• Exploring beyond a sidebar for exposing styling tools Exploring beyond a sidebar for exposing styling tools #20212
• Explore combining all style-related attributes of a block into a "Style" tab in the inspector separate from "Settings".
• Explore a way to lift local modifications on blocks to global (apply certain modifications to all paragraphs or to all blocks that consume an attribute).
• Explore if it's needed to show locally on blocks when they are inheriting from a global or theme setting.
• Allow granular saving options Site Editor: Offer more granular information in multi-entity saving flow #29388

Iterate on design tools:

• Add background editing tools to Cover. Background Editor for Cover block #20193
• Add spacing control to Gallery. Add a way to control spacing between gallery images #20705
• Establish background tools components hooked to the relevant attributes. Make "Background Tools" an easy API and add to Group / Columns #16479
• Look at how to absorb units for font-size How to absorb font size units #25137 Add relative units for font size option #23323

Misc:

• Try using transient attributes on global styles entity Try using transient attributes on global styles entity #25138
• Dark mode: editor Improve editor UI on dark backgrounds #28200 authors Discussion: prefers-color-scheme media-query #24368
• Do not create revisions for the CPT used by global styles Do not create revisions for the GlobalStyles CustomPostType #30132

[jorgefilipecosta]

Sharing some thoughts on the current status for infrastructure/ my interpretation of some infrastructure tasks:

Create the concept of implicit attributes for appearance pairing

It seems the style attribute we are using for colors introduced in #21021 addressed this part we are also using it for lineHeight with success and without the need to register new attributes.

Hook appearance variables to the editor rendering.

It seems this is about making sure styles are regenerated when the structure that holds global style changes. For example, #20530 accomplishes this by compiling the styles on GlobalStylesProvider.

Look at style variations as packages of style attribute sets.

We can achieve this by adding a styles structure to theme.json:

{
    ...
    styles: {
        ‘core/paragraph’: {
            ‘huge’: {
                fontSize: 14,
            }
        }
    }
}

We may also achieve the "Custom User Styles" part of #7551 by just allowing the user to save the current block style attributes as a customization of the theme.json structure.