From f2c57323c338a6cd74e723fd4a6948bbf1343411 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 12 Aug 2026 14:47:42 +0530 Subject: [PATCH 1/2] Fix the animation from moving tablet to desktop and mobile to desktop when viewport changes --- packages/editor/CHANGELOG.md | 1 + packages/editor/src/components/visual-editor/style.scss | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 9d315fbbfe4ee6..65d822a4a82740 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -20,6 +20,7 @@ - Device Preview: Keep tablet and mobile iframe widths inside their responsive breakpoints so media queries remain accurate at browser zoom levels. - Document tools: Fix icon button focus styles to use the design system `outset-ring__focus` mixin ([#81115](https://github.com/WordPress/gutenberg/pull/81115)). +- Device Preview: Center the editor canvas with the canvas container's own flex alignment rather than the canvas's auto margins, which were conditional on the resize handles being active. Switching from the mobile or tablet preview back to desktop no longer expands the canvas from the left edge ([#](https://github.com/WordPress/gutenberg/issues/)). ## 14.52.0 (2026-07-29) diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss index 4d6ebfc4ecfb5a..ccb6d5f7c1ac62 100644 --- a/packages/editor/src/components/visual-editor/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -17,8 +17,13 @@ background-color: transparent; } - // Centralize the editor horizontally (flex-direction is column). + // Centralize the editor horizontally. align-items: center; + // The canvas is the single flex item, stacked on the block axis so that + // `align-items: center` below centers it horizontally. Without this the + // container defaults to `row`, where `align-items` centers vertically + // instead and horizontal centering falls to the canvas's own auto margins. + flex-direction: column; @media (prefers-reduced-motion: no-preference) { transition: padding 0.2s ease-out; From dca8b1bbd4677d911e358eda407947f1fb768fb0 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 12 Aug 2026 15:00:57 +0530 Subject: [PATCH 2/2] Update changelog entry --- packages/editor/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 65d822a4a82740..c05433d5c6499e 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -20,7 +20,7 @@ - Device Preview: Keep tablet and mobile iframe widths inside their responsive breakpoints so media queries remain accurate at browser zoom levels. - Document tools: Fix icon button focus styles to use the design system `outset-ring__focus` mixin ([#81115](https://github.com/WordPress/gutenberg/pull/81115)). -- Device Preview: Center the editor canvas with the canvas container's own flex alignment rather than the canvas's auto margins, which were conditional on the resize handles being active. Switching from the mobile or tablet preview back to desktop no longer expands the canvas from the left edge ([#](https://github.com/WordPress/gutenberg/issues/)). +- Device Preview: Center the editor canvas with the canvas container's own flex alignment rather than the canvas's auto margins, which were conditional on the resize handles being active. Switching from the mobile or tablet preview back to desktop no longer expands the canvas from the left edge ([#81484](https://github.com/WordPress/gutenberg/pull/81484)). ## 14.52.0 (2026-07-29)