Fix settings tab active state border in block inspector #48945
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
richtabor
added
[Type] Bug
|
Size Change: +243 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
|
Outside of a better way to address this, it might be useful to add a code comment above the negative margin, to explain the discrepancy. |
richtabor
added
the
Backport to WP 6.7 Beta/RC
|
Thank you for the ping, and sorry for the delay in answering. Nice fix, these small fixes can actually go a long way! I'd love to understand if we can add these improvements directly to |
Mamaduka
pushed a commit
that referenced
this pull request
Mar 14, 2023
* Update style.scss * Try margin on panel body instead * Add comment
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 15c8701 |
Mamaduka
removed
the
Backport to WP 6.7 Beta/RC
|
@Mamaduka @richtabor Was this bug introduced in the 6.2 cycle? |
|
@hellofromtonya, yes! The block inspector tabs were introduced in 6.2 - https://make.wordpress.org/core/2023/03/07/introduction-of-block-inspector-tabs/. |
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
pento
pushed a commit
to WordPress/wordpress-develop
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. git-svn-id: https://develop.svn.wordpress.org/branches/6.2@55548 602fd350-edb4-49c9-b593-d223f7449a82
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?
Currently, the inspector tabs for Styles and Settings do not display their active states the same. This is because the Settings panel uses the
PanelBody, while the Styles panel usesToolsPanel— which have a little (1px) different treatment.The
.components-tools-panelpanels within the Styles tab havemargin-top: -1pxapplied programmatically, whereas the Settings panels.components-panel__bodydo not.Originally attempted in #46686 — closing that PR for this one.
Why?
Consistency.
How?
I added
margin-top: -$border-widthto.block-editor-block-inspector .components-panel__body, which is where the border-top is applied. This emulates the negative margin applied to the ToolsPanel.We could alternatively apply the negative margin top at the top-level
.block-editor-block-inspector__tabs .components-tab-panel__tab-contentelement instead (did that originally) — I don't see why we wouldn't put it on the PanelBody.Testing Instructions
Screenshots or screencast
Before (active tab border is in a different spot for the Settings and Styles tabs):
CleanShot.2023-03-08.at.17.44.12.mp4
After (active tab borders are in the same spot for both tabs, nice):
CleanShot.2023-03-08.at.17.42.04.mp4