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: Styles doesn't offer granular saving options #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.

[kjellr]

At this week's Block-based Themes meeting, the group discussed some of the upcoming design tools in this ticket, and whether they should be opt-in or opt-out for themes. Here are our notes:

• If a theme has theme.json, it seems ok to have all new design tools be opt-out.
• Otherwise, if the feature is expected to “just work” with themes without breaking something, it’s probably ok to enable it by default. Otherwise, they should be opt-in.
• If these are “editor” features, and not something the theme needs to explicitly build in support for, then it may be confusing to use add_theme_support() for them.
• We should keep in mind that if users move between block-based themes and non-block-based themes, it will likely be confusing for seemingly unrelated features to turn on and off.

More details in the meeting notes.

[jorgefilipecosta]

With the first beta version of WordPress 5.7 not very far away I'm sharing this summary after some discussion with @nosolosw specifying what are the tasks we think should be part of v1 and/or that may be part of v1.

What we will do next?

These are the tasks we will work on and plan to have ready soon. Are the most prioritary tasks.

• Versioning. Handle an evolving theme.json shape (consider add versioning). #27230

  • This needs exploration. One option is that theme.json files have a version number, similarly to block.json files. so if we need to make a breaking change we can still keep code that is able to deal with files from a previous version.

• Child theme support. FSE: support for child themes #25612

  • A child theme inherits theme.json from parents(s) can add new properties or overwrite existing properties.

• (In progress) Padding support on global styles. Add padding control to the Global Styles sidebar #27154

• (In progress) Refactor our code and merge it into the core. A PR that started the refactoring Extract theme json processor  #26803.

• (In progress) Improve the way client-side metadata is structured, make sure it matches server metadata shape, and try to avoid metadata duplication. Try using transient attributes on global styles entity #25138

• Update KSES to accept our link color styles. Link color doesn't work for author role #25151 Revive: Fix link color for roles without unfiltered_html capabilities #25411

• (In progress) Expose a structure in the core that wp-cli can use to know what theme.json strings are translatable. Extract translatable strings from theme.json files wp-cli/i18n-command#224

• Discuss mobile support #24165 and have some double-checking if the current theme.json functionality can work well on mobile.

What we can do next?

Tasks we can work on, it would be nice to have but are not a must and are lower priority may or may not be part of v1.

• Create a JSON schema specification for theme.json. Developers can use the schema to validate if their theme.json files are correct and easily locate errors. Improving the developer experience of using theme.json. We can use the scheme in the core to remove invalid paths etc. Add type validation and/or theme.json schema #26955

Things for the future

Not part of a first version. Things we may consider in the future.

• Nested styles for semantic contexts. For example, apply a specific base font size for things inside a sidebar. Global Styles: composable styles for different contexts #27233

• Allow CSS properties that we don't manage at the moment. E.g: apply a specific CSS property like textShadow. Global Styles: Should we Allow CSS properties that we don't manage at the moment? #27231

Related tasks but that initially will not use theme.json/global styles mechanisms.

• Look into the alignment issues FSE: Provide a way for Gutenberg to provide alignment styles for the front end.  #26633

• Responsive styles/media queries (styles depending on window size). Responsive Global Styles #20244

What decisions do we need to do?

• Are the APIs we offer themes enough to have control about which UI components are surfaced to the user in the global styles sidebar? OR should we expand our API’s? Should our API's allow to specify that the user can change a given style property like line-height at the global styles level, but not at the block level (block inspector).
• If a block does not support something like line-height, but the theme specifies a line-height for that block. Should we output a line-height style anyway?
• What are the controls that are available per block? Which blocks by default have font size available? Which have text color? Which have line-height?

What’s next on the UI/UX side?

The first beta of WordPress 5.7 goes out in January, so we need to have a v1 for the UI ready sometime before the first beta.

• Typography tools are going to be g2 based (or at least some parts like font size control). So we need to merge (at least parts of) g2 in order to have the typography tools ready.

