Block Editor Iframe: Support displaying fixed elements by only applying scale when it is not 1 #46929
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
…ng scale when it is a non-1 value
andrewserong
added
[Type] Enhancement
|
@youknowriad this one isn't at all urgent, but I've added you as a reviewer since you worked on the zoomed out view. Let me know if it turns out that |
|
Size Change: +5 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5cffb87. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3853088863
|
|
The fix is good for the case of scale 1 but I'm wondering about the zoom-out mode, does it mean "fixed" positioned blocks won't work on that mode? How should we go about that? |
|
@andrewserong @youknowriad I'm working on a PR that moves the scaling out of the iframe, so this fix would no longer be needed I think. |
|
Thanks for taking a look!
Yes, that sounds like a better way to go about it, if the scaling is happening at the iframe wrapper or higher, then this PR shouldn't be needed I don't think 👍 |
|
So does #47004 fix this? |
|
Thanks @ellatrix, that fixes this issue! It appears to have a similar effect as this PR (it's fixed to the top when not zoomed out, and when zoomed out, the view is treated as the whole page view, rather than a page that gets scrolled, so the fixed element remains at the top of the visual area of the page view). IMO, that's pretty good behaviour, and is how I'd expect a zoomed out view to look 👍 I'll close out this PR now. |
youknowriad
deleted the
update/block-editor-iframe-component-to-support-fixed-elements
branch
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?
Part of implementing #30121
This PR updates the block editor iframe so that the CSS transform (scale) is only applied when it is a non-1 value — this ensures that the block editor iframe can support fixed position elements, which will be part of implementing position block support (see #30121).
Why?
It turns out that fixed position CSS isn't displayed by the browser when a CSS transform is applied to one of its ancestors (here's a helpful blog post I found on the topic: https://achrafkassioui.com/blog/position-fixed-and-CSS-transforms/).
It appears that the
transform: scalerule applied to the body element of the block editor iframe is only needed for browse mode, when it has a value that is not1, so the approach in this PR is to conditionally output the transform instead of always outputting it.How?
In the block editor iframe, only output the
transform: scalerule when the scale value is not1.Testing Instructions
For the purposes of this PR, test that browse mode is still working as expected.
/wp-admin/admin.php?page=gutenberg-experimentsIf you want to try testing fixed positioning and that this PR fixes the issue, then you can apply this PR on top of #46142. With this applied on top of that PR, open up the Group block's
block.jsonfile, and add"fixed": trueto thesupports.positionobject. Then, in the site editor, set a Group block to Fixed Position under the position dropdown in the inspector controls. The block should lose its width, and then be fixed to the top of the viewport.For the purposes of this PR, there's likely no need to go through all the steps of the above to test out the fixed position PR — for now, let's verify whether or not we can safely update this transform rule.
Screenshots or screencast
In the below screengrab (where this PR is applied on top of the fixed/sticky position support PR #46142), a block is set to Fixed Position, and when not in the zoomed out view, it remains fixed to the viewport. When clicking on the zoomed out view, the block becomes no longer fixed (which is to be expected) while the user views the page in the browse mode. Switching off from zoomed out view, the fixed positioning is restored.
fixed-position-and-zoomed-view.mp4