Skip to content

Editor: Keep the canvas height stable while resizing the canvas - #81374

Merged
t-hamano merged 1 commit into
wp/7.1from
fix/canvas-height-during-resize-7.1
Aug 10, 2026
Merged

t-hamano merged 1 commit into
wp/7.1from
fix/canvas-height-during-resize-7.1

Conversation

@t-hamano

@t-hamano t-hamano commented Aug 10, 2026 •

Copy link
Copy Markdown
Contributor

What?

Backport of #81163 to the wp/7.1 branch.

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 on trunk. Those comments are still present on wp/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.

* 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>
@github-actions github-actions Bot added the [Package] Editor /packages/editor label Aug 10, 2026
@t-hamano t-hamano changed the title Editor: Keep the canvas height stable while resizing the canvas (#81163) Editor: Keep the canvas height stable while resizing the canvas Aug 10, 2026
@github-actions

Copy link
Copy Markdown

Size Change: +105 B (0%)

Total Size: 7.75 MB

📦 View Changed
Filename Size Change
build/scripts/editor/index.min.js 502 kB +127 B (+0.03%)
build/styles/editor/style-rtl.css 31.2 kB -4 B (-0.01%)
build/styles/editor/style-rtl.min.css 26.5 kB -7 B (-0.03%)
build/styles/editor/style.css 31.3 kB -5 B (-0.02%)
build/styles/editor/style.min.css 26.5 kB -6 B (-0.02%)

compressed-size-action

@github-actions

Copy link
Copy Markdown

Flaky tests detected in 4948b84.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31370520971
📝 Reported tests:

should paste block styles using keyboard in /test/e2e/specs/editor/various/list-view.spec.js, passed after 1 failed attempt.
Error: expect(received).toMatchObject(expected)

- Expected  - 6
+ Received  + 0

@@ -1,15 +1,9 @@
  Array [
    Object {
      "attributes": Object {
        "content": "First Block",
-       "style": Object {
-         "color": Object {
-           "background": "#00ff00",
-           "text": "#ff0000",
-         },
-       },
      },
      "name": "core/paragraph",
    },
    Object {
      "attributes": Object {

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/list-view.spec.js:653:41

@t-hamano
t-hamano marked this pull request as ready for review August 10, 2026 09:14
@github-actions

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added the [Type] Bug An existing feature does not function as intended label Aug 10, 2026
@t-hamano t-hamano self-assigned this Aug 10, 2026
@t-hamano
t-hamano merged commit 3ff98d2 into wp/7.1 Aug 10, 2026
48 of 49 checks passed
@t-hamano
t-hamano deleted the fix/canvas-height-during-resize-7.1 branch August 10, 2026 09:15
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Aug 12, 2026
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
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Aug 12, 2026
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant