@wordpress/block-editor 12.24.0 → 12.26.0

package/build-module/components/grid-visualizer/grid-item-resizer.js

@@ -3,6 +3,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { ResizableBox } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,16 +13,74 @@ import BlockPopoverCover from '../block-popover/cover';
 import { getComputedCSS } from './utils';
 export function GridItemResizer({
   clientId,
+  bounds,
   onChange
 }) {
   const blockElement = useBlockElement(clientId);
-  if (!blockElement) {
+  const rootBlockElement = blockElement?.parentElement;
+  if (!blockElement || !rootBlockElement) {
     return null;
   }
+  return createElement(GridItemResizerInner, {
+    clientId: clientId,
+    bounds: bounds,
+    blockElement: blockElement,
+    rootBlockElement: rootBlockElement,
+    onChange: onChange
+  });
+}
+function GridItemResizerInner({
+  clientId,
+  bounds,
+  blockElement,
+  rootBlockElement,
+  onChange
+}) {
+  const [resizeDirection, setResizeDirection] = useState(null);
+  const [enableSide, setEnableSide] = useState({
+    top: false,
+    bottom: false,
+    left: false,
+    right: false
+  });
+  useEffect(() => {
+    const observer = new window.ResizeObserver(() => {
+      const blockClientRect = blockElement.getBoundingClientRect();
+      const rootBlockClientRect = rootBlockElement.getBoundingClientRect();
+      setEnableSide({
+        top: blockClientRect.top > rootBlockClientRect.top,
+        bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
+        left: blockClientRect.left > rootBlockClientRect.left,
+        right: blockClientRect.right < rootBlockClientRect.right
+      });
+    });
+    observer.observe(blockElement);
+    return () => observer.disconnect();
+  }, [blockElement, rootBlockElement]);
+  const justification = {
+    right: 'flex-start',
+    left: 'flex-end'
+  };
+  const alignment = {
+    top: 'flex-end',
+    bottom: 'flex-start'
+  };
+  const styles = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...(justification[resizeDirection] && {
+      justifyContent: justification[resizeDirection]
+    }),
+    ...(alignment[resizeDirection] && {
+      alignItems: alignment[resizeDirection]
+    })
+  };
   return createElement(BlockPopoverCover, {
     className: "block-editor-grid-item-resizer",
     clientId: clientId,
-    __unstablePopoverSlot: "block-toolbar"
+    __unstablePopoverSlot: "block-toolbar",
+    additionalStyles: styles
   }, createElement(ResizableBox, {
     className: "block-editor-grid-item-resizer__box",
     size: {
@@ -29,41 +88,99 @@ export function GridItemResizer({
       height: '100%'
     },
     enable: {
-      bottom: true,
+      bottom: enableSide.bottom,
       bottomLeft: false,
       bottomRight: false,
-      left: false,
-      right: true,
-      top: false,
+      left: enableSide.left,
+      right: enableSide.right,
+      top: enableSide.top,
       topLeft: false,
       topRight: false
     },
+    bounds: bounds,
+    boundsByDirection: true,
+    onResizeStart: (event, direction) => {
+      /*
+       * The container justification and alignment need to be set
+       * according to the direction the resizer is being dragged in,
+       * so that it resizes in the right direction.
+       */
+      setResizeDirection(direction);
+
+      /*
+       * The mouseup event on the resize handle doesn't trigger if the mouse
+       * isn't directly above the handle, so we try to detect if it happens
+       * outside the grid and dispatch a mouseup event on the handle.
+       */
+      blockElement.ownerDocument.addEventListener('mouseup', () => {
+        event.target.dispatchEvent(new Event('mouseup', {
+          bubbles: true
+        }));
+      }, {
+        once: true
+      });
+    },
     onResizeStop: (event, direction, boxElement) => {
-      const gridElement = blockElement.parentElement;
-      const columnGap = parseFloat(getComputedCSS(gridElement, 'column-gap'));
-      const rowGap = parseFloat(getComputedCSS(gridElement, 'row-gap'));
-      const gridColumnLines = getGridLines(getComputedCSS(gridElement, 'grid-template-columns'), columnGap);
-      const gridRowLines = getGridLines(getComputedCSS(gridElement, 'grid-template-rows'), rowGap);
-      const columnStart = getClosestLine(gridColumnLines, blockElement.offsetLeft);
-      const rowStart = getClosestLine(gridRowLines, blockElement.offsetTop);
-      const columnEnd = getClosestLine(gridColumnLines, blockElement.offsetLeft + boxElement.offsetWidth);
-      const rowEnd = getClosestLine(gridRowLines, blockElement.offsetTop + boxElement.offsetHeight);
+      const columnGap = parseFloat(getComputedCSS(rootBlockElement, 'column-gap'));
+      const rowGap = parseFloat(getComputedCSS(rootBlockElement, 'row-gap'));
+      const gridColumnTracks = getGridTracks(getComputedCSS(rootBlockElement, 'grid-template-columns'), columnGap);
+      const gridRowTracks = getGridTracks(getComputedCSS(rootBlockElement, 'grid-template-rows'), rowGap);
+      const rect = new window.DOMRect(blockElement.offsetLeft + boxElement.offsetLeft, blockElement.offsetTop + boxElement.offsetTop, boxElement.offsetWidth, boxElement.offsetHeight);
+      const columnStart = getClosestTrack(gridColumnTracks, rect.left) + 1;
+      const rowStart = getClosestTrack(gridRowTracks, rect.top) + 1;
+      const columnEnd = getClosestTrack(gridColumnTracks, rect.right, 'end') + 1;
+      const rowEnd = getClosestTrack(gridRowTracks, rect.bottom, 'end') + 1;
       onChange({
-        columnSpan: Math.max(columnEnd - columnStart, 1),
-        rowSpan: Math.max(rowEnd - rowStart, 1)
+        columnSpan: columnEnd - columnStart + 1,
+        rowSpan: rowEnd - rowStart + 1
       });
     }
   }));
 }
-function getGridLines(template, gap) {
-  const lines = [0];
+
+/**
+ * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
+ * position in pixels of each grid track.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
+ *                          Only supports fixed sizes in pixels.
+ * @param {number} gap      The gap between grid tracks in pixels.
+ *
+ * @return {Array<{start: number, end: number}>} An array of objects with the start and end
+ *                                               position in pixels of each grid track.
+ */
+function getGridTracks(template, gap) {
+  const tracks = [];
   for (const size of template.split(' ')) {
-    const line = parseFloat(size);
-    lines.push(lines[lines.length - 1] + line + gap);
+    const previousTrack = tracks[tracks.length - 1];
+    const start = previousTrack ? previousTrack.end + gap : 0;
+    const end = start + parseFloat(size);
+    tracks.push({
+      start,
+      end
+    });
   }
-  return lines;
+  return tracks;
 }
-function getClosestLine(lines, position) {
-  return lines.reduce((closest, line, index) => Math.abs(line - position) < Math.abs(lines[closest] - position) ? index : closest, 0);
+
+/**
+ * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
+ * that position.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
+ *                                                       position in pixels of each grid track.
+ * @param {number}                              position The position in pixels.
+ * @param {string}                              edge     The edge of the track to compare the
+ *                                                       position to. Either 'start' or 'end'.
+ *
+ * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
+ *                  is 1-based.
+ */
+function getClosestTrack(tracks, position, edge = 'start') {
+  return tracks.reduce((closest, track, index) => Math.abs(track[edge] - position) < Math.abs(tracks[closest][edge] - position) ? index : closest, 0);
 }
 //# sourceMappingURL=grid-item-resizer.js.map

package/build-module/components/grid-visualizer/grid-item-resizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["ResizableBox","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","getComputedCSS","GridItemResizer","clientId","onChange","blockElement","createElement","className","__unstablePopoverSlot","size","width","height","enable","bottom","bottomLeft","bottomRight","left","right","top","topLeft","topRight","onResizeStop","event","direction","boxElement","gridElement","parentElement","columnGap","parseFloat","rowGap","gridColumnLines","getGridLines","gridRowLines","columnStart","getClosestLine","offsetLeft","rowStart","offsetTop","columnEnd","offsetWidth","rowEnd","offsetHeight","columnSpan","Math","max","rowSpan","template","gap","lines","split","line","push","length","position","reduce","closest","index","abs"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-item-resizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS } from './utils';\n\nexport function GridItemResizer( { clientId, onChange } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tif ( ! blockElement ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: true,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: false,\n\t\t\t\t\tright: true,\n\t\t\t\t\ttop: false,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst gridElement = blockElement.parentElement;\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( gridElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( gridElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnLines = getGridLines(\n\t\t\t\t\t\tgetComputedCSS( gridElement, 'grid-template-columns' ),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowLines = getGridLines(\n\t\t\t\t\t\tgetComputedCSS( gridElement, 'grid-template-rows' ),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart = getClosestLine(\n\t\t\t\t\t\tgridColumnLines,\n\t\t\t\t\t\tblockElement.offsetLeft\n\t\t\t\t\t);\n\t\t\t\t\tconst rowStart = getClosestLine(\n\t\t\t\t\t\tgridRowLines,\n\t\t\t\t\t\tblockElement.offsetTop\n\t\t\t\t\t);\n\t\t\t\t\tconst columnEnd = getClosestLine(\n\t\t\t\t\t\tgridColumnLines,\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetWidth\n\t\t\t\t\t);\n\t\t\t\t\tconst rowEnd = getClosestLine(\n\t\t\t\t\t\tgridRowLines,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: Math.max( columnEnd - columnStart, 1 ),\n\t\t\t\t\t\trowSpan: Math.max( rowEnd - rowStart, 1 ),\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\nfunction getGridLines( template, gap ) {\n\tconst lines = [ 0 ];\n\tfor ( const size of template.split( ' ' ) ) {\n\t\tconst line = parseFloat( size );\n\t\tlines.push( lines[ lines.length - 1 ] + line + gap );\n\t}\n\treturn lines;\n}\n\nfunction getClosestLine( lines, position ) {\n\treturn lines.reduce(\n\t\t( closest, line, index ) =>\n\t\t\tMath.abs( line - position ) <\n\t\t\tMath.abs( lines[ closest ] - position )\n\t\t\t\t? index\n\t\t\t\t: closest,\n\t\t0\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,uBAAuB;;AAEpD;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,8CAA8C;AAC3G,OAAOC,iBAAiB,MAAM,wBAAwB;AACtD,SAASC,cAAc,QAAQ,SAAS;AAExC,OAAO,SAASC,eAAeA,CAAE;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACzD,MAAMC,YAAY,GAAGN,eAAe,CAAEI,QAAS,CAAC;EAChD,IAAK,CAAEE,YAAY,EAAG;IACrB,OAAO,IAAI;EACZ;EACA,OACCC,aAAA,CAACN,iBAAiB;IACjBO,SAAS,EAAC,gCAAgC;IAC1CJ,QAAQ,EAAGA,QAAU;IACrBK,qBAAqB,EAAC;EAAe,GAErCF,aAAA,CAACT,YAAY;IACZU,SAAS,EAAC,qCAAqC;IAC/CE,IAAI,EAAG;MACNC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE;IACT,CAAG;IACHC,MAAM,EAAG;MACRC,MAAM,EAAE,IAAI;MACZC,UAAU,EAAE,KAAK;MACjBC,WAAW,EAAE,KAAK;MAClBC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE,IAAI;MACXC,GAAG,EAAE,KAAK;MACVC,OAAO,EAAE,KAAK;MACdC,QAAQ,EAAE;IACX,CAAG;IACHC,YAAY,EAAGA,CAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,KAAM;MAClD,MAAMC,WAAW,GAAGpB,YAAY,CAACqB,aAAa;MAC9C,MAAMC,SAAS,GAAGC,UAAU,CAC3B3B,cAAc,CAAEwB,WAAW,EAAE,YAAa,CAC3C,CAAC;MACD,MAAMI,MAAM,GAAGD,UAAU,CACxB3B,cAAc,CAAEwB,WAAW,EAAE,SAAU,CACxC,CAAC;MACD,MAAMK,eAAe,GAAGC,YAAY,CACnC9B,cAAc,CAAEwB,WAAW,EAAE,uBAAwB,CAAC,EACtDE,SACD,CAAC;MACD,MAAMK,YAAY,GAAGD,YAAY,CAChC9B,cAAc,CAAEwB,WAAW,EAAE,oBAAqB,CAAC,EACnDI,MACD,CAAC;MACD,MAAMI,WAAW,GAAGC,cAAc,CACjCJ,eAAe,EACfzB,YAAY,CAAC8B,UACd,CAAC;MACD,MAAMC,QAAQ,GAAGF,cAAc,CAC9BF,YAAY,EACZ3B,YAAY,CAACgC,SACd,CAAC;MACD,MAAMC,SAAS,GAAGJ,cAAc,CAC/BJ,eAAe,EACfzB,YAAY,CAAC8B,UAAU,GAAGX,UAAU,CAACe,WACtC,CAAC;MACD,MAAMC,MAAM,GAAGN,cAAc,CAC5BF,YAAY,EACZ3B,YAAY,CAACgC,SAAS,GAAGb,UAAU,CAACiB,YACrC,CAAC;MACDrC,QAAQ,CAAE;QACTsC,UAAU,EAAEC,IAAI,CAACC,GAAG,CAAEN,SAAS,GAAGL,WAAW,EAAE,CAAE,CAAC;QAClDY,OAAO,EAAEF,IAAI,CAACC,GAAG,CAAEJ,MAAM,GAAGJ,QAAQ,EAAE,CAAE;MACzC,CAAE,CAAC;IACJ;EAAG,CACH,CACiB,CAAC;AAEtB;AAEA,SAASL,YAAYA,CAAEe,QAAQ,EAAEC,GAAG,EAAG;EACtC,MAAMC,KAAK,GAAG,CAAE,CAAC,CAAE;EACnB,KAAM,MAAMvC,IAAI,IAAIqC,QAAQ,CAACG,KAAK,CAAE,GAAI,CAAC,EAAG;IAC3C,MAAMC,IAAI,GAAGtB,UAAU,CAAEnB,IAAK,CAAC;IAC/BuC,KAAK,CAACG,IAAI,CAAEH,KAAK,CAAEA,KAAK,CAACI,MAAM,GAAG,CAAC,CAAE,GAAGF,IAAI,GAAGH,GAAI,CAAC;EACrD;EACA,OAAOC,KAAK;AACb;AAEA,SAASd,cAAcA,CAAEc,KAAK,EAAEK,QAAQ,EAAG;EAC1C,OAAOL,KAAK,CAACM,MAAM,CAClB,CAAEC,OAAO,EAAEL,IAAI,EAAEM,KAAK,KACrBb,IAAI,CAACc,GAAG,CAAEP,IAAI,GAAGG,QAAS,CAAC,GAC3BV,IAAI,CAACc,GAAG,CAAET,KAAK,CAAEO,OAAO,CAAE,GAAGF,QAAS,CAAC,GACpCG,KAAK,GACLD,OAAO,EACX,CACD,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["ResizableBox","useState","useEffect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","getComputedCSS","GridItemResizer","clientId","bounds","onChange","blockElement","rootBlockElement","parentElement","createElement","GridItemResizerInner","resizeDirection","setResizeDirection","enableSide","setEnableSide","top","bottom","left","right","observer","window","ResizeObserver","blockClientRect","getBoundingClientRect","rootBlockClientRect","observe","disconnect","justification","alignment","styles","display","justifyContent","alignItems","className","__unstablePopoverSlot","additionalStyles","size","width","height","enable","bottomLeft","bottomRight","topLeft","topRight","boundsByDirection","onResizeStart","event","direction","ownerDocument","addEventListener","target","dispatchEvent","Event","bubbles","once","onResizeStop","boxElement","columnGap","parseFloat","rowGap","gridColumnTracks","getGridTracks","gridRowTracks","rect","DOMRect","offsetLeft","offsetTop","offsetWidth","offsetHeight","columnStart","getClosestTrack","rowStart","columnEnd","rowEnd","columnSpan","rowSpan","template","gap","tracks","split","previousTrack","length","start","end","push","position","edge","reduce","closest","track","index","Math","abs"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-item-resizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS } from './utils';\n\nexport function GridItemResizer( { clientId, bounds, onChange } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: blockClientRect.top > rootBlockClientRect.top,\n\t\t\t\tbottom: blockClientRect.bottom < rootBlockClientRect.bottom,\n\t\t\t\tleft: blockClientRect.left > rootBlockClientRect.left,\n\t\t\t\tright: blockClientRect.right < rootBlockClientRect.right,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement ] );\n\n\tconst justification = {\n\t\tright: 'flex-start',\n\t\tleft: 'flex-end',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\n\t\t\t\t\t/*\n\t\t\t\t\t * The mouseup event on the resize handle doesn't trigger if the mouse\n\t\t\t\t\t * isn't directly above the handle, so we try to detect if it happens\n\t\t\t\t\t * outside the grid and dispatch a mouseup event on the handle.\n\t\t\t\t\t */\n\t\t\t\t\tblockElement.ownerDocument.addEventListener(\n\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\tevent.target.dispatchEvent(\n\t\t\t\t\t\t\t\tnew Event( 'mouseup', { bubbles: true } )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\n/**\n * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end\n * position in pixels of each grid track.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {string} template The grid-template-columns or grid-template-rows CSS property value.\n *                          Only supports fixed sizes in pixels.\n * @param {number} gap      The gap between grid tracks in pixels.\n *\n * @return {Array<{start: number, end: number}>} An array of objects with the start and end\n *                                               position in pixels of each grid track.\n */\nfunction getGridTracks( template, gap ) {\n\tconst tracks = [];\n\tfor ( const size of template.split( ' ' ) ) {\n\t\tconst previousTrack = tracks[ tracks.length - 1 ];\n\t\tconst start = previousTrack ? previousTrack.end + gap : 0;\n\t\tconst end = start + parseFloat( size );\n\t\ttracks.push( { start, end } );\n\t}\n\treturn tracks;\n}\n\n/**\n * Given an array of grid tracks and a position in pixels, gets the index of the closest track to\n * that position.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end\n *                                                       position in pixels of each grid track.\n * @param {number}                              position The position in pixels.\n * @param {string}                              edge     The edge of the track to compare the\n *                                                       position to. Either 'start' or 'end'.\n *\n * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which\n *                  is 1-based.\n */\nfunction getClosestTrack( tracks, position, edge = 'start' ) {\n\treturn tracks.reduce(\n\t\t( closest, track, index ) =>\n\t\t\tMath.abs( track[ edge ] - position ) <\n\t\t\tMath.abs( tracks[ closest ][ edge ] - position )\n\t\t\t\t? index\n\t\t\t\t: closest,\n\t\t0\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/grid-visualizer/grid-visualizer.js

@@ -2,19 +2,23 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
+import { store as blockEditorStore } from '../../store';
 import { getComputedCSS } from './utils';
 export function GridVisualizer({
-  clientId
+  clientId,
+  contentRef
 }) {
+  const isDistractionFree = useSelect(select => select(blockEditorStore).getSettings().isDistractionFree, []);
   const blockElement = useBlockElement(clientId);
-  if (!blockElement) {
+  if (isDistractionFree || !blockElement) {
     return null;
   }
   return createElement(BlockPopoverCover, {
@@ -22,12 +26,13 @@ export function GridVisualizer({
     clientId: clientId,
     __unstablePopoverSlot: "block-toolbar"
   }, createElement(GridVisualizerGrid, {
+    ref: contentRef,
     blockElement: blockElement
   }));
 }
-function GridVisualizerGrid({
+const GridVisualizerGrid = forwardRef(({
   blockElement
-}) {
+}, ref) => {
   const [gridInfo, setGridInfo] = useState(() => getGridInfo(blockElement));
   useEffect(() => {
     const observers = [];
@@ -45,6 +50,7 @@ function GridVisualizerGrid({
     };
   }, [blockElement]);
   return createElement("div", {
+    ref: ref,
     className: "block-editor-grid-visualizer__grid",
     style: gridInfo.style
   }, Array.from({
@@ -53,7 +59,7 @@ function GridVisualizerGrid({
     key: i,
     className: "block-editor-grid-visualizer__item"
   })));
-}
+});
 function getGridInfo(blockElement) {
   const gridTemplateColumns = getComputedCSS(blockElement, 'grid-template-columns');
   const gridTemplateRows = getComputedCSS(blockElement, 'grid-template-rows');

package/build-module/components/grid-visualizer/grid-visualizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useEffect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","getComputedCSS","GridVisualizer","clientId","blockElement","createElement","className","__unstablePopoverSlot","GridVisualizerGrid","gridInfo","setGridInfo","getGridInfo","observers","element","children","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","key","gridTemplateColumns","gridTemplateRows","numColumns","split","numRows","gap","padding"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-visualizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS } from './utils';\n\nexport function GridVisualizer( { clientId } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tif ( ! blockElement ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-visualizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t>\n\t\t\t<GridVisualizerGrid blockElement={ blockElement } />\n\t\t</BlockPopoverCover>\n\t);\n}\n\nfunction GridVisualizerGrid( { blockElement } ) {\n\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\tgetGridInfo( blockElement )\n\t);\n\tuseEffect( () => {\n\t\tconst observers = [];\n\t\tfor ( const element of [ blockElement, ...blockElement.children ] ) {\n\t\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\t\tsetGridInfo( getGridInfo( blockElement ) );\n\t\t\t} );\n\t\t\tobserver.observe( element );\n\t\t\tobservers.push( observer );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const observer of observers ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ blockElement ] );\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\tstyle={ gridInfo.style }\n\t\t>\n\t\t\t{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (\n\t\t\t\t<div key={ i } className=\"block-editor-grid-visualizer__item\" />\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nfunction getGridInfo( blockElement ) {\n\tconst gridTemplateColumns = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-columns'\n\t);\n\tconst gridTemplateRows = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-rows'\n\t);\n\tconst numColumns = gridTemplateColumns.split( ' ' ).length;\n\tconst numRows = gridTemplateRows.split( ' ' ).length;\n\tconst numItems = numColumns * numRows;\n\treturn {\n\t\tnumItems,\n\t\tstyle: {\n\t\t\tgridTemplateColumns,\n\t\t\tgridTemplateRows,\n\t\t\tgap: getComputedCSS( blockElement, 'gap' ),\n\t\t\tpadding: getComputedCSS( blockElement, 'padding' ),\n\t\t},\n\t};\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,8CAA8C;AAC3G,OAAOC,iBAAiB,MAAM,wBAAwB;AACtD,SAASC,cAAc,QAAQ,SAAS;AAExC,OAAO,SAASC,cAAcA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAC9C,MAAMC,YAAY,GAAGL,eAAe,CAAEI,QAAS,CAAC;EAChD,IAAK,CAAEC,YAAY,EAAG;IACrB,OAAO,IAAI;EACZ;EACA,OACCC,aAAA,CAACL,iBAAiB;IACjBM,SAAS,EAAC,8BAA8B;IACxCH,QAAQ,EAAGA,QAAU;IACrBI,qBAAqB,EAAC;EAAe,GAErCF,aAAA,CAACG,kBAAkB;IAACJ,YAAY,EAAGA;EAAc,CAAE,CACjC,CAAC;AAEtB;AAEA,SAASI,kBAAkBA,CAAE;EAAEJ;AAAa,CAAC,EAAG;EAC/C,MAAM,CAAEK,QAAQ,EAAEC,WAAW,CAAE,GAAGd,QAAQ,CAAE,MAC3Ce,WAAW,CAAEP,YAAa,CAC3B,CAAC;EACDP,SAAS,CAAE,MAAM;IAChB,MAAMe,SAAS,GAAG,EAAE;IACpB,KAAM,MAAMC,OAAO,IAAI,CAAET,YAAY,EAAE,GAAGA,YAAY,CAACU,QAAQ,CAAE,EAAG;MACnE,MAAMC,QAAQ,GAAG,IAAIC,MAAM,CAACC,cAAc,CAAE,MAAM;QACjDP,WAAW,CAAEC,WAAW,CAAEP,YAAa,CAAE,CAAC;MAC3C,CAAE,CAAC;MACHW,QAAQ,CAACG,OAAO,CAAEL,OAAQ,CAAC;MAC3BD,SAAS,CAACO,IAAI,CAAEJ,QAAS,CAAC;IAC3B;IACA,OAAO,MAAM;MACZ,KAAM,MAAMA,QAAQ,IAAIH,SAAS,EAAG;QACnCG,QAAQ,CAACK,UAAU,CAAC,CAAC;MACtB;IACD,CAAC;EACF,CAAC,EAAE,CAAEhB,YAAY,CAAG,CAAC;EACrB,OACCC,aAAA;IACCC,SAAS,EAAC,oCAAoC;IAC9Ce,KAAK,EAAGZ,QAAQ,CAACY;EAAO,GAEtBC,KAAK,CAACC,IAAI,CAAE;IAAEC,MAAM,EAAEf,QAAQ,CAACgB;EAAS,CAAC,EAAE,CAAEC,CAAC,EAAEC,CAAC,KAClDtB,aAAA;IAAKuB,GAAG,EAAGD,CAAG;IAACrB,SAAS,EAAC;EAAoC,CAAE,CAC9D,CACE,CAAC;AAER;AAEA,SAASK,WAAWA,CAAEP,YAAY,EAAG;EACpC,MAAMyB,mBAAmB,GAAG5B,cAAc,CACzCG,YAAY,EACZ,uBACD,CAAC;EACD,MAAM0B,gBAAgB,GAAG7B,cAAc,CACtCG,YAAY,EACZ,oBACD,CAAC;EACD,MAAM2B,UAAU,GAAGF,mBAAmB,CAACG,KAAK,CAAE,GAAI,CAAC,CAACR,MAAM;EAC1D,MAAMS,OAAO,GAAGH,gBAAgB,CAACE,KAAK,CAAE,GAAI,CAAC,CAACR,MAAM;EACpD,MAAMC,QAAQ,GAAGM,UAAU,GAAGE,OAAO;EACrC,OAAO;IACNR,QAAQ;IACRJ,KAAK,EAAE;MACNQ,mBAAmB;MACnBC,gBAAgB;MAChBI,GAAG,EAAEjC,cAAc,CAAEG,YAAY,EAAE,KAAM,CAAC;MAC1C+B,OAAO,EAAElC,cAAc,CAAEG,YAAY,EAAE,SAAU;IAClD;EACD,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["useState","useEffect","forwardRef","useSelect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","store","blockEditorStore","getComputedCSS","GridVisualizer","clientId","contentRef","isDistractionFree","select","getSettings","blockElement","createElement","className","__unstablePopoverSlot","GridVisualizerGrid","ref","gridInfo","setGridInfo","getGridInfo","observers","element","children","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","key","gridTemplateColumns","gridTemplateRows","numColumns","split","numRows","gap","padding"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-visualizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { store as blockEditorStore } from '../../store';\nimport { getComputedCSS } from './utils';\n\nexport function GridVisualizer( { clientId, contentRef } ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst blockElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-visualizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t>\n\t\t\t<GridVisualizerGrid\n\t\t\t\tref={ contentRef }\n\t\t\t\tblockElement={ blockElement }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {\n\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\tgetGridInfo( blockElement )\n\t);\n\tuseEffect( () => {\n\t\tconst observers = [];\n\t\tfor ( const element of [ blockElement, ...blockElement.children ] ) {\n\t\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\t\tsetGridInfo( getGridInfo( blockElement ) );\n\t\t\t} );\n\t\t\tobserver.observe( element );\n\t\t\tobservers.push( observer );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const observer of observers ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ blockElement ] );\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\tstyle={ gridInfo.style }\n\t\t>\n\t\t\t{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (\n\t\t\t\t<div key={ i } className=\"block-editor-grid-visualizer__item\" />\n\t\t\t) ) }\n\t\t</div>\n\t);\n} );\n\nfunction getGridInfo( blockElement ) {\n\tconst gridTemplateColumns = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-columns'\n\t);\n\tconst gridTemplateRows = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-rows'\n\t);\n\tconst numColumns = gridTemplateColumns.split( ' ' ).length;\n\tconst numRows = gridTemplateRows.split( ' ' ).length;\n\tconst numItems = numColumns * numRows;\n\treturn {\n\t\tnumItems,\n\t\tstyle: {\n\t\t\tgridTemplateColumns,\n\t\t\tgridTemplateRows,\n\t\t\tgap: getComputedCSS( blockElement, 'gap' ),\n\t\t\tpadding: getComputedCSS( blockElement, 'padding' ),\n\t\t},\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/iframe/index.js

@@ -2,12 +2,12 @@ import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useState, createPortal, forwardRef, useMemo, useEffect } from '@wordpress/element';
+import { useState, createPortal, forwardRef, useMemo, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useResizeObserver, useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
@@ -117,12 +117,15 @@ function Iframe({
     scripts = ''
   } = resolvedAssets;
   const [iframeDocument, setIframeDocument] = useState();
+  const prevContainerWidth = useRef();
   const [bodyClasses, setBodyClasses] = useState([]);
   const clearerRef = useBlockSelectionClearer();
   const [before, writingFlowRef, after] = useWritingFlow();
   const [contentResizeListener, {
-    height: contentHeight,
-    width: contentWidth
+    height: contentHeight
+  }] = useResizeObserver();
+  const [containerResizeListener, {
+    width: containerWidth
   }] = useResizeObserver();
   const setRef = useRefEffect(node => {
     node._load = () => {
@@ -171,8 +174,10 @@ function Iframe({
       iFrameDocument?.removeEventListener('drop', preventFileDropDefault);
     };
   }, []);
-  const windowResizeRef = useRefEffect(node => {
+  const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = useState();
+  const iframeResizeRef = useRefEffect(node => {
     const nodeWindow = node.ownerDocument.defaultView;
+    setIframeWindowInnerHeight(nodeWindow.innerHeight);
     const onResize = () => {
       setIframeWindowInnerHeight(nodeWindow.innerHeight);
     };
@@ -181,7 +186,24 @@ function Iframe({
       nodeWindow.removeEventListener('resize', onResize);
     };
   }, []);
-  const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = useState();
+  const [windowInnerWidth, setWindowInnerWidth] = useState();
+  const windowResizeRef = useRefEffect(node => {
+    const nodeWindow = node.ownerDocument.defaultView;
+    setWindowInnerWidth(nodeWindow.innerWidth);
+    const onResize = () => {
+      setWindowInnerWidth(nodeWindow.innerWidth);
+    };
+    nodeWindow.addEventListener('resize', onResize);
+    return () => {
+      nodeWindow.removeEventListener('resize', onResize);
+    };
+  }, []);
+  const isZoomedOut = scale !== 1;
+  useEffect(() => {
+    if (!isZoomedOut) {
+      prevContainerWidth.current = containerWidth;
+    }
+  }, [containerWidth, isZoomedOut]);
   const disabledRef = useDisabled({
     isDisabled: !readonly
   });
@@ -189,7 +211,7 @@ function Iframe({
   // Avoid resize listeners when not needed, these will trigger
   // unnecessary re-renders when animating the iframe width, or when
   // expanding preview iframes.
-  scale === 1 ? null : windowResizeRef]);
+  isZoomedOut ? iframeResizeRef : null]);
 
   // Correct doctype is required to enable rendering in standards
   // mode. Also preload the styles to avoid a flash of unstyled
@@ -226,36 +248,33 @@ function Iframe({
     return [_src, () => URL.revokeObjectURL(_src)];
   }, [html]);
   useEffect(() => cleanup, [cleanup]);
-  scale = typeof scale === 'function' ? scale(contentWidth, contentHeight) : scale;
   useEffect(() => {
-    if (!iframeDocument) {
+    if (!iframeDocument || !isZoomedOut) {
       return;
     }
-    if (scale !== 1) {
-      // Hack to get proper margins when scaling the iframe document.
-      const bottomFrameSize = frameSize - contentHeight * (1 - scale);
-      iframeDocument.body.classList.add('is-zoomed-out');
-      iframeDocument.documentElement.style.transform = `scale( ${scale} )`;
-      iframeDocument.documentElement.style.marginTop = `${frameSize}px`;
-      // TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
-      iframeDocument.documentElement.style.marginBottom = `${bottomFrameSize}px`;
-      if (iframeWindowInnerHeight > contentHeight * scale) {
-        iframeDocument.body.style.minHeight = `${Math.floor((iframeWindowInnerHeight - 2 * frameSize) / scale)}px`;
-      }
-      return () => {
-        iframeDocument.body.classList.remove('is-zoomed-out');
-        iframeDocument.documentElement.style.transform = '';
-        iframeDocument.documentElement.style.marginTop = '';
-        iframeDocument.documentElement.style.marginBottom = '';
-        iframeDocument.body.style.minHeight = '';
-      };
-    }
-  }, [scale, frameSize, iframeDocument, contentHeight, iframeWindowInnerHeight, contentWidth]);
+    iframeDocument.documentElement.classList.add('is-zoomed-out');
+    const maxWidth = 800;
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scale === 'default' ? Math.min(containerWidth, maxWidth) / prevContainerWidth.current : scale);
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', typeof frameSize === 'number' ? `${frameSize}px` : frameSize);
+    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', `${iframeWindowInnerHeight}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-prev-container-width', `${prevContainerWidth.current}px`);
+    return () => {
+      iframeDocument.documentElement.classList.remove('is-zoomed-out');
+      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-prev-container-width');
+    };
+  }, [scale, frameSize, iframeDocument, iframeWindowInnerHeight, contentHeight, containerWidth, windowInnerWidth, isZoomedOut]);
 
   // Make sure to not render the before and after focusable div elements in view
   // mode. They're only needed to capture focus in edit mode.
   const shouldRenderFocusCaptureElements = tabIndex >= 0 && !isPreviewMode;
-  return createElement(Fragment, null, shouldRenderFocusCaptureElements && before, createElement("iframe", {
+  const iframe = createElement(Fragment, null, shouldRenderFocusCaptureElements && before, createElement("iframe", {
     ...props,
     style: {
       border: 0,
@@ -282,7 +301,17 @@ function Iframe({
       // so we need to stop the propagation of this event to avoid
       // duplication.
       if (event.currentTarget.ownerDocument !== event.target.ownerDocument) {
+        // We should only stop propagation of the React event,
+        // the native event should further bubble inside the
+        // iframe to the document and window.
+        // Alternatively, we could consider redispatching the
+        // native event in the iframe.
+        const {
+          stopPropagation
+        } = event.nativeEvent;
+        event.nativeEvent.stopPropagation = () => {};
         event.stopPropagation();
+        event.nativeEvent.stopPropagation = stopPropagation;
         bubbleEvent(event, window.KeyboardEvent, event.currentTarget);
       }
     }
@@ -292,10 +321,20 @@ function Iframe({
   /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
   createElement("body", {
     ref: bodyRef,
-    className: classnames('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses)
+    className: clsx('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses)
   }, contentResizeListener, createElement(StyleProvider, {
     document: iframeDocument
   }, children)), iframeDocument.documentElement)), shouldRenderFocusCaptureElements && after);
+  return createElement("div", {
+    className: "block-editor-iframe__container",
+    ref: windowResizeRef
+  }, containerResizeListener, createElement("div", {
+    className: clsx('block-editor-iframe__scale-container', isZoomedOut && 'is-zoomed-out'),
+    style: {
+      '--wp-block-editor-iframe-zoom-out-container-width': isZoomedOut && `${containerWidth}px`,
+      '--wp-block-editor-iframe-zoom-out-prev-container-width': isZoomedOut && `${prevContainerWidth.current}px`
+    }
+  }, iframe));
 }
 function IframeIfReady(props, ref) {
   const isInitialised = useSelect(select => select(blockEditorStore).getSettings().__internalIsInitialized, []);