@wordpress/block-editor 12.25.0 → 12.26.0

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":"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","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":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AACpE,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,8CAA8C;AAC3G,OAAOC,iBAAiB,MAAM,wBAAwB;AACtD,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,SAASC,cAAc,QAAQ,SAAS;AAExC,OAAO,SAASC,cAAcA,CAAE;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAG;EAC1D,MAAMC,iBAAiB,GAAGV,SAAS,CAChCW,MAAM,IACPA,MAAM,CAAEN,gBAAiB,CAAC,CAACO,WAAW,CAAC,CAAC,CAACF,iBAAiB,EAC3D,EACD,CAAC;EACD,MAAMG,YAAY,GAAGX,eAAe,CAAEM,QAAS,CAAC;EAEhD,IAAKE,iBAAiB,IAAI,CAAEG,YAAY,EAAG;IAC1C,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAACX,iBAAiB;IACjBY,SAAS,EAAC,8BAA8B;IACxCP,QAAQ,EAAGA,QAAU;IACrBQ,qBAAqB,EAAC;EAAe,GAErCF,aAAA,CAACG,kBAAkB;IAClBC,GAAG,EAAGT,UAAY;IAClBI,YAAY,EAAGA;EAAc,CAC7B,CACiB,CAAC;AAEtB;AAEA,MAAMI,kBAAkB,GAAGlB,UAAU,CAAE,CAAE;EAAEc;AAAa,CAAC,EAAEK,GAAG,KAAM;EACnE,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAGvB,QAAQ,CAAE,MAC3CwB,WAAW,CAAER,YAAa,CAC3B,CAAC;EACDf,SAAS,CAAE,MAAM;IAChB,MAAMwB,SAAS,GAAG,EAAE;IACpB,KAAM,MAAMC,OAAO,IAAI,CAAEV,YAAY,EAAE,GAAGA,YAAY,CAACW,QAAQ,CAAE,EAAG;MACnE,MAAMC,QAAQ,GAAG,IAAIC,MAAM,CAACC,cAAc,CAAE,MAAM;QACjDP,WAAW,CAAEC,WAAW,CAAER,YAAa,CAAE,CAAC;MAC3C,CAAE,CAAC;MACHY,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,CAAEjB,YAAY,CAAG,CAAC;EACrB,OACCC,aAAA;IACCI,GAAG,EAAGA,GAAK;IACXH,SAAS,EAAC,oCAAoC;IAC9CgB,KAAK,EAAGZ,QAAQ,CAACY;EAAO,GAEtBC,KAAK,CAACC,IAAI,CAAE;IAAEC,MAAM,EAAEf,QAAQ,CAACgB;EAAS,CAAC,EAAE,CAAEC,CAAC,EAAEC,CAAC,KAClDvB,aAAA;IAAKwB,GAAG,EAAGD,CAAG;IAACtB,SAAS,EAAC;EAAoC,CAAE,CAC9D,CACE,CAAC;AAER,CAAE,CAAC;AAEH,SAASM,WAAWA,CAAER,YAAY,EAAG;EACpC,MAAM0B,mBAAmB,GAAGjC,cAAc,CACzCO,YAAY,EACZ,uBACD,CAAC;EACD,MAAM2B,gBAAgB,GAAGlC,cAAc,CACtCO,YAAY,EACZ,oBACD,CAAC;EACD,MAAM4B,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,EAAEtC,cAAc,CAAEO,YAAY,EAAE,KAAM,CAAC;MAC1CgC,OAAO,EAAEvC,cAAc,CAAEO,YAAY,EAAE,SAAU;IAClD;EACD,CAAC;AACF","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, []);

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","createPortal","forwardRef","useMemo","useEffect","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","scale","frameSize","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","select","getSettings","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","width","contentWidth","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","windowResizeRef","nodeWindow","onResize","setIframeWindowInnerHeight","innerHeight","iframeWindowInnerHeight","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","bottomFrameSize","style","transform","marginTop","marginBottom","minHeight","Math","floor","remove","shouldRenderFocusCaptureElements","createElement","Fragment","border","transition","onKeyDown","currentTarget","target","stopPropagation","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\n\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tscale = 1,\n\tframeSize = 0,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight, width: contentWidth },\n\t] = useResizeObserver();\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t\t( name ) =>\n\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst windowResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tconst onResize = () => {\n\t\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t\t// Avoid resize listeners when not needed, these will trigger\n\t\t// unnecessary re-renders when animating the iframe width, or when\n\t\t// expanding preview iframes.\n\t\tscale === 1 ? null : windowResizeRef,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\t\t\t/* Lowest specificity to not override global styles */\n\t\t\t:where(body) {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\tscale =\n\t\ttypeof scale === 'function'\n\t\t\t? scale( contentWidth, contentHeight )\n\t\t\t: scale;\n\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( scale !== 1 ) {\n\t\t\t// Hack to get proper margins when scaling the iframe document.\n\t\t\tconst bottomFrameSize = frameSize - contentHeight * ( 1 - scale );\n\n\t\t\tiframeDocument.body.classList.add( 'is-zoomed-out' );\n\n\t\t\tiframeDocument.documentElement.style.transform = `scale( ${ scale } )`;\n\t\t\tiframeDocument.documentElement.style.marginTop = `${ frameSize }px`;\n\t\t\t// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.\n\t\t\tiframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;\n\t\t\tif ( iframeWindowInnerHeight > contentHeight * scale ) {\n\t\t\t\tiframeDocument.body.style.minHeight = `${ Math.floor(\n\t\t\t\t\t( iframeWindowInnerHeight - 2 * frameSize ) / scale\n\t\t\t\t) }px`;\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tiframeDocument.body.classList.remove( 'is-zoomed-out' );\n\t\t\t\tiframeDocument.documentElement.style.transform = '';\n\t\t\t\tiframeDocument.documentElement.style.marginTop = '';\n\t\t\t\tiframeDocument.documentElement.style.marginBottom = '';\n\t\t\t\tiframeDocument.body.style.minHeight = '';\n\t\t\t};\n\t\t}\n\t}, [\n\t\tscale,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tiframeWindowInnerHeight,\n\t\tcontentWidth,\n\t] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\treturn (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborder: 0,\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\ttransition: 'all .3s',\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","createPortal","forwardRef","useMemo","useEffect","useRef","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","scale","frameSize","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","select","getSettings","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","prevContainerWidth","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","containerResizeListener","width","containerWidth","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","iframeWindowInnerHeight","setIframeWindowInnerHeight","iframeResizeRef","nodeWindow","innerHeight","onResize","windowInnerWidth","setWindowInnerWidth","windowResizeRef","innerWidth","isZoomedOut","current","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","maxWidth","style","setProperty","Math","min","remove","removeProperty","shouldRenderFocusCaptureElements","iframe","createElement","Fragment","border","transition","onKeyDown","currentTarget","target","stopPropagation","nativeEvent","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\n\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tscale = 1,\n\tframeSize = 0,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst prevContainerWidth = useRef();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t\t( name ) =>\n\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();\n\n\tconst iframeResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\tconst onResize = () => {\n\t\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst [ windowInnerWidth, setWindowInnerWidth ] = useState();\n\n\tconst windowResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\tconst onResize = () => {\n\t\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst isZoomedOut = scale !== 1;\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tprevContainerWidth.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t\t// Avoid resize listeners when not needed, these will trigger\n\t\t// unnecessary re-renders when animating the iframe width, or when\n\t\t// expanding preview iframes.\n\t\tisZoomedOut ? iframeResizeRef : null,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\t\t\t/* Lowest specificity to not override global styles */\n\t\t\t:where(body) {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument || ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\n\t\tconst maxWidth = 800;\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\tscale === 'default'\n\t\t\t\t? Math.min( containerWidth, maxWidth ) /\n\t\t\t\t\t\tprevContainerWidth.current\n\t\t\t\t: scale\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\ttypeof frameSize === 'number' ? `${ frameSize }px` : frameSize\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t`${ contentHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t`${ iframeWindowInnerHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t`${ containerWidth }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-prev-container-width',\n\t\t\t`${ prevContainerWidth.current }px`\n\t\t);\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-prev-container-width'\n\t\t\t);\n\t\t};\n\t}, [\n\t\tscale,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tiframeWindowInnerHeight,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\twindowInnerWidth,\n\t\tisZoomedOut,\n\t] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\tconst iframe = (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborder: 0,\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\ttransition: 'all .3s',\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\t// We should only stop propagation of the React event,\n\t\t\t\t\t\t// the native event should further bubble inside the\n\t\t\t\t\t\t// iframe to the document and window.\n\t\t\t\t\t\t// Alternatively, we could consider redispatching the\n\t\t\t\t\t\t// native event in the iframe.\n\t\t\t\t\t\tconst { stopPropagation } = event.nativeEvent;\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = () => {};\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = stopPropagation;\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className=\"block-editor-iframe__container\" ref={ windowResizeRef }>\n\t\t\t{ containerResizeListener }\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'block-editor-iframe__scale-container',\n\t\t\t\t\tisZoomedOut && 'is-zoomed-out'\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ containerWidth }px`,\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-prev-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ prevContainerWidth.current }px`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframe }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/image-editor/aspect-ratio-dropdown.js

@@ -9,9 +9,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 import { POPOVER_PROPS } from './constants';
 import { useImageEditingContext } from './context';
-function AspectGroup({
+function AspectRatioGroup({
   aspectRatios,
   isDisabled,
   label,
@@ -21,18 +22,37 @@ function AspectGroup({
   return createElement(MenuGroup, {
     label: label
   }, aspectRatios.map(({
-    title,
-    aspect
+    name,
+    slug,
+    ratio
   }) => createElement(MenuItem, {
-    key: aspect,
+    key: slug,
     disabled: isDisabled,
     onClick: () => {
-      onClick(aspect);
+      onClick(ratio);
     },
     role: "menuitemradio",
-    isSelected: aspect === value,
-    icon: aspect === value ? check : undefined
-  }, title)));
+    isSelected: ratio === value,
+    icon: ratio === value ? check : undefined
+  }, name)));
+}
+export function ratioToNumber(str) {
+  // TODO: support two-value aspect ratio?
+  // https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
+  const [a, b, ...rest] = str.split('/').map(Number);
+  if (a <= 0 || b <= 0 || Number.isNaN(a) || Number.isNaN(b) || rest.length) {
+    return NaN;
+  }
+  return b ? a / b : a;
+}
+function presetRatioAsNumber({
+  ratio,
+  ...rest
+}) {
+  return {
+    ratio: ratioToNumber(ratio),
+    ...rest
+  };
 }
 export default function AspectRatioDropdown({
   toggleProps
@@ -43,6 +63,7 @@ export default function AspectRatioDropdown({
     setAspect,
     defaultAspect
   } = useImageEditingContext();
+  const [defaultRatios, themeRatios, showDefaultRatios] = useSettings('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
   return createElement(DropdownMenu, {
     icon: aspectRatioIcon,
     label: __('Aspect Ratio'),
@@ -51,7 +72,7 @@ export default function AspectRatioDropdown({
     className: "wp-block-image__aspect-ratio"
   }, ({
     onClose
-  }) => createElement(Fragment, null, createElement(AspectGroup, {
+  }) => createElement(Fragment, null, createElement(AspectRatioGroup, {
     isDisabled: isInProgress,
     onClick: newAspect => {
       setAspect(newAspect);
@@ -61,13 +82,22 @@ export default function AspectRatioDropdown({
     aspectRatios: [
     // All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
     {
-      title: __('Original'),
+      slug: 'original',
+      name: __('Original'),
       aspect: defaultAspect
-    }, {
-      title: __('Square'),
-      aspect: 1
-    }]
-  }), createElement(AspectGroup, {
+    }, ...(showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({
+      ratio
+    }) => ratio === 1) : [])]
+  }), themeRatios?.length > 0 && createElement(AspectRatioGroup, {
+    label: __('Theme'),
+    isDisabled: isInProgress,
+    onClick: newAspect => {
+      setAspect(newAspect);
+      onClose();
+    },
+    value: aspect,
+    aspectRatios: themeRatios
+  }), showDefaultRatios && createElement(AspectRatioGroup, {
     label: __('Landscape'),
     isDisabled: isInProgress,
     onClick: newAspect => {
@@ -75,17 +105,10 @@ export default function AspectRatioDropdown({
       onClose();
     },
     value: aspect,
-    aspectRatios: [{
-      title: __('16:9'),
-      aspect: 16 / 9
-    }, {
-      title: __('4:3'),
-      aspect: 4 / 3
-    }, {
-      title: __('3:2'),
-      aspect: 3 / 2
-    }]
-  }), createElement(AspectGroup, {
+    aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
+      ratio
+    }) => ratio > 1)
+  }), showDefaultRatios && createElement(AspectRatioGroup, {
     label: __('Portrait'),
     isDisabled: isInProgress,
     onClick: newAspect => {
@@ -93,16 +116,9 @@ export default function AspectRatioDropdown({
       onClose();
     },
     value: aspect,
-    aspectRatios: [{
-      title: __('9:16'),
-      aspect: 9 / 16
-    }, {
-      title: __('3:4'),
-      aspect: 3 / 4
-    }, {
-      title: __('2:3'),
-      aspect: 2 / 3
-    }]
+    aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
+      ratio
+    }) => ratio < 1)
   })));
 }
 //# sourceMappingURL=aspect-ratio-dropdown.js.map