Fix group block placeholder buttons color contrast ratio and improve consistency #60217
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +212 B (0%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
|
This PR aims to fix a few things for the Group block placeholder with variations:
I was able to reuse the Screenshot of this PR current state:
Before continuing work on this PR, I'd like to get soem feedback about the variation icons. The Group block placeholder uses custom icons that are different from the ones of the block variations.
While I do realize the custom icons in the placeholder resemble more closely the variations layout, I'm not sure using two different sets of icons in the UI is best for users in the first place. To me, that's confusing bcause the Group, Row, Stack, and Grid are represented with different icons in different places of the UI. I'd like these icons to be the same everywhere. Icons should identify the associated concepts in an unique way. The default variation icons would look like this in the placeholder, which isn't great:
I see two options:
Cc @WordPress/gutenberg-design |
|
I agree with improving the contrast ratio and adding text labels. Personally, I don't have a strong preference as to whether to use the default icon for the group block or a custom icon. Also, if we follow the column block placeholder style, it should probably look like this: (Please note that the group block icon is a temporary change and is not ideal!)
Alternatively, we may want to remove the default border on the button itself by changing the button style from
The style of placeholders seems to have been discussed in this comment as well. @jasmussen may have some knowledge. |
|
.I would avoid the |
|
@jasmussen has been working on improving these also #59275 |
Merged
|
Due to the merge of #59275, the current look of the Group block has changed since this PR was submitted.
To move forward this PR, I would like to suggest replacing the This would ensure consistency in layout and code with the Column block, and we should be able to remove this custom CSS selector as well. |
|
I'd be totally in favor of using the Just noting that also the Query block uses I'd suggest to look at the overall usage of
Also noting that #62373 / #62412 may further help with avoiding custom implementations related to the button icons position and visible text. |
afercia
added
[Focus] Accessibility (a11y)
|
The color contrast has been fixed in #62416 |
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #60206
What?
WIP
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast