Fix Site editor navigation menu items alignment visual regression. #67321
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
afercia
added
[Type] Regression
|
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. |
|
Size Change: +1 B (0%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 0b81255. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12046191537
|
ramonjd
approved these changes
Nov 26, 2024
There was a problem hiding this comment.
This fixes the visual regression for me. Thanks for the speedy fix!
And for catching it too @jameskoster
Trunk
This PR
Mobile:
ramonjd
reviewed
Nov 26, 2024
| @@ -18,7 +18,7 @@ | |||
| .edit-site-sidebar-navigation-screen__content { | |||
| padding: 0 $grid-unit-20; | |||
|
|
|||
| .edit-site-sidebar-navigation-screen-details-footer { | |||
| .components-item-group { | |||
There was a problem hiding this comment.
An alternative to targeting the inner component's class name, which could change without notice, would be to add a className to the <ItemGroup /> here:
There was a problem hiding this comment.
Yes but then it should be done for all the <ItemGroup>s in all the navigation sub-panels. Not sure it's in the scope of this PR though a follow-up for a better solution would be welcome.
There was a problem hiding this comment.
I recommend avoiding selectors with the components- prefix whenever possible, otherwise this style may have unintended side effects if an ItemGroup component is added to the sidebar in the future.
This is the only place in all of Gutenberg where the .components-item-group selector is used. Admittedly, there are many other ItemGroup components that don't have CSS class names, but since they don't have their own styling, I don't think they need CSS class names in the first place.
There was a problem hiding this comment.
@t-hamano we all agree CSS selectors from components should be avoided. However, this PR scope is to just fix a regression by restoring the previous usage where .components-item-group was already in use. We should avoid scope creep. Further improvements can be made in a follow-up.
There was a problem hiding this comment.
Since what I proposed is just a small code quality improvement and it targets the same component, I think it's okay to include it in this PR.
Of course, we can address it in a follow-up, so feel free to merge it as is.
afercia
force-pushed
the
fix/site-editor-navigation-menu-items-alignment
branch
from
de17a9c to
0b81255
Compare
jameskoster
approved these changes
Nov 27, 2024
|
I agree that unrelated enhancements should not be part of a revert for a small fix. Thanks all for your review and feedback. I wil create a separate issue to remove the usage of the |
6 tasks
michalczaplinski
pushed a commit
that referenced
this pull request
Dec 5, 2024
…67321) Co-authored-by: afercia <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jameskoster <[email protected]>
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.
Follow-up to #66606
Cc @jameskoster @t-hamano
What?
Fizes a visual regression in the alignment of the Site editor Navigation menu items after #66606 where a CSS selector change was applied in a wrong place.
See #66606 (comment)
Why?
Better alignment.
How?
Restore previous selectors. Although using selectors related to components is not ideal, this restores the previous situation. Applies the code review suggestions from #66606 in the right place.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast