Skip to content

Block Styles: Reducing specificity of default block style variation styles #61268

@aaronrobertshaw

Description

@aaronrobertshaw

Part of: #57537

Note: This is a blocker for the extended block style variations feature and section styling.

Problem

To support applying block style variations in a nested fashion, the specificity of block style variation selectors needs to be 0-0-0.

The Button block's stylesheet includes some default styles for the Outline block style variation to make its background transparent. If the selector for the Outline style's transparent background is reduced to zero it gets overridden by any button element or Button block styles in global styles.

This is due to the current style load order which is:

  1. block library styles including defaults for block style variations,
  2. global styles,
  3. and finally in #57908 stylesheets for the application of block style variations.

Additional context can be found in #61032 (comment).

Potential Solutions

The ideal order of styles here would be:

  1. Block library styles
  2. Global Styles
  3. Defaults for block style variations e.g. Button Outline's transparent background
  4. Block style variation styles

To achieve this, adding support for a new stylesheet for blocks would be beneficial. Perhaps something like variations.scss for block library blocks which can then be collected and enqueued in the appropriate order.

Alternative Option

One long term alternative could be to extend the styles property within the block.json API to allow them to define styles for block style variations. This would allow for dynamically generating these default styles for variations and outputting them when and if they make sense.

This dynamic approach however might not be a silver bullet solution given the potential for style variations to need styling that theme.json does not yet support. It would also need extra work to ensure compatibility across classic and block themes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions