Move PatternOverrideToolbarIndicator functionality into BlockToolbar #72935
Conversation
This file contains hidden or 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
|
Size Change: -1.2 kB (-0.05%) Total Size: 2.45 MB
ℹ️ View Unchanged
|
…r-block-toolbar__block-icon
|
Flaky tests detected in 6079a11. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19103825933
|
jeryj
commented
Nov 4, 2025
Contributor
Author
jeryj
left a comment
jeryj
left a comment
There was a problem hiding this comment.
Explaining the changes
| isTemplate, | ||
| isDisabled, | ||
| isSectionInSelection, | ||
| } = useSelect( |
Contributor
Author
There was a problem hiding this comment.
This useSelect was moved up into the BlockToolbarIcon, as it figures out if we should show the BlockSwitcher dropdown or a plain Block Icon.
Comment on lines
-300
to
-317
| if ( hideDropdown ) { | ||
| return ( | ||
| <ToolbarGroup> | ||
| <ToolbarButton | ||
| disabled | ||
| className="block-editor-block-switcher__no-switcher-icon" | ||
| title={ blockSwitcherLabel } | ||
| icon={ | ||
| <BlockIcon | ||
| className="block-editor-block-switcher__toggle" | ||
| icon={ icon } | ||
| showColors | ||
| /> | ||
| } | ||
| text={ blockIndicatorText } | ||
| /> | ||
| </ToolbarGroup> | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
This is now the default BlockToolbarIcon result, instead of having to go through the BlockSwitcher
Comment on lines
-4
to
-40
| .block-editor-block-switcher { | ||
| position: relative; | ||
|
|
||
| // @todo override toolbar group inherited paddings from components/block-tools/style.scss. | ||
| // This is best fixed by making the mover control area a proper single toolbar group. | ||
| // It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon. | ||
| .components-button.components-dropdown-menu__toggle.has-icon.has-icon { | ||
| min-width: $button-size; | ||
| } | ||
| } | ||
|
|
||
| // Show an indicator triangle. | ||
| .block-editor-block-switcher__no-switcher-icon, | ||
| .block-editor-block-switcher__toggle { | ||
| position: relative; | ||
| } | ||
|
|
||
| .components-button.block-editor-block-switcher__toggle, | ||
| .components-button.block-editor-block-switcher__no-switcher-icon { | ||
| margin: 0; | ||
| display: block; | ||
| height: $grid-unit-60; | ||
|
|
||
| .block-editor-block-icon { | ||
| margin: auto; | ||
| } | ||
| } | ||
|
|
||
| .components-button.block-editor-block-switcher__no-switcher-icon { | ||
| display: flex; | ||
|
|
||
| .block-editor-block-icon { | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| min-width: $icon-size !important; | ||
| } | ||
| } |
Contributor
Author
There was a problem hiding this comment.
This was all unnecessary. I think progress on the base components made it obsolete.
Comment on lines
-43
to
-50
| .components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] { | ||
| color: $gray-900; | ||
|
|
||
| // Since it's not clickable, though, don't show a hover state. | ||
| &:hover { | ||
| color: $gray-900; | ||
| } | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Moved this to block-toolbar styles as .components-button.block-editor-block-toolbar__block-icon[aria-disabled="true"]
Comment on lines
-100
to
-120
| // The block switcher in the contextual toolbar should be bigger. | ||
| .block-editor-block-contextual-toolbar { | ||
| .components-button.block-editor-block-switcher__no-switcher-icon { | ||
| min-width: $button-size; | ||
| } | ||
|
|
||
| .components-button.block-editor-block-switcher__no-switcher-icon, | ||
| .components-button.block-editor-block-switcher__toggle { | ||
| height: $grid-unit-60; | ||
|
|
||
| .block-editor-block-icon, | ||
| .block-editor-block-switcher__transform { | ||
| width: $block-toolbar-height; | ||
| height: $block-toolbar-height; | ||
| } | ||
|
|
||
| .block-editor-block-switcher__transform { | ||
| padding: $grid-unit-15; | ||
| } | ||
| } | ||
| } |
Contributor
Author
There was a problem hiding this comment.
I checked the base styles by removing these in the dev tools and they resolve to the same values.
Comment on lines
+28
to
+34
| const blockMetaName = useSelect( | ||
| ( select ) => { | ||
| const { getBlockAttributes } = select( blockEditorStore ); | ||
| return getBlockAttributes( clientIds?.[ 0 ] )?.metadata?.name; | ||
| }, | ||
| [ clientIds ] | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
Minor perf: run this useSelect when the popover opens, not when the button mounts
| aria-expanded={ isOpen } | ||
| /> | ||
| { isOpen && ( | ||
| <Popover |
Contributor
Author
There was a problem hiding this comment.
Based on the purpose of this text description as help text, it shouldn't have been a dropdown menu but a popover, as it doesn't have menu options.
Comment on lines
+62
to
+67
| .components-button.block-editor-block-toolbar__block-icon[aria-disabled="true"] { | ||
| color: $gray-900; | ||
|
|
||
| // Since it's not clickable, though, don't show a hover state. | ||
| &:hover { | ||
| color: $gray-900; |
Contributor
Author
There was a problem hiding this comment.
Moved from the block switcher as it no longer handles the button when there is no switcher.
Comment on lines
-152
to
-153
| width: $button-size-small !important; | ||
| margin: 0 !important; |
Contributor
Author
There was a problem hiding this comment.
This is already the CSS for these. I don't see why we need it to be !important.
| { props.isSelected && isSupportedBlock && ( | ||
| <ControlsWithStoreSubscription { ...props } /> | ||
| ) } | ||
| { isSupportedBlock && <PatternOverridesBlockControls /> } |
Contributor
Author
There was a problem hiding this comment.
The crux: removes the need for this component hooking into all editable blocks (performance issue) by moving it into the Block Toolbar
jeryj
commented
Nov 4, 2025
| @@ -0,0 +1,182 @@ | |||
| /** | |||
Contributor
Author
There was a problem hiding this comment.
Without this test file we'd be down about 100 lines for this PR
jeryj
commented
Nov 4, 2025
Comment on lines
-360
to
-361
| hasBlockStyles={ hasBlockStyles } | ||
| canRemove={ canRemove } |
Contributor
Author
There was a problem hiding this comment.
These get sorted within the BlockSwitcherDropdownMenuContents
jeryj
requested review from
ajitbohra,
ellatrix,
fabiankaegy and
juanmaguitar
as code owners
|
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. |
|
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. |
jeryj
added
[Type] Performance
scruffian
reviewed
Nov 5, 2025
docs/private-apis.md
Outdated
| The registry has two private methods: | ||
| - `privateActionsOf` | ||
| - `privateSelectorsOf` | ||
|
|
Contributor
There was a problem hiding this comment.
Is this file autogenerated? I'm surprised at the white space change...
Contributor
Author
There was a problem hiding this comment.
It's just formatting. I might have pressed save when I was on the file and it auto-formatted. I'll remove it.
scruffian
approved these changes
Nov 5, 2025
Contributor
scruffian
left a comment
scruffian
left a comment
There was a problem hiding this comment.
I've tested this and can't find any regressions. The code all makes sense too. This seems like it tidies things up as well as making them faster.
| } | ||
|
|
||
| .block-editor-block-switcher .components-dropdown-menu__toggle, | ||
| .block-editor-block-switcher__no-switcher-icon { |
Contributor
There was a problem hiding this comment.
Hey Jerry, removing these classnames has caused a regression in the global styles sidebar and in the post editor slash inserter when button text labels are enabled:
If the goal is to have these styles apply in another place, it might be better to add extra classnames for that particular place instead of removing this scoping 😅
Contributor
Author
There was a problem hiding this comment.
Yup! I was out last week. I'll look at it today.
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.
Note: This is a big PR. It includes refactoring of the BlockSwitcher. We could break this into stages by first moving the PatternOverrideToolbarIndicator into the BlockSwitcher and then reworking it to semantically make sense, but I think that would end up taking longer overall to get us to the same state, while also having a potentially stuck in-between state where the BlockSwitcher makes even less sense.
My preference is to keep this larger PR as is and then address any potential edge cases as follow-ups. The unit and e2e tests seem fairly thorough, so I'm hoping those along with manual testing give us high confidence. And since we're wrapping up 6.9 right now, we should have awhile to catch any regressions.
What?
Closes #65058
The
<PatternOverridesBlockControls />causes a performance slowdown by hooking into theaddFilter( 'editor.BlockEdit', ... )and calling auseSelectfor every block. To prevent this and move towards a more unified pattern editing experience, we're moving the functionality into the BlockToolbar. This simplifies the code for both areas.Why?
How?
In order to make it semantically and code-wise make sense, this involves a refactor of the BlockSwitcher (which was handling the display of the Block Toolbar Icon even when it was not a BlockSwitcher). To address this, I created a new component,
BlockToolbarIconwhich sorts out which version of the Icon identifier to use:If I had not refactored, the flow for the Block Icon would have been:
block-editor-block-switcher__no-switcher-iconclassName which meant "default block icon")Testing Instructions
Interactions should operate the same as on trunk.
Look for regressions in the display of the block toolbar icon by using:
Look for sizing, color, and spacing issues.
Testing Instructions for Keyboard
Screenshots or screencast