Skip to content

Block Styles: Avoid button component in Social Links edit UI #61269

@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 Social Links block uses the button component in its edit UI. This means those buttons are given padding styles with a higher specificity than what we need to lower the block style variation selectors to breaking some of the default styles for that block's variations.

Further context can be found in #61032 and this comment.

Potential Solutions

There are two options to work around this;

  1. Refactor the Social Links block to use simple button elements rather than the Button UI component within the canvas.
  2. Add an "unstyled" variant to the Button component to avoid the higher specificity padding styles.

It's probably best to avoid using UI components within the editor markup for a block and option 1 is also likely the smallest change overall.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] SocialAffects the Social Block - used to display Social Media accounts[Feature] Block Style VariationsIssues or PRs that are related to the style variations for blocks[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions