Repository navigation
Editor: Keep the canvas height stable while resizing the canvas - #81374
Conversation
* Editor: Keep the canvas height stable while resizing the canvas Dragging the canvas resize handles left the inline height of `.editor-resizable-editor` as a percentage of its container, such as `104.632%`, and collapsed the white page to its content height. `re-resizable` renders from its own state while resizing and ignores the `size` prop, converting the pixel height it started with into a percentage whenever that prop is a percentage. Switching the height to `100%` on resize start therefore never applied, it only changed the unit of the stale value. Hold the device height the drag started at until the drag ends, so the prop stays in pixels for the whole drag. The iframe body's `min-height: 100vh` was keyed off the device height, which stops applying as soon as the width leaves the preset, so the body collapsed on the first move and again on release. Key it off the canvas having a constrained width instead. Co-Authored-By: Claude <noreply@anthropic.com> * Editor: Drop redundant comments in the visual editor canvas sizing The two comments restated what the adjacent expressions already say, so they only added noise to the resize handling logic. Co-Authored-By: Claude <noreply@anthropic.com> * Editor: Always fill the editor height instead of a device aspect ratio The canvas frame was given a fixed pixel height derived from the device aspect ratio at the mobile and tablet preset widths, so the frame stopped short of the editor height and had to be held stable while resizing. Drop the ratio entirely and let the canvas fill the available height at every width, which also removes the now unused getCanvasHeight selector. While dragging, clearing the canvas width near the container edge turned resizing off mid-drag, unmounting the handle under the pointer along with the canvas frame styles. Only snap back to a fluid width once the drag has ended. Co-Authored-By: Claude <noreply@anthropic.com> * Editor: Scale the canvas height with its width instead of always filling A width-constrained canvas (a device preview or a dragged resize) kept the full editor height, which reads as an unnaturally elongated frame on tall screens. Derive the height from the canvas width by interpolating between the aspect ratio of the available space and a portrait target ratio, mirroring the site editor's resizable frame, and clamp it so it never exceeds the space available. Using the container width as the upper anchor keeps the height monotonic in the width and exactly 100% at full width. `re-resizable` ignores the `size` prop while a drag is in progress, so the height is animated through motion to stay in sync with the width during the drag. The CSS height transition is dropped to avoid animating it twice. Co-Authored-By: Claude <noreply@anthropic.com> * Editor: Remove unused blockEditorStore import from private selectors test * Editor: Remove unused onResizeStart and onResizeStop props from ResizableEditor * Editor: Add unit tests for the visual editor getCanvasHeight helper --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>
|
Size Change: +105 B (0%) Total Size: 7.75 MB 📦 View Changed
|
|
Flaky tests detected in 4948b84. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31370520971 should paste block styles using keyboard in
|
|
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. |
This updates the pinned commit hash of the Gutenberg repository from `ea285b45692aed6c4f95353671393402f97f0aa7` to `b9743a015526ac8fd79298fd4e96cf002cee333b`. A full list of changes included in this commit can be found on GitHub: WordPress/gutenberg@ea285b4...b9743a0 - Style states: fix state deselection when selecting the already selected block (WordPress/gutenberg#81277) - Global styles: render element styles set only inside a breakpoint (WordPress/gutenberg#81265) - Style states: Fix phantom pseudo element style output (WordPress/gutenberg#81291) - Docs: remove breakpoint-only element style example from global styles guide (WordPress/gutenberg#81308) - theme.json schema: responsive states belong to blocks (WordPress/gutenberg#81253) - theme.json schema: allow responsive states on block style variations (WordPress/gutenberg#81309) - Render viewport state element styles in the editor (WordPress/gutenberg#81307) (WordPress/gutenberg#81311) - Site Editor: Decode HTML entities in Identity fields (WordPress/gutenberg#81269) (WordPress/gutenberg#81320) - Editor: Keep the canvas height stable while resizing the canvas (WordPress/gutenberg#81374) - Playlist: Normalize Waveform Player configuration handling (WordPress/gutenberg#81375) - Playlist: Improve audio conversion and track selection (WordPress/gutenberg#80926) (WordPress/gutenberg#81385) - fix: order site identity changes predictably (WordPress/gutenberg#81283) - Cover: Avoid passing null as the featured image size (WordPress/gutenberg#81444) - components/Menu: Restore Modal focus return when menu items close (WordPress/gutenberg#81446) - Notes: Fix text wrapping for long usernames in collaboration sidebar (WordPress/gutenberg#81406) - Site Editor: Use inverted ThemeProvider seed for portaled UI (WordPress/gutenberg#81296) Props wildworks. See #65529. git-svn-id: https://develop.svn.wordpress.org/branches/7.1@63209 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned commit hash of the Gutenberg repository from `ea285b45692aed6c4f95353671393402f97f0aa7` to `b9743a015526ac8fd79298fd4e96cf002cee333b`. A full list of changes included in this commit can be found on GitHub: WordPress/gutenberg@ea285b4...b9743a0 - Style states: fix state deselection when selecting the already selected block (WordPress/gutenberg#81277) - Global styles: render element styles set only inside a breakpoint (WordPress/gutenberg#81265) - Style states: Fix phantom pseudo element style output (WordPress/gutenberg#81291) - Docs: remove breakpoint-only element style example from global styles guide (WordPress/gutenberg#81308) - theme.json schema: responsive states belong to blocks (WordPress/gutenberg#81253) - theme.json schema: allow responsive states on block style variations (WordPress/gutenberg#81309) - Render viewport state element styles in the editor (WordPress/gutenberg#81307) (WordPress/gutenberg#81311) - Site Editor: Decode HTML entities in Identity fields (WordPress/gutenberg#81269) (WordPress/gutenberg#81320) - Editor: Keep the canvas height stable while resizing the canvas (WordPress/gutenberg#81374) - Playlist: Normalize Waveform Player configuration handling (WordPress/gutenberg#81375) - Playlist: Improve audio conversion and track selection (WordPress/gutenberg#80926) (WordPress/gutenberg#81385) - fix: order site identity changes predictably (WordPress/gutenberg#81283) - Cover: Avoid passing null as the featured image size (WordPress/gutenberg#81444) - components/Menu: Restore Modal focus return when menu items close (WordPress/gutenberg#81446) - Notes: Fix text wrapping for long usernames in collaboration sidebar (WordPress/gutenberg#81406) - Site Editor: Use inverted ThemeProvider seed for portaled UI (WordPress/gutenberg#81296) Props wildworks. See #65529. Built from https://develop.svn.wordpress.org/branches/7.1@63209 git-svn-id: http://core.svn.wordpress.org/branches/7.1@62402 1a063a9b-81f0-0310-95a4-ce76da25c4cd
What?
Backport of #81163 to the
wp/7.1branch.Why?
#81163 does not cherry-pick cleanly onto
wp/7.1. The conflicts come entirely from #81248, which removed the dependency group comments across the whole repository ontrunk. Those comments are still present onwp/7.1.How?
Resolved the conflicts in the import blocks only. There are no logic changes relative to the original PR.
Testing Instructions
Same as #81163.
Use of AI Tools
Claude Code was used to identify the cause of the cherry-pick conflicts and to resolve them. The result was reviewed by the author.