Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
aaronrobertshaw opened this issue May 1, 2024 · 3 comments · Fixed by #61270
Closed

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

aaronrobertshaw opened this issue May 1, 2024 · 3 comments · Fixed by #61270
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks [Type] Enhancement A suggestion for improvement.

Comments

@aaronrobertshaw
Copy link
Contributor

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.

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks labels May 1, 2024
@fabiankaegy
Copy link
Member

@ellatrix i know a while ago you had experimented with moving the placeholder component and therefore any UI controls that get rendered within the content area in a shadow root to prevent the style bleeding. Did you ever find a way this could be implemented now? Seems like it would solve the issues outlined here also.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for taking the time to drop a comment on this one @fabiankaegy 👍

The issue with the Social Links block here is more the UI component being used within the actual markup for the block in the editor canvas, not really UI controls themselves, if that makes sense. The social icons here need to look as they would on the frontend while also allowing a click to trigger the URL input.

There's a PR up (#61270) that updates the block to use a simple button element. The change is rather neat and contained and unblocks further work, so it would be great if that can be merged in the short term.

@ellatrix
Copy link
Member

ellatrix commented May 1, 2024

Yes, in #33494. I just haven't found the time to circle back to it. Maybe in the next few weeks, it's definitely something I still want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants