Zoom out: Correctly scale canvas in non-iframe editor #71351
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
|
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. |
|
Size Change: +3 B (0%) Total Size: 1.92 MB
ℹ️ View Unchanged
|
jeryj
reviewed
Aug 26, 2025
Contributor
jeryj
left a comment
There was a problem hiding this comment.
Can you explain to me how the testing of this works? I'm able to follow your instructions to get the animation to not run anymore with the post content -> show template -> wp.blocks.registerBlockType( 'test/v2', { apiVersion: '2', title: 'test' } ); in console, but the editor is still an iframe. I don't really understand what's happening there :)
| return; | ||
| } | ||
|
|
||
| previousIsZoomedOut.current = isZoomedOut; |
Contributor
There was a problem hiding this comment.
This is testing well for me. I think I'd prefer to keep the previous previousIsZoomedOut.current !== isZoomedOut alongside the setting of the ref though. I think it will be easier to understand why we don't want the animation to run when the iframeDocument is false. What do you think of this instead?
// If we don't have an iframe document, we don't run or track the animation.
if ( ! iframeDocument ) {
return;
}
const triggerAnimation = isZoomedOut !== previousIsZoomedOut.current;
previousIsZoomedOut.current = isZoomedOut;
// Zoom state has not changed, so we don't need to run the animation.
if ( ! triggerAnimation ) {
return;
}
Contributor
Author
There was a problem hiding this comment.
Updated in 0dbaf38
The suggested logic seems to work correctly!
Contributor
Author
|
Thanks for the review!
Did you comment out this line? This is a part of the If you've tested correctly, the iframe should be disabled. Note, however, that when zoom-out mode is enabled, the iframe is enabled. 3473d6463887599128d5934d70a893d5.mp4 |
|
Flaky tests detected in 0dbaf38. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17260927278
|
Contributor
Yes, I believe I commented out those lines, but I was surprised to see the |
Contributor
Author
|
I'm not sure how to explain it any further 😅 Perhaps I'm misunderstanding something.
I can't see any |
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?
This PR correctly triggers canvas scaling in the non-iframe post editor, and ensures that the iframe editor canvas scales out correctly.
Why?
The Post Editor may not be an iframe under certain conditions. Therefore, when zoom-out mode is enabled, the
useScaleCanvas()hook executes before the iframe element is rendered, resulting in theiframeDocumentprop beingundefined.Even though this conditional statement becomes
falseand scale-out is not triggered,previousIsZoomedOut.currentis updated totrue:gutenberg/packages/block-editor/src/components/iframe/use-scale-canvas.js
Lines 318 to 326 in 55d79f3
As a result, the
triggervariable is always evaluated asfalse, and the canvas doesn't scale out, even though zoom-out mode is enabled internally.How?
Update
previousIsZoomedOutstate after the scaling is actually been triggered. I'm not sure if this is the correct approach, but it all appears to work correctly.Testing Instructions
First, delete the following lines in this branch. These changes are necessary to mimic the behavior in core and make the post editor work as a non-iframe editor:
wp.blocks.registerBlockType( 'test/v2', { apiVersion: '2', title: 'test' } );Additional Tests
/wp-admin/site-editor.php?p=%2Fstyles§ion=%2Fblocks%2Fcore%252FheadinguseScaleCanvas()only when toggling zoomed out mode #67481).Screenshots or screencast
fad14a7ec7a0e98533dd8c82abdbd051.mp4