Editor: Enable Zoom-out mode in the post editor #61293
Merged
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
youknowriad
added
[Type] Enhancement
|
I'm seeing a weird "dance", when I get into the zoom-out mode. The canvas is constantly moving. I wonder why it doesn't happen in the site editor. Any idea what that is? |
|
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. |
youknowriad
commented
May 1, 2024
| @@ -705,12 +705,9 @@ $block-inserter-tabs-height: 44px; | |||
| display: none; | |||
| } | |||
|
|
|||
| .is-zoom-out { | |||
There was a problem hiding this comment.
This style was relying on the existence of some global CSS class, this is not great, especially since this class is define outside the package entirely while we do have access to the mode within the package.
youknowriad
commented
May 1, 2024
| @@ -249,3 +249,12 @@ | |||
| .components-popover.more-menu-dropdown__content { | |||
| z-index: z-index(".components-popover.more-menu__content"); | |||
| } | |||
|
|
|||
| .edit-post-header__preview-options { | |||
There was a problem hiding this comment.
I copied the behavior of the site editor for now where we fade away to the button in zoom-out. I think that's not a great solution though, it's very adhoc and leave an empty space in the toolbar and also leaves a focusable but hidden button.
There was a problem hiding this comment.
I'd prefer if keep it but disable it.
There was a problem hiding this comment.
I agree. Disabling it via aria-disabled seems like a better option. You can also hover the empty area and see the tooltip right now.
|
Size Change: -519 B (-0.03%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
jeryj
reviewed
May 2, 2024
|
Here's the site editor, then post editor, with zoom out engaged. A bit of a flicker going on within the post editor: CleanShot.2024-05-02.at.21.03.20.mp4I do see the experimental toggle in the header. |
draganescu
reviewed
May 3, 2024
Just noting that this bug exists in trunk too in the site editor. This just moved the code to the post editor too. Happy to address though. |
youknowriad
force-pushed
the
enable/zoom-out-post-editor
branch
from
e2f6bd0
to
0660c6e
Compare
youknowriad
force-pushed
the
enable/zoom-out-post-editor
branch
from
0660c6e
to
d372296
Compare
|
@jeryj @ajlende I'm going to need to help to figure out the flickering issue in the post editor. It looks like applying the "scale" to the iframe in the post editor (when opening the patterns inserter), triggers an infinite loop where the "width" changes => "scale" changes => "width" changes back => "scale" changes.... |
|
Simply confirming the flickering still and the lack of option to invoke it in the header: zoomed.out.in.post.editor.test.movNeat to see this being expanded and explored. |
The option should be there (you need to enable the experiment first) |
|
@ntsekouras fount the flicker to be caused by a bottom padding added for the type writer effect which is only present in the post editor. |
|
Thanks for fixing the flickering :) |
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.
Extrated from #61273
Related #52632
What?
We're in a middle of an effort to merge the post and site editors under the @wordpress/editor abstraction. As part of this, this PR unifies the Header component between both editors.
Testing Instructions
If you have the zoom-out experiment enabled, you should be able to trigger the zoom-out manually from the header.
It also triggers automatically when you open the patterns tab in the inserter.