@wordpress/block-editor 14.3.15 → 14.3.16

package/build-module/utils/object.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a
  * new object. Treats nullish initial values as empty objects. Clones any

package/build-module/utils/object.js.map

@@ -1 +1 @@
-{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName","uniqByProperty","array","property","seen","Set","filter","item","has","add"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects. Supports arrays, too.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\n}\n\n/**\n * Helper util to return a value from a certain path of the object.\n * Path is specified as either:\n * - a string of properties, separated by dots, for example: \"x.y\".\n * - an array of properties, for example `[ 'x', 'y' ]`.\n * You can also specify a default value in case the result is nullish.\n *\n * @param {Object}       object       Input object.\n * @param {string|Array} path         Path to the object property.\n * @param {*}            defaultValue Default value if the value at the specified path is nullish.\n * @return {*} Value of the object property at the specified path.\n */\nexport const getValueFromObjectPath = ( object, path, defaultValue ) => {\n\tconst arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n\n/**\n * Helper util to filter out objects with duplicate values for a given property.\n *\n * @param {Object[]} array    Array of objects to filter.\n * @param {string}   property Property to filter unique values by.\n *\n * @return {Object[]} Array of objects with unique values for the specified property.\n */\nexport function uniqByProperty( array, property ) {\n\tconst seen = new Set();\n\treturn array.filter( ( item ) => {\n\t\tconst value = item[ property ];\n\t\treturn seen.has( value ) ? false : seen.add( value );\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAEC,KAAK,EAAEC,QAAQ,EAAG;EACjD,MAAMC,IAAI,GAAG,IAAIC,GAAG,CAAC,CAAC;EACtB,OAAOH,KAAK,CAACI,MAAM,CAAIC,IAAI,IAAM;IAChC,MAAMrB,KAAK,GAAGqB,IAAI,CAAEJ,QAAQ,CAAE;IAC9B,OAAOC,IAAI,CAACI,GAAG,CAAEtB,KAAM,CAAC,GAAG,KAAK,GAAGkB,IAAI,CAACK,GAAG,CAAEvB,KAAM,CAAC;EACrD,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName","uniqByProperty","array","property","seen","Set","filter","item","has","add"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects. Supports arrays, too.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\n}\n\n/**\n * Helper util to return a value from a certain path of the object.\n * Path is specified as either:\n * - a string of properties, separated by dots, for example: \"x.y\".\n * - an array of properties, for example `[ 'x', 'y' ]`.\n * You can also specify a default value in case the result is nullish.\n *\n * @param {Object}       object       Input object.\n * @param {string|Array} path         Path to the object property.\n * @param {*}            defaultValue Default value if the value at the specified path is nullish.\n * @return {*} Value of the object property at the specified path.\n */\nexport const getValueFromObjectPath = ( object, path, defaultValue ) => {\n\tconst arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n\n/**\n * Helper util to filter out objects with duplicate values for a given property.\n *\n * @param {Object[]} array    Array of objects to filter.\n * @param {string}   property Property to filter unique values by.\n *\n * @return {Object[]} Array of objects with unique values for the specified property.\n */\nexport function uniqByProperty( array, property ) {\n\tconst seen = new Set();\n\treturn array.filter( ( item ) => {\n\t\tconst value = item[ property ];\n\t\treturn seen.has( value ) ? false : seen.add( value );\n\t} );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAEC,KAAK,EAAEC,QAAQ,EAAG;EACjD,MAAMC,IAAI,GAAG,IAAIC,GAAG,CAAC,CAAC;EACtB,OAAOH,KAAK,CAACI,MAAM,CAAIC,IAAI,IAAM;IAChC,MAAMrB,KAAK,GAAGqB,IAAI,CAAEJ,QAAQ,CAAE;IAC9B,OAAOC,IAAI,CAACI,GAAG,CAAEtB,KAAM,CAAC,GAAG,KAAK,GAAGkB,IAAI,CAACK,GAAG,CAAEvB,KAAM,CAAC;EACrD,CAAE,CAAC;AACJ","ignoreList":[]}

package/build-style/content-rtl.css

@@ -803,7 +803,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -812,7 +812,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   }
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
+  overflow-y: scroll;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, left 0s, right 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html.zoom-out-animation {

package/build-style/content.css

@@ -803,7 +803,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -812,7 +812,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   }
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
+  overflow-y: scroll;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, right 0s, left 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html.zoom-out-animation {

package/build-style/style-rtl.css

@@ -2032,8 +2032,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {

package/build-style/style.css

@@ -2033,8 +2033,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.15",
+	"version": "14.3.16",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,11 +40,11 @@
 		"@wordpress/api-fetch": "^7.8.2",
 		"@wordpress/blob": "^4.8.1",
 		"@wordpress/block-serialization-default-parser": "^5.8.1",
-		"@wordpress/blocks": "^13.8.5",
-		"@wordpress/commands": "^1.8.11",
-		"@wordpress/components": "^28.8.11",
-		"@wordpress/compose": "^7.8.3",
-		"@wordpress/data": "^10.8.3",
+		"@wordpress/blocks": "^13.8.6",
+		"@wordpress/commands": "^1.8.12",
+		"@wordpress/components": "^28.8.12",
+		"@wordpress/compose": "^7.8.4",
+		"@wordpress/data": "^10.8.4",
 		"@wordpress/date": "^5.8.2",
 		"@wordpress/deprecated": "^4.8.2",
 		"@wordpress/dom": "^4.8.2",
@@ -55,12 +55,12 @@
 		"@wordpress/i18n": "^5.8.2",
 		"@wordpress/icons": "^10.8.2",
 		"@wordpress/is-shallow-equal": "^5.8.1",
-		"@wordpress/keyboard-shortcuts": "^5.8.3",
+		"@wordpress/keyboard-shortcuts": "^5.8.4",
 		"@wordpress/keycodes": "^4.8.2",
-		"@wordpress/notices": "^5.8.3",
-		"@wordpress/preferences": "^4.8.11",
+		"@wordpress/notices": "^5.8.4",
+		"@wordpress/preferences": "^4.8.12",
 		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/rich-text": "^7.8.3",
+		"@wordpress/rich-text": "^7.8.4",
 		"@wordpress/style-engine": "^2.8.1",
 		"@wordpress/token-list": "^3.8.1",
 		"@wordpress/url": "^4.8.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b4f9e40fa1944235c886804a611f001a91d19680"
+	"gitHead": "51ed4f305ec646b18e2b56eeeebcd4b1d7c0b736"
 }

package/src/components/block-toolbar/index.js

@@ -204,11 +204,13 @@ export function PrivateBlockToolbar( {
 									disabled={ ! isDefaultEditingMode }
 									isUsingBindings={ isUsingBindings }
 								/>
-								{ ! isMultiToolbar && showLockButtons && (
-									<BlockLockToolbar
-										clientId={ blockClientId }
-									/>
-								) }
+								{ ! isMultiToolbar &&
+									showLockButtons &&
+									isDefaultEditingMode && (
+										<BlockLockToolbar
+											clientId={ blockClientId }
+										/>
+									) }
 								<BlockMover
 									clientIds={ blockClientIds }
 									hideDragHandle={ hideDragHandle }

package/src/components/button-block-appender/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,15 +16,11 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Inserter from '../inserter';
-import { useMergeRefs } from '@wordpress/compose';
 
 function ButtonBlockAppender(
 	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
-	const inserterButtonRef = useRef();
-
-	const mergedInserterButtonRef = useMergeRefs( [ inserterButtonRef, ref ] );
 	return (
 		<Inserter
 			position="bottom center"
@@ -34,7 +30,6 @@ function ButtonBlockAppender(
 				if ( onSelect && typeof onSelect === 'function' ) {
 					onSelect( ...args );
 				}
-				inserterButtonRef.current?.focus();
 			} }
 			renderToggle={ ( {
 				onToggle,
@@ -61,7 +56,7 @@ function ButtonBlockAppender(
 				return (
 					<Button
 						__next40pxDefaultSize
-						ref={ mergedInserterButtonRef }
+						ref={ ref }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
 						className={ clsx(

package/src/components/iframe/content.scss

@@ -7,13 +7,26 @@
 	// We don't want to animate the transform of the translateX because it is used
 	// to "center" the canvas. Leaving it on causes the canvas to slide around in
 	// odd ways.
-	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
+	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
 
 	&.zoom-out-animation {
-		// we only want to animate the scaling when entering zoom out. When sidebars
+		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
+		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: calc(-1 * #{$scroll-top});
+		bottom: 0;
+		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
+		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
+		// and removing the scrollbar causes the content to shift.
+		overflow-y: scroll;
+
+		// We only want to animate the scaling when entering zoom out. When sidebars
 		// are toggled, the resizing of the iframe handles scaling the canvas as well,
 		// and the doubled animations cause very odd animations.
-		@include editor-canvas-resize-animation(transform 0s);
+		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
 	}
 }
 

package/src/components/iframe/index.js

@@ -20,6 +20,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
+	useReducedMotion,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -121,6 +122,7 @@ function Iframe( {
 		};
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
+	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const initialContainerWidth = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -130,6 +132,7 @@ function Iframe( {
 		useResizeObserver();
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
+	const prefersReducedMotion = useReducedMotion();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -252,6 +255,19 @@ function Iframe( {
 		containerWidth
 	);
 
+	const frameSizeValue = parseInt( frameSize );
+
+	const maxWidth = 750;
+	const scaleValue =
+		scale === 'default'
+			? ( Math.min( containerWidth, maxWidth ) - frameSizeValue * 2 ) /
+			  scaleContainerWidth
+			: scale;
+
+	const prevScaleRef = useRef( scaleValue );
+	const prevFrameSizeRef = useRef( frameSizeValue );
+	const prevClientHeightRef = useRef( /* Initialized in the useEffect. */ );
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -303,47 +319,173 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	const zoomOutAnimationClassnameRef = useRef( null );
-
-	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
-	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
-	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
-	// number of dependencies.
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if (
+			! iframeDocument ||
+			// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here
+			// instead of the dependency array to appease the linter.
+			( scaleValue === 1 ) === ( prevScaleRef.current === 1 )
+		) {
 			return;
 		}
 
-		const handleZoomOutAnimationClassname = () => {
-			clearTimeout( zoomOutAnimationClassnameRef.current );
+		// Unscaled height of the current iframe container.
+		const clientHeight = iframeDocument.documentElement.clientHeight;
+
+		// Scaled height of the current iframe content.
+		const scrollHeight = iframeDocument.documentElement.scrollHeight;
+
+		// Previous scale value.
+		const prevScale = prevScaleRef.current;
+
+		// Unscaled size of the previous padding around the iframe content.
+		const prevFrameSize = prevFrameSizeRef.current;
+
+		// Unscaled height of the previous iframe container.
+		const prevClientHeight = prevClientHeightRef.current ?? clientHeight;
+
+		// We can't trust the set value from contentHeight, as it was measured
+		// before the zoom out mode was changed. After zoom out mode is changed,
+		// appenders may appear or disappear, so we need to get the height from
+		// the iframe at this point when we're about to animate the zoom out.
+		// The iframe scrollTop, scrollHeight, and clientHeight will all be
+		// accurate. The client height also does change when the zoom out mode
+		// is toggled, as the bottom bar about selecting the template is
+		// added/removed when toggling zoom out mode.
+		const scrollTop = iframeDocument.documentElement.scrollTop;
+
+		// Step 0: Start with the current scrollTop.
+		let scrollTopNext = scrollTop;
+
+		// Step 1: Undo the effects of the previous scale and frame around the
+		// midpoint of the visible area.
+		scrollTopNext =
+			( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) /
+				prevScale -
+			prevClientHeight / 2;
+
+		// Step 2: Apply the new scale and frame around the midpoint of the
+		// visible area.
+		scrollTopNext =
+			( scrollTopNext + clientHeight / 2 ) * scaleValue +
+			frameSizeValue -
+			clientHeight / 2;
+
+		// Step 3: Handle an edge case so that you scroll to the top of the
+		// iframe if the top of the iframe content is visible in the container.
+		// The same edge case for the bottom is skipped because changing content
+		// makes calculating it impossible.
+		scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
+
+		// This is the scrollTop value if you are scrolled to the bottom of the
+		// iframe. We can't just let the browser handle it because we need to
+		// animate the scaling.
+		const maxScrollTop =
+			scrollHeight * ( scaleValue / prevScale ) +
+			frameSizeValue * 2 -
+			clientHeight;
+
+		// Step 4: Clamp the scrollTopNext between the minimum and maximum
+		// possible scrollTop positions. Round the value to avoid subpixel
+		// truncation by the browser which sometimes causes a 1px error.
+		scrollTopNext = Math.round(
+			Math.min(
+				Math.max( 0, scrollTopNext ),
+				Math.max( 0, maxScrollTop )
+			)
+		);
 
-			iframeDocument.documentElement.classList.add(
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top',
+			`${ scrollTop }px`
+		);
+
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top-next',
+			`${ scrollTopNext }px`
+		);
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		function onZoomOutTransitionEnd() {
+			// Remove the position fixed for the animation.
+			iframeDocument.documentElement.classList.remove(
 				'zoom-out-animation'
 			);
 
-			zoomOutAnimationClassnameRef.current = setTimeout( () => {
-				iframeDocument.documentElement.classList.remove(
-					'zoom-out-animation'
+			// Update previous values.
+			prevClientHeightRef.current = clientHeight;
+			prevFrameSizeRef.current = frameSizeValue;
+			prevScaleRef.current = scaleValue;
+
+			// Set the final scroll position that was just animated to.
+			iframeDocument.documentElement.scrollTop = scrollTopNext;
+		}
+
+		let raf;
+		if ( prefersReducedMotion ) {
+			// Hack: Wait for the window values to recalculate.
+			raf = iframeDocument.defaultView.requestAnimationFrame(
+				onZoomOutTransitionEnd
+			);
+		} else {
+			iframeDocument.documentElement.addEventListener(
+				'transitionend',
+				onZoomOutTransitionEnd,
+				{ once: true }
+			);
+		}
+
+		return () => {
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top-next'
+			);
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+			if ( prefersReducedMotion ) {
+				iframeDocument.defaultView.cancelAnimationFrame( raf );
+			} else {
+				iframeDocument.documentElement.removeEventListener(
+					'transitionend',
+					onZoomOutTransitionEnd
 				);
-			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+			}
 		};
+	}, [ iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion ] );
 
-		handleZoomOutAnimationClassname();
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
+	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
+	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
+	// number of dependencies.
+	useEffect( () => {
+		if ( ! iframeDocument ) {
+			return;
+		}
 
-		return () => {
-			handleZoomOutAnimationClassname();
+		if ( isZoomedOut ) {
+			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		} else {
+			// HACK: Since we can't remove this in the cleanup, we need to do it here.
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		}
+
+		return () => {
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
 	}, [ iframeDocument, isZoomedOut ] );
 
 	// Calculate the scaling and CSS variables for the zoom out canvas
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if ( ! iframeDocument ) {
 			return;
 		}
 
-		const maxWidth = 750;
 		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
 		// initialContainerWidth will be smaller than the full page, and reflow will happen
 		// when the canvas area becomes larger due to sidebars closing. This is a known but
@@ -354,11 +496,7 @@ function Iframe( {
 		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
-						scaleContainerWidth
-				: scale
+			scaleValue
 		);
 
 		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
@@ -384,27 +522,29 @@ function Iframe( {
 		);
 
 		return () => {
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-content-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-container-width'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale-container-width'
-			);
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-scale'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-frame-size'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-content-height'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-inner-height'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-container-width'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-scale-container-width'
+			// );
 		};
 	}, [
-		scale,
+		scaleValue,
 		frameSize,
 		iframeDocument,
 		iframeWindowInnerHeight,