npm - @wordpress/block-editor - Versions diffs - 14.8.0 → 14.8.1-next.cd6172eb0.0 - Mend

@wordpress/block-editor 14.8.0 → 14.8.1-next.cd6172eb0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/build-module/components/global-styles/get-global-styles-changes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["memoize","__","_n","sprintf","getBlockTypes","globalStylesChangesCache","Map","EMPTY_ARRAY","translationMap","caption","link","button","heading","h1","h2","h3","h4","h5","h6","getBlockNames","reduce","accumulator","name","title","isObject","obj","getTranslation","key","keyArray","split","blockName","undefined","deepCompare","changedObject","originalObject","parentPath","slice","join","allKeys","Set","Object","keys","diffs","path","changedPath","concat","getGlobalStylesChangelist","next","previous","cacheKey","JSON","stringify","has","get","changedValueTree","styles","background","color","typography","spacing","blocks","elements","settings","length","set","result","acc","curr","translation","push","getGlobalStylesChanges","options","changeList","changesLength","maxResults","entries","group","includes","map","changeValues","changeValuesLength","joinedChangesValue"],"sources":["@wordpress/block-editor/src/components/global-styles/get-global-styles-changes.js"],"sourcesContent":["/*\n External dependencies\n /\nimport memoize from 'memize';\n\n/\n WordPress dependencies\n /\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { getBlockTypes } from '@wordpress/blocks';\n\nconst globalStylesChangesCache = new Map();\nconst EMPTY_ARRAY = [];\nconst translationMap = {\n\tcaption: __( 'Caption' ),\n\tlink: __( 'Link' ),\n\tbutton: __( 'Button' ),\n\theading: __( 'Heading' ),\n\th1: __( 'H1' ),\n\th2: __( 'H2' ),\n\th3: __( 'H3' ),\n\th4: __( 'H4' ),\n\th5: __( 'H5' ),\n\th6: __( 'H6' ),\n\t'settings.color': __( 'Color' ),\n\t'settings.typography': __( 'Typography' ),\n\t'styles.color': __( 'Colors' ),\n\t'styles.spacing': __( 'Spacing' ),\n\t'styles.background': __( 'Background' ),\n\t'styles.typography': __( 'Typography' ),\n};\nconst getBlockNames = memoize( () =>\n\tgetBlockTypes().reduce( ( accumulator, { name, title } ) => {\n\t\taccumulator[ name ] = title;\n\t\treturn accumulator;\n\t}, {} )\n);\nconst isObject = ( obj ) => obj !== null && typeof obj === 'object';\n\n/\n Get the translation for a given global styles key.\n * @param {string} key A key representing a path to a global style property or setting.\n * @return {string\|undefined} A translated key or undefined if no translation exists.\n /\nfunction getTranslation( key ) {\n\tif ( translationMap[ key ] ) {\n\t\treturn translationMap[ key ];\n\t}\n\n\tconst keyArray = key.split( '.' );\n\n\tif ( keyArray?.[ 0 ] === 'blocks' ) {\n\t\tconst blockName = getBlockNames()?.[ keyArray[ 1 ] ];\n\t\treturn blockName \|\| keyArray[ 1 ];\n\t}\n\n\tif ( keyArray?.[ 0 ] === 'elements' ) {\n\t\treturn translationMap[ keyArray[ 1 ] ] \|\| keyArray[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\n/\n A deep comparison of two objects, optimized for comparing global styles.\n * @param {Object} changedObject The changed object to compare.\n * @param {Object} originalObject The original object to compare against.\n * @param {string} parentPath A key/value pair object of block names and their rendered titles.\n * @return {string[]} An array of paths whose values have changed.\n /\nfunction deepCompare( changedObject, originalObject, parentPath = '' ) {\n\t// We have two non-object values to compare.\n\tif ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {\n\t\t/\n\t\t * Only return a path if the value has changed.\n\t\t * And then only the path name up to 2 levels deep.\n\t\t /\n\t\treturn changedObject !== originalObject\n\t\t\t? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )\n\t\t\t: undefined;\n\t}\n\n\t// Enable comparison when an object doesn't have a corresponding property to compare.\n\tchangedObject = isObject( changedObject ) ? changedObject : {};\n\toriginalObject = isObject( originalObject ) ? originalObject : {};\n\n\tconst allKeys = new Set( [\n\t\t...Object.keys( changedObject ),\n\t\t...Object.keys( originalObject ),\n\t] );\n\n\tlet diffs = [];\n\tfor ( const key of allKeys ) {\n\t\tconst path = parentPath ? parentPath + '.' + key : key;\n\t\tconst changedPath = deepCompare(\n\t\t\tchangedObject[ key ],\n\t\t\toriginalObject[ key ],\n\t\t\tpath\n\t\t);\n\t\tif ( changedPath ) {\n\t\t\tdiffs = diffs.concat( changedPath );\n\t\t}\n\t}\n\treturn diffs;\n}\n\n/\n Returns an array of translated summarized global styles changes.\n * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.\n \n @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @return {Array[]} A 2-dimensional array of tuples: [ \"group\", \"translated change\" ].\n /\nexport function getGlobalStylesChangelist( next, previous ) {\n\tconst cacheKey = JSON.stringify( { next, previous } );\n\n\tif ( globalStylesChangesCache.has( cacheKey ) ) {\n\t\treturn globalStylesChangesCache.get( cacheKey );\n\t}\n\n\t/\n\t * Compare the two changesets with normalized keys.\n\t * The order of these keys determines the order in which\n\t * they'll appear in the results.\n\t /\n\tconst changedValueTree = deepCompare(\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: next?.styles?.background,\n\t\t\t\tcolor: next?.styles?.color,\n\t\t\t\ttypography: next?.styles?.typography,\n\t\t\t\tspacing: next?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: next?.styles?.blocks,\n\t\t\telements: next?.styles?.elements,\n\t\t\tsettings: next?.settings,\n\t\t},\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: previous?.styles?.background,\n\t\t\t\tcolor: previous?.styles?.color,\n\t\t\t\ttypography: previous?.styles?.typography,\n\t\t\t\tspacing: previous?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: previous?.styles?.blocks,\n\t\t\telements: previous?.styles?.elements,\n\t\t\tsettings: previous?.settings,\n\t\t}\n\t);\n\n\tif ( ! changedValueTree.length ) {\n\t\tglobalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );\n\t\treturn EMPTY_ARRAY;\n\t}\n\n\t// Remove duplicate results.\n\tconst result = [ ...new Set( changedValueTree ) ]\n\t\t/\n\t\t * Translate the keys.\n\t\t * Remove empty translations.\n\t\t /\n\t\t.reduce( ( acc, curr ) => {\n\t\t\tconst translation = getTranslation( curr );\n\t\t\tif ( translation ) {\n\t\t\t\tacc.push( [ curr.split( '.' )[ 0 ], translation ] );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\tglobalStylesChangesCache.set( cacheKey, result );\n\n\treturn result;\n}\n\n/\n From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.\n * The types are 'blocks', 'elements', 'settings', and 'styles'.\n \n @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @param {{maxResults:number}} options Options. maxResults: results to return before truncating.\n * @return {string[]} An array of translated changes.\n /\nexport default function getGlobalStylesChanges( next, previous, options = {} ) {\n\tlet changeList = getGlobalStylesChangelist( next, previous );\n\tconst changesLength = changeList.length;\n\tconst { maxResults } = options;\n\n\tif ( changesLength ) {\n\t\t// Truncate to `n` results if necessary.\n\t\tif ( !! maxResults && changesLength > maxResults ) {\n\t\t\tchangeList = changeList.slice( 0, maxResults );\n\t\t}\n\t\treturn Object.entries(\n\t\t\tchangeList.reduce( ( acc, curr ) => {\n\t\t\t\tconst group = acc[ curr[ 0 ] ] \|\| [];\n\t\t\t\tif ( ! group.includes( curr[ 1 ] ) ) {\n\t\t\t\t\tacc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t}, {} )\n\t\t).map( ( [ key, changeValues ] ) => {\n\t\t\tconst changeValuesLength = changeValues.length;\n\t\t\tconst joinedChangesValue = changeValues.join(\n\t\t\t\t/ translators: Used between list items, there is a space after the comma. */\n\t\t\t\t__( ', ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace\n\t\t\t);\n\t\t\tswitch ( key ) {\n\t\t\t\tcase 'blocks': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of block names separated by a comma.\n\t\t\t\t\t\t_n( '%s block.', '%s blocks.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'elements': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of element names separated by a comma.\n\t\t\t\t\t\t_n( '%s element.', '%s elements.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'settings': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json setting labels separated by a comma.\n\t\t\t\t\t\t__( '%s settings.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'styles': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json top-level styles labels separated by a comma.\n\t\t\t\t\t\t__( '%s styles.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of global styles changes separated by a comma.\n\t\t\t\t\t\t__( '%s.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn EMPTY_ARRAY;\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["memoize","__","_n","sprintf","getBlockTypes","globalStylesChangesCache","Map","EMPTY_ARRAY","translationMap","caption","link","button","heading","h1","h2","h3","h4","h5","h6","getBlockNames","reduce","accumulator","name","title","isObject","obj","getTranslation","key","keyArray","split","blockName","undefined","deepCompare","changedObject","originalObject","parentPath","slice","join","allKeys","Set","Object","keys","diffs","path","changedPath","concat","getGlobalStylesChangelist","next","previous","cacheKey","JSON","stringify","has","get","changedValueTree","styles","background","color","typography","spacing","blocks","elements","settings","length","set","result","acc","curr","translation","push","getGlobalStylesChanges","options","changeList","changesLength","maxResults","entries","group","includes","map","changeValues","changeValuesLength","joinedChangesValue"],"sources":["@wordpress/block-editor/src/components/global-styles/get-global-styles-changes.js"],"sourcesContent":["/*\n External dependencies\n /\nimport memoize from 'memize';\n\n/\n WordPress dependencies\n /\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { getBlockTypes } from '@wordpress/blocks';\n\nconst globalStylesChangesCache = new Map();\nconst EMPTY_ARRAY = [];\nconst translationMap = {\n\tcaption: __( 'Caption' ),\n\tlink: __( 'Link' ),\n\tbutton: __( 'Button' ),\n\theading: __( 'Heading' ),\n\th1: __( 'H1' ),\n\th2: __( 'H2' ),\n\th3: __( 'H3' ),\n\th4: __( 'H4' ),\n\th5: __( 'H5' ),\n\th6: __( 'H6' ),\n\t'settings.color': __( 'Color' ),\n\t'settings.typography': __( 'Typography' ),\n\t'styles.color': __( 'Colors' ),\n\t'styles.spacing': __( 'Spacing' ),\n\t'styles.background': __( 'Background' ),\n\t'styles.typography': __( 'Typography' ),\n};\nconst getBlockNames = memoize( () =>\n\tgetBlockTypes().reduce( ( accumulator, { name, title } ) => {\n\t\taccumulator[ name ] = title;\n\t\treturn accumulator;\n\t}, {} )\n);\nconst isObject = ( obj ) => obj !== null && typeof obj === 'object';\n\n/\n Get the translation for a given global styles key.\n * @param {string} key A key representing a path to a global style property or setting.\n * @return {string\|undefined} A translated key or undefined if no translation exists.\n /\nfunction getTranslation( key ) {\n\tif ( translationMap[ key ] ) {\n\t\treturn translationMap[ key ];\n\t}\n\n\tconst keyArray = key.split( '.' );\n\n\tif ( keyArray?.[ 0 ] === 'blocks' ) {\n\t\tconst blockName = getBlockNames()?.[ keyArray[ 1 ] ];\n\t\treturn blockName \|\| keyArray[ 1 ];\n\t}\n\n\tif ( keyArray?.[ 0 ] === 'elements' ) {\n\t\treturn translationMap[ keyArray[ 1 ] ] \|\| keyArray[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\n/\n A deep comparison of two objects, optimized for comparing global styles.\n * @param {Object} changedObject The changed object to compare.\n * @param {Object} originalObject The original object to compare against.\n * @param {string} parentPath A key/value pair object of block names and their rendered titles.\n * @return {string[]} An array of paths whose values have changed.\n /\nfunction deepCompare( changedObject, originalObject, parentPath = '' ) {\n\t// We have two non-object values to compare.\n\tif ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {\n\t\t/\n\t\t * Only return a path if the value has changed.\n\t\t * And then only the path name up to 2 levels deep.\n\t\t /\n\t\treturn changedObject !== originalObject\n\t\t\t? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )\n\t\t\t: undefined;\n\t}\n\n\t// Enable comparison when an object doesn't have a corresponding property to compare.\n\tchangedObject = isObject( changedObject ) ? changedObject : {};\n\toriginalObject = isObject( originalObject ) ? originalObject : {};\n\n\tconst allKeys = new Set( [\n\t\t...Object.keys( changedObject ),\n\t\t...Object.keys( originalObject ),\n\t] );\n\n\tlet diffs = [];\n\tfor ( const key of allKeys ) {\n\t\tconst path = parentPath ? parentPath + '.' + key : key;\n\t\tconst changedPath = deepCompare(\n\t\t\tchangedObject[ key ],\n\t\t\toriginalObject[ key ],\n\t\t\tpath\n\t\t);\n\t\tif ( changedPath ) {\n\t\t\tdiffs = diffs.concat( changedPath );\n\t\t}\n\t}\n\treturn diffs;\n}\n\n/\n Returns an array of translated summarized global styles changes.\n * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.\n \n @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @return {Array[]} A 2-dimensional array of tuples: [ \"group\", \"translated change\" ].\n /\nexport function getGlobalStylesChangelist( next, previous ) {\n\tconst cacheKey = JSON.stringify( { next, previous } );\n\n\tif ( globalStylesChangesCache.has( cacheKey ) ) {\n\t\treturn globalStylesChangesCache.get( cacheKey );\n\t}\n\n\t/\n\t * Compare the two changesets with normalized keys.\n\t * The order of these keys determines the order in which\n\t * they'll appear in the results.\n\t /\n\tconst changedValueTree = deepCompare(\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: next?.styles?.background,\n\t\t\t\tcolor: next?.styles?.color,\n\t\t\t\ttypography: next?.styles?.typography,\n\t\t\t\tspacing: next?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: next?.styles?.blocks,\n\t\t\telements: next?.styles?.elements,\n\t\t\tsettings: next?.settings,\n\t\t},\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: previous?.styles?.background,\n\t\t\t\tcolor: previous?.styles?.color,\n\t\t\t\ttypography: previous?.styles?.typography,\n\t\t\t\tspacing: previous?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: previous?.styles?.blocks,\n\t\t\telements: previous?.styles?.elements,\n\t\t\tsettings: previous?.settings,\n\t\t}\n\t);\n\n\tif ( ! changedValueTree.length ) {\n\t\tglobalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );\n\t\treturn EMPTY_ARRAY;\n\t}\n\n\t// Remove duplicate results.\n\tconst result = [ ...new Set( changedValueTree ) ]\n\t\t/\n\t\t * Translate the keys.\n\t\t * Remove empty translations.\n\t\t /\n\t\t.reduce( ( acc, curr ) => {\n\t\t\tconst translation = getTranslation( curr );\n\t\t\tif ( translation ) {\n\t\t\t\tacc.push( [ curr.split( '.' )[ 0 ], translation ] );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\tglobalStylesChangesCache.set( cacheKey, result );\n\n\treturn result;\n}\n\n/\n From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.\n * The types are 'blocks', 'elements', 'settings', and 'styles'.\n \n @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @param {{maxResults:number}} options Options. maxResults: results to return before truncating.\n * @return {string[]} An array of translated changes.\n /\nexport default function getGlobalStylesChanges( next, previous, options = {} ) {\n\tlet changeList = getGlobalStylesChangelist( next, previous );\n\tconst changesLength = changeList.length;\n\tconst { maxResults } = options;\n\n\tif ( changesLength ) {\n\t\t// Truncate to `n` results if necessary.\n\t\tif ( !! maxResults && changesLength > maxResults ) {\n\t\t\tchangeList = changeList.slice( 0, maxResults );\n\t\t}\n\t\treturn Object.entries(\n\t\t\tchangeList.reduce( ( acc, curr ) => {\n\t\t\t\tconst group = acc[ curr[ 0 ] ] \|\| [];\n\t\t\t\tif ( ! group.includes( curr[ 1 ] ) ) {\n\t\t\t\t\tacc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t}, {} )\n\t\t).map( ( [ key, changeValues ] ) => {\n\t\t\tconst changeValuesLength = changeValues.length;\n\t\t\tconst joinedChangesValue = changeValues.join(\n\t\t\t\t/ translators: Used between list items, there is a space after the comma. */\n\t\t\t\t__( ', ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace\n\t\t\t);\n\t\t\tswitch ( key ) {\n\t\t\t\tcase 'blocks': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of block names separated by a comma.\n\t\t\t\t\t\t_n( '%s block.', '%s blocks.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'elements': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of element names separated by a comma.\n\t\t\t\t\t\t_n( '%s element.', '%s elements.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'settings': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json setting labels separated by a comma.\n\t\t\t\t\t\t__( '%s settings.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'styles': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json top-level styles labels separated by a comma.\n\t\t\t\t\t\t__( '%s styles.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of global styles changes separated by a comma.\n\t\t\t\t\t\t__( '%s.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn EMPTY_ARRAY;\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/iframe/use-scale-canvas.js CHANGED Viewed

@@ -6,11 +6,11 @@ import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
 /**
  * @typedef {Object} TransitionState
- * @property {number} scaleValue   Scale of the canvas.
- * @property {number} frameSize    Size of the frame/offset around the canvas.
- * @property {number} clientHeight ClientHeight of the iframe.
- * @property {number} scrollTop    ScrollTop of the iframe.
- * @property {number} scrollHeight ScrollHeight of the iframe.
+ * @property {number} scaleValue      Scale of the canvas.
+ * @property {number} frameSize       Size of the frame/offset around the canvas.
+ * @property {number} containerHeight containerHeight of the iframe.
+ * @property {number} scrollTop       ScrollTop of the iframe.
+ * @property {number} scrollHeight    ScrollHeight of the iframe.
  */
 /**
@@ -32,6 +32,25 @@ function calculateScale({
   return (Math.min(containerWidth, maxContainerWidth) - frameSize * 2) / scaleContainerWidth;
 }
+/**
+ * Compute the next scrollHeight based on the transition states.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollHeight based on scale and frame value changes.
+ */
+function computeScrollHeightNext(transitionFrom, transitionTo) {
+  const {
+    scaleValue: prevScale,
+    scrollHeight: prevScrollHeight
+  } = transitionFrom;
+  const {
+    frameSize,
+    scaleValue
+  } = transitionTo;
+  return prevScrollHeight * (scaleValue / prevScale) + frameSize * 2;
+}
 /**
  * Compute the next scrollTop position after scaling the iframe content.
  *
@@ -41,37 +60,37 @@ function calculateScale({
  */
 function computeScrollTopNext(transitionFrom, transitionTo) {
   const {
-    clientHeight: prevClientHeight,
+    containerHeight: prevContainerHeight,
     frameSize: prevFrameSize,
     scaleValue: prevScale,
-    scrollTop,
-    scrollHeight
+    scrollTop: prevScrollTop
   } = transitionFrom;
   const {
-    clientHeight,
+    containerHeight,
     frameSize,
-    scaleValue
+    scaleValue,
+    scrollHeight
   } = transitionTo;
   // Step 0: Start with the current scrollTop.
-  let scrollTopNext = scrollTop;
+  let scrollTopNext = prevScrollTop;
   // 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;
+  scrollTopNext = (scrollTopNext + prevContainerHeight / 2 - prevFrameSize) / prevScale - prevContainerHeight / 2;
   // Step 2: Apply the new scale and frame around the midpoint of the
   // visible area.
-  scrollTopNext = (scrollTopNext + clientHeight / 2) * scaleValue + frameSize - clientHeight / 2;
+  scrollTopNext = (scrollTopNext + containerHeight / 2) * scaleValue + frameSize - containerHeight / 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;
+  scrollTopNext = prevScrollTop <= 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) + frameSize * 2 - clientHeight;
+  const maxScrollTop = scrollHeight - containerHeight;
   // Step 4: Clamp the scrollTopNext between the minimum and maximum
   // possible scrollTop positions. Round the value to avoid subpixel
@@ -139,7 +158,8 @@ export function useScaleCanvas({
     height: contentHeight
   }] = useResizeObserver();
   const [containerResizeListener, {
-    width: containerWidth
+    width: containerWidth,
+    height: containerHeight
   }] = useResizeObserver();
   const initialContainerWidthRef = useRef(0);
   const isZoomedOut = scale !== 1;
@@ -170,7 +190,7 @@ export function useScaleCanvas({
   const transitionFromRef = useRef({
     scaleValue,
     frameSize,
-    clientHeight: 0,
+    containerHeight: 0,
     scrollTop: 0,
     scrollHeight: 0
   });
@@ -182,7 +202,7 @@ export function useScaleCanvas({
   const transitionToRef = useRef({
     scaleValue,
     frameSize,
-    clientHeight: 0,
+    containerHeight: 0,
     scrollTop: 0,
     scrollHeight: 0
   });
@@ -202,6 +222,9 @@ export function useScaleCanvas({
     } = transitionToRef.current;
     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`);
+    // If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior', transitionFromRef.current.scrollHeight === transitionFromRef.current.containerHeight ? 'auto' : 'scroll');
     iframeDocument.documentElement.classList.add('zoom-out-animation');
     return iframeDocument.documentElement.animate(getAnimationKeyframes(transitionFromRef.current, transitionToRef.current), {
       easing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
@@ -234,10 +257,12 @@ export function useScaleCanvas({
     iframeDocument.documentElement.scrollTop = transitionToRef.current.scrollTop;
     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.style.removeProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior');
     // Update previous values.
     transitionFromRef.current = transitionToRef.current;
   }, [iframeDocument]);
+  const previousIsZoomedOut = useRef(false);
   /**
    * Runs when zoom out mode is toggled, and sets the startAnimation flag
@@ -246,13 +271,16 @@ export function useScaleCanvas({
    * changes due to the container resizing.
    */
   useEffect(() => {
-    if (!iframeDocument) {
+    const trigger = iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+    previousIsZoomedOut.current = isZoomedOut;
+    if (!trigger) {
       return;
     }
-    if (isZoomedOut) {
-      iframeDocument.documentElement.classList.add('is-zoomed-out');
-    }
     startAnimationRef.current = true;
+    if (!isZoomedOut) {
+      return;
+    }
+    iframeDocument.documentElement.classList.add('is-zoomed-out');
     return () => {
       iframeDocument.documentElement.classList.remove('is-zoomed-out');
     };
@@ -280,20 +308,20 @@ export function useScaleCanvas({
         scaleContainerWidth: containerWidth
       });
     }
-    // If we are not going to animate the transition, set the scale and frame size directly.
-    // If we are animating, these values will be set when the animation is finished.
-    // Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
-    // animate the transition.
-    if (!startAnimationRef.current) {
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scaleValue);
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${frameSize}px`);
+    if (scaleValue < 1) {
+      // If we are not going to animate the transition, set the scale and frame size directly.
+      // If we are animating, these values will be set when the animation is finished.
+      // Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
+      // animate the transition.
+      if (!startAnimationRef.current) {
+        iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scaleValue);
+        iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${frameSize}px`);
+      }
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-content-height', `${contentHeight}px`);
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${containerHeight}px`);
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
     }
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-content-height', `${contentHeight}px`);
-    const clientHeight = iframeDocument.documentElement.clientHeight;
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${clientHeight}px`);
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
     /**
      * Handle the zoom out animation:
@@ -322,7 +350,6 @@ export function useScaleCanvas({
         transitionFromRef.current = tempTransitionTo;
         transitionToRef.current = tempTransitionFrom;
       } else {
-        var _transitionFromRef$cu;
         /**
          * Start a new zoom animation.
          */
@@ -333,14 +360,16 @@ export function useScaleCanvas({
         // the iframe at this point when we're about to animate the zoom out.
         // The iframe scrollTop, scrollHeight, and clientHeight will all be
         // the most accurate.
-        transitionFromRef.current.clientHeight = (_transitionFromRef$cu = transitionFromRef.current.clientHeight) !== null && _transitionFromRef$cu !== void 0 ? _transitionFromRef$cu : clientHeight;
         transitionFromRef.current.scrollTop = iframeDocument.documentElement.scrollTop;
         transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight;
+        // Use containerHeight, as it's the previous container height before the zoom out animation starts.
+        transitionFromRef.current.containerHeight = containerHeight;
         transitionToRef.current = {
           scaleValue,
           frameSize,
-          clientHeight
+          containerHeight: iframeDocument.documentElement.clientHeight // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
         };
+        transitionToRef.current.scrollHeight = computeScrollHeightNext(transitionFromRef.current, transitionToRef.current);
         transitionToRef.current.scrollTop = computeScrollTopNext(transitionFromRef.current, transitionToRef.current);
         animationRef.current = startZoomOutAnimation();
@@ -352,15 +381,7 @@ export function useScaleCanvas({
         }
       }
     }
-    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');
-    };
-  }, [startZoomOutAnimation, finishZoomOutAnimation, prefersReducedMotion, isAutoScaled, scaleValue, frameSize, iframeDocument, contentHeight, containerWidth, maxContainerWidth, scaleContainerWidth]);
+  }, [startZoomOutAnimation, finishZoomOutAnimation, prefersReducedMotion, isAutoScaled, scaleValue, frameSize, iframeDocument, contentHeight, containerWidth, containerHeight, maxContainerWidth, scaleContainerWidth]);
   return {
     isZoomedOut,
     scaleContainerWidth,

package/build-module/components/iframe/use-scale-canvas.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useEffect","useRef","useCallback","useReducedMotion","useResizeObserver","calculateScale","frameSize","containerWidth","maxContainerWidth","scaleContainerWidth","Math","min","computeScrollTopNext","transitionFrom","transitionTo","clientHeight","prevClientHeight","prevFrameSize","scaleValue","prevScale","scrollTop","scrollHeight","scrollTopNext","maxScrollTop","round","max","getAnimationKeyframes","translate","scale","paddingTop","paddingBottom","useScaleCanvas","iframeDocument","contentResizeListener","height","contentHeight","containerResizeListener","width","initialContainerWidthRef","isZoomedOut","prefersReducedMotion","isAutoScaled","startAnimationRef","animationRef","current","transitionFromRef","transitionToRef","startZoomOutAnimation","documentElement","style","setProperty","classList","add","animate","easing","duration","finishZoomOutAnimation","remove","removeProperty","reverse","tempTransitionFrom","tempTransitionTo","_transitionFromRef$cu","onfinish"],"sources":["@wordpress/block-editor/src/components/iframe/use-scale-canvas.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/\n @typedef {Object} TransitionState\n * @property {number} scaleValue Scale of the canvas.\n * @property {number} frameSize Size of the frame/offset around the canvas.\n * @property {number} clientHeight ClientHeight of the iframe.\n * @property {number} scrollTop ScrollTop of the iframe.\n * @property {number} scrollHeight ScrollHeight of the iframe.\n /\n\n/\n Calculate the scale of the canvas.\n \n @param {Object} options Object of options\n * @param {number} options.frameSize Size of the frame/offset around the canvas\n * @param {number} options.containerWidth Actual width of the canvas container\n * @param {number} options.maxContainerWidth Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n /\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/*\n Compute the next scrollTop position after scaling the iframe content.\n \n @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n /\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tclientHeight: prevClientHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop,\n\t\tscrollHeight,\n\t} = transitionFrom;\n\tconst { clientHeight, frameSize, scaleValue } = transitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = scrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) / prevScale -\n\t\tprevClientHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + clientHeight / 2 ) scaleValue +\n\t\tframeSize -\n\t\tclientHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop =\n\t\tscrollHeight * ( scaleValue / prevScale ) +\n\t\tframeSize * 2 -\n\t\tclientHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/*\n Generate the keyframes to use for the zoom out animation.\n \n @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n /\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/\n @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut A boolean indicating if the canvas is zoomed out.\n * @property {number} scaleContainerWidth The width of the container used to calculate the scale.\n * @property {Object} contentResizeListener A resize observer for the content.\n * @property {Object} containerResizeListener A resize observer for the container.\n /\n\n/\n Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n \n @param {Object} options Object of options.\n * @param {number} options.frameSize Size of the frame around the content.\n * @param {Document} options.iframeDocument Document of the iframe.\n * @param {number} options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number\|string} options.scale Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n /\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t } )\n\t\t: scale;\n\n\t/\n\t The starting transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t /\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tclientHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/\n\t The ending transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t /\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tclientHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/\n\t Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t \n\t @return {Animation} The animation object for the zoom out animation.\n\t /\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/\n\t Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t /\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\t// Set the final scroll position that was just animated to.\n\t\t// Disable reason: Eslint isn't smart enough to know that this is a\n\t\t// DOM element. https://github.com/facebook/react/issues/31483\n\t\t// eslint-disable-next-line react-compiler/react-compiler\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\t/\n\t Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t /\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isZoomedOut ) {\n\t\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/\n\t This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t /\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t// animate the transition.\n\t\tif ( ! startAnimationRef.current ) {\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\tscaleValue\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t`${ frameSize }px`\n\t\t\t);\n\t\t}\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t`${ contentHeight }px`\n\t\t);\n\n\t\tconst clientHeight = iframeDocument.documentElement.clientHeight;\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t`${ clientHeight }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t`${ containerWidth }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t`${ scaleContainerWidth }px`\n\t\t);\n\n\t\t/\n\t\t Handle the zoom out animation:\n\t\t \n\t\t - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t * to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t * and set the scroll position that keeps everything centered.\n\t\t /\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/\n\t\t\t If we already have an animation running, reverse it.\n\t\t\t /\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/\n\t\t\t\t Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.clientHeight =\n\t\t\t\t\ttransitionFromRef.current.clientHeight ?? clientHeight;\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tclientHeight,\n\t\t\t\t};\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width'\n\t\t\t);\n\t\t};\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["useEffect","useRef","useCallback","useReducedMotion","useResizeObserver","calculateScale","frameSize","containerWidth","maxContainerWidth","scaleContainerWidth","Math","min","computeScrollHeightNext","transitionFrom","transitionTo","scaleValue","prevScale","scrollHeight","prevScrollHeight","computeScrollTopNext","containerHeight","prevContainerHeight","prevFrameSize","scrollTop","prevScrollTop","scrollTopNext","maxScrollTop","round","max","getAnimationKeyframes","translate","scale","paddingTop","paddingBottom","useScaleCanvas","iframeDocument","contentResizeListener","height","contentHeight","containerResizeListener","width","initialContainerWidthRef","isZoomedOut","prefersReducedMotion","isAutoScaled","startAnimationRef","animationRef","current","transitionFromRef","transitionToRef","startZoomOutAnimation","documentElement","style","setProperty","classList","add","animate","easing","duration","finishZoomOutAnimation","remove","removeProperty","previousIsZoomedOut","trigger","reverse","tempTransitionFrom","tempTransitionTo","clientHeight","onfinish"],"sources":["@wordpress/block-editor/src/components/iframe/use-scale-canvas.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/\n @typedef {Object} TransitionState\n * @property {number} scaleValue Scale of the canvas.\n * @property {number} frameSize Size of the frame/offset around the canvas.\n * @property {number} containerHeight containerHeight of the iframe.\n * @property {number} scrollTop ScrollTop of the iframe.\n * @property {number} scrollHeight ScrollHeight of the iframe.\n /\n\n/\n Calculate the scale of the canvas.\n \n @param {Object} options Object of options\n * @param {number} options.frameSize Size of the frame/offset around the canvas\n * @param {number} options.containerWidth Actual width of the canvas container\n * @param {number} options.maxContainerWidth Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n /\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/*\n Compute the next scrollHeight based on the transition states.\n \n @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n /\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight ( scaleValue / prevScale ) + frameSize * 2;\n}\n\n/*\n Compute the next scrollTop position after scaling the iframe content.\n \n @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n /\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + containerHeight / 2 ) scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop = scrollHeight - containerHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/*\n Generate the keyframes to use for the zoom out animation.\n \n @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n /\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/\n @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut A boolean indicating if the canvas is zoomed out.\n * @property {number} scaleContainerWidth The width of the container used to calculate the scale.\n * @property {Object} contentResizeListener A resize observer for the content.\n * @property {Object} containerResizeListener A resize observer for the container.\n /\n\n/\n Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n \n @param {Object} options Object of options.\n * @param {number} options.frameSize Size of the frame around the content.\n * @param {Document} options.iframeDocument Document of the iframe.\n * @param {number} options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number\|string} options.scale Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n /\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t } )\n\t\t: scale;\n\n\t/\n\t The starting transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t /\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/\n\t The ending transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t /\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/\n\t Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t \n\t @return {Animation} The animation object for the zoom out animation.\n\t /\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/\n\t Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t /\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\t// Set the final scroll position that was just animated to.\n\t\t// Disable reason: Eslint isn't smart enough to know that this is a\n\t\t// DOM element. https://github.com/facebook/react/issues/31483\n\t\t// eslint-disable-next-line react-compiler/react-compiler\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\n\n\t/\n\t Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t /\n\tuseEffect( () => {\n\t\tconst trigger =\n\t\t\tiframeDocument && previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/\n\t This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t /\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\n\t\t}\n\n\t\t/\n\t\t Handle the zoom out animation:\n\t\t \n\t\t - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t * to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t * and set the scroll position that keeps everything centered.\n\t\t /\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/\n\t\t\t If we already have an animation running, reverse it.\n\t\t\t /\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/\n\t\t\t\t Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tcontainerHeight,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/inserter/block-patterns-tab/index.js CHANGED Viewed

@@ -3,9 +3,8 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button, Spinner } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
@@ -16,8 +15,6 @@ import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function BlockPatternsTab({
   onSelectCategory,
@@ -29,13 +26,6 @@ function BlockPatternsTab({
   const [showPatternsExplorer, setShowPatternsExplorer] = useState(false);
   const categories = usePatternCategories(rootClientId);
   const isMobile = useViewportMatch('medium', '<');
-  const isResolvingPatterns = useSelect(select => unlock(select(blockEditorStore)).isResolvingPatterns(), []);
-  if (isResolvingPatterns) {
-    return /*#__PURE__*/_jsx("div", {
-      className: "block-editor-inserter__patterns-loading",
-      children: /*#__PURE__*/_jsx(Spinner, {})
-    });
-  }
   if (!categories.length) {
     return /*#__PURE__*/_jsx(InserterNoResults, {});
   }

package/build-module/components/inserter/block-patterns-tab/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useState","useViewportMatch","Button","~~Spinner","~~__","~~useSelect","~~PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","CategoryTabs","InserterNoResults","~~store","blockEditorStore","unlock","~~jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","children","showPatternsExplorer","setShowPatternsExplorer","categories","isMobile","~~isResolvingPatterns~~","~~select","~~className","~~length","~~__next40pxDefaultSize","onClick","variant","category","name","initialCategory","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button, ~~Spinner~~ } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\~~nimport { useSelect } from '@wordpress/data';\~~n\n/\n Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\~~nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\~~n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n\tchildren,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\~~tconst isResolvingPatterns = useSelect(\~~n\~~t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).isResolvingPatterns(),\n\t\t[]\n\t);\n\n\~~tif ( ~~isResolvingPatterns ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-inserter__patterns-loading\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (~~ ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\tonClick={ () => setShowPatternsExplorer( true ) }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<div className=\"block-editor-inserter__category-panel\">\n\t\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ selectedCategory \|\| categories[ 0 ] }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,MAAM,~~EAAEC,OAAO,~~QAAQ,uBAAuB;~~AACvD~~,SAASC,EAAE,QAAQ,iBAAiB~~;AACpC,SAASC,SAAS,QAAQ,iBAAiB~~;;~~AAE3C~~;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,iBAAiB,MAAM,eAAe;~~AAC7C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,gBAAgB;AAC1D,SAASC,MAAM,QAAQ,sBAAsB;~~AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE9C,SAASC,gBAAgBA,CAAE;EAC1BC,gBAAgB;EAChBC,gBAAgB;EAChBC,QAAQ;EACRC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,oBAAoB,EAAEC,uBAAuB,CAAE,~~GAAG5B~~,QAAQ,CAAE,KAAM,CAAC;EAE3E,~~MAAM6B~~,UAAU,~~GAAGpB~~,oBAAoB,~~CAAEgB~~,YAAa,CAAC;EAEvD,MAAMK,QAAQ,~~GAAG7B~~,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;~~EAClD~~,MAAM8B,mBAAmB,GAAG1B,SAAS,CAClC2B,MAAM,IACPlB,MAAM,CAAEkB,MAAM,CAAEnB,gBAAiB,CAAE,CAAC,CAACkB,mBAAmB,CAAC,CAAC,EAC3D,EACD,CAAC;EAED,IAAKA,mBAAmB,EAAG;IAC1B,oBACCf,IAAA;MAAKiB,SAAS,EAAC,yCAAyC;MAAAP,QAAA,eACvDV,IAAA,CAACb,OAAO,IAAE;IAAC,CACP,CAAC;EAER;EAEA,IAAK,~~CAAE0B~~,UAAU,~~CAACK~~,MAAM,EAAG;IAC1B,~~oBAAOlB~~,IAAA,~~CAACL~~,iBAAiB,IAAE,CAAC;EAC7B;EAEA,~~oBACCO~~,KAAA,CAAAE,SAAA;IAAAM,QAAA,GACG,CAAEI,QAAQ,iBACXZ,KAAA;~~MAAKe~~,SAAS,EAAC,sDAAsD;~~MAAAP~~,QAAA,gBACpEV,IAAA,~~CAACN~~,YAAY;~~QACZmB~~,UAAU,EAAGA,UAAY;QACzBN,gBAAgB,EAAGA,gBAAkB;QACrCD,gBAAgB,EAAGA,gBAAkB;QAAAI,QAAA,EAEnCA;MAAQ,CACG,CAAC,eACfV,IAAA,~~CAACd~~,MAAM;~~QACNiC~~,qBAAqB;~~QACrBF~~,SAAS,EAAC,gDAAgD;~~QAC1DG~~,OAAO,EAAGA,CAAA,~~KAAMR~~,uBAAuB,CAAE,IAAK,CAAG;~~QACjDS~~,OAAO,EAAC,WAAW;~~QAAAX~~,QAAA,~~EAEjBtB~~,EAAE,CAAE,sBAAuB;MAAC,CACvB,CAAC;IAAA,CACL,CACL,~~EACC0B~~,QAAQ,iBACTd,IAAA,~~CAACT~~,mBAAmB;~~MAACsB~~,UAAU,EAAGA,UAAY;MAAAH,QAAA,~~EACzCY~~,QAAQ,~~iBACXtB~~,IAAA;~~QAAKiB~~,SAAS,EAAC,uCAAuC;~~QAAAP~~,QAAA,eACrDV,IAAA,~~CAACR~~,uBAAuB;~~UAEvBgB~~,QAAQ,EAAGA,QAAU;UACrBC,YAAY,EAAGA,YAAc;~~UAC7Ba~~,QAAQ,EAAGA;QAAU,GAHfA,QAAQ,CAACC,IAIf;MAAC,CACE;IACL,CACmB,CACrB,~~EACCZ~~,oBAAoB,iBACrBX,IAAA,~~CAACV~~,qBAAqB;~~MACrBkC~~,eAAe,~~EAAGjB~~,gBAAgB,IAAIM,UAAU,CAAE,CAAC,CAAI;~~MACvDY~~,iBAAiB,~~EAAGZ~~,UAAY;~~MAChCa~~,YAAY,EAAGA,CAAA,~~KAAMd~~,uBAAuB,CAAE,KAAM,CAAG;MACvDH,YAAY,EAAGA;IAAc,CAC7B,CACD;EAAA,CACA,CAAC;AAEL;AAEA,eAAeJ,gBAAgB","ignoreList":[]}
1	+ {"version":3,"names":["useState","useViewportMatch","Button","__","PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","CategoryTabs","InserterNoResults","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","children","showPatternsExplorer","setShowPatternsExplorer","categories","isMobile","length","className","__next40pxDefaultSize","onClick","variant","category","name","initialCategory","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n\tchildren,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\tonClick={ () => setShowPatternsExplorer( true ) }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<div className=\"block-editor-inserter__category-panel\">\n\t\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ selectedCategory \|\| categories[ 0 ] }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,iBAAiB,MAAM,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE9C,SAASC,gBAAgBA,CAAE;EAC1BC,gBAAgB;EAChBC,gBAAgB;EAChBC,QAAQ;EACRC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,oBAAoB,EAAEC,uBAAuB,CAAE,GAAGvB,QAAQ,CAAE,KAAM,CAAC;EAE3E,MAAMwB,UAAU,GAAGjB,oBAAoB,CAAEa,YAAa,CAAC;EAEvD,MAAMK,QAAQ,GAAGxB,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAElD,IAAK,CAAEuB,UAAU,CAACE,MAAM,EAAG;IAC1B,oBAAOf,IAAA,CAACF,iBAAiB,IAAE,CAAC;EAC7B;EAEA,oBACCI,KAAA,CAAAE,SAAA;IAAAM,QAAA,GACG,CAAEI,QAAQ,iBACXZ,KAAA;MAAKc,SAAS,EAAC,sDAAsD;MAAAN,QAAA,gBACpEV,IAAA,CAACH,YAAY;QACZgB,UAAU,EAAGA,UAAY;QACzBN,gBAAgB,EAAGA,gBAAkB;QACrCD,gBAAgB,EAAGA,gBAAkB;QAAAI,QAAA,EAEnCA;MAAQ,CACG,CAAC,eACfV,IAAA,CAACT,MAAM;QACN0B,qBAAqB;QACrBD,SAAS,EAAC,gDAAgD;QAC1DE,OAAO,EAAGA,CAAA,KAAMN,uBAAuB,CAAE,IAAK,CAAG;QACjDO,OAAO,EAAC,WAAW;QAAAT,QAAA,EAEjBlB,EAAE,CAAE,sBAAuB;MAAC,CACvB,CAAC;IAAA,CACL,CACL,EACCsB,QAAQ,iBACTd,IAAA,CAACN,mBAAmB;MAACmB,UAAU,EAAGA,UAAY;MAAAH,QAAA,EACzCU,QAAQ,iBACXpB,IAAA;QAAKgB,SAAS,EAAC,uCAAuC;QAAAN,QAAA,eACrDV,IAAA,CAACL,uBAAuB;UAEvBa,QAAQ,EAAGA,QAAU;UACrBC,YAAY,EAAGA,YAAc;UAC7BW,QAAQ,EAAGA;QAAU,GAHfA,QAAQ,CAACC,IAIf;MAAC,CACE;IACL,CACmB,CACrB,EACCV,oBAAoB,iBACrBX,IAAA,CAACP,qBAAqB;MACrB6B,eAAe,EAAGf,gBAAgB,IAAIM,UAAU,CAAE,CAAC,CAAI;MACvDU,iBAAiB,EAAGV,UAAY;MAChCW,YAAY,EAAGA,CAAA,KAAMZ,uBAAuB,CAAE,KAAM,CAAG;MACvDH,YAAY,EAAGA;IAAc,CAC7B,CACD;EAAA,CACA,CAAC;AAEL;AAEA,eAAeJ,gBAAgB","ignoreList":[]}

package/build-module/components/inserter/menu.js CHANGED Viewed

@@ -45,6 +45,7 @@ function InserterMenu({
   __experimentalInitialCategory
 }, ref) {
   const isZoomOutMode = useSelect(select => unlock(select(blockEditorStore)).isZoomOut(), []);
+  const hasSectionRootClientId = useSelect(select => !!unlock(select(blockEditorStore)).getSectionRootClientId(), []);
   const [filterValue, setFilterValue, delayedFilterValue] = useDebouncedInput(__experimentalFilterValue);
   const [hoveredItem, setHoveredItem] = useState(null);
   const [selectedPatternCategory, setSelectedPatternCategory] = useState(__experimentalInitialCategory);
@@ -60,7 +61,7 @@ function InserterMenu({
     }
   }
   const [selectedTab, setSelectedTab] = useState(getInitialTab());
-  const shouldUseZoomOut = selectedTab === 'patterns' || selectedTab === 'media';
+  const shouldUseZoomOut = hasSectionRootClientId && (selectedTab === 'patterns' || selectedTab === 'media');
   useZoomOut(shouldUseZoomOut && isLargeViewport);
   const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = useInsertionPoint({
     rootClientId,