@wordpress/block-editor 12.6.0 → 12.8.0

package/build-module/components/block-popover/drop-zone.js

@@ -1,15 +1,14 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useReducedMotion } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from './index';
 const animateVariants = {
@@ -26,7 +25,6 @@ const animateVariants = {
     scaleY: 0.9
   }
 };
-
 function BlockDropZonePopover({
   __unstablePopoverSlot,
   __unstableContentRef
@@ -40,11 +38,9 @@ function BlockDropZonePopover({
     } = select(blockEditorStore);
     const insertionPoint = getBlockInsertionPoint();
     const order = getBlockOrder(insertionPoint.rootClientId);
-
     if (!order.length) {
       return {};
     }
-
     return {
       clientId: order[insertionPoint.index]
     };
@@ -64,6 +60,5 @@ function BlockDropZonePopover({
     className: "block-editor-block-popover__drop-zone-foreground"
   }));
 }
-
 export default BlockDropZonePopover;
 //# sourceMappingURL=drop-zone.js.map

package/build-module/components/block-popover/drop-zone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/drop-zone.js"],"names":["useSelect","useReducedMotion","__unstableMotion","motion","store","blockEditorStore","BlockPopover","animateVariants","hide","opacity","scaleY","show","exit","BlockDropZonePopover","__unstablePopoverSlot","__unstableContentRef","clientId","select","getBlockOrder","getBlockInsertionPoint","insertionPoint","order","rootClientId","length","index","reducedMotion"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,gBAAgB,IAAIC,MAA7B,QAA2C,uBAA3C;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,OAAOC,YAAP,MAAyB,SAAzB;AAEA,MAAMC,eAAe,GAAG;AACvBC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE,CAAX;AAAcC,IAAAA,MAAM,EAAE;AAAtB,GADiB;AAEvBC,EAAAA,IAAI,EAAE;AAAEF,IAAAA,OAAO,EAAE,CAAX;AAAcC,IAAAA,MAAM,EAAE;AAAtB,GAFiB;AAGvBE,EAAAA,IAAI,EAAE;AAAEH,IAAAA,OAAO,EAAE,CAAX;AAAcC,IAAAA,MAAM,EAAE;AAAtB;AAHiB,CAAxB;;AAMA,SAASG,oBAAT,CAA+B;AAC9BC,EAAAA,qBAD8B;AAE9BC,EAAAA;AAF8B,CAA/B,EAGI;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAehB,SAAS,CAAIiB,MAAF,IAAc;AAC7C,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QACLF,MAAM,CAAEZ,gBAAF,CADP;AAEA,UAAMe,cAAc,GAAGD,sBAAsB,EAA7C;AACA,UAAME,KAAK,GAAGH,aAAa,CAAEE,cAAc,CAACE,YAAjB,CAA3B;;AAEA,QAAK,CAAED,KAAK,CAACE,MAAb,EAAsB;AACrB,aAAO,EAAP;AACA;;AAED,WAAO;AACNP,MAAAA,QAAQ,EAAEK,KAAK,CAAED,cAAc,CAACI,KAAjB;AADT,KAAP;AAGA,GAb6B,EAa3B,EAb2B,CAA9B;AAcA,QAAMC,aAAa,GAAGxB,gBAAgB,EAAtC;AAEA,SACC,cAAC,YAAD;AACC,IAAA,QAAQ,EAAGe,QADZ;AAEC,IAAA,qBAAqB,MAFtB;AAGC,IAAA,qBAAqB,EAAGF,qBAHzB;AAIC,IAAA,oBAAoB,EAAGC,oBAJxB;AAKC,IAAA,SAAS,EAAC;AALX,KAOC,cAAC,MAAD,CAAQ,GAAR;AACC,mBAAY,yBADb;AAEC,IAAA,OAAO,EACNU,aAAa,GAAGlB,eAAe,CAACI,IAAnB,GAA0BJ,eAAe,CAACC,IAHzD;AAKC,IAAA,OAAO,EAAGD,eAAe,CAACI,IAL3B;AAMC,IAAA,IAAI,EACHc,aAAa,GAAGlB,eAAe,CAACI,IAAnB,GAA0BJ,eAAe,CAACK,IAPzD;AASC,IAAA,SAAS,EAAC;AATX,IAPD,CADD;AAqBA;;AAED,eAAeC,oBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockPopover from './index';\n\nconst animateVariants = {\n\thide: { opacity: 0, scaleY: 0.75 },\n\tshow: { opacity: 1, scaleY: 1 },\n\texit: { opacity: 0, scaleY: 0.9 },\n};\n\nfunction BlockDropZonePopover( {\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst { clientId } = useSelect( ( select ) => {\n\t\tconst { getBlockOrder, getBlockInsertionPoint } =\n\t\t\tselect( blockEditorStore );\n\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\tconst order = getBlockOrder( insertionPoint.rootClientId );\n\n\t\tif ( ! order.length ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tclientId: order[ insertionPoint.index ],\n\t\t};\n\t}, [] );\n\tconst reducedMotion = useReducedMotion();\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstablePopoverSlot={ __unstablePopoverSlot }\n\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\tclassName=\"block-editor-block-popover__drop-zone\"\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tdata-testid=\"block-popover-drop-zone\"\n\t\t\t\tinitial={\n\t\t\t\t\treducedMotion ? animateVariants.show : animateVariants.hide\n\t\t\t\t}\n\t\t\t\tanimate={ animateVariants.show }\n\t\t\t\texit={\n\t\t\t\t\treducedMotion ? animateVariants.show : animateVariants.exit\n\t\t\t\t}\n\t\t\t\tclassName=\"block-editor-block-popover__drop-zone-foreground\"\n\t\t\t/>\n\t\t</BlockPopover>\n\t);\n}\n\nexport default BlockDropZonePopover;\n"]}
+{"version":3,"names":["useSelect","useReducedMotion","__unstableMotion","motion","store","blockEditorStore","BlockPopover","animateVariants","hide","opacity","scaleY","show","exit","BlockDropZonePopover","__unstablePopoverSlot","__unstableContentRef","clientId","select","getBlockOrder","getBlockInsertionPoint","insertionPoint","order","rootClientId","length","index","reducedMotion","createElement","__unstableCoverTarget","className","div","initial","animate"],"sources":["@wordpress/block-editor/src/components/block-popover/drop-zone.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockPopover from './index';\n\nconst animateVariants = {\n\thide: { opacity: 0, scaleY: 0.75 },\n\tshow: { opacity: 1, scaleY: 1 },\n\texit: { opacity: 0, scaleY: 0.9 },\n};\n\nfunction BlockDropZonePopover( {\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst { clientId } = useSelect( ( select ) => {\n\t\tconst { getBlockOrder, getBlockInsertionPoint } =\n\t\t\tselect( blockEditorStore );\n\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\tconst order = getBlockOrder( insertionPoint.rootClientId );\n\n\t\tif ( ! order.length ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tclientId: order[ insertionPoint.index ],\n\t\t};\n\t}, [] );\n\tconst reducedMotion = useReducedMotion();\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstablePopoverSlot={ __unstablePopoverSlot }\n\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\tclassName=\"block-editor-block-popover__drop-zone\"\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tdata-testid=\"block-popover-drop-zone\"\n\t\t\t\tinitial={\n\t\t\t\t\treducedMotion ? animateVariants.show : animateVariants.hide\n\t\t\t\t}\n\t\t\t\tanimate={ animateVariants.show }\n\t\t\t\texit={\n\t\t\t\t\treducedMotion ? animateVariants.show : animateVariants.exit\n\t\t\t\t}\n\t\t\t\tclassName=\"block-editor-block-popover__drop-zone-foreground\"\n\t\t\t/>\n\t\t</BlockPopover>\n\t);\n}\n\nexport default BlockDropZonePopover;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,YAAY,MAAM,SAAS;AAElC,MAAMC,eAAe,GAAG;EACvBC,IAAI,EAAE;IAAEC,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAK,CAAC;EAClCC,IAAI,EAAE;IAAEF,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC/BE,IAAI,EAAE;IAAEH,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAI;AACjC,CAAC;AAED,SAASG,oBAAoBA,CAAE;EAC9BC,qBAAqB;EACrBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAS,CAAC,GAAGhB,SAAS,CAAIiB,MAAM,IAAM;IAC7C,MAAM;MAAEC,aAAa;MAAEC;IAAuB,CAAC,GAC9CF,MAAM,CAAEZ,gBAAiB,CAAC;IAC3B,MAAMe,cAAc,GAAGD,sBAAsB,CAAC,CAAC;IAC/C,MAAME,KAAK,GAAGH,aAAa,CAAEE,cAAc,CAACE,YAAa,CAAC;IAE1D,IAAK,CAAED,KAAK,CAACE,MAAM,EAAG;MACrB,OAAO,CAAC,CAAC;IACV;IAEA,OAAO;MACNP,QAAQ,EAAEK,KAAK,CAAED,cAAc,CAACI,KAAK;IACtC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAMC,aAAa,GAAGxB,gBAAgB,CAAC,CAAC;EAExC,OACCyB,aAAA,CAACpB,YAAY;IACZU,QAAQ,EAAGA,QAAU;IACrBW,qBAAqB;IACrBb,qBAAqB,EAAGA,qBAAuB;IAC/CC,oBAAoB,EAAGA,oBAAsB;IAC7Ca,SAAS,EAAC;EAAuC,GAEjDF,aAAA,CAACvB,MAAM,CAAC0B,GAAG;IACV,eAAY,yBAAyB;IACrCC,OAAO,EACNL,aAAa,GAAGlB,eAAe,CAACI,IAAI,GAAGJ,eAAe,CAACC,IACvD;IACDuB,OAAO,EAAGxB,eAAe,CAACI,IAAM;IAChCC,IAAI,EACHa,aAAa,GAAGlB,eAAe,CAACI,IAAI,GAAGJ,eAAe,CAACK,IACvD;IACDgB,SAAS,EAAC;EAAkD,CAC5D,CACY,CAAC;AAEjB;AAEA,eAAef,oBAAoB"}

package/build-module/components/block-popover/inbetween.js

@@ -1,27 +1,25 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { useSelect } from '@wordpress/data';
 import { useMemo, createContext, useReducer, useLayoutEffect } from '@wordpress/element';
 import { Popover } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 export const InsertionPointOpenRef = createContext();
-
 function BlockPopoverInbetween({
   previousClientId,
   nextClientId,
@@ -31,7 +29,8 @@ function BlockPopoverInbetween({
   ...props
 }) {
   // This is a temporary hack to get the inbetween inserter to recompute properly.
-  const [popoverRecomputeCounter, forcePopoverRecompute] = useReducer( // Module is there to make sure that the counter doesn't overflow.
+  const [popoverRecomputeCounter, forcePopoverRecompute] = useReducer(
+  // Module is there to make sure that the counter doesn't overflow.
   s => (s + 1) % MAX_POPOVER_RECOMPUTE_COUNTER, 0);
   const {
     orientation,
@@ -43,9 +42,7 @@ function BlockPopoverInbetween({
       getBlockRootClientId,
       isBlockVisible
     } = select(blockEditorStore);
-
     const _rootClientId = getBlockRootClientId(previousClientId !== null && previousClientId !== void 0 ? previousClientId : nextClientId);
-
     return {
       orientation: getBlockListSettings(_rootClientId)?.orientation || 'vertical',
       rootClientId: _rootClientId,
@@ -56,19 +53,18 @@ function BlockPopoverInbetween({
   const nextElement = useBlockElement(nextClientId);
   const isVertical = orientation === 'vertical';
   const popoverAnchor = useMemo(() => {
-    if ( // popoverRecomputeCounter is by definition always equal or greater than 0.
+    if (
+    // popoverRecomputeCounter is by definition always equal or greater than 0.
     // This check is only there to satisfy the correctness of the
     // exhaustive-deps rule for the `useMemo` hook.
     popoverRecomputeCounter < 0 || !previousElement && !nextElement || !isVisible) {
       return undefined;
     }
-
     const {
       ownerDocument
     } = previousElement || nextElement;
     return {
       ownerDocument,
-
       getBoundingClientRect() {
         const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
         const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
@@ -76,7 +72,6 @@ function BlockPopoverInbetween({
         let top = 0;
         let width = 0;
         let height = 0;
-
         if (isVertical) {
           // vertical
           top = previousRect ? previousRect.bottom : nextRect.top;
@@ -86,7 +81,6 @@ function BlockPopoverInbetween({
         } else {
           top = previousRect ? previousRect.top : nextRect.top;
           height = previousRect ? previousRect.height : nextRect.height;
-
           if (isRTL()) {
             // non vertical, rtl
             left = nextRect ? nextRect.right : previousRect.left;
@@ -97,13 +91,13 @@ function BlockPopoverInbetween({
             width = previousRect && nextRect ? nextRect.left - previousRect.right : 0;
           }
         }
-
         return new window.DOMRect(left, top, width, height);
       }
-
     };
   }, [previousElement, nextElement, popoverRecomputeCounter, isVertical, isVisible]);
-  const popoverScrollRef = usePopoverScroll(__unstableContentRef); // This is only needed for a smooth transition when moving blocks.
+  const popoverScrollRef = usePopoverScroll(__unstableContentRef);
+
+  // This is only needed for a smooth transition when moving blocks.
   // When blocks are moved up/down, their position can be set by
   // updating the `transform` property manually (i.e. without using CSS
   // transitions or animations). The animation, which can also scroll the block
@@ -111,12 +105,10 @@ function BlockPopoverInbetween({
   // A MutationObserver is therefore used to make sure that changes to the
   // selectedElement's attribute (i.e. `transform`) can be tracked and used to
   // trigger the Popover to rerender.
-
   useLayoutEffect(() => {
     if (!previousElement) {
       return;
     }
-
     const observer = new window.MutationObserver(forcePopoverRecompute);
     observer.observe(previousElement, {
       attributes: true
@@ -129,7 +121,6 @@ function BlockPopoverInbetween({
     if (!nextElement) {
       return;
     }
-
     const observer = new window.MutationObserver(forcePopoverRecompute);
     observer.observe(nextElement, {
       attributes: true
@@ -142,18 +133,19 @@ function BlockPopoverInbetween({
     if (!previousElement) {
       return;
     }
-
     previousElement.ownerDocument.defaultView.addEventListener('resize', forcePopoverRecompute);
     return () => {
       previousElement.ownerDocument.defaultView?.removeEventListener('resize', forcePopoverRecompute);
     };
-  }, [previousElement]); // If there's either a previous or a next element, show the inbetween popover.
+  }, [previousElement]);
+
+  // If there's either a previous or a next element, show the inbetween popover.
   // Note that drag and drop uses the inbetween popover to show the drop indicator
   // before the first block and after the last block.
-
   if (!previousElement && !nextElement || !isVisible) {
     return null;
   }
+
   /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
   // While ideally it would be enough to capture the
   // bubbling focus event from the Inserter, due to the
@@ -161,16 +153,16 @@ function BlockPopoverInbetween({
   // Firefox and Safari, it is not reliable.
   //
   // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-
-
   return createElement(Popover, {
     ref: popoverScrollRef,
     animate: false,
     anchor: popoverAnchor,
-    focusOnMount: false // Render in the old slot if needed for backward compatibility,
+    focusOnMount: false
+    // Render in the old slot if needed for backward compatibility,
     // otherwise render in place (not in the default popover slot).
     ,
-    __unstableSlotName: __unstablePopoverSlot || null // Forces a remount of the popover when its position changes
+    __unstableSlotName: __unstablePopoverSlot || null
+    // Forces a remount of the popover when its position changes
     // This makes sure the popover doesn't animate from its previous position.
     ,
     key: nextClientId + '--' + rootClientId,

package/build-module/components/block-popover/inbetween.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/inbetween.js"],"names":["classnames","useSelect","useMemo","createContext","useReducer","useLayoutEffect","Popover","isRTL","store","blockEditorStore","__unstableUseBlockElement","useBlockElement","usePopoverScroll","MAX_POPOVER_RECOMPUTE_COUNTER","Number","MAX_SAFE_INTEGER","InsertionPointOpenRef","BlockPopoverInbetween","previousClientId","nextClientId","children","__unstablePopoverSlot","__unstableContentRef","props","popoverRecomputeCounter","forcePopoverRecompute","s","orientation","rootClientId","isVisible","select","getBlockListSettings","getBlockRootClientId","isBlockVisible","_rootClientId","previousElement","nextElement","isVertical","popoverAnchor","undefined","ownerDocument","getBoundingClientRect","previousRect","nextRect","left","top","width","height","bottom","right","window","DOMRect","popoverScrollRef","observer","MutationObserver","observe","attributes","disconnect","defaultView","addEventListener","removeEventListener","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tcreateContext,\n\tuseReducer,\n\tuseLayoutEffect,\n} from '@wordpress/element';\nimport { Popover } from '@wordpress/components';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nconst MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;\n\nexport const InsertionPointOpenRef = createContext();\n\nfunction BlockPopoverInbetween( {\n\tpreviousClientId,\n\tnextClientId,\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n\t...props\n} ) {\n\t// This is a temporary hack to get the inbetween inserter to recompute properly.\n\tconst [ popoverRecomputeCounter, forcePopoverRecompute ] = useReducer(\n\t\t// Module is there to make sure that the counter doesn't overflow.\n\t\t( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,\n\t\t0\n\t);\n\n\tconst { orientation, rootClientId, isVisible } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockListSettings,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tisBlockVisible,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst _rootClientId = getBlockRootClientId(\n\t\t\t\tpreviousClientId ?? nextClientId\n\t\t\t);\n\t\t\treturn {\n\t\t\t\torientation:\n\t\t\t\t\tgetBlockListSettings( _rootClientId )?.orientation ||\n\t\t\t\t\t'vertical',\n\t\t\t\trootClientId: _rootClientId,\n\t\t\t\tisVisible:\n\t\t\t\t\tisBlockVisible( previousClientId ) &&\n\t\t\t\t\tisBlockVisible( nextClientId ),\n\t\t\t};\n\t\t},\n\t\t[ previousClientId, nextClientId ]\n\t);\n\tconst previousElement = useBlockElement( previousClientId );\n\tconst nextElement = useBlockElement( nextClientId );\n\tconst isVertical = orientation === 'vertical';\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tif (\n\t\t\t// popoverRecomputeCounter is by definition always equal or greater than 0.\n\t\t\t// This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverRecomputeCounter < 0 ||\n\t\t\t( ! previousElement && ! nextElement ) ||\n\t\t\t! isVisible\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst { ownerDocument } = previousElement || nextElement;\n\n\t\treturn {\n\t\t\townerDocument,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst previousRect = previousElement\n\t\t\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t\t\t: null;\n\t\t\t\tconst nextRect = nextElement\n\t\t\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t\t\t: null;\n\n\t\t\t\tlet left = 0;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet width = 0;\n\t\t\t\tlet height = 0;\n\n\t\t\t\tif ( isVertical ) {\n\t\t\t\t\t// vertical\n\t\t\t\t\ttop = previousRect ? previousRect.bottom : nextRect.top;\n\t\t\t\t\twidth = previousRect ? previousRect.width : nextRect.width;\n\t\t\t\t\theight =\n\t\t\t\t\t\tnextRect && previousRect\n\t\t\t\t\t\t\t? nextRect.top - previousRect.bottom\n\t\t\t\t\t\t\t: 0;\n\t\t\t\t\tleft = previousRect ? previousRect.left : nextRect.left;\n\t\t\t\t} else {\n\t\t\t\t\ttop = previousRect ? previousRect.top : nextRect.top;\n\t\t\t\t\theight = previousRect\n\t\t\t\t\t\t? previousRect.height\n\t\t\t\t\t\t: nextRect.height;\n\n\t\t\t\t\tif ( isRTL() ) {\n\t\t\t\t\t\t// non vertical, rtl\n\t\t\t\t\t\tleft = nextRect ? nextRect.right : previousRect.left;\n\t\t\t\t\t\twidth =\n\t\t\t\t\t\t\tpreviousRect && nextRect\n\t\t\t\t\t\t\t\t? previousRect.left - nextRect.right\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// non vertical, ltr\n\t\t\t\t\t\tleft = previousRect\n\t\t\t\t\t\t\t? previousRect.right\n\t\t\t\t\t\t\t: nextRect.left;\n\t\t\t\t\t\twidth =\n\t\t\t\t\t\t\tpreviousRect && nextRect\n\t\t\t\t\t\t\t\t? nextRect.left - previousRect.right\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [\n\t\tpreviousElement,\n\t\tnextElement,\n\t\tpopoverRecomputeCounter,\n\t\tisVertical,\n\t\tisVisible,\n\t] );\n\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\n\t// This is only needed for a smooth transition when moving blocks.\n\t// When blocks are moved up/down, their position can be set by\n\t// updating the `transform` property manually (i.e. without using CSS\n\t// transitions or animations). The animation, which can also scroll the block\n\t// editor, can sometimes cause the position of the Popover to get out of sync.\n\t// A MutationObserver is therefore used to make sure that changes to the\n\t// selectedElement's attribute (i.e. `transform`) can be tracked and used to\n\t// trigger the Popover to rerender.\n\tuseLayoutEffect( () => {\n\t\tif ( ! previousElement ) {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new window.MutationObserver( forcePopoverRecompute );\n\t\tobserver.observe( previousElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ previousElement ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! nextElement ) {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new window.MutationObserver( forcePopoverRecompute );\n\t\tobserver.observe( nextElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ nextElement ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! previousElement ) {\n\t\t\treturn;\n\t\t}\n\t\tpreviousElement.ownerDocument.defaultView.addEventListener(\n\t\t\t'resize',\n\t\t\tforcePopoverRecompute\n\t\t);\n\t\treturn () => {\n\t\t\tpreviousElement.ownerDocument.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tforcePopoverRecompute\n\t\t\t);\n\t\t};\n\t}, [ previousElement ] );\n\n\t// If there's either a previous or a next element, show the inbetween popover.\n\t// Note that drag and drop uses the inbetween popover to show the drop indicator\n\t// before the first block and after the last block.\n\tif ( ( ! previousElement && ! nextElement ) || ! isVisible ) {\n\t\treturn null;\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\t// While ideally it would be enough to capture the\n\t// bubbling focus event from the Inserter, due to the\n\t// characteristics of click focusing of `button`s in\n\t// Firefox and Safari, it is not reliable.\n\t//\n\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\t// Forces a remount of the popover when its position changes\n\t\t\t// This makes sure the popover doesn't animate from its previous position.\n\t\t\tkey={ nextClientId + '--' + rootClientId }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\t'block-editor-block-popover__inbetween',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t\tresize={ false }\n\t\t\tflip={ false }\n\t\t\tplacement=\"overlay\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div className=\"block-editor-block-popover__inbetween-container\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Popover>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n}\n\nexport default BlockPopoverInbetween;\n"]}
+{"version":3,"names":["classnames","useSelect","useMemo","createContext","useReducer","useLayoutEffect","Popover","isRTL","store","blockEditorStore","__unstableUseBlockElement","useBlockElement","usePopoverScroll","MAX_POPOVER_RECOMPUTE_COUNTER","Number","MAX_SAFE_INTEGER","InsertionPointOpenRef","BlockPopoverInbetween","previousClientId","nextClientId","children","__unstablePopoverSlot","__unstableContentRef","props","popoverRecomputeCounter","forcePopoverRecompute","s","orientation","rootClientId","isVisible","select","getBlockListSettings","getBlockRootClientId","isBlockVisible","_rootClientId","previousElement","nextElement","isVertical","popoverAnchor","undefined","ownerDocument","getBoundingClientRect","previousRect","nextRect","left","top","width","height","bottom","right","window","DOMRect","popoverScrollRef","observer","MutationObserver","observe","attributes","disconnect","defaultView","addEventListener","removeEventListener","createElement","ref","animate","anchor","focusOnMount","__unstableSlotName","key","className","resize","flip","placement","variant"],"sources":["@wordpress/block-editor/src/components/block-popover/inbetween.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tcreateContext,\n\tuseReducer,\n\tuseLayoutEffect,\n} from '@wordpress/element';\nimport { Popover } from '@wordpress/components';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nconst MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;\n\nexport const InsertionPointOpenRef = createContext();\n\nfunction BlockPopoverInbetween( {\n\tpreviousClientId,\n\tnextClientId,\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n\t...props\n} ) {\n\t// This is a temporary hack to get the inbetween inserter to recompute properly.\n\tconst [ popoverRecomputeCounter, forcePopoverRecompute ] = useReducer(\n\t\t// Module is there to make sure that the counter doesn't overflow.\n\t\t( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,\n\t\t0\n\t);\n\n\tconst { orientation, rootClientId, isVisible } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockListSettings,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tisBlockVisible,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst _rootClientId = getBlockRootClientId(\n\t\t\t\tpreviousClientId ?? nextClientId\n\t\t\t);\n\t\t\treturn {\n\t\t\t\torientation:\n\t\t\t\t\tgetBlockListSettings( _rootClientId )?.orientation ||\n\t\t\t\t\t'vertical',\n\t\t\t\trootClientId: _rootClientId,\n\t\t\t\tisVisible:\n\t\t\t\t\tisBlockVisible( previousClientId ) &&\n\t\t\t\t\tisBlockVisible( nextClientId ),\n\t\t\t};\n\t\t},\n\t\t[ previousClientId, nextClientId ]\n\t);\n\tconst previousElement = useBlockElement( previousClientId );\n\tconst nextElement = useBlockElement( nextClientId );\n\tconst isVertical = orientation === 'vertical';\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tif (\n\t\t\t// popoverRecomputeCounter is by definition always equal or greater than 0.\n\t\t\t// This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverRecomputeCounter < 0 ||\n\t\t\t( ! previousElement && ! nextElement ) ||\n\t\t\t! isVisible\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst { ownerDocument } = previousElement || nextElement;\n\n\t\treturn {\n\t\t\townerDocument,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst previousRect = previousElement\n\t\t\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t\t\t: null;\n\t\t\t\tconst nextRect = nextElement\n\t\t\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t\t\t: null;\n\n\t\t\t\tlet left = 0;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet width = 0;\n\t\t\t\tlet height = 0;\n\n\t\t\t\tif ( isVertical ) {\n\t\t\t\t\t// vertical\n\t\t\t\t\ttop = previousRect ? previousRect.bottom : nextRect.top;\n\t\t\t\t\twidth = previousRect ? previousRect.width : nextRect.width;\n\t\t\t\t\theight =\n\t\t\t\t\t\tnextRect && previousRect\n\t\t\t\t\t\t\t? nextRect.top - previousRect.bottom\n\t\t\t\t\t\t\t: 0;\n\t\t\t\t\tleft = previousRect ? previousRect.left : nextRect.left;\n\t\t\t\t} else {\n\t\t\t\t\ttop = previousRect ? previousRect.top : nextRect.top;\n\t\t\t\t\theight = previousRect\n\t\t\t\t\t\t? previousRect.height\n\t\t\t\t\t\t: nextRect.height;\n\n\t\t\t\t\tif ( isRTL() ) {\n\t\t\t\t\t\t// non vertical, rtl\n\t\t\t\t\t\tleft = nextRect ? nextRect.right : previousRect.left;\n\t\t\t\t\t\twidth =\n\t\t\t\t\t\t\tpreviousRect && nextRect\n\t\t\t\t\t\t\t\t? previousRect.left - nextRect.right\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// non vertical, ltr\n\t\t\t\t\t\tleft = previousRect\n\t\t\t\t\t\t\t? previousRect.right\n\t\t\t\t\t\t\t: nextRect.left;\n\t\t\t\t\t\twidth =\n\t\t\t\t\t\t\tpreviousRect && nextRect\n\t\t\t\t\t\t\t\t? nextRect.left - previousRect.right\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [\n\t\tpreviousElement,\n\t\tnextElement,\n\t\tpopoverRecomputeCounter,\n\t\tisVertical,\n\t\tisVisible,\n\t] );\n\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\n\t// This is only needed for a smooth transition when moving blocks.\n\t// When blocks are moved up/down, their position can be set by\n\t// updating the `transform` property manually (i.e. without using CSS\n\t// transitions or animations). The animation, which can also scroll the block\n\t// editor, can sometimes cause the position of the Popover to get out of sync.\n\t// A MutationObserver is therefore used to make sure that changes to the\n\t// selectedElement's attribute (i.e. `transform`) can be tracked and used to\n\t// trigger the Popover to rerender.\n\tuseLayoutEffect( () => {\n\t\tif ( ! previousElement ) {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new window.MutationObserver( forcePopoverRecompute );\n\t\tobserver.observe( previousElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ previousElement ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! nextElement ) {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new window.MutationObserver( forcePopoverRecompute );\n\t\tobserver.observe( nextElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ nextElement ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! previousElement ) {\n\t\t\treturn;\n\t\t}\n\t\tpreviousElement.ownerDocument.defaultView.addEventListener(\n\t\t\t'resize',\n\t\t\tforcePopoverRecompute\n\t\t);\n\t\treturn () => {\n\t\t\tpreviousElement.ownerDocument.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tforcePopoverRecompute\n\t\t\t);\n\t\t};\n\t}, [ previousElement ] );\n\n\t// If there's either a previous or a next element, show the inbetween popover.\n\t// Note that drag and drop uses the inbetween popover to show the drop indicator\n\t// before the first block and after the last block.\n\tif ( ( ! previousElement && ! nextElement ) || ! isVisible ) {\n\t\treturn null;\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\t// While ideally it would be enough to capture the\n\t// bubbling focus event from the Inserter, due to the\n\t// characteristics of click focusing of `button`s in\n\t// Firefox and Safari, it is not reliable.\n\t//\n\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\t// Forces a remount of the popover when its position changes\n\t\t\t// This makes sure the popover doesn't animate from its previous position.\n\t\t\tkey={ nextClientId + '--' + rootClientId }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\t'block-editor-block-popover__inbetween',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t\tresize={ false }\n\t\t\tflip={ false }\n\t\t\tplacement=\"overlay\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div className=\"block-editor-block-popover__inbetween-container\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Popover>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n}\n\nexport default BlockPopoverInbetween;\n"],"mappings":"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"}

package/build-module/components/block-popover/index.js

@@ -1,24 +1,22 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { forwardRef, useMemo, useReducer, useLayoutEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
-
 function BlockPopover({
   clientId,
   bottomClientId,
@@ -33,20 +31,21 @@ function BlockPopover({
   const selectedElement = useBlockElement(clientId);
   const lastSelectedElement = useBlockElement(bottomClientId !== null && bottomClientId !== void 0 ? bottomClientId : clientId);
   const mergedRefs = useMergeRefs([ref, usePopoverScroll(__unstableContentRef)]);
-  const [popoverDimensionsRecomputeCounter, forceRecomputePopoverDimensions] = useReducer( // Module is there to make sure that the counter doesn't overflow.
-  s => (s + 1) % MAX_POPOVER_RECOMPUTE_COUNTER, 0); // When blocks are moved up/down, they are animated to their new position by
+  const [popoverDimensionsRecomputeCounter, forceRecomputePopoverDimensions] = useReducer(
+  // Module is there to make sure that the counter doesn't overflow.
+  s => (s + 1) % MAX_POPOVER_RECOMPUTE_COUNTER, 0);
+
+  // When blocks are moved up/down, they are animated to their new position by
   // updating the `transform` property manually (i.e. without using CSS
   // transitions or animations). The animation, which can also scroll the block
   // editor, can sometimes cause the position of the Popover to get out of sync.
   // A MutationObserver is therefore used to make sure that changes to the
   // selectedElement's attribute (i.e. `transform`) can be tracked and used to
   // trigger the Popover to rerender.
-
   useLayoutEffect(() => {
     if (!selectedElement) {
       return;
     }
-
     const observer = new window.MutationObserver(forceRecomputePopoverDimensions);
     observer.observe(selectedElement, {
       attributes: true
@@ -56,13 +55,13 @@ function BlockPopover({
     };
   }, [selectedElement]);
   const style = useMemo(() => {
-    if ( // popoverDimensionsRecomputeCounter is by definition always equal or greater
+    if (
+    // popoverDimensionsRecomputeCounter is by definition always equal or greater
     // than 0. This check is only there to satisfy the correctness of the
     // exhaustive-deps rule for the `useMemo` hook.
     popoverDimensionsRecomputeCounter < 0 || !selectedElement || lastSelectedElement !== selectedElement) {
       return {};
     }
-
     return {
       position: 'absolute',
       width: selectedElement.offsetWidth,
@@ -70,23 +69,23 @@ function BlockPopover({
     };
   }, [selectedElement, lastSelectedElement, __unstableRefreshSize, popoverDimensionsRecomputeCounter]);
   const popoverAnchor = useMemo(() => {
-    if ( // popoverDimensionsRecomputeCounter is by definition always equal or greater
+    if (
+    // popoverDimensionsRecomputeCounter is by definition always equal or greater
     // than 0. This check is only there to satisfy the correctness of the
     // exhaustive-deps rule for the `useMemo` hook.
     popoverDimensionsRecomputeCounter < 0 || !selectedElement || bottomClientId && !lastSelectedElement) {
       return undefined;
     }
-
     return {
       getBoundingClientRect() {
         var _lastSelectedBCR$left, _lastSelectedBCR$top, _lastSelectedBCR$righ, _lastSelectedBCR$bott;
-
         const selectedBCR = selectedElement.getBoundingClientRect();
-        const lastSelectedBCR = lastSelectedElement?.getBoundingClientRect(); // Get the biggest rectangle that encompasses completely the currently
+        const lastSelectedBCR = lastSelectedElement?.getBoundingClientRect();
+
+        // Get the biggest rectangle that encompasses completely the currently
         // selected element and the last selected element:
         // - for top/left coordinates, use the smaller numbers
         // - for the bottom/right coordinates, use the largest numbers
-
         const left = Math.min(selectedBCR.left, (_lastSelectedBCR$left = lastSelectedBCR?.left) !== null && _lastSelectedBCR$left !== void 0 ? _lastSelectedBCR$left : Infinity);
         const top = Math.min(selectedBCR.top, (_lastSelectedBCR$top = lastSelectedBCR?.top) !== null && _lastSelectedBCR$top !== void 0 ? _lastSelectedBCR$top : Infinity);
         const right = Math.max(selectedBCR.right, (_lastSelectedBCR$righ = lastSelectedBCR.right) !== null && _lastSelectedBCR$righ !== void 0 ? _lastSelectedBCR$righ : -Infinity);
@@ -95,20 +94,18 @@ function BlockPopover({
         const height = bottom - top;
         return new window.DOMRect(left, top, width, height);
       },
-
       ownerDocument: selectedElement.ownerDocument
     };
   }, [bottomClientId, lastSelectedElement, selectedElement, popoverDimensionsRecomputeCounter]);
-
   if (!selectedElement || bottomClientId && !lastSelectedElement) {
     return null;
   }
-
   return createElement(Popover, {
     ref: mergedRefs,
     animate: false,
     focusOnMount: false,
-    anchor: popoverAnchor // Render in the old slot if needed for backward compatibility,
+    anchor: popoverAnchor
+    // Render in the old slot if needed for backward compatibility,
     // otherwise render in place (not in the default popover slot).
     ,
     __unstableSlotName: __unstablePopoverSlot || null,
@@ -123,6 +120,5 @@ function BlockPopover({
     style: style
   }, children), !__unstableCoverTarget && children);
 }
-
 export default forwardRef(BlockPopover);
 //# sourceMappingURL=index.js.map

package/build-module/components/block-popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/index.js"],"names":["classnames","useMergeRefs","Popover","forwardRef","useMemo","useReducer","useLayoutEffect","__unstableUseBlockElement","useBlockElement","usePopoverScroll","MAX_POPOVER_RECOMPUTE_COUNTER","Number","MAX_SAFE_INTEGER","BlockPopover","clientId","bottomClientId","children","__unstableRefreshSize","__unstableCoverTarget","__unstablePopoverSlot","__unstableContentRef","shift","props","ref","selectedElement","lastSelectedElement","mergedRefs","popoverDimensionsRecomputeCounter","forceRecomputePopoverDimensions","s","observer","window","MutationObserver","observe","attributes","disconnect","style","position","width","offsetWidth","height","offsetHeight","popoverAnchor","undefined","getBoundingClientRect","selectedBCR","lastSelectedBCR","left","Math","min","Infinity","top","right","max","bottom","DOMRect","ownerDocument","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport {\n\tforwardRef,\n\tuseMemo,\n\tuseReducer,\n\tuseLayoutEffect,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nconst MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;\n\nfunction BlockPopover(\n\t{\n\t\tclientId,\n\t\tbottomClientId,\n\t\tchildren,\n\t\t__unstableRefreshSize,\n\t\t__unstableCoverTarget = false,\n\t\t__unstablePopoverSlot,\n\t\t__unstableContentRef,\n\t\tshift = true,\n\t\t...props\n\t},\n\tref\n) {\n\tconst selectedElement = useBlockElement( clientId );\n\tconst lastSelectedElement = useBlockElement( bottomClientId ?? clientId );\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tusePopoverScroll( __unstableContentRef ),\n\t] );\n\n\tconst [\n\t\tpopoverDimensionsRecomputeCounter,\n\t\tforceRecomputePopoverDimensions,\n\t] = useReducer(\n\t\t// Module is there to make sure that the counter doesn't overflow.\n\t\t( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,\n\t\t0\n\t);\n\n\t// When blocks are moved up/down, they are animated to their new position by\n\t// updating the `transform` property manually (i.e. without using CSS\n\t// transitions or animations). The animation, which can also scroll the block\n\t// editor, can sometimes cause the position of the Popover to get out of sync.\n\t// A MutationObserver is therefore used to make sure that changes to the\n\t// selectedElement's attribute (i.e. `transform`) can be tracked and used to\n\t// trigger the Popover to rerender.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new window.MutationObserver(\n\t\t\tforceRecomputePopoverDimensions\n\t\t);\n\t\tobserver.observe( selectedElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ selectedElement ] );\n\n\tconst style = useMemo( () => {\n\t\tif (\n\t\t\t// popoverDimensionsRecomputeCounter is by definition always equal or greater\n\t\t\t// than 0. This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverDimensionsRecomputeCounter < 0 ||\n\t\t\t! selectedElement ||\n\t\t\tlastSelectedElement !== selectedElement\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tposition: 'absolute',\n\t\t\twidth: selectedElement.offsetWidth,\n\t\t\theight: selectedElement.offsetHeight,\n\t\t};\n\t}, [\n\t\tselectedElement,\n\t\tlastSelectedElement,\n\t\t__unstableRefreshSize,\n\t\tpopoverDimensionsRecomputeCounter,\n\t] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tif (\n\t\t\t// popoverDimensionsRecomputeCounter is by definition always equal or greater\n\t\t\t// than 0. This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverDimensionsRecomputeCounter < 0 ||\n\t\t\t! selectedElement ||\n\t\t\t( bottomClientId && ! lastSelectedElement )\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst selectedBCR = selectedElement.getBoundingClientRect();\n\t\t\t\tconst lastSelectedBCR =\n\t\t\t\t\tlastSelectedElement?.getBoundingClientRect();\n\n\t\t\t\t// Get the biggest rectangle that encompasses completely the currently\n\t\t\t\t// selected element and the last selected element:\n\t\t\t\t// - for top/left coordinates, use the smaller numbers\n\t\t\t\t// - for the bottom/right coordinates, use the largest numbers\n\t\t\t\tconst left = Math.min(\n\t\t\t\t\tselectedBCR.left,\n\t\t\t\t\tlastSelectedBCR?.left ?? Infinity\n\t\t\t\t);\n\t\t\t\tconst top = Math.min(\n\t\t\t\t\tselectedBCR.top,\n\t\t\t\t\tlastSelectedBCR?.top ?? Infinity\n\t\t\t\t);\n\t\t\t\tconst right = Math.max(\n\t\t\t\t\tselectedBCR.right,\n\t\t\t\t\tlastSelectedBCR.right ?? -Infinity\n\t\t\t\t);\n\t\t\t\tconst bottom = Math.max(\n\t\t\t\t\tselectedBCR.bottom,\n\t\t\t\t\tlastSelectedBCR.bottom ?? -Infinity\n\t\t\t\t);\n\t\t\t\tconst width = right - left;\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t\townerDocument: selectedElement.ownerDocument,\n\t\t};\n\t}, [\n\t\tbottomClientId,\n\t\tlastSelectedElement,\n\t\tselectedElement,\n\t\tpopoverDimensionsRecomputeCounter,\n\t] );\n\n\tif ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tref={ mergedRefs }\n\t\t\tanimate={ false }\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\tplacement=\"top-start\"\n\t\t\tresize={ false }\n\t\t\tflip={ false }\n\t\t\tshift={ shift }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t{ __unstableCoverTarget && <div style={ style }>{ children }</div> }\n\t\t\t{ ! __unstableCoverTarget && children }\n\t\t</Popover>\n\t);\n}\n\nexport default forwardRef( BlockPopover );\n"]}
+{"version":3,"names":["classnames","useMergeRefs","Popover","forwardRef","useMemo","useReducer","useLayoutEffect","__unstableUseBlockElement","useBlockElement","usePopoverScroll","MAX_POPOVER_RECOMPUTE_COUNTER","Number","MAX_SAFE_INTEGER","BlockPopover","clientId","bottomClientId","children","__unstableRefreshSize","__unstableCoverTarget","__unstablePopoverSlot","__unstableContentRef","shift","props","ref","selectedElement","lastSelectedElement","mergedRefs","popoverDimensionsRecomputeCounter","forceRecomputePopoverDimensions","s","observer","window","MutationObserver","observe","attributes","disconnect","style","position","width","offsetWidth","height","offsetHeight","popoverAnchor","undefined","getBoundingClientRect","_lastSelectedBCR$left","_lastSelectedBCR$top","_lastSelectedBCR$righ","_lastSelectedBCR$bott","selectedBCR","lastSelectedBCR","left","Math","min","Infinity","top","right","max","bottom","DOMRect","ownerDocument","createElement","animate","focusOnMount","anchor","__unstableSlotName","placement","resize","flip","className","variant"],"sources":["@wordpress/block-editor/src/components/block-popover/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport {\n\tforwardRef,\n\tuseMemo,\n\tuseReducer,\n\tuseLayoutEffect,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nconst MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;\n\nfunction BlockPopover(\n\t{\n\t\tclientId,\n\t\tbottomClientId,\n\t\tchildren,\n\t\t__unstableRefreshSize,\n\t\t__unstableCoverTarget = false,\n\t\t__unstablePopoverSlot,\n\t\t__unstableContentRef,\n\t\tshift = true,\n\t\t...props\n\t},\n\tref\n) {\n\tconst selectedElement = useBlockElement( clientId );\n\tconst lastSelectedElement = useBlockElement( bottomClientId ?? clientId );\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tusePopoverScroll( __unstableContentRef ),\n\t] );\n\n\tconst [\n\t\tpopoverDimensionsRecomputeCounter,\n\t\tforceRecomputePopoverDimensions,\n\t] = useReducer(\n\t\t// Module is there to make sure that the counter doesn't overflow.\n\t\t( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,\n\t\t0\n\t);\n\n\t// When blocks are moved up/down, they are animated to their new position by\n\t// updating the `transform` property manually (i.e. without using CSS\n\t// transitions or animations). The animation, which can also scroll the block\n\t// editor, can sometimes cause the position of the Popover to get out of sync.\n\t// A MutationObserver is therefore used to make sure that changes to the\n\t// selectedElement's attribute (i.e. `transform`) can be tracked and used to\n\t// trigger the Popover to rerender.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new window.MutationObserver(\n\t\t\tforceRecomputePopoverDimensions\n\t\t);\n\t\tobserver.observe( selectedElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ selectedElement ] );\n\n\tconst style = useMemo( () => {\n\t\tif (\n\t\t\t// popoverDimensionsRecomputeCounter is by definition always equal or greater\n\t\t\t// than 0. This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverDimensionsRecomputeCounter < 0 ||\n\t\t\t! selectedElement ||\n\t\t\tlastSelectedElement !== selectedElement\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tposition: 'absolute',\n\t\t\twidth: selectedElement.offsetWidth,\n\t\t\theight: selectedElement.offsetHeight,\n\t\t};\n\t}, [\n\t\tselectedElement,\n\t\tlastSelectedElement,\n\t\t__unstableRefreshSize,\n\t\tpopoverDimensionsRecomputeCounter,\n\t] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tif (\n\t\t\t// popoverDimensionsRecomputeCounter is by definition always equal or greater\n\t\t\t// than 0. This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverDimensionsRecomputeCounter < 0 ||\n\t\t\t! selectedElement ||\n\t\t\t( bottomClientId && ! lastSelectedElement )\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst selectedBCR = selectedElement.getBoundingClientRect();\n\t\t\t\tconst lastSelectedBCR =\n\t\t\t\t\tlastSelectedElement?.getBoundingClientRect();\n\n\t\t\t\t// Get the biggest rectangle that encompasses completely the currently\n\t\t\t\t// selected element and the last selected element:\n\t\t\t\t// - for top/left coordinates, use the smaller numbers\n\t\t\t\t// - for the bottom/right coordinates, use the largest numbers\n\t\t\t\tconst left = Math.min(\n\t\t\t\t\tselectedBCR.left,\n\t\t\t\t\tlastSelectedBCR?.left ?? Infinity\n\t\t\t\t);\n\t\t\t\tconst top = Math.min(\n\t\t\t\t\tselectedBCR.top,\n\t\t\t\t\tlastSelectedBCR?.top ?? Infinity\n\t\t\t\t);\n\t\t\t\tconst right = Math.max(\n\t\t\t\t\tselectedBCR.right,\n\t\t\t\t\tlastSelectedBCR.right ?? -Infinity\n\t\t\t\t);\n\t\t\t\tconst bottom = Math.max(\n\t\t\t\t\tselectedBCR.bottom,\n\t\t\t\t\tlastSelectedBCR.bottom ?? -Infinity\n\t\t\t\t);\n\t\t\t\tconst width = right - left;\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t\townerDocument: selectedElement.ownerDocument,\n\t\t};\n\t}, [\n\t\tbottomClientId,\n\t\tlastSelectedElement,\n\t\tselectedElement,\n\t\tpopoverDimensionsRecomputeCounter,\n\t] );\n\n\tif ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tref={ mergedRefs }\n\t\t\tanimate={ false }\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\tplacement=\"top-start\"\n\t\t\tresize={ false }\n\t\t\tflip={ false }\n\t\t\tshift={ shift }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t{ __unstableCoverTarget && <div style={ style }>{ children }</div> }\n\t\t\t{ ! __unstableCoverTarget && children }\n\t\t</Popover>\n\t);\n}\n\nexport default forwardRef( BlockPopover );\n"],"mappings":"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"}

package/build-module/components/block-popover/use-popover-scroll.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+
 /**
  * Allow scrolling "through" popovers over the canvas. This is only called for
  * as long as the pointer is over a popover. Do not use React events because it
@@ -9,23 +10,20 @@ import { useRefEffect } from '@wordpress/compose';
  *
  * @param {Object} scrollableRef
  */
-
 function usePopoverScroll(scrollableRef) {
   return useRefEffect(node => {
     if (!scrollableRef) {
       return;
     }
-
     function onWheel(event) {
       const {
         deltaX,
         deltaY
       } = event;
       scrollableRef.current.scrollBy(deltaX, deltaY);
-    } // Tell the browser that we do not call event.preventDefault
+    }
+    // Tell the browser that we do not call event.preventDefault
     // See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-
-
     const options = {
       passive: true
     };
@@ -35,6 +33,5 @@ function usePopoverScroll(scrollableRef) {
     };
   }, [scrollableRef]);
 }
-
 export default usePopoverScroll;
 //# sourceMappingURL=use-popover-scroll.js.map

package/build-module/components/block-popover/use-popover-scroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/use-popover-scroll.js"],"names":["useRefEffect","usePopoverScroll","scrollableRef","node","onWheel","event","deltaX","deltaY","current","scrollBy","options","passive","addEventListener","removeEventListener"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,gBAAT,CAA2BC,aAA3B,EAA2C;AAC1C,SAAOF,YAAY,CAChBG,IAAF,IAAY;AACX,QAAK,CAAED,aAAP,EAAuB;AACtB;AACA;;AAED,aAASE,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,YAAM;AAAEC,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAqBF,KAA3B;AACAH,MAAAA,aAAa,CAACM,OAAd,CAAsBC,QAAtB,CAAgCH,MAAhC,EAAwCC,MAAxC;AACA,KARU,CASX;AACA;;;AACA,UAAMG,OAAO,GAAG;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAAhB;AACAR,IAAAA,IAAI,CAACS,gBAAL,CAAuB,OAAvB,EAAgCR,OAAhC,EAAyCM,OAAzC;AACA,WAAO,MAAM;AACZP,MAAAA,IAAI,CAACU,mBAAL,CAA0B,OAA1B,EAAmCT,OAAnC,EAA4CM,OAA5C;AACA,KAFD;AAGA,GAjBiB,EAkBlB,CAAER,aAAF,CAlBkB,CAAnB;AAoBA;;AAED,eAAeD,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Allow scrolling \"through\" popovers over the canvas. This is only called for\n * as long as the pointer is over a popover. Do not use React events because it\n * will bubble through portals.\n *\n * @param {Object} scrollableRef\n */\nfunction usePopoverScroll( scrollableRef ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! scrollableRef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onWheel( event ) {\n\t\t\t\tconst { deltaX, deltaY } = event;\n\t\t\t\tscrollableRef.current.scrollBy( deltaX, deltaY );\n\t\t\t}\n\t\t\t// Tell the browser that we do not call event.preventDefault\n\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners\n\t\t\tconst options = { passive: true };\n\t\t\tnode.addEventListener( 'wheel', onWheel, options );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'wheel', onWheel, options );\n\t\t\t};\n\t\t},\n\t\t[ scrollableRef ]\n\t);\n}\n\nexport default usePopoverScroll;\n"]}
+{"version":3,"names":["useRefEffect","usePopoverScroll","scrollableRef","node","onWheel","event","deltaX","deltaY","current","scrollBy","options","passive","addEventListener","removeEventListener"],"sources":["@wordpress/block-editor/src/components/block-popover/use-popover-scroll.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Allow scrolling \"through\" popovers over the canvas. This is only called for\n * as long as the pointer is over a popover. Do not use React events because it\n * will bubble through portals.\n *\n * @param {Object} scrollableRef\n */\nfunction usePopoverScroll( scrollableRef ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! scrollableRef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onWheel( event ) {\n\t\t\t\tconst { deltaX, deltaY } = event;\n\t\t\t\tscrollableRef.current.scrollBy( deltaX, deltaY );\n\t\t\t}\n\t\t\t// Tell the browser that we do not call event.preventDefault\n\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners\n\t\t\tconst options = { passive: true };\n\t\t\tnode.addEventListener( 'wheel', onWheel, options );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'wheel', onWheel, options );\n\t\t\t};\n\t\t},\n\t\t[ scrollableRef ]\n\t);\n}\n\nexport default usePopoverScroll;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,aAAa,EAAG;EAC1C,OAAOF,YAAY,CAChBG,IAAI,IAAM;IACX,IAAK,CAAED,aAAa,EAAG;MACtB;IACD;IAEA,SAASE,OAAOA,CAAEC,KAAK,EAAG;MACzB,MAAM;QAAEC,MAAM;QAAEC;MAAO,CAAC,GAAGF,KAAK;MAChCH,aAAa,CAACM,OAAO,CAACC,QAAQ,CAAEH,MAAM,EAAEC,MAAO,CAAC;IACjD;IACA;IACA;IACA,MAAMG,OAAO,GAAG;MAAEC,OAAO,EAAE;IAAK,CAAC;IACjCR,IAAI,CAACS,gBAAgB,CAAE,OAAO,EAAER,OAAO,EAAEM,OAAQ,CAAC;IAClD,OAAO,MAAM;MACZP,IAAI,CAACU,mBAAmB,CAAE,OAAO,EAAET,OAAO,EAAEM,OAAQ,CAAC;IACtD,CAAC;EACF,CAAC,EACD,CAAER,aAAa,CAChB,CAAC;AACF;AAEA,eAAeD,gBAAgB"}

package/build-module/components/block-preview/auto.js

@@ -1,5 +1,4 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,18 +6,18 @@ import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
-import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change.
+import { store } from '../../store';
 
+// This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
 const MAX_HEIGHT = 2000;
-
 function ScaledBlockPreview({
   viewportWidth,
   containerWidth,
@@ -28,7 +27,6 @@ function ScaledBlockPreview({
   if (!viewportWidth) {
     viewportWidth = containerWidth;
   }
-
   const [contentResizeListener, {
     height: contentHeight
   }] = useResizeObserver();
@@ -39,8 +37,9 @@ function ScaledBlockPreview({
     return {
       styles: settings.styles
     };
-  }, []); // Avoid scrollbars for pattern previews.
+  }, []);
 
+  // Avoid scrollbars for pattern previews.
   const editorStyles = useMemo(() => {
     if (styles) {
       return [...styles, {
@@ -48,17 +47,22 @@ function ScaledBlockPreview({
         __unstableType: 'presets'
       }, ...additionalStyles];
     }
-
     return styles;
-  }, [styles, additionalStyles]); // Initialize on render instead of module top level, to avoid circular dependency issues.
+  }, [styles, additionalStyles]);
 
+  // Initialize on render instead of module top level, to avoid circular dependency issues.
   MemoizedBlockList = MemoizedBlockList || pure(BlockList);
   const scale = containerWidth / viewportWidth;
+  const aspectRatio = contentHeight ? containerWidth / (contentHeight * scale) : 0;
   return createElement(Disabled, {
     className: "block-editor-block-preview__content",
     style: {
       transform: `scale(${scale})`,
-      height: contentHeight * scale,
+      // Using width + aspect-ratio instead of height here triggers browsers' native
+      // handling of scrollbar's visibility. It prevents the flickering issue seen
+      // in https://github.com/WordPress/gutenberg/issues/52027.
+      // See https://github.com/WordPress/gutenberg/pull/52921 for more info.
+      aspectRatio,
       maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
       minHeight
     }
@@ -71,8 +75,9 @@ function ScaledBlockPreview({
       } = bodyElement;
       documentElement.classList.add('block-editor-block-preview__content-iframe');
       documentElement.style.position = 'absolute';
-      documentElement.style.width = '100%'; // Necessary for contentResizeListener to work.
+      documentElement.style.width = '100%';
 
+      // Necessary for contentResizeListener to work.
       bodyElement.style.boxSizing = 'border-box';
       bodyElement.style.position = 'absolute';
       bodyElement.style.width = '100%';
@@ -95,7 +100,6 @@ function ScaledBlockPreview({
     renderAppender: false
   })));
 }
-
 export default function AutoBlockPreview(props) {
   const [containerResizeListener, {
     width: containerWidth
@@ -108,7 +112,8 @@ export default function AutoBlockPreview(props) {
     }
   }, containerResizeListener), createElement("div", {
     className: "block-editor-block-preview__container"
-  }, !!containerWidth && createElement(ScaledBlockPreview, { ...props,
+  }, !!containerWidth && createElement(ScaledBlockPreview, {
+    ...props,
     containerWidth: containerWidth
   })));
 }