• Extensibility mechanism for 3rd party

• It seems the global styles although functional does not provide a good experience, panels inside panels, a gigantic list of panels (one per each block). What is the plan for the other parts of UI? What are the things we should improve on the UI of these other parts to make them ready for the first version?

  • Navigation between all the different blocks that we can apply global styles to and between the global context.

  • Color options (text, background, and link).

  • Color palette editor.

cc: @nosolosw, @shaunandrews, @jasmussen, @ItsJonQ, @mcsf, @youknowriad

[oandregal]

This week's status report:

Shipped

• Block Supports: added a gutenberg_block_has_support helper function and support for padding in dynamic blocks 30322, border for search block Search Block: Add border radius support using skip serialization feature #30227

• Fixes: title in the save panel of the site editor 30521, fix for themes without theme.json support but with experimental link color support 30452

Ongoing

• Block supports:

  • border for button block Button Block: Use hook based border support #30194,
  • add border color/style/width properties Block Supports: Add border color, style and width support #30124
  • spacing Block Support: Add configurable sides and margins to spacing support #30333 Add a margin block support and enable in group block #30371

• Theme.json

  • Update format Changes to theme.json #29891 There's now a draft PR at Update shape of theme.json #30541
  • Conversation about whether and how to expand the use of CSS Custom Properties Global Styles: Add CSS vars for root level settings #29714

[oandregal]

This week in global styles:

Landed

• Parts of theme.json with elements Changes to theme.json #29891

  • preparations to make changes easier Global Styles: refactor how we iterate over the tree #30801 Global Styles: absorb editor settings transformation in WP_Theme_JSON #30610
  • i18n process: make it not depend on a particular path Global Styles: Make the dependency of the star matcher explicit when translating theme.json #30604
  • add mechanism to migrate from a v0 schema to the latest theme.json: add util to transfrom from a v0 schema to the latest #30600
  • clean-ups Global Styles: Remove no longer needed translations handled in PHP for settings #30605 Improve get_merged_data() code #30612

• block supports

  • border radius for the button block Button Block: Use hook based border support #30194
  • font size & font family for the button block Block Library - Buttons: Add Typography support #30394
  • colors for the verse block Verse Block: Add support for custom colors #27736
  • border radius for the search block Search Block: Add border radius support using skip serialization feature #30227

Ongoing

• theme.json with elements Changes to theme.json #29891

  • extract sanitization method GlobalStyles: extract sanitize method #30809
  • changes to shape Update shape of theme.json #30541

• bugfixes Global Styles: clean cached data when switching themes #30830

• block supports: add new style properties: border-color, border-styles, border-width Block Supports: Add border color, style and width support #30124

[oandregal]

This week in global styles:

Landed

theme.json with elements #29891

• extract sanitization method GlobalStyles: extract sanitize method #30809

Block Supports & theme.json properties:

• Added block support & theme.json support for: border-color, border-style, and border-width. Block Supports: Add border color, style and width support #30124

Bugfixes, code quality

• Clean cached data when switching themes Global Styles: clean cached data when switching themes #30830
• Standarize block editor settings load Block Editor: Standardize loading default block editor settings #30245
• Fix regression in color panel of global styles sidebar Fix: CSS variable reference mechanism regression. #31015
• Add utility to retrieve classes and styles in color hook Color Block Support: Add utilities to retrieve color classes and styles #30869 Button Block: Update to use color support utils to retrieve classes and styles #30870
• Polish color labels Inspector Controls: Rephrase, polish, and make consistent color labels. #30075

Ongoing

theme.json with elements #29891

• changes to shape (working in all editors & front-end) Update shape of theme.json #30541

Block Supports:

• Allow skipping serialization for typography attributes Block Supports: Allow skipping serialization of typography attributes #30880
• Conversation about "overlay" colors Navigation Block: Add separate overlay color option #29963 (comment)
• Migrate more blocks using the skipSerialization mechanism as well as adding more properties Next iteration of block supports mechanism #28913

