Pattern Editing and Block Fields: Highlight selected block#74841
Merged
Pattern Editing and Block Fields: Highlight selected block#74841
Conversation
talldan
requested review from
aaronrobertshaw,
andrewserong,
fcoveram and
jasmussen
talldan
added
[Type] Enhancement
|
Size Change: +202 B (0%) Total Size: 6.87 MB
ℹ️ View Unchanged
|
Contributor
Author
|
I did experiment with a few things here, and this was the balance I ended up with that felt ok to me. There are only a couple of things that I feel critical about:
As ever, I'm open to any other feedback/suggestions here. |
|
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 3802e5e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22753251930
|
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
I quite like this. It's generally testing well, and I see the value of highlighting the item in the right hand sidebar to make it clearer which item is currently focused. I might leave it to the designers to comment more on the treatment. To me, changing the text colour feels like something we typically do on hover, rather than focus, necessarily? Do we do this elsewhere?
The only other question I had was about showing the outline in the editor canvas while hovering over items. This can result in duplicate outlines on the editor canvas. I wonder if the outline for the non-selected block should be more subtle (like, grey, or lower opacity) to indicate a difference between the currently selected outline vs the hovered item?
Here's how it's looking for me:
2026-01-23.09.43.25.mp4
(Code-wise it's looking good to me, I like the rename from isCollapsed to isMultiBlock 👍 )
Contributor
|
At a quick glance, this looks like a good idea. It's been on my mind that for very very tall patterns, it can be hard to see what you are editing, if it's actually out of view, so it's possible that on-click we might even pair something like this with a scroll to. Not suggesting that's in scope, but rather, something to let percolate. One observation: there are "content" labels above every field, which feel implied by the block name itself as the label. Can those be visually hidden? |
Contributor
Author
Scroll to is definitely something I'd like to include as well, I wanted to timebox my work on this initially and get feedback early. The feedback seems positive so I can spend a bit more time on including it the PR.
Yeah, this could definitely do with improvement! I haven't found a way to achieve this in DataForms at the moment (it looks like there's a way hide labels on all fields, but not specific fields). I might be wrong though so I'll ask around. |
Contributor
|
The change looks great to me. Adopt the interaction that ListView panel has make sense here as the panel displays the blocks user is interacting with.
+1 to this suggestion.
To this point, I agree that applying color in header does not add much value and it's a color state not used elsewhere. I would stick to the focus when selecting the form field. On the other side, I do agree that purple is a color language we should reinforce to convey sync content.
Agree with this, but I think we need to approach it more systematically as the content state impacts the whole Canvas, beyond this feature. In that vein, I like how Figma shows a thicker border in hover. It makes more clear the element you are about to select. CleanShot.2026-01-27.at.10.11.37.mp4 |
Contributor
I thought scroll happened automatically when you select a block? You shouldn't have to do anything extra. Edit: just tested and it seems to be working well on this branch. |
ramonjd
approved these changes
Feb 9, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Anything blocking this PR?
IMO it's a positive quality of life change, and has a small enough footprint to either modify or expand upon later.
Here's a ✅ if folks don't have any objections
Kapture.2026-02-09.at.14.09.45.mp4
Contributor
Author
I'm prioritizing anything WordPress 7.0 related at the moment (Pattern Editing), I'll come back to this after the beta and address the feedback. |
fcoveram
approved these changes
Feb 10, 2026
Contributor
fcoveram
left a comment
fcoveram
left a comment
There was a problem hiding this comment.
This looks great to me 🚀 My suggestion here regarding distinguish the focus ring between selected and hover elements in the Canvas doesn't block this PR. I'm still not sure about the idea as it might double the ring stroke and the visual information.
talldan
force-pushed
the
try/block-fields-highlight-selected-block
branch
from
3b2be6e to
3802e5e
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
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?
The aim of this PR is to try to build more of a connection between the block in the canvas, and the fields in the block inspector.
To do that, there are a few things it implements:
1. When a block is selected in the canvas show the block icon and title in a blue color in the inspector:
2. When hovering block fields in the inspector, highlight/outline the block in the canvas:
Kapture.2026-01-22.at.14.39.33.mp4
3. When focusing a block field in the inspector, select the block in the canvas (without transferring focus):
Kapture.2026-01-22.at.14.43.57.mp4
Why?
Currently when a pattern shows a lot of block fields, or the canvas is busy it can be hard to see what's being edited
Testing Instructions
Prerequisite: Enabled both the Pattern Editing and Block Fields experiments