@wordpress/block-editor 12.25.0 → 13.0.0

package/build/components/iframe/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
@@ -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
  */
@@ -125,12 +125,15 @@ function Iframe({
     scripts = ''
   } = resolvedAssets;
   const [iframeDocument, setIframeDocument] = (0, _element.useState)();
+  const prevContainerWidth = (0, _element.useRef)();
   const [bodyClasses, setBodyClasses] = (0, _element.useState)([]);
   const clearerRef = (0, _blockSelectionClearer.useBlockSelectionClearer)();
   const [before, writingFlowRef, after] = (0, _writingFlow.useWritingFlow)();
   const [contentResizeListener, {
-    height: contentHeight,
-    width: contentWidth
+    height: contentHeight
+  }] = (0, _compose.useResizeObserver)();
+  const [containerResizeListener, {
+    width: containerWidth
   }] = (0, _compose.useResizeObserver)();
   const setRef = (0, _compose.useRefEffect)(node => {
     node._load = () => {
@@ -179,8 +182,10 @@ function Iframe({
       iFrameDocument?.removeEventListener('drop', preventFileDropDefault);
     };
   }, []);
-  const windowResizeRef = (0, _compose.useRefEffect)(node => {
+  const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = (0, _element.useState)();
+  const iframeResizeRef = (0, _compose.useRefEffect)(node => {
     const nodeWindow = node.ownerDocument.defaultView;
+    setIframeWindowInnerHeight(nodeWindow.innerHeight);
     const onResize = () => {
       setIframeWindowInnerHeight(nodeWindow.innerHeight);
     };
@@ -189,7 +194,24 @@ function Iframe({
       nodeWindow.removeEventListener('resize', onResize);
     };
   }, []);
-  const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = (0, _element.useState)();
+  const [windowInnerWidth, setWindowInnerWidth] = (0, _element.useState)();
+  const windowResizeRef = (0, _compose.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;
+  (0, _element.useEffect)(() => {
+    if (!isZoomedOut) {
+      prevContainerWidth.current = containerWidth;
+    }
+  }, [containerWidth, isZoomedOut]);
   const disabledRef = (0, _compose.useDisabled)({
     isDisabled: !readonly
   });
@@ -197,7 +219,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
@@ -234,76 +256,101 @@ function Iframe({
     return [_src, () => URL.revokeObjectURL(_src)];
   }, [html]);
   (0, _element.useEffect)(() => cleanup, [cleanup]);
-  scale = typeof scale === 'function' ? scale(contentWidth, contentHeight) : scale;
   (0, _element.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 (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) {
-        event.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, _classnames.default)('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses)
-  }, contentResizeListener, (0, _react.createElement)(_components.__experimentalStyleProvider, {
-    document: iframeDocument
-  }, children)), iframeDocument.documentElement)), shouldRenderFocusCaptureElements && after);
+  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,
+    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, []);
@@ -316,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
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_i18n","_compose","_components","_data","_blockSelectionClearer","_writingFlow","_getCompatibilityStyles","_store","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","useRefEffect","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","useSelect","select","getSettings","blockEditorStore","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","useState","bodyClasses","setBodyClasses","clearerRef","useBlockSelectionClearer","before","writingFlowRef","after","useWritingFlow","contentResizeListener","height","contentHeight","width","contentWidth","useResizeObserver","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getCompatibilityStyles","getElementById","id","head","appendChild","cloneNode","console","warn","windowResizeRef","nodeWindow","onResize","setIframeWindowInnerHeight","innerHeight","iframeWindowInnerHeight","disabledRef","useDisabled","isDisabled","bodyRef","useMergeRefs","src","cleanup","useMemo","_src","URL","createObjectURL","Blob","revokeObjectURL","useEffect","bottomFrameSize","style","transform","marginTop","marginBottom","minHeight","Math","floor","remove","shouldRenderFocusCaptureElements","_react","createElement","Fragment","border","transition","onKeyDown","currentTarget","target","stopPropagation","KeyboardEvent","createPortal","className","classnames","__experimentalStyleProvider","document","IframeIfReady","isInitialised","__internalIsInitialized","_default","exports","default","forwardRef"],"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","_interopRequireDefault","require","_element","_i18n","_compose","_components","_data","_blockSelectionClearer","_writingFlow","_getCompatibilityStyles","_store","_jsxRuntime","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","useRefEffect","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","useSelect","select","getSettings","blockEditorStore","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","useState","prevContainerWidth","useRef","bodyClasses","setBodyClasses","clearerRef","useBlockSelectionClearer","before","writingFlowRef","after","useWritingFlow","contentResizeListener","height","contentHeight","useResizeObserver","containerResizeListener","width","containerWidth","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getCompatibilityStyles","getElementById","id","head","appendChild","cloneNode","console","warn","iframeWindowInnerHeight","setIframeWindowInnerHeight","iframeResizeRef","nodeWindow","innerHeight","onResize","windowInnerWidth","setWindowInnerWidth","windowResizeRef","innerWidth","isZoomedOut","useEffect","current","disabledRef","useDisabled","isDisabled","bodyRef","useMergeRefs","src","cleanup","useMemo","_src","URL","createObjectURL","Blob","revokeObjectURL","maxWidth","style","setProperty","Math","min","remove","removeProperty","shouldRenderFocusCaptureElements","iframe","jsxs","Fragment","jsx","border","transition","onKeyDown","currentTarget","target","stopPropagation","nativeEvent","KeyboardEvent","createPortal","className","clsx","__experimentalStyleProvider","document","IframeIfReady","isInitialised","__internalIsInitialized","_default","exports","default","forwardRef"],"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/components/image-editor/aspect-ratio-dropdown.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AspectRatioDropdown;
-var _react = require("react");
+exports.ratioToNumber = ratioToNumber;
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
+var _useSettings = require("../use-settings");
 var _constants = require("./constants");
 var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -18,28 +20,48 @@ var _context = require("./context");
  * Internal dependencies
  */
 
-function AspectGroup({
+function AspectRatioGroup({
   aspectRatios,
   isDisabled,
   label,
   onClick,
   value
 }) {
-  return (0, _react.createElement)(_components.MenuGroup, {
-    label: label
-  }, aspectRatios.map(({
-    title,
-    aspect
-  }) => (0, _react.createElement)(_components.MenuItem, {
-    key: aspect,
-    disabled: isDisabled,
-    onClick: () => {
-      onClick(aspect);
-    },
-    role: "menuitemradio",
-    isSelected: aspect === value,
-    icon: aspect === value ? _icons.check : undefined
-  }, title)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
+    label: label,
+    children: aspectRatios.map(({
+      name,
+      slug,
+      ratio
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+      disabled: isDisabled,
+      onClick: () => {
+        onClick(ratio);
+      },
+      role: "menuitemradio",
+      isSelected: ratio === value,
+      icon: ratio === value ? _icons.check : undefined,
+      children: name
+    }, slug))
+  });
+}
+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
+  };
 }
 function AspectRatioDropdown({
   toggleProps
@@ -50,66 +72,65 @@ function AspectRatioDropdown({
     setAspect,
     defaultAspect
   } = (0, _context.useImageEditingContext)();
-  return (0, _react.createElement)(_components.DropdownMenu, {
+  const [defaultRatios, themeRatios, showDefaultRatios] = (0, _useSettings.useSettings)('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
     icon: _icons.aspectRatio,
     label: (0, _i18n.__)('Aspect Ratio'),
     popoverProps: _constants.POPOVER_PROPS,
     toggleProps: toggleProps,
-    className: "wp-block-image__aspect-ratio"
-  }, ({
-    onClose
-  }) => (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(AspectGroup, {
-    isDisabled: isInProgress,
-    onClick: newAspect => {
-      setAspect(newAspect);
-      onClose();
-    },
-    value: aspect,
-    aspectRatios: [
-    // All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
-    {
-      title: (0, _i18n.__)('Original'),
-      aspect: defaultAspect
-    }, {
-      title: (0, _i18n.__)('Square'),
-      aspect: 1
-    }]
-  }), (0, _react.createElement)(AspectGroup, {
-    label: (0, _i18n.__)('Landscape'),
-    isDisabled: isInProgress,
-    onClick: newAspect => {
-      setAspect(newAspect);
-      onClose();
-    },
-    value: aspect,
-    aspectRatios: [{
-      title: (0, _i18n.__)('16:9'),
-      aspect: 16 / 9
-    }, {
-      title: (0, _i18n.__)('4:3'),
-      aspect: 4 / 3
-    }, {
-      title: (0, _i18n.__)('3:2'),
-      aspect: 3 / 2
-    }]
-  }), (0, _react.createElement)(AspectGroup, {
-    label: (0, _i18n.__)('Portrait'),
-    isDisabled: isInProgress,
-    onClick: newAspect => {
-      setAspect(newAspect);
-      onClose();
-    },
-    value: aspect,
-    aspectRatios: [{
-      title: (0, _i18n.__)('9:16'),
-      aspect: 9 / 16
-    }, {
-      title: (0, _i18n.__)('3:4'),
-      aspect: 3 / 4
-    }, {
-      title: (0, _i18n.__)('2:3'),
-      aspect: 2 / 3
-    }]
-  })));
+    className: "wp-block-image__aspect-ratio",
+    children: ({
+      onClose
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
+        isDisabled: isInProgress,
+        onClick: newAspect => {
+          setAspect(newAspect);
+          onClose();
+        },
+        value: aspect,
+        aspectRatios: [
+        // All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
+        {
+          slug: 'original',
+          name: (0, _i18n.__)('Original'),
+          aspect: defaultAspect
+        }, ...(showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({
+          ratio
+        }) => ratio === 1) : [])]
+      }), themeRatios?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
+        label: (0, _i18n.__)('Theme'),
+        isDisabled: isInProgress,
+        onClick: newAspect => {
+          setAspect(newAspect);
+          onClose();
+        },
+        value: aspect,
+        aspectRatios: themeRatios
+      }), showDefaultRatios && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
+        label: (0, _i18n.__)('Landscape'),
+        isDisabled: isInProgress,
+        onClick: newAspect => {
+          setAspect(newAspect);
+          onClose();
+        },
+        value: aspect,
+        aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
+          ratio
+        }) => ratio > 1)
+      }), showDefaultRatios && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
+        label: (0, _i18n.__)('Portrait'),
+        isDisabled: isInProgress,
+        onClick: newAspect => {
+          setAspect(newAspect);
+          onClose();
+        },
+        value: aspect,
+        aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
+          ratio
+        }) => ratio < 1)
+      })]
+    })
+  });
 }
 //# sourceMappingURL=aspect-ratio-dropdown.js.map