@wordpress/block-editor 12.26.0 → 13.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_useBlockRefs","_cover","_interopRequireDefault","_utils","GridItemResizer","clientId","bounds","onChange","blockElement","useBlockElement","rootBlockElement","parentElement","_react","createElement","GridItemResizerInner","resizeDirection","setResizeDirection","useState","enableSide","setEnableSide","top","bottom","left","right","useEffect","observer","window","ResizeObserver","blockClientRect","getBoundingClientRect","rootBlockClientRect","observe","disconnect","justification","alignment","styles","display","justifyContent","alignItems","default","className","__unstablePopoverSlot","additionalStyles","ResizableBox","size","width","height","enable","bottomLeft","bottomRight","topLeft","topRight","boundsByDirection","onResizeStart","event","direction","ownerDocument","addEventListener","target","dispatchEvent","Event","bubbles","once","onResizeStop","boxElement","columnGap","parseFloat","getComputedCSS","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":[]}
+{"version":3,"names":["_components","require","_element","_useBlockRefs","_cover","_interopRequireDefault","_utils","_jsxRuntime","GridItemResizer","clientId","bounds","onChange","blockElement","useBlockElement","rootBlockElement","parentElement","jsx","GridItemResizerInner","resizeDirection","setResizeDirection","useState","enableSide","setEnableSide","top","bottom","left","right","useEffect","observer","window","ResizeObserver","blockClientRect","getBoundingClientRect","rootBlockClientRect","observe","disconnect","justification","alignment","styles","display","justifyContent","alignItems","default","className","__unstablePopoverSlot","additionalStyles","children","ResizableBox","size","width","height","enable","bottomLeft","bottomRight","topLeft","topRight","boundsByDirection","onResizeStart","event","direction","ownerDocument","addEventListener","target","dispatchEvent","Event","bubbles","once","onResizeStop","boxElement","columnGap","parseFloat","getComputedCSS","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/components/grid-visualizer/grid-visualizer.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridVisualizer = GridVisualizer;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
 var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
 var _cover = _interopRequireDefault(require("../block-popover/cover"));
 var _store = require("../../store");
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -29,14 +29,15 @@ function GridVisualizer({
   if (isDistractionFree || !blockElement) {
     return null;
   }
-  return (0, _react.createElement)(_cover.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
     className: "block-editor-grid-visualizer",
     clientId: clientId,
-    __unstablePopoverSlot: "block-toolbar"
-  }, (0, _react.createElement)(GridVisualizerGrid, {
-    ref: contentRef,
-    blockElement: blockElement
-  }));
+    __unstablePopoverSlot: "block-toolbar",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerGrid, {
+      ref: contentRef,
+      blockElement: blockElement
+    })
+  });
 }
 const GridVisualizerGrid = (0, _element.forwardRef)(({
   blockElement
@@ -57,16 +58,19 @@ const GridVisualizerGrid = (0, _element.forwardRef)(({
       }
     };
   }, [blockElement]);
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: "block-editor-grid-visualizer__grid",
-    style: gridInfo.style
-  }, Array.from({
-    length: gridInfo.numItems
-  }, (_, i) => (0, _react.createElement)("div", {
-    key: i,
-    className: "block-editor-grid-visualizer__item"
-  })));
+    style: gridInfo.style,
+    children: Array.from({
+      length: gridInfo.numItems
+    }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "block-editor-grid-visualizer__item",
+      style: {
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${gridInfo.currentColor} 20%, #0000)`
+      }
+    }, i))
+  });
 });
 function getGridInfo(blockElement) {
   const gridTemplateColumns = (0, _utils.getComputedCSS)(blockElement, 'grid-template-columns');
@@ -76,6 +80,7 @@ function getGridInfo(blockElement) {
   const numItems = numColumns * numRows;
   return {
     numItems,
+    currentColor: (0, _utils.getComputedCSS)(blockElement, 'color'),
     style: {
       gridTemplateColumns,
       gridTemplateRows,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_useBlockRefs","_cover","_interopRequireDefault","_store","_utils","GridVisualizer","clientId","contentRef","isDistractionFree","useSelect","select","blockEditorStore","getSettings","blockElement","useBlockElement","_react","createElement","default","className","__unstablePopoverSlot","GridVisualizerGrid","ref","forwardRef","gridInfo","setGridInfo","useState","getGridInfo","useEffect","observers","element","children","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","key","gridTemplateColumns","getComputedCSS","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":[]}
+{"version":3,"names":["_element","require","_data","_useBlockRefs","_cover","_interopRequireDefault","_store","_utils","_jsxRuntime","GridVisualizer","clientId","contentRef","isDistractionFree","useSelect","select","blockEditorStore","getSettings","blockElement","useBlockElement","jsx","default","className","__unstablePopoverSlot","children","GridVisualizerGrid","ref","forwardRef","gridInfo","setGridInfo","useState","getGridInfo","useEffect","observers","element","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","boxShadow","currentColor","gridTemplateColumns","getComputedCSS","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\n\t\t\t\t\tkey={ i }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__item\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,\n\t\t\t\t\t} }\n\t\t\t\t/>\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\tcurrentColor: getComputedCSS( blockElement, 'color' ),\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/components/height-control/index.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = HeightControl;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _useSettings = require("../use-settings");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -174,36 +174,43 @@ function HeightControl({
       onChange(100 + newUnit);
     }
   };
-  return (0, _react.createElement)("fieldset", {
-    className: "block-editor-height-control"
-  }, (0, _react.createElement)(_components.BaseControl.VisualLabel, {
-    as: "legend"
-  }, label), (0, _react.createElement)(_components.Flex, null, (0, _react.createElement)(_components.FlexItem, {
-    isBlock: true
-  }, (0, _react.createElement)(_components.__experimentalUnitControl, {
-    value: value,
-    units: units,
-    onChange: onChange,
-    onUnitChange: handleUnitChange,
-    min: 0,
-    size: '__unstable-large',
-    label: label,
-    hideLabelFromVision: true
-  })), (0, _react.createElement)(_components.FlexItem, {
-    isBlock: true
-  }, (0, _react.createElement)(_components.__experimentalSpacer, {
-    marginX: 2,
-    marginBottom: 0
-  }, (0, _react.createElement)(_components.RangeControl, {
-    value: customRangeValue,
-    min: 0,
-    max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
-    step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
-    withInputField: false,
-    onChange: handleSliderChange,
-    __nextHasNoMarginBottom: true,
-    label: label,
-    hideLabelFromVision: true
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: "block-editor-height-control",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
+      as: "legend",
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        isBlock: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+          value: value,
+          units: units,
+          onChange: onChange,
+          onUnitChange: handleUnitChange,
+          min: 0,
+          size: "__unstable-large",
+          label: label,
+          hideLabelFromVision: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        isBlock: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          marginX: 2,
+          marginBottom: 0,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+            value: customRangeValue,
+            min: 0,
+            max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
+            step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
+            withInputField: false,
+            onChange: handleSliderChange,
+            __nextHasNoMarginBottom: true,
+            label: label,
+            hideLabelFromVision: true
+          })
+        })
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

package/build/components/height-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_i18n","_useSettings","RANGE_CONTROL_CUSTOM_SETTINGS","px","max","step","vw","vh","em","rem","svw","lvw","dvw","svh","lvh","dvh","vi","svi","lvi","dvi","vb","svb","lvb","dvb","vmin","svmin","lvmin","dvmin","vmax","svmax","lvmax","dvmax","HeightControl","label","__","onChange","value","_RANGE_CONTROL_CUSTOM","_RANGE_CONTROL_CUSTOM2","customRangeValue","parseFloat","availableUnits","useSettings","units","useCustomUnits","selectedUnit","useMemo","parseQuantityAndUnitFromRawValue","handleSliderChange","next","join","handleUnitChange","newUnit","currentValue","currentUnit","includes","toFixed","Math","round","_react","createElement","className","BaseControl","VisualLabel","as","Flex","FlexItem","isBlock","__experimentalUnitControl","onUnitChange","min","size","hideLabelFromVision","__experimentalSpacer","marginX","marginBottom","RangeControl","withInputField","__nextHasNoMarginBottom"],"sources":["@wordpress/block-editor/src/components/height-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport {\n\tBaseControl,\n\tRangeControl,\n\tFlex,\n\tFlexItem,\n\t__experimentalSpacer as Spacer,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nconst RANGE_CONTROL_CUSTOM_SETTINGS = {\n\tpx: { max: 1000, step: 1 },\n\t'%': { max: 100, step: 1 },\n\tvw: { max: 100, step: 1 },\n\tvh: { max: 100, step: 1 },\n\tem: { max: 50, step: 0.1 },\n\trem: { max: 50, step: 0.1 },\n\tsvw: { max: 100, step: 1 },\n\tlvw: { max: 100, step: 1 },\n\tdvw: { max: 100, step: 1 },\n\tsvh: { max: 100, step: 1 },\n\tlvh: { max: 100, step: 1 },\n\tdvh: { max: 100, step: 1 },\n\tvi: { max: 100, step: 1 },\n\tsvi: { max: 100, step: 1 },\n\tlvi: { max: 100, step: 1 },\n\tdvi: { max: 100, step: 1 },\n\tvb: { max: 100, step: 1 },\n\tsvb: { max: 100, step: 1 },\n\tlvb: { max: 100, step: 1 },\n\tdvb: { max: 100, step: 1 },\n\tvmin: { max: 100, step: 1 },\n\tsvmin: { max: 100, step: 1 },\n\tlvmin: { max: 100, step: 1 },\n\tdvmin: { max: 100, step: 1 },\n\tvmax: { max: 100, step: 1 },\n\tsvmax: { max: 100, step: 1 },\n\tlvmax: { max: 100, step: 1 },\n\tdvmax: { max: 100, step: 1 },\n};\n\n/**\n * HeightControl renders a linked unit control and range control for adjusting the height of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label    A label for the control.\n * @param {( value: string ) => void } props.onChange Called when the height changes.\n * @param {string}                     props.value    The current height value.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function HeightControl( {\n\tlabel = __( 'Height' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst customRangeValue = parseFloat( value );\n\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst selectedUnit =\n\t\tuseMemo(\n\t\t\t() => parseQuantityAndUnitFromRawValue( value ),\n\t\t\t[ value ]\n\t\t)[ 1 ] ||\n\t\tunits[ 0 ]?.value ||\n\t\t'px';\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( [ next, selectedUnit ].join( '' ) );\n\t};\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-height-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tvalue={ customRangeValue }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tRANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]\n\t\t\t\t\t\t\t\t\t?.max ?? 100\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tRANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</fieldset>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAUA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAH,OAAA;AAnBA;AACA;AACA;;AAcA;AACA;AACA;;AAGA,MAAMI,6BAA6B,GAAG;EACrCC,EAAE,EAAE;IAAEC,GAAG,EAAE,IAAI;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1B,GAAG,EAAE;IAAED,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BC,EAAE,EAAE;IAAEF,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EACzBE,EAAE,EAAE;IAAEH,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EACzBG,EAAE,EAAE;IAAEJ,GAAG,EAAE,EAAE;IAAEC,IAAI,EAAE;EAAI,CAAC;EAC1BI,GAAG,EAAE;IAAEL,GAAG,EAAE,EAAE;IAAEC,IAAI,EAAE;EAAI,CAAC;EAC3BK,GAAG,EAAE;IAAEN,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BM,GAAG,EAAE;IAAEP,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BO,GAAG,EAAE;IAAER,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BQ,GAAG,EAAE;IAAET,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BS,GAAG,EAAE;IAAEV,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BU,GAAG,EAAE;IAAEX,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BW,EAAE,EAAE;IAAEZ,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EACzBY,GAAG,EAAE;IAAEb,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1Ba,GAAG,EAAE;IAAEd,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1Bc,GAAG,EAAE;IAAEf,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1Be,EAAE,EAAE;IAAEhB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EACzBgB,GAAG,EAAE;IAAEjB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BiB,GAAG,EAAE;IAAElB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BkB,GAAG,EAAE;IAAEnB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC1BmB,IAAI,EAAE;IAAEpB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC3BoB,KAAK,EAAE;IAAErB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC5BqB,KAAK,EAAE;IAAEtB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC5BsB,KAAK,EAAE;IAAEvB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC5BuB,IAAI,EAAE;IAAExB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC3BwB,KAAK,EAAE;IAAEzB,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC5ByB,KAAK,EAAE;IAAE1B,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC5B0B,KAAK,EAAE;IAAE3B,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAE;AAC5B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS2B,aAAaA,CAAE;EACtCC,KAAK,GAAG,IAAAC,QAAE,EAAE,QAAS,CAAC;EACtBC,QAAQ;EACRC;AACD,CAAC,EAAG;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EACH,MAAMC,gBAAgB,GAAGC,UAAU,CAAEJ,KAAM,CAAC;EAE5C,MAAM,CAAEK,cAAc,CAAE,GAAG,IAAAC,wBAAW,EAAE,eAAgB,CAAC;EACzD,MAAMC,KAAK,GAAG,IAAAC,wCAAc,EAAE;IAC7BH,cAAc,EAAEA,cAAc,IAAI,CACjC,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI;EAEN,CAAE,CAAC;EAEH,MAAMI,YAAY,GACjB,IAAAC,gBAAO,EACN,MAAM,IAAAC,0DAAgC,EAAEX,KAAM,CAAC,EAC/C,CAAEA,KAAK,CACR,CAAC,CAAE,CAAC,CAAE,IACNO,KAAK,CAAE,CAAC,CAAE,EAAEP,KAAK,IACjB,IAAI;EAEL,MAAMY,kBAAkB,GAAKC,IAAI,IAAM;IACtCd,QAAQ,CAAE,CAAEc,IAAI,EAAEJ,YAAY,CAAE,CAACK,IAAI,CAAE,EAAG,CAAE,CAAC;EAC9C,CAAC;EAED,MAAMC,gBAAgB,GAAKC,OAAO,IAAM;IACvC;IACA;IACA,MAAM,CAAEC,YAAY,EAAEC,WAAW,CAAE,GAClC,IAAAP,0DAAgC,EAAEX,KAAM,CAAC;IAE1C,IAAK,CAAE,IAAI,EAAE,KAAK,CAAE,CAACmB,QAAQ,CAAEH,OAAQ,CAAC,IAAIE,WAAW,KAAK,IAAI,EAAG;MAClE;MACAnB,QAAQ,CAAE,CAAEkB,YAAY,GAAG,EAAE,EAAGG,OAAO,CAAE,CAAE,CAAC,GAAGJ,OAAQ,CAAC;IACzD,CAAC,MAAM,IACN,CAAE,IAAI,EAAE,KAAK,CAAE,CAACG,QAAQ,CAAED,WAAY,CAAC,IACvCF,OAAO,KAAK,IAAI,EACf;MACD;MACAjB,QAAQ,CAAEsB,IAAI,CAACC,KAAK,CAAEL,YAAY,GAAG,EAAG,CAAC,GAAGD,OAAQ,CAAC;IACtD,CAAC,MAAM,IACN,CACC,GAAG,EACH,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,CACP,CAACG,QAAQ,CAAEH,OAAQ,CAAC,IACrBC,YAAY,GAAG,GAAG,EACjB;MACD;MACAlB,QAAQ,CAAE,GAAG,GAAGiB,OAAQ,CAAC;IAC1B;EACD,CAAC;EAED,OACC,IAAAO,MAAA,CAAAC,aAAA;IAAUC,SAAS,EAAC;EAA6B,GAChD,IAAAF,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAA+D,WAAW,CAACC,WAAW;IAACC,EAAE,EAAC;EAAQ,GACjC/B,KACsB,CAAC,EAC1B,IAAA0B,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAAkE,IAAI,QACJ,IAAAN,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAAmE,QAAQ;IAACC,OAAO;EAAA,GAChB,IAAAR,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAAqE,yBAAW;IACXhC,KAAK,EAAGA,KAAO;IACfO,KAAK,EAAGA,KAAO;IACfR,QAAQ,EAAGA,QAAU;IACrBkC,YAAY,EAAGlB,gBAAkB;IACjCmB,GAAG,EAAG,CAAG;IACTC,IAAI,EAAG,kBAAoB;IAC3BtC,KAAK,EAAGA,KAAO;IACfuC,mBAAmB;EAAA,CACnB,CACQ,CAAC,EACX,IAAAb,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAAmE,QAAQ;IAACC,OAAO;EAAA,GAChB,IAAAR,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAA0E,oBAAM;IAACC,OAAO,EAAG,CAAG;IAACC,YAAY,EAAG;EAAG,GACvC,IAAAhB,MAAA,CAAAC,aAAA,EAAC7D,WAAA,CAAA6E,YAAY;IACZxC,KAAK,EAAGG,gBAAkB;IAC1B+B,GAAG,EAAG,CAAG;IACTlE,GAAG,GAAAiC,qBAAA,GACFnC,6BAA6B,CAAE2C,YAAY,CAAE,EAC1CzC,GAAG,cAAAiC,qBAAA,cAAAA,qBAAA,GAAI,GACV;IACDhC,IAAI,GAAAiC,sBAAA,GACHpC,6BAA6B,CAAE2C,YAAY,CAAE,EAC1CxC,IAAI,cAAAiC,sBAAA,cAAAA,sBAAA,GAAI,GACX;IACDuC,cAAc,EAAG,KAAO;IACxB1C,QAAQ,EAAGa,kBAAoB;IAC/B8B,uBAAuB;IACvB7C,KAAK,EAAGA,KAAO;IACfuC,mBAAmB;EAAA,CACnB,CACM,CACC,CACL,CACG,CAAC;AAEb","ignoreList":[]}
+{"version":3,"names":["_element","require","_components","_i18n","_useSettings","_jsxRuntime","RANGE_CONTROL_CUSTOM_SETTINGS","px","max","step","vw","vh","em","rem","svw","lvw","dvw","svh","lvh","dvh","vi","svi","lvi","dvi","vb","svb","lvb","dvb","vmin","svmin","lvmin","dvmin","vmax","svmax","lvmax","dvmax","HeightControl","label","__","onChange","value","_RANGE_CONTROL_CUSTOM","_RANGE_CONTROL_CUSTOM2","customRangeValue","parseFloat","availableUnits","useSettings","units","useCustomUnits","selectedUnit","useMemo","parseQuantityAndUnitFromRawValue","handleSliderChange","next","join","handleUnitChange","newUnit","currentValue","currentUnit","includes","toFixed","Math","round","jsxs","className","children","jsx","BaseControl","VisualLabel","as","Flex","FlexItem","isBlock","__experimentalUnitControl","onUnitChange","min","size","hideLabelFromVision","__experimentalSpacer","marginX","marginBottom","RangeControl","withInputField","__nextHasNoMarginBottom"],"sources":["@wordpress/block-editor/src/components/height-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport {\n\tBaseControl,\n\tRangeControl,\n\tFlex,\n\tFlexItem,\n\t__experimentalSpacer as Spacer,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nconst RANGE_CONTROL_CUSTOM_SETTINGS = {\n\tpx: { max: 1000, step: 1 },\n\t'%': { max: 100, step: 1 },\n\tvw: { max: 100, step: 1 },\n\tvh: { max: 100, step: 1 },\n\tem: { max: 50, step: 0.1 },\n\trem: { max: 50, step: 0.1 },\n\tsvw: { max: 100, step: 1 },\n\tlvw: { max: 100, step: 1 },\n\tdvw: { max: 100, step: 1 },\n\tsvh: { max: 100, step: 1 },\n\tlvh: { max: 100, step: 1 },\n\tdvh: { max: 100, step: 1 },\n\tvi: { max: 100, step: 1 },\n\tsvi: { max: 100, step: 1 },\n\tlvi: { max: 100, step: 1 },\n\tdvi: { max: 100, step: 1 },\n\tvb: { max: 100, step: 1 },\n\tsvb: { max: 100, step: 1 },\n\tlvb: { max: 100, step: 1 },\n\tdvb: { max: 100, step: 1 },\n\tvmin: { max: 100, step: 1 },\n\tsvmin: { max: 100, step: 1 },\n\tlvmin: { max: 100, step: 1 },\n\tdvmin: { max: 100, step: 1 },\n\tvmax: { max: 100, step: 1 },\n\tsvmax: { max: 100, step: 1 },\n\tlvmax: { max: 100, step: 1 },\n\tdvmax: { max: 100, step: 1 },\n};\n\n/**\n * HeightControl renders a linked unit control and range control for adjusting the height of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label    A label for the control.\n * @param {( value: string ) => void } props.onChange Called when the height changes.\n * @param {string}                     props.value    The current height value.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function HeightControl( {\n\tlabel = __( 'Height' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst customRangeValue = parseFloat( value );\n\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst selectedUnit =\n\t\tuseMemo(\n\t\t\t() => parseQuantityAndUnitFromRawValue( value ),\n\t\t\t[ value ]\n\t\t)[ 1 ] ||\n\t\tunits[ 0 ]?.value ||\n\t\t'px';\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( [ next, selectedUnit ].join( '' ) );\n\t};\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-height-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tvalue={ customRangeValue }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tRANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]\n\t\t\t\t\t\t\t\t\t?.max ?? 100\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tRANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</fieldset>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/iframe/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -16,6 +15,7 @@ var _blockSelectionClearer = require("../block-selection-clearer");
 var _writingFlow = require("../writing-flow");
 var _getCompatibilityStyles = require("./get-compatibility-styles");
 var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -282,67 +282,75 @@ function Iframe({
   // 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;
-  const iframe = (0, _react.createElement)(_react.Fragment, null, shouldRenderFocusCaptureElements && before, (0, _react.createElement)("iframe", {
-    ...props,
-    style: {
-      border: 0,
-      ...props.style,
-      height: props.style?.height,
-      transition: 'all .3s'
-    },
-    ref: (0, _compose.useMergeRefs)([ref, setRef]),
-    tabIndex: tabIndex
-    // Correct doctype is required to enable rendering in standards
-    // mode. Also preload the styles to avoid a flash of unstyled
-    // content.
-    ,
-    src: src,
-    title: title,
-    onKeyDown: event => {
-      if (props.onKeyDown) {
-        props.onKeyDown(event);
-      }
-      // If the event originates from inside the iframe, it means
-      // it bubbled through the portal, but only with React
-      // events. We need to to bubble native events as well,
-      // though by doing so we also trigger another React event,
-      // 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);
-      }
-    }
-  }, iframeDocument && (0, _element.createPortal)(
-  // We want to prevent React events from bubbling throught the iframe
-  // we bubble these manually.
-  /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-  (0, _react.createElement)("body", {
-    ref: bodyRef,
-    className: (0, _clsx.default)('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses)
-  }, contentResizeListener, (0, _react.createElement)(_components.__experimentalStyleProvider, {
-    document: iframeDocument
-  }, children)), iframeDocument.documentElement)), shouldRenderFocusCaptureElements && after);
-  return (0, _react.createElement)("div", {
+  const iframe = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [shouldRenderFocusCaptureElements && before, /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+      ...props,
+      style: {
+        border: 0,
+        ...props.style,
+        height: props.style?.height,
+        transition: 'all .3s'
+      },
+      ref: (0, _compose.useMergeRefs)([ref, setRef]),
+      tabIndex: tabIndex
+      // Correct doctype is required to enable rendering in standards
+      // mode. Also preload the styles to avoid a flash of unstyled
+      // content.
+      ,
+      src: src,
+      title: title,
+      onKeyDown: event => {
+        if (props.onKeyDown) {
+          props.onKeyDown(event);
+        }
+        // If the event originates from inside the iframe, it means
+        // it bubbled through the portal, but only with React
+        // events. We need to to bubble native events as well,
+        // though by doing so we also trigger another React event,
+        // 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);
+        }
+      },
+      children: iframeDocument && (0, _element.createPortal)(
+      /*#__PURE__*/
+      // We want to prevent React events from bubbling throught the iframe
+      // we bubble these manually.
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      (0, _jsxRuntime.jsxs)("body", {
+        ref: bodyRef,
+        className: (0, _clsx.default)('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses),
+        children: [contentResizeListener, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalStyleProvider, {
+          document: iframeDocument,
+          children: children
+        })]
+      }), iframeDocument.documentElement)
+    }), shouldRenderFocusCaptureElements && after]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "block-editor-iframe__container",
-    ref: windowResizeRef
-  }, containerResizeListener, (0, _react.createElement)("div", {
-    className: (0, _clsx.default)('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));
+    ref: windowResizeRef,
+    children: [containerResizeListener, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)('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`
+      },
+      children: iframe
+    })]
+  });
 }
 function IframeIfReady(props, ref) {
   const isInitialised = (0, _data.useSelect)(select => select(_store.store).getSettings().__internalIsInitialized, []);
@@ -355,7 +363,7 @@ function IframeIfReady(props, ref) {
   if (!isInitialised) {
     return null;
   }
-  return (0, _react.createElement)(Iframe, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Iframe, {
     ...props,
     forwardedRef: ref
   });