Fix text alignment in the Site Editor sidebar #48959
Merged
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
jameskoster
added
Needs Design Feedback
jasmussen
reviewed
Mar 9, 2023
| @@ -1,6 +1,7 @@ | |||
| .edit-site-sidebar-navigation-item.components-item { | |||
| color: $gray-600; | |||
| border-width: $border-width-tab; | |||
| margin: 0 2.5px; // This combines with the border above to create a 4px gap and ensure the text line up nicely with other side bar elements along the Y axis | |||
There was a problem hiding this comment.
Ack, this one's kinda ugly. It looks like this is to enable the focus style. I think that actually puts our metrics off in other places too, like the 40px item-height. If it's a nightmare to refactor the focus style to use a box-shadow + transparent outline (for high contrast mode) like our buttons do, I'm happy to approve this one. But that seems like a refactor to do eventually, what do you think?
There was a problem hiding this comment.
Item calls a Button. So I don't really understand why this transparent border is being added here, I'd expect the focus style to be inehrent to the Button component.
I'll see if I can move it to a pseudo element, but that feels a bit like replacing one hack with another xD
There was a problem hiding this comment.
Seems the border wasn't actually required, so I removed it. A small margin is still required for the alignment though.
border.mp4
There was a problem hiding this comment.
Oh nice, you solved it, let me review in a second. This one:
I'll see if I can move it to a pseudo element, but that feels a bit like replacing one hack with another xD
It should be possible to use box-shadow for the focus style, which wouldn't affect the footprint whereas border does.
There was a problem hiding this comment.
I just removed the border.
The focus style now comes from .css-1xahv0o-View-unstyledButton-medium-item-spacedAround:focus which seems to be connected to the experimental ItemGroup / Item components.
I agree it would be nice to update that to use box-shadow rather than the current border implementation. But since that's at the component level it should probably be handled in a dedicated PR?
|
Size Change: -8 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
richtabor
added
the
Backport to WP 6.7 Beta/RC
Mamaduka
pushed a commit
that referenced
this pull request
Mar 14, 2023
* Fix text alignment * Remove width width override
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 8913e6d |
Mamaduka
removed
the
Backport to WP 6.7 Beta/RC
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 14, 2023
Updates the `@wordpress` packages to include the following changes: - [Regression] Don't offer Classic block as a recovery action when not registered [WordPress/gutenberg#49051 Gutenberg PR 49051] ✅ - [i18n Change] Fix typo in the media-categories component [WordPress/gutenberg#49047 Gutenberg PR 49047] ✅ - Hide navigation screen in site editor [WordPress/gutenberg#49043 Gutenberg PR 49043] ✅ [https://make.wordpress.org/core/2023/03/14/fyi-navigation-section-of-new-site-editor-experienced-removed-for-6-2-rc-2/ Feature is not ready for 6.2] - [i18n Change] Site editor: Fix non-us spelling in sidebar [WordPress/gutenberg#48976 Gutenberg PR 48976] ✅ See Trac #57895. - [Regression] Site Editor: Fix lingering insertion point within template parts [WordPress/gutenberg#48913 Gutenberg PR 48913] ✅ > Regression introduced in 6.2 cycle. - Navigation Link: Remove color generation code [WordPress/gutenberg#48927 Gutenberg PR 48927] and [WordPress/gutenberg#49064 Gutenberg PR 49064] ✅ - Fix settings tab active state border in block inspector [WordPress/gutenberg#48945 Gutenberg PR 48945] ✅ - Fix text alignment in the Site Editor sidebar [WordPress/gutenberg#48959 Gutenberg PR 48959] ✅ Making template descriptions more prominent is part of 6.2. References: * [WordPress/gutenberg@f22a3cb Packages x.3.9 publish commit] * [WordPress/gutenberg@356298f Packages x.3.10 publish commit] Follow-up to [55496]. Props mamaduka, tobifjellner, davidbaumwald, costdev, audrasjb, hellofromTonya. See #57471. Fixes #57895. Built from https://develop.svn.wordpress.org/trunk@55542 git-svn-id: http://core.svn.wordpress.org/trunk@55054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Mar 14, 2023
Updates the `@wordpress` packages to include the following changes: - [Regression] Don't offer Classic block as a recovery action when not registered [WordPress/gutenberg#49051 Gutenberg PR 49051] ✅ - [i18n Change] Fix typo in the media-categories component [WordPress/gutenberg#49047 Gutenberg PR 49047] ✅ - Hide navigation screen in site editor [WordPress/gutenberg#49043 Gutenberg PR 49043] ✅ [https://make.wordpress.org/core/2023/03/14/fyi-navigation-section-of-new-site-editor-experienced-removed-for-6-2-rc-2/ Feature is not ready for 6.2] - [i18n Change] Site editor: Fix non-us spelling in sidebar [WordPress/gutenberg#48976 Gutenberg PR 48976] ✅ See Trac #57895. - [Regression] Site Editor: Fix lingering insertion point within template parts [WordPress/gutenberg#48913 Gutenberg PR 48913] ✅ > Regression introduced in 6.2 cycle. - Navigation Link: Remove color generation code [WordPress/gutenberg#48927 Gutenberg PR 48927] and [WordPress/gutenberg#49064 Gutenberg PR 49064] ✅ - Fix settings tab active state border in block inspector [WordPress/gutenberg#48945 Gutenberg PR 48945] ✅ - Fix text alignment in the Site Editor sidebar [WordPress/gutenberg#48959 Gutenberg PR 48959] ✅ Making template descriptions more prominent is part of 6.2. References: * [WordPress/gutenberg@f22a3cb Packages x.3.9 publish commit] * [WordPress/gutenberg@356298f Packages x.3.10 publish commit] Follow-up to [55496]. Props mamaduka, tobifjellner, davidbaumwald, costdev, audrasjb, hellofromTonya. See #57471. Fixes #57895. Built from https://develop.svn.wordpress.org/trunk@55542 git-svn-id: https://core.svn.wordpress.org/trunk@55054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 14, 2023
Updates the `@wordpress` packages to include the following changes: - [Regression] Don't offer Classic block as a recovery action when not registered [WordPress/gutenberg#49051 Gutenberg PR 49051] ✅ - [i18n Change] Fix typo in the media-categories component [WordPress/gutenberg#49047 Gutenberg PR 49047] ✅ - Hide navigation screen in site editor [WordPress/gutenberg#49043 Gutenberg PR 49043] ✅ [https://make.wordpress.org/core/2023/03/14/fyi-navigation-section-of-new-site-editor-experienced-removed-for-6-2-rc-2/ Feature is not ready for 6.2] - [i18n Change] Site editor: Fix non-us spelling in sidebar [WordPress/gutenberg#48976 Gutenberg PR 48976] ✅ See Trac #57895. - [Regression] Site Editor: Fix lingering insertion point within template parts [WordPress/gutenberg#48913 Gutenberg PR 48913] ✅ > Regression introduced in 6.2 cycle. - Navigation Link: Remove color generation code [WordPress/gutenberg#48927 Gutenberg PR 48927] and [WordPress/gutenberg#49064 Gutenberg PR 49064] ✅ - Fix settings tab active state border in block inspector [WordPress/gutenberg#48945 Gutenberg PR 48945] ✅ - Fix text alignment in the Site Editor sidebar [WordPress/gutenberg#48959 Gutenberg PR 48959] ✅ Making template descriptions more prominent is part of 6.2. References: * [WordPress/gutenberg@f22a3cb Packages x.3.9 publish commit] * [WordPress/gutenberg@356298f Packages x.3.10 publish commit] Follow-up to [55496]. Props mamaduka, tobifjellner, davidbaumwald, costdev, audrasjb, hellofromTonya. Reviewed by SergeyBiryukov. Merges [55542] to the 6.2 branch. See #57471. Fixes #57895. Built from https://develop.svn.wordpress.org/branches/6.2@55548 git-svn-id: http://core.svn.wordpress.org/branches/6.2@55060 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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?
Ensures the text is justified nicely along the Y axis
Why?
Adds a small sense polish to the experience.
How?
Just css tweaks. Increased the space between W button + site title. Added some margin to buttons in the Templates / Template Parts panel.
Testing Instructions
Before
After