Split view with meta boxes even with legacy canvas #66706
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
|
Size Change: +138 B (+0.01%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in be563d0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11659110156
|
|
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. |
stokesman
added
[Type] Bug
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?
Brings the split view introduced in #64351 to the non-iframed canvas.
Why?
The split view seems like a better UX since the meta boxes can be accessed without having to scroll the entire canvas. Also there currently are issues with device previews being obscured by the meta box pane.
Fixes #66629 (Though, a more minimal fix for 6.7 is in #66726).
Additionally:
How?
BlockCanvasconditionally a scrolling context withVisualEditorspecifying it as needed:Testing Instructions
These are not step-by-step but are all the things I’ve thought to test while working on this. Each one includes a screen recording to demonstrate what to test but are partial to either the iframe or non-iframe contexts. Testing should be done in both contexts and also with or without meta boxes present.
Device preview overflow
With a viewport short enough so the height of the device preview does not fit the outer scrolling area should be active and include/show the bottom margin of the canvas when fully scrolled. With meta boxes present this should still be the case both when the split view is resizable or when the viewport height is less than 550 pixels and the meta box pane expands/collapses (there’s no resizable separator).
device-preview-overflow.mp4
Focused edit mode
The canvas should shrink to fit the content without overflow and become scrollable only when the content is taller than the available height for the canvas.
focused-edit-mode.mp4
Sticky positioning
Sticky positioning should work as expected
sticky-positioning.mp4
Meta box toggle pane auto height
When the viewport height is less than 550 pixels the meta box pane should only be as tall as it needs to be to fit its content. Collapsing the pane should hide everything but the pane’s toggle button. When expanded and with overflow the toggle button should be remain visible even when the content is scrolled. With editor notices present the available height for the pane should be reduced and should not cause any extra scrollbars to appear.
toggle-meta-box-no-iframe.mp4
Meta box resizable pane
The pane should be resizable from zero height to full height. While resizing the canvas should be scrollable as needed and cause no extra scrolling areas.
resizable-meta-box-no-iframe.mp4
Overflow of block toolbar
For all combinations of iframed/non-iframed with or without meta boxes having the block toolbar below the fold should not cause extra scrolling areas.
block-toolbar-overflow.mp4
Editor notices
With notices present there should be no extra scrollbars. Now whether the canvas is iframed or not notices should push/shrink the canvas and be present above it whether or not the canvas is scrolled.
notices-v-canvas-scrolling.mp4
Testing Instructions for Keyboard
Test that no keyboarding changes have been introduced in any of the above scenarios.
Screenshots or screencast
Each testing sub-section above has a screen recording demonstration.