Grid overlays: Use canvas iframe window for viewport visibility detection#79255
Grid overlays: Use canvas iframe window for viewport visibility detection#79255t-hamano wants to merge 4 commits into
Conversation
…tion Pass the block's canvas iframe window to useBlockVisibility in the grid visualizer and grid child overlays so viewport detection matches the actual block rendering context. Previously these overlays relied only on the deviceType override and read the main editor window, so the grid visualizer and resize handles could disagree with the block's actual hidden state when the canvas was resized (device preview or manual drag). This aligns both overlays with the block.js / use-block-props pattern of passing both deviceType and view. Co-Authored-By: Claude <noreply@anthropic.com>
|
Size Change: +91 B (0%) Total Size: 8.6 MB 📦 View Changed
|
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. |
|
Flaky tests detected in 87cffb4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27663952497
|
Not for the block itself, because visibility_grid.mp4So that's why passing "view" to In testing this I noticed that if the selected block is in a Grid whose ancestor is hidden, the visualizer still shows 😅 
|
When a child block inside a grid is selected, layout-child.js renders the grid visualizer for the parent grid. It only checked the parent grid's own viewport visibility, not whether any ancestor of the grid was hidden, so the visualizer kept showing for grids nested under a hidden ancestor. Mirror the ancestor check already used in grid-visualizer.js via isBlockParentHiddenAtViewport so the visualizer is hidden in that case too. Co-Authored-By: Claude <noreply@anthropic.com>
The ancestor-hidden check used the device type, but blocks are hidden based on the viewport actually detected from the canvas iframe. In Desktop mode with a narrow canvas the two diverge, so the visualizer/resize handles kept showing for a grid (or its child) nested under an ancestor hidden at the real viewport. Move the isAnyAncestorHidden check into a selector keyed on the canvas currentViewport from useBlockVisibility, so it stays consistent with how blocks are actually hidden. Applies to both the grid-selected and child-selected paths. Co-Authored-By: Claude <noreply@anthropic.com>
|
Okay, I think I've fixed all the issues.
This was due to a missing check for ancestor blocks. 49ad162 should fix it. Another thing I noticed is that the ancestor block check was based on block-visibility.mp4 |
2 participants
Related to #76889
Follow up to #74963, #75078
Discovered this while working on #75121
What?
The grid editing overlay determines if a block is hidden in the current viewport solely using the
deviceTypestate. Consequently, if the browser width is manually resized, grid cells and resize handles remain unintentionally, even if the block is hidden in that viewport. This PR resolves that issue by passing the block's canvas iframe window touseBlockVisibilityin both overlays. This approach is already implemented in the block visibility badge.Testing Instructions
Screenshots
Before
before.mp4
After
after.mp4
Use of AI Tools
This PR was authored with the assistance of Claude (Claude Code). The investigation, code changes, and description were generated with AI and reviewed by the contributor.