Fix focus outline of block items in blocks menu#53929
Fix focus outline of block items in blocks menu#53929josephfusco wants to merge 2 commits intoWordPress:trunkfrom
Conversation
Signed-off-by: Joe Fusco <[email protected]>
Signed-off-by: Joe Fusco <[email protected]>
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @josephfusco! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
github-actions
bot
added
the
First-time Contributor
|
Hey @ajitbohra, thank you for taking a look at these changes! The CSS proposed in this PR is causing some tests to fail. What can I do to help clear these? |
skorasaurus
added
the
[Focus] Accessibility (a11y)
| // Windows high contrast mode. | ||
| outline: 2px solid transparent; | ||
| outline-offset: 0; | ||
| border-radius: 2px; |
There was a problem hiding this comment.
This is a global change to the component. I think styling needs to be block-type item list specific.
| .edit-site-block-types-search { | ||
| .edit-site-block-types-search, | ||
| .edit-site-block-types-item-list { |
There was a problem hiding this comment.
The block list doesn't need a bottom margin. Furthermore, taking this comment into account, the code should look like this:
.edit-site-block-types-search {
margin-bottom: $grid-unit-10;
padding: 0 $grid-unit-20;
}
.edit-site-block-types-item-list {
padding: 0 $grid-unit-20;
}
.edit-site-block-types-item-list__item {
border-radius: $radius-small;
}Note that I added the edit-site-block-types-item-list__item className to this NavigationButtonAsItem component to make the button corners round:
4 participants
These changes clean up the outline styles for the blocks menu.
Fixes #53600
Demo of Proposed Changes
gutenberg-53600-solution.mov