Bugfixes:

• kses filtering (approved) Global Styles: Make the config resilient to changes to safecss_filter_attr() #30888

Priorities

The priority continues to be shipping #29891 as soon as possible to unblock related work.

#28913 is a good issue to look at if you can lend a hand (help with reviews, migrate more blocks, more properties, etc).

[oandregal]

Weekly status report for core-editor meeting.

Shipped this week

theme.json

• clean-ups Remove tests and make utility methods private #31224

block.json / block supports

• duotone Add duotone block supports #26752
• padding: fix to allow units other than px Fix: Possible CSS units not passed to useCustomUnits.  #31057
• font-size: can be used in nodes other than the wrapper Block Supports: Allow skipping serialization of font size #30879
• border-color: fix for dynamic blocks Block Support: Fix server-side border color support check #31020
• blocks
  • padding for site title Site title: Add padding #31125
  • padding and letter casing for site tagline Site Tagline: letter casing and padding #31042
  • link color for post date Table: Add colors block support #30791
  • table uses now background/text colors from the theme Table: Add colors block support #30791

Internationalization

• custom templates can be translated via theme.json Themes: Translate custom templates in theme.json #29828

KSES

• fix to sanitizing user styles Global Styles: Make the config resilient to changes to safecss_filter_attr() #30888

Site editor:

• fixes for preset classes in the site editor Preset classes for site editor: generate them like in the front-end #31218 Fix generation of preset class for border color in site editor #31217 Fix preset class specificity in site editor #31204
• fix for color selector in the UI color panel Fix: CSS variable reference mechanism regression. #31015

Ongoing

theme.json

• Changes to format Changes to theme.json #29891 are ready Update shape of theme.json #30541 we're now testing and polishing. It also includes versioning (aka migrate the older formats to the new one).
• Improve API to take data from the theme directly Global Styles: Add theme origin to getStyle #31267

block.json / block supports

• typography (line-height, font-weight, etc) can be used in nodes other than the wrapper Block Supports: Allow skipping serialization of typography attributes #30880
• border and color (background, text) to the pull quote block Pullquote: add block support  #30951

New style properties

• Add support for letter-spacing Add Letter-spacing and enable this for site title and site tagline #31118

Misc

• Add a new endpoint that exposes block editor settings through the REST API (by mobile to access global styles data) Add a new endpoint that exposes block editor settings through the REST API #29969
• standardize capabilities of wp_template, wp_template_part and wp_global_styles Standardise capabilities for wp_template, wp_template_part and wp_global_styles #30893

Priorities

The priority continues to be shipping #29891 as soon as possible to unblock related work.

#28913 is a good issue to look at if you can lend a hand (help with reviews, migrate more blocks, more properties, etc).

[oandregal]

Status report for core-editor meeting.

Shipped this week:

block.json / block supports:

• Improve the typing performance by only rendering hook panel of selected blocks Improve the typing performance by render hooks panels for selected blocks only #31381
• Update padding to allow configurable sides Spacing Support: Update padding support to allow configurable sides #30607
• Add utils to get border classes and inline styles Border Block Support: Add utilities to get border classes and styles #31264

theme.json

• Change the format of theme.json and introduce elements as well as versioning Update shape of theme.json #30541
• The top-level styles & settings use the body selector instead of :root Update: Target global styles to the body element instead of :root #31302

Extensibility:

• Global Styles settings to use the block_editor_settings_all filter Plugin: Call deprecated hooks only when new filters not present #31027

Site editor:

• Improve APIs to allow getting theme styles Global Styles: Add theme origin to getStyle #31267

Ongoing:

block.json / block supports:

• typography: allow blocks to use these properties in inner markup Block Supports: Allow skipping serialization of typography attributes #30880
• border: allow non-pixel units Block Support: Update border support to allow non-pixel units #31483
• margin: allow configurable sides Spacing Support: Add margin block support with configurable sides #30608
• add letter-spacing Add Letter-spacing and enable this for site title and site tagline #31118
• migrate more blocks to the hooks system:
  • border for cover Cover: Add custom border support to the cover block #31370 and image Image: Add border block support for color, width, and style #31366
  • margin for separator https://github.com/WordPress/gutenberg/pull/30609\
  • border & color for pullquote Pullquote: add block support  #30951

theme.json

• Use theme taxonomy instead of post name to associate user data (stored as a CPT) with the theme Update: Use wp_theme taxonomy for wp_global_styles cpt. #31436

Priorities

After having landed #29891 via #30541 the priority is to tie up the loose ends before preparing the core patch for 5.8.

Worth highlighting is that there're two new issues to switching away from CSS Custom Properties for link #31488 and font-family #31489 (see rationale in each issue).

[oandregal]

This week report for core-editor.

Shipped this week

block supports

• margin: configurable sides Spacing Support: Add margin block support with configurable sides #30608
• spacing: hide UI for disabled properties Spacing Support: Hide UI for disabled properties #31726
• rename and stabilize useEditorFeature to useSetting Rename and stabilize useEditorFeature as useSetting #31587
• layout: add reset button Add reset button to Layout controls #30828

theme.json

• update shape to include elements Update shape of theme.json #30541
• fix settings retrieval for REST Fix global styles settings retrieval for REST #31534
• use wp_theme taxonomy for CPT Update: Use wp_theme taxonomy for wp_global_styles cpt. #31436
• rename experimental-theme.json to theme.json Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility #29981
• code quality Improve get_merged_data API so it requires less knowledge from the consumer #31552 Chore: remove unused code #31666 Chore: Remove declarations so API has coherence #31596 Chore: Remove: Declarations parameter from compute_style_properties #31573

site editor:

• cover against blocks being unregister Cover against a block being unregistered #31588
• create metadata for all blokcs Create block metadata for all blocks #31590
• remove specificity for link color Remove specificify for link color  #31497

Ongoing

block supports:

• typography: allow blocks to use these properties in inner markup Block Supports: Allow skipping serialization of typography attributes #30880
• border: allow non-pixel units Block Support: Update border support to allow non-pixel units #31483
• add letter-spacing Add Letter-spacing and enable this for site title and site tagline #31118
• migrate more blocks to the hooks system:
  • border for cover Cover: Add custom border support to the cover block #31370 and image Image: Add border block support for color, width, and style #31366
  • margin for separator https://github.com/WordPress/gutenberg/pull/30609\
  • border & color for pullquote Pullquote: add block support  #30951

theme.json

• Show both core & theme colors Make core colors classes and custom properties always available #31669
• Link color not to use CSS Custom Property Update: Use elements mechanism for link color instead of a CSS variable #31524

Priorities

Start the merge process for theme.json APIs.

[oandregal]

Status report (core-editor):

This week's focus was on getting things ready for Gutenberg 10.7 (landed most of the things we needed, there are a couple in flight) and start the merge process in core (got an initial PR for this).

Shipped this week

block supports:

• margin: fix for custom units Margin Support: Fix custom units #31776
• margin: add server-side support Spacing support: Add server-side support for margins #31808
• duotone: fix padding crash Fix duotone padding crash #31780
• font-family: fix typo that affects dynamic blocks Font-family: fix typo in supports for dynamic blocks #31974
• layout: fix for complex values Allow more complex contentWidth & wideWidth values #31740
• typography: allow blocks to use these properties in inner markup Block Supports: Allow skipping serialization of typography attributes #30880
• link color: do not set default Do not provide a default value for the link color property #31755
• link color: fix selector Fix link color selector #31820

settings:

• REST Request for mobile: more data Use mobile context in settings request & global styles #31819 Return consolidated global styles in REST Request #31762

Ongoing

block supports:

• typography: allow blocks to use these properties in inner markup Block Supports: Allow skipping serialization of typography attributes #30880
• border: allow non-pixel units Block Support: Update border support to allow non-pixel units #31483
• add letter-spacing Add Letter-spacing and enable this for site title and site tagline #31118
• migrate more blocks to the hooks system:
  • border for cover Cover: Add custom border support to the cover block #31370 and image Image: Add border block support for color, width, and style #31366
  • margin for separator https://github.com/WordPress/gutenberg/pull/30609\
  • border & color for pullquote Pullquote: add block support  #30951

theme.json

• Show both core & theme colors Make core colors classes and custom properties always available #31669
• Link color not to use CSS Custom Property Update: Use elements mechanism for link color instead of a CSS variable #31524

core merge

• Add settings for all editors Add __experimentalFeatures data for the block editor wordpress-develop#1262

Priorities

Merge process for theme.json APIS in core.

[oandregal]

Status Report (core-editor meeting).

Global Styles and Global Settings have been ported to WordPress core and will be part of the WordPress 5.8 release. The focus now is on polishing and fixing bugs as we find them. The issue description & tasks have been triaged and there're two new sections: "bugfixes" and "docs" with tasks to be worked on in the upcoming weeks.

Now that the 1.0 version of this feature has been shipped and we need to revisit focuses, I thought it'd be a good time to pause these reports while we figure out the next steps. Anything relevant should still be posted here but on an on-demand basis not weekly.

Supported settings & styles that landed core

There's a task above to update this in the docs but wanted to share what we have now.

• The following settings & styles are still experimental and only work with the plugin: border, font-family, font-style, font-weight, text-decoration, text-transform. The rest are part of WordPress core now, so they work without the plugin as well.
• Layout is enabled for themes with theme.json support.
• The default theme.json settings we landed in core work like this:
  • If the settings had a corresponding theme support, it works the same as before. Settings that are enabled by default are color.custom, color.customGradient, typography.customFontSize, typography.dropCap. Settings that are disabled by default are spacing.customMargin, spacing.customPadding, typography.lineHeight. Units can be filtered.
  • Link color is stable, landed into 5.8, and it's disabled by default. Need to make a decision on what to do with the existing add_theme_support('experimental-link-color'). It seems that we can keep it in the plugin and remove it when the minimum WordPress version is 5.8.

Shipped this week

Port to core:

• core: settings, styles
• gutenberg: adapt core

Block Supports:

• link color: refactored to use the elements mechanism Update: Use elements mechanism for link color instead of a CSS variable #31524
• typography: allow blocks to use these properties in inner markup Block Supports: Allow skipping serialization of typography attributes #30880
• spacing (margin, padding): allow blocks to use these properties in inner markup Block Supports: Allow skipping spacing support serialization #31973
• font-family: fix for dynamic blocks Font-family: fix typo in supports for dynamic blocks #31974
• duotone: add an option to disable it Add option to disable duotone #32002
• units: make UI controls use the ones defined via theme.json Replace hardcoded CSS_UNITS and inherit values from theme.json #31822

theme.json

• Make core colors (classes and CSS Custom Properties) always available Make core colors classes and custom properties always available #31669 This landed in core as well, but we've found some issues such as Fix: Allow themes to disable the color and gradients palette. #32225 so we're evaluating what to do.

Misc:

• Docs: make examples copy-pasteable Make the theme.json examples copy-pasteable #32040
• Fix for REST endpoint used by mobile Fix condition for global styles on mobile #31844

[oandregal]

We're shipping a first version of the GS interface in 5.9, so it looks like this issue could be closed. Both for having a sense of progress but also because the activity has already moved to other smaller and more focused issues (designer tools, site editor improvements, framework changes, etc).

[oandregal]

I've created #37550 to track some gaps we still have from the original vision of styles at the framework level.

[mtias]

Really wonderful work and progress here!