List View: Fix focus outline style #69201
Open
+3
−24
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
t-hamano
added
[Type] Bug
|
Size Change: -95 B (-0.01%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
t-hamano
force-pushed
the
fix/list-view-focus-style
branch
from
16b84d8 to
56d6150
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in 56d6150. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/13330223611
|
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.
What?
Closes #69189
This PR will ensure that the correct focus style is applied regardless of where the ListView component is used.
Why?
A list view item consists of two cells, the second cell is expected to be 28px wide. This 28px is the combined value of the dropdown toggle button width (
24px) + right padding (4px):However, for blocks that don't allow dropdown toggles, only an empty cell will be rendered. The cell itself has a width of
24px.In the post editor, the
box-sizingvalue of this cell is the browser's defaultcontent-box, so the cell width is24px + 4px right padding = 28px, which means no outline shift.On the other hand, in the site editor, the
box-sizingvalue of this cell isborder-box, which means the cell has a width of24px.The fact that the cell is
24pxwide instead of the expected28pxwill cause the absolutely positioned focus to shift right.How?
24pxin size. To get around this, addsize:smallto thetoggleProps. As a result, remove the CSS override, which is no longer needed.Testing Instructions
Go to the following places where list views are used:
Make sure all styles are applied correctly:
Screenshots or screencast
In the screenshot below, I've applied some pseudo styles.
Site Editor > Pages Menu > Page
Site Editor > Navigation Menu
The selected and focused item is resolved.
Site Editor > Navigation Block > Block Sitebar > Settings Tab
No visual changes.