Hide grid visualizer when grid is template locked or block editing mode is not default #66065
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
|
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. |
talldan
added
[Type] Bug
|
Size Change: +96 B (+0.01%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 43a50e6. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11293075682
|
talldan
added
the
Backport to WP 6.7 Beta/RC
talldan
changed the title
aaronrobertshaw
approved these changes
Oct 14, 2024
There was a problem hiding this comment.
Thanks for the quick fix @talldan 👍
It'd probably be a good idea to look at making it scale simultaneously with the canvas. It might be prudent for the zoomed out mode implementation to settle a bit first before doing that.
Agreed on both counts.
The alternative in #64321 seems promising as well, despite the blockers. For WP 6.7 though, I think landing this quick fix to mitigate most of the issue is a good move.
Regarding the remaining issue when zooming back in, I can still only replicate it when drag selecting an inner child of a Grid block. That definitely makes it a rarer edge case.
So with all that said, LGTM 🚢
| Before | After |
|---|---|
 |
 |
andrewserong
approved these changes
Oct 14, 2024
There was a problem hiding this comment.
Regarding the remaining issue when zooming back in, I can still only replicate it when drag selecting an inner child of a Grid block. That definitely makes it a rarer edge case.
I can reproduce it with the list view open and a Grid block selected:
2024-10-14.16.28.54.mp4
In some ways it's sort of similar to the issue of the height of the iframe not quite being correct when we deactivate zoom out mode because the height updates immediately whereas the zoom in is being animated. I agree that it'd be nice to fix, but I also agree that this PR would be good to land for 6.7 so that the overall issue with the visualizer is less noticeable for the release, so adding a +1 ✅ 🙂
|
I'll merge this so it'll get backported. |
kevin940726
deleted the
update/grid-visualizer-to-be-hidden-in-zoom-out-mode
branch
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Oct 14, 2024
…de is not default (#66065) Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: bph <[email protected]> * Hide grid visualizer when template locked or block editing mode is not default * Remove unlocks
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 34395c4 |
ciampo
pushed a commit
that referenced
this pull request
Oct 14, 2024
…de is not default (#66065) Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: bph <[email protected]> * Hide grid visualizer when template locked or block editing mode is not default * Remove unlocks
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?
Fixes #65974
The grid visualizer doesn't work so well in zoomed out mode, but it also doesn't have much of a purpose, so in this PR it's being hidden. The PR does so by hiding the visualizer whenever the grid block is template locked or has a non-default block editing mode (which it does in zoom out mode).
Why?
The issue with the visualizer is that it renders in a slot outside the canvas in a slot, so it isn't scaled when zoomed out mode is activated the way the canvas does. It'd probably be a good idea to look at making it scale simultaneously with the canvas. It might be prudent for the zoomed out mode implementation to settle a bit first before doing that. There are still some ongoing changes to the scaling mechanism.
An alternative could also be to finalize #64321, which moves the grid visualisation inside the editor canvas, which should mean it scales along with the canvas. That PR had a few blockers though.
How?
Adds some additional checks for template lock and the block editing modes and
return nullfrom the visualizer components when these checks returnisVisible === false.There are two places this has to be added:
packages/block-editor/src/hooks/grid-visualizer.js- renders when the grid block itself is selectedpackages/block-editor/src/hooks/layout-child.js- renders when an inner block of the grid is selectedRemaining issues
The grid visualizer still briefly appears incorrectly sized while the canvas zoomed back in:
Kapture.2024-10-11.at.14.56.42.mp4
I'm thinking through ways to solve that 🤔
Testing Instructions
Screenshots or screencast
Before
After