Grid block: Improve Visualizer responsiveness#75820
Merged
Merged
Conversation
|
Size Change: +10 B (0%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
t-hamano
changed the title
t-hamano
changed the title
t-hamano
added
[Type] Bug
|
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. |
t-hamano
force-pushed
the
grid/sync-visualizer
branch
from
fd79cc5 to
d088927
Compare
andrewserong
approved these changes
Feb 23, 2026
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
This resolves the issue for me, and adding columnCount as a dependency + triggering an updating the next frame sounds reasonable to me!
Contributor
|
Ah nice, thanks for fixing this @t-hamano! |
stokesman
reviewed
Feb 24, 2026
Contributor
There was a problem hiding this comment.
Thanks for working on this! It tests well for me.
I got curious and think I may have realized a simpler approach. In #68842, I removed a bit of code that may have caused these issues. Before that, the grid visualizer’s children were also being resize observed.
In testing from trunk and restoring that code I couldn’t reproduce the issues anymore.
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
index e4c3bdb900..8f3ac9ca88 100644
--- a/packages/block-editor/src/components/grid/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -82,6 +82,9 @@ const GridVisualizerGrid = forwardRef(
borderBoxSpy.observe( gridElement, { box: 'border-box' } );
const contentBoxSpy = new window.ResizeObserver( resizeCallback );
contentBoxSpy.observe( gridElement );
+ for ( const element of gridElement.children ) {
+ contentBoxSpy.observe( element );
+ }
return () => {
borderBoxSpy.disconnect();
contentBoxSpy.disconnect();
Contributor
Oh, interesting! That would be simpler, but I'm curious: would the change in this PR be more performant, since it doesn't have to observe as many elements? In practice I'm not sure if it'd make too much of a difference, but just a thought. |
t-hamano
force-pushed
the
grid/sync-visualizer
branch
from
d088927 to
f04053e
Compare
Contributor
Author
|
Thanks everyone for the reviews!
Good idea! This approach is simpler, and I don't see any issues. d8718c1f1ad6ed7538168bc08f5d3422.mp4 |
Contributor
|
This approach still fixes the issue for me! Might need a rebase; the failing e2e should have been fixed by #75837. |
Contributor
I'd had that same idea cross my mind. For curiosity’s sake, I ended up trying to compare the two approaches. I tested with 648 elements in a Grid. On my machine that's makes for a pretty chunky response either way. I couldn't perceive any difference between the two so I didn’t bother profiling. Thanks again Aki! |
Contributor
Thanks for double-checking! (And again for the fix, Aki) |
adamsilverstein
pushed a commit
that referenced
this pull request
Feb 25, 2026
Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
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
4 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?
This PR fixes grid blocks so that the visualizer is synchronized quickly and accurately with columns.
Why?
There are two reasons why visualizer synchronization may not be accurate.
The
GridVisualizercomponent uses aResizeObserverto detect resizes of the grid element and update the grid information. This is implemented in #68230 and #68842. However, if the element size does not change, the visualizer will not be updated. For example, try changing the number of columns when there is only one row:33edc5aa11241345d1f1dbd21aca5edc.mp4
Another symptom is that the number of columns may be off by one. This is probably related to
useStyleOverrideslightly delaying the insertion of layout styles.1a30a328f611887fe14239e15ee1cc16.mp4
How?
Monitors changes to thecolumnCountas well as thegridElementand updates the grid information.IntroducesrequestAnimationFrameto update the grid information after the layout has been fully applied.Restores observing child elements based on this feedback: #75820 (review)
Testing Instructions
Screenshots or screencast
01cf4124e20b719cb7081545f3efd26a.mp4