@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.20.0

package/build-module/components/global-styles/state-control.mjs

@@ -1,23 +1,18 @@
 // packages/block-editor/src/components/global-styles/state-control.js
-import { __ } from "@wordpress/i18n";
-import { check, chevronDown } from "@wordpress/icons";
-import {
-  DropdownMenu,
-  MenuGroup,
-  MenuItem,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { check, chevronDown, moreVertical } from "@wordpress/icons";
+import { DropdownMenu, MenuGroup, MenuItem } from "@wordpress/components";
 import { Stack } from "@wordpress/ui";
-import { unlock } from "../../lock-unlock.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var { Badge: WCBadge } = unlock(componentsPrivateApis);
 function StateControl({
   viewportStates = [],
   pseudoStates = [],
   viewportValue = "default",
   pseudoStateValue = "default",
   onChangeViewport,
-  onChangePseudoState
+  onChangePseudoState,
+  showText = true,
+  popoverProps = {}
 }) {
   if (!viewportStates.length && !pseudoStates.length) {
     return null;
@@ -62,74 +57,65 @@ function StateControl({
       });
     }
   }
-  return /* @__PURE__ */ jsxs(
+  const currentStateLabel = activeStates.length ? activeStates.map((state) => state.label).join(", ") : __("Default");
+  const icon = showText ? chevronDown : moreVertical;
+  const toggleProps = showText ? { size: "compact", variant: "tertiary", iconPosition: "right" } : { size: "compact", variant: "tertiary" };
+  return /* @__PURE__ */ jsx(
     Stack,
     {
       direction: "column",
       gap: "sm",
       align: "flex-end",
       className: "block-editor-global-styles-state-control",
-      children: [
-        /* @__PURE__ */ jsx(
-          DropdownMenu,
-          {
-            icon: chevronDown,
-            label: triggerLabel,
-            popoverProps: {
-              placement: "right-start"
-            },
-            text: triggerLabel,
-            toggleProps: {
-              size: "compact",
-              variant: "tertiary",
-              iconPosition: "right"
-            },
-            children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              hasViewportOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Viewport"), children: viewportOptions.map((option) => /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: () => {
-                    onChangeViewport?.(option.value);
-                    if (!hasPseudoStateOptions) {
-                      onClose();
-                    }
-                  },
-                  icon: viewportValue === option.value ? check : null,
-                  children: option.label
+      children: /* @__PURE__ */ jsx(
+        DropdownMenu,
+        {
+          icon,
+          label: showText ? triggerLabel : sprintf(
+            /* translators: %s: Current state (e.g. "Hover", "Focus") */
+            __("State: %s"),
+            currentStateLabel
+          ),
+          popoverProps: {
+            placement: "right-start",
+            ...popoverProps
+          },
+          text: showText ? triggerLabel : void 0,
+          toggleProps,
+          children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasViewportOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Viewport"), children: viewportOptions.map((option) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                onClick: () => {
+                  onChangeViewport?.(option.value);
+                  if (!hasPseudoStateOptions) {
+                    onClose();
+                  }
                 },
-                `viewport-${option.value}`
-              )) }),
-              hasPseudoStateOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Pseudo state"), children: pseudoStateOptions.map((option) => /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: () => {
-                    onChangePseudoState?.(
-                      option.value
-                    );
-                    if (!hasViewportOptions) {
-                      onClose();
-                    }
-                  },
-                  icon: pseudoStateValue === option.value ? check : null,
-                  children: option.label
+                icon: viewportValue === option.value ? check : null,
+                children: option.label
+              },
+              `viewport-${option.value}`
+            )) }),
+            hasPseudoStateOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Pseudo state"), children: pseudoStateOptions.map((option) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                onClick: () => {
+                  onChangePseudoState?.(
+                    option.value
+                  );
+                  if (!hasViewportOptions) {
+                    onClose();
+                  }
                 },
-                `pseudo-${option.value}`
-              )) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Stack,
-          {
-            className: "block-editor-global-styles-state-control__badges",
-            direction: "row",
-            justify: "flex-start",
-            gap: "xs",
-            wrap: "wrap",
-            children: activeStates.map((activeState) => /* @__PURE__ */ jsx(WCBadge, { intent: "info", children: activeState.label }, activeState.key))
-          }
-        )
-      ]
+                icon: pseudoStateValue === option.value ? check : null,
+                children: option.label
+              },
+              `pseudo-${option.value}`
+            )) })
+          ] })
+        }
+      )
     }
   );
 }

package/build-module/components/global-styles/state-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/state-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { check, chevronDown } from '@wordpress/icons';\nimport {\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\n/**\n * State control for managing viewport and pseudo-state styles.\n * Displays a dropdown menu with separate groups for each selector.\n *\n * @param {Object}   props                     Component props.\n * @param {Array}    props.viewportStates      Array of available viewport states.\n * @param {Array}    props.pseudoStates        Array of available pseudo states.\n * @param {string}   props.viewportValue       Currently selected viewport value.\n * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.\n * @param {Function} props.onChangeViewport    Callback when viewport selection changes.\n * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.\n * @return {Element|null} State control component.\n */\nexport default function StateControl( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tonChangeViewport,\n\tonChangePseudoState,\n} ) {\n\tif ( ! viewportStates.length && ! pseudoStates.length ) {\n\t\treturn null;\n\t}\n\n\tconst viewportOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...viewportStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\tconst pseudoStateOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...pseudoStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\n\tconst hasViewportOptions = viewportStates.length > 0;\n\tconst hasPseudoStateOptions = pseudoStates.length > 0;\n\tconst triggerLabel = __( 'States' );\n\tconst activeStates = [];\n\n\tif ( hasViewportOptions && viewportValue !== 'default' ) {\n\t\tconst selectedViewport = viewportOptions.find(\n\t\t\t( option ) => option.value === viewportValue\n\t\t);\n\n\t\tif ( selectedViewport ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\t\tlabel: selectedViewport.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tif ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {\n\t\tconst selectedPseudoState = pseudoStateOptions.find(\n\t\t\t( option ) => option.value === pseudoStateValue\n\t\t);\n\n\t\tif ( selectedPseudoState ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\t\tlabel: selectedPseudoState.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t\talign=\"flex-end\"\n\t\t\tclassName=\"block-editor-global-styles-state-control\"\n\t\t>\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ chevronDown }\n\t\t\t\tlabel={ triggerLabel }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tplacement: 'right-start',\n\t\t\t\t} }\n\t\t\t\ttext={ triggerLabel }\n\t\t\t\ttoggleProps={ {\n\t\t\t\t\tsize: 'compact',\n\t\t\t\t\tvariant: 'tertiary',\n\t\t\t\t\ticonPosition: 'right',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasViewportOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Viewport' ) }>\n\t\t\t\t\t\t\t\t{ viewportOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `viewport-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeViewport?.( option.value );\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasPseudoStateOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tviewportValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasPseudoStateOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Pseudo state' ) }>\n\t\t\t\t\t\t\t\t{ pseudoStateOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `pseudo-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState?.(\n\t\t\t\t\t\t\t\t\t\t\t\toption.value\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasViewportOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t\t<Stack\n\t\t\t\tclassName=\"block-editor-global-styles-state-control__badges\"\n\t\t\t\tdirection=\"row\"\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap=\"xs\"\n\t\t\t\twrap=\"wrap\"\n\t\t\t>\n\t\t\t\t{ activeStates.map( ( activeState ) => (\n\t\t\t\t\t<WCBadge key={ activeState.key } intent=\"info\">\n\t\t\t\t\t\t{ activeState.label }\n\t\t\t\t\t</WCBadge>\n\t\t\t\t) ) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check, chevronDown, moreVertical } from '@wordpress/icons';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * State control for managing viewport and pseudo-state styles.\n * Displays a dropdown menu with separate groups for each selector.\n *\n * @param {Object}   props                     Component props.\n * @param {Array}    props.viewportStates      Array of available viewport states.\n * @param {Array}    props.pseudoStates        Array of available pseudo states.\n * @param {string}   props.viewportValue       Currently selected viewport value.\n * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.\n * @param {Function} props.onChangeViewport    Callback when viewport selection changes.\n * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.\n * @param {boolean}  props.showText            Whether to show text label on the toggle. Default true.\n * @param {Object}   props.popoverProps        Popover props for the dropdown menu.\n * @return {Element|null} State control component.\n */\nexport default function StateControl( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tonChangeViewport,\n\tonChangePseudoState,\n\tshowText = true,\n\tpopoverProps = {},\n} ) {\n\tif ( ! viewportStates.length && ! pseudoStates.length ) {\n\t\treturn null;\n\t}\n\n\tconst viewportOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...viewportStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\tconst pseudoStateOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...pseudoStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\n\tconst hasViewportOptions = viewportStates.length > 0;\n\tconst hasPseudoStateOptions = pseudoStates.length > 0;\n\tconst triggerLabel = __( 'States' );\n\tconst activeStates = [];\n\n\tif ( hasViewportOptions && viewportValue !== 'default' ) {\n\t\tconst selectedViewport = viewportOptions.find(\n\t\t\t( option ) => option.value === viewportValue\n\t\t);\n\n\t\tif ( selectedViewport ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\t\tlabel: selectedViewport.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tif ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {\n\t\tconst selectedPseudoState = pseudoStateOptions.find(\n\t\t\t( option ) => option.value === pseudoStateValue\n\t\t);\n\n\t\tif ( selectedPseudoState ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\t\tlabel: selectedPseudoState.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tconst currentStateLabel = activeStates.length\n\t\t? activeStates.map( ( state ) => state.label ).join( ', ' )\n\t\t: __( 'Default' );\n\tconst icon = showText ? chevronDown : moreVertical;\n\tconst toggleProps = showText\n\t\t? { size: 'compact', variant: 'tertiary', iconPosition: 'right' }\n\t\t: { size: 'compact', variant: 'tertiary' };\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t\talign=\"flex-end\"\n\t\t\tclassName=\"block-editor-global-styles-state-control\"\n\t\t>\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={\n\t\t\t\t\tshowText\n\t\t\t\t\t\t? triggerLabel\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: Current state (e.g. \"Hover\", \"Focus\") */\n\t\t\t\t\t\t\t\t__( 'State: %s' ),\n\t\t\t\t\t\t\t\tcurrentStateLabel\n\t\t\t\t\t\t  )\n\t\t\t\t}\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tplacement: 'right-start',\n\t\t\t\t\t...popoverProps,\n\t\t\t\t} }\n\t\t\t\ttext={ showText ? triggerLabel : undefined }\n\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasViewportOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Viewport' ) }>\n\t\t\t\t\t\t\t\t{ viewportOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `viewport-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeViewport?.( option.value );\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasPseudoStateOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tviewportValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasPseudoStateOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Pseudo state' ) }>\n\t\t\t\t\t\t\t\t{ pseudoStateOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `pseudo-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState?.(\n\t\t\t\t\t\t\t\t\t\t\t\toption.value\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasViewportOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,OAAO,aAAa,oBAAoB;AACjD,SAAS,cAAc,WAAW,gBAAgB;AAClD,SAAS,aAAa;AA+GjB,mBAII,KAJJ;AA9FU,SAAR,aAA+B;AAAA,EACrC,iBAAiB,CAAC;AAAA,EAClB,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,eAAe,CAAC;AACjB,GAAI;AACH,MAAK,CAAE,eAAe,UAAU,CAAE,aAAa,QAAS;AACvD,WAAO;AAAA,EACR;AAEA,QAAM,kBAAkB;AAAA,IACvB,EAAE,OAAO,GAAI,SAAU,GAAG,OAAO,UAAU;AAAA,IAC3C,GAAG,eAAe,IAAK,CAAE,WAAa;AAAA,MACrC,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,IACd,EAAI;AAAA,EACL;AACA,QAAM,qBAAqB;AAAA,IAC1B,EAAE,OAAO,GAAI,SAAU,GAAG,OAAO,UAAU;AAAA,IAC3C,GAAG,aAAa,IAAK,CAAE,WAAa;AAAA,MACnC,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,IACd,EAAI;AAAA,EACL;AAEA,QAAM,qBAAqB,eAAe,SAAS;AACnD,QAAM,wBAAwB,aAAa,SAAS;AACpD,QAAM,eAAe,GAAI,QAAS;AAClC,QAAM,eAAe,CAAC;AAEtB,MAAK,sBAAsB,kBAAkB,WAAY;AACxD,UAAM,mBAAmB,gBAAgB;AAAA,MACxC,CAAE,WAAY,OAAO,UAAU;AAAA,IAChC;AAEA,QAAK,kBAAmB;AACvB,mBAAa,KAAM;AAAA,QAClB,KAAK,YAAa,iBAAiB,KAAM;AAAA,QACzC,OAAO,iBAAiB;AAAA,MACzB,CAAE;AAAA,IACH;AAAA,EACD;AAEA,MAAK,yBAAyB,qBAAqB,WAAY;AAC9D,UAAM,sBAAsB,mBAAmB;AAAA,MAC9C,CAAE,WAAY,OAAO,UAAU;AAAA,IAChC;AAEA,QAAK,qBAAsB;AAC1B,mBAAa,KAAM;AAAA,QAClB,KAAK,UAAW,oBAAoB,KAAM;AAAA,QAC1C,OAAO,oBAAoB;AAAA,MAC5B,CAAE;AAAA,IACH;AAAA,EACD;AAEA,QAAM,oBAAoB,aAAa,SACpC,aAAa,IAAK,CAAE,UAAW,MAAM,KAAM,EAAE,KAAM,IAAK,IACxD,GAAI,SAAU;AACjB,QAAM,OAAO,WAAW,cAAc;AACtC,QAAM,cAAc,WACjB,EAAE,MAAM,WAAW,SAAS,YAAY,cAAc,QAAQ,IAC9D,EAAE,MAAM,WAAW,SAAS,WAAW;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,OAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,OACC,WACG,eACA;AAAA;AAAA,YAEA,GAAI,WAAY;AAAA,YAChB;AAAA,UACA;AAAA,UAEJ,cAAe;AAAA,YACd,WAAW;AAAA,YACX,GAAG;AAAA,UACJ;AAAA,UACA,MAAO,WAAW,eAAe;AAAA,UACjC;AAAA,UAEE,WAAE,EAAE,QAAQ,MACb,iCACG;AAAA,kCACD,oBAAC,aAAU,OAAQ,GAAI,UAAW,GAC/B,0BAAgB,IAAK,CAAE,WACxB;AAAA,cAAC;AAAA;AAAA,gBAEA,SAAU,MAAM;AACf,qCAAoB,OAAO,KAAM;AACjC,sBAAK,CAAE,uBAAwB;AAC9B,4BAAQ;AAAA,kBACT;AAAA,gBACD;AAAA,gBACA,MACC,kBAAkB,OAAO,QACtB,QACA;AAAA,gBAGF,iBAAO;AAAA;AAAA,cAbH,YAAa,OAAO,KAAM;AAAA,YAcjC,CACC,GACH;AAAA,YAEC,yBACD,oBAAC,aAAU,OAAQ,GAAI,cAAe,GACnC,6BAAmB,IAAK,CAAE,WAC3B;AAAA,cAAC;AAAA;AAAA,gBAEA,SAAU,MAAM;AACf;AAAA,oBACC,OAAO;AAAA,kBACR;AACA,sBAAK,CAAE,oBAAqB;AAC3B,4BAAQ;AAAA,kBACT;AAAA,gBACD;AAAA,gBACA,MACC,qBAAqB,OAAO,QACzB,QACA;AAAA,gBAGF,iBAAO;AAAA;AAAA,cAfH,UAAW,OAAO,KAAM;AAAA,YAgB/B,CACC,GACH;AAAA,aAEF;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

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

@@ -85,9 +85,6 @@ function getIframeSrc(resolvedAssets) {
 		${resolvedAssets.styles ?? ""}
 		${resolvedAssets.scripts ?? ""}
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
 </html>`;
   src = URL.createObjectURL(new Blob([html], { type: "text/html" }));
   iframeSrcCache.set(resolvedAssets, src);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/iframe/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, createPortal, forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { useScaleCanvas } from './use-scale-canvas';\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\nconst iframeSrcCache = new WeakMap();\nconst iframeSrcCleanup = globalThis.FinalizationRegistry\n\t? new globalThis.FinalizationRegistry( ( url ) =>\n\t\t\tURL.revokeObjectURL( url )\n\t  )\n\t: undefined;\n\nfunction getIframeSrc( resolvedAssets ) {\n\tlet src = iframeSrcCache.get( resolvedAssets );\n\tif ( src ) {\n\t\treturn src;\n\t}\n\n\t// Correct doctype is required to enable rendering in standards mode.\n\t// Also preload the styles to avoid a flash of unstyled content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<base href=\"${ window.location.href }\">\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${ resolvedAssets.styles ?? '' }\n\t\t${ resolvedAssets.scripts ?? '' }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tsrc = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );\n\tiframeSrcCache.set( resolvedAssets, src );\n\tiframeSrcCleanup?.register( resolvedAssets, src );\n\treturn src;\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 settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.isPreviewMode,\n\t\t};\n\t}, [] );\n\t/** @type {[Document, React.Dispatch<Document>]} */\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\n\tconst setRef = useRefEffect( ( node ) => {\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\t// Prevent clicks on link fragments from navigating away. Note that links\n\t\t// inside `contenteditable` are already disabled by the browser, so\n\t\t// this is for links in blocks outside of `contenteditable`.\n\t\tfunction interceptLinkClicks( event ) {\n\t\t\tif (\n\t\t\t\tevent.target.tagName === 'A' &&\n\t\t\t\tevent.target.getAttribute( 'href' )?.startsWith( '#' )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// Manually handle link fragment navigation within the iframe. The iframe's\n\t\t\t\t// location is a blob URL, which can't be used to resolve relative links like\n\t\t\t\t// `#hash`. The relative link would be resolved against the iframe's base URL\n\t\t\t\t// or the parent frame's URL, causing the iframe to navigate to a completely\n\t\t\t\t// different page. Setting the `location.hash` works because it really sets the\n\t\t\t\t// blob URL's hash.\n\t\t\t\t//\n\t\t\t\t// Links with fragments are used for example with footnotes. Clicking on these\n\t\t\t\t// links will scroll smoothly to the anchors in the editor canvas.\n\t\t\t\tiFrameDocument.defaultView.location.hash = event.target\n\t\t\t\t\t.getAttribute( 'href' )\n\t\t\t\t\t.slice( 1 );\n\t\t\t}\n\t\t}\n\n\t\tconst { ownerDocument } = node;\n\n\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t// the server in the future (which will run the PHP filters).\n\t\tsetBodyClasses(\n\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t( name ) =>\n\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t)\n\t\t);\n\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\t\t\tsetIframeDocument( contentDocument );\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\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\tiFrameDocument.addEventListener( 'click', interceptLinkClicks );\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tsetIframeDocument( undefined );\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\tiFrameDocument?.removeEventListener( 'click', interceptLinkClicks );\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t} = useScaleCanvas( {\n\t\tscale,\n\t\tframeSize: parseInt( frameSize ),\n\t\tiframeDocument,\n\t} );\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\n\tconst unguardedBodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t] );\n\n\t// Attach the body ref only when the iframe document and window are available.\n\t// When an iframe element is moved in the DOM, like when reordering a list,\n\t// its `window` object is destroyed and recreated, and the `defaultView` field is\n\t// briefly `null`. We need to guard for such calls of the ref callbacks.\n\tconst bodyRef = useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( node.ownerDocument.defaultView ) {\n\t\t\t\tunguardedBodyRef( node );\n\t\t\t\treturn () => unguardedBodyRef( null );\n\t\t\t}\n\t\t\treturn () => {};\n\t\t},\n\t\t[ unguardedBodyRef ]\n\t);\n\n\tconst src = getIframeSrc( resolvedAssets );\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\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\tborder: 0,\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\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<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\">\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-scale-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ scaleContainerWidth }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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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, createPortal, forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { useScaleCanvas } from './use-scale-canvas';\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\nconst iframeSrcCache = new WeakMap();\nconst iframeSrcCleanup = globalThis.FinalizationRegistry\n\t? new globalThis.FinalizationRegistry( ( url ) =>\n\t\t\tURL.revokeObjectURL( url )\n\t  )\n\t: undefined;\n\nfunction getIframeSrc( resolvedAssets ) {\n\tlet src = iframeSrcCache.get( resolvedAssets );\n\tif ( src ) {\n\t\treturn src;\n\t}\n\n\t// Correct doctype is required to enable rendering in standards mode.\n\t// Also preload the styles to avoid a flash of unstyled content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<base href=\"${ window.location.href }\">\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${ resolvedAssets.styles ?? '' }\n\t\t${ resolvedAssets.scripts ?? '' }\n\t</head>\n</html>`;\n\n\tsrc = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );\n\tiframeSrcCache.set( resolvedAssets, src );\n\tiframeSrcCleanup?.register( resolvedAssets, src );\n\treturn src;\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 settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.isPreviewMode,\n\t\t};\n\t}, [] );\n\t/** @type {[Document, React.Dispatch<Document>]} */\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\n\tconst setRef = useRefEffect( ( node ) => {\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\t// Prevent clicks on link fragments from navigating away. Note that links\n\t\t// inside `contenteditable` are already disabled by the browser, so\n\t\t// this is for links in blocks outside of `contenteditable`.\n\t\tfunction interceptLinkClicks( event ) {\n\t\t\tif (\n\t\t\t\tevent.target.tagName === 'A' &&\n\t\t\t\tevent.target.getAttribute( 'href' )?.startsWith( '#' )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// Manually handle link fragment navigation within the iframe. The iframe's\n\t\t\t\t// location is a blob URL, which can't be used to resolve relative links like\n\t\t\t\t// `#hash`. The relative link would be resolved against the iframe's base URL\n\t\t\t\t// or the parent frame's URL, causing the iframe to navigate to a completely\n\t\t\t\t// different page. Setting the `location.hash` works because it really sets the\n\t\t\t\t// blob URL's hash.\n\t\t\t\t//\n\t\t\t\t// Links with fragments are used for example with footnotes. Clicking on these\n\t\t\t\t// links will scroll smoothly to the anchors in the editor canvas.\n\t\t\t\tiFrameDocument.defaultView.location.hash = event.target\n\t\t\t\t\t.getAttribute( 'href' )\n\t\t\t\t\t.slice( 1 );\n\t\t\t}\n\t\t}\n\n\t\tconst { ownerDocument } = node;\n\n\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t// the server in the future (which will run the PHP filters).\n\t\tsetBodyClasses(\n\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t( name ) =>\n\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t)\n\t\t);\n\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\t\t\tsetIframeDocument( contentDocument );\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\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\tiFrameDocument.addEventListener( 'click', interceptLinkClicks );\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tsetIframeDocument( undefined );\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\tiFrameDocument?.removeEventListener( 'click', interceptLinkClicks );\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t} = useScaleCanvas( {\n\t\tscale,\n\t\tframeSize: parseInt( frameSize ),\n\t\tiframeDocument,\n\t} );\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\n\tconst unguardedBodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t] );\n\n\t// Attach the body ref only when the iframe document and window are available.\n\t// When an iframe element is moved in the DOM, like when reordering a list,\n\t// its `window` object is destroyed and recreated, and the `defaultView` field is\n\t// briefly `null`. We need to guard for such calls of the ref callbacks.\n\tconst bodyRef = useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( node.ownerDocument.defaultView ) {\n\t\t\t\tunguardedBodyRef( node );\n\t\t\t\treturn () => unguardedBodyRef( null );\n\t\t\t}\n\t\t\treturn () => {};\n\t\t},\n\t\t[ unguardedBodyRef ]\n\t);\n\n\tconst src = getIframeSrc( resolvedAssets );\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\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\tborder: 0,\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\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<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\">\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-scale-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ scaleContainerWidth }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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",
   "names": []
 }

package/build-module/components/iframe/use-scale-canvas.mjs

@@ -152,7 +152,10 @@ function useScaleCanvas({
   }, [iframeDocument]);
   const previousIsZoomedOut = useRef(false);
   useEffect(() => {
-    const trigger = iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+    if (!iframeDocument) {
+      return;
+    }
+    const trigger = previousIsZoomedOut.current !== isZoomedOut;
     previousIsZoomedOut.current = isZoomedOut;
     if (!trigger) {
       return;

package/build-module/components/iframe/use-scale-canvas.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/iframe/use-scale-canvas.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/**\n * @typedef {Object} TransitionState\n * @property {number} scaleValue      Scale of the canvas.\n * @property {number} frameSize       Size of the frame/offset around the canvas.\n * @property {number} containerHeight containerHeight of the iframe.\n * @property {number} scrollTop       ScrollTop of the iframe.\n * @property {number} scrollHeight    ScrollHeight of the iframe.\n */\n\n/**\n * Calculate the scale of the canvas.\n *\n * @param {Object} options                     Object of options\n * @param {number} options.frameSize           Size of the frame/offset around the canvas\n * @param {number} options.containerWidth      Actual width of the canvas container\n * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n */\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/**\n * Compute the next scrollHeight based on the transition states.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n */\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;\n}\n\n/**\n * Compute the next scrollTop position after scaling the iframe content.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n */\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + containerHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop = scrollHeight - containerHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/**\n * Generate the keyframes to use for the zoom out animation.\n *\n * @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo   Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n */\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/**\n * @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.\n * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.\n * @property {Object}  contentResizeListener   A resize observer for the content.\n * @property {Object}  containerResizeListener A resize observer for the container.\n */\n\n/**\n * Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n *\n * @param {Object}        options                   Object of options.\n * @param {number}        options.frameSize         Size of the frame around the content.\n * @param {Document}      options.iframeDocument    Document of the iframe.\n * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n */\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t  } )\n\t\t: scale;\n\n\t/**\n\t * The starting transition state for the zoom out animation.\n\t * @type {React.RefObject<TransitionState>}\n\t */\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * The ending transition state for the zoom out animation.\n\t * @type {React.RefObject<TransitionState>}\n\t */\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t *\n\t * @return {Animation} The animation object for the zoom out animation.\n\t */\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t */\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\n\n\t/**\n\t * Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t */\n\tuseEffect( () => {\n\t\tconst trigger =\n\t\t\tiframeDocument && previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/**\n\t * This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Handle the zoom out animation:\n\t\t *\n\t\t * - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t *   to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t *   and set the scroll position that keeps everything centered.\n\t\t */\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/**\n\t\t\t * If we already have an animation running, reverse it.\n\t\t\t */\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tcontainerHeight,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/**\n * @typedef {Object} TransitionState\n * @property {number} scaleValue      Scale of the canvas.\n * @property {number} frameSize       Size of the frame/offset around the canvas.\n * @property {number} containerHeight containerHeight of the iframe.\n * @property {number} scrollTop       ScrollTop of the iframe.\n * @property {number} scrollHeight    ScrollHeight of the iframe.\n */\n\n/**\n * Calculate the scale of the canvas.\n *\n * @param {Object} options                     Object of options\n * @param {number} options.frameSize           Size of the frame/offset around the canvas\n * @param {number} options.containerWidth      Actual width of the canvas container\n * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n */\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/**\n * Compute the next scrollHeight based on the transition states.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n */\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;\n}\n\n/**\n * Compute the next scrollTop position after scaling the iframe content.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n */\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + containerHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop = scrollHeight - containerHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/**\n * Generate the keyframes to use for the zoom out animation.\n *\n * @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo   Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n */\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/**\n * @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.\n * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.\n * @property {Object}  contentResizeListener   A resize observer for the content.\n * @property {Object}  containerResizeListener A resize observer for the container.\n */\n\n/**\n * Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n *\n * @param {Object}        options                   Object of options.\n * @param {number}        options.frameSize         Size of the frame around the content.\n * @param {Document}      options.iframeDocument    Document of the iframe.\n * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n */\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t  } )\n\t\t: scale;\n\n\t/**\n\t * The starting transition state for the zoom out animation.\n\t * @type {React.RefObject<TransitionState>}\n\t */\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * The ending transition state for the zoom out animation.\n\t * @type {React.RefObject<TransitionState>}\n\t */\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t *\n\t * @return {Animation} The animation object for the zoom out animation.\n\t */\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t */\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\n\n\t/**\n\t * Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t */\n\tuseEffect( () => {\n\t\t// Wait for the iframe document so a zoom out state that is already\n\t\t// active on mount (e.g. when the canvas is remounted on a viewport\n\t\t// change) is still detected as a transition.\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst trigger = previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/**\n\t * This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Handle the zoom out animation:\n\t\t *\n\t\t * - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t *   to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t *   and set the scroll position that keeps everything centered.\n\t\t */\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/**\n\t\t\t * If we already have an animation running, reverse it.\n\t\t\t */\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tcontainerHeight,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/inserter/hooks/use-patterns-state.mjs

@@ -6,7 +6,10 @@ import { __, sprintf } from "@wordpress/i18n";
 import { store as noticesStore } from "@wordpress/notices";
 import { store as blockEditorStore } from "../../../store/index.mjs";
 import { unlock } from "../../../lock-unlock.mjs";
-import { isNavigationOverlayContextKey } from "../../../store/private-keys.mjs";
+import {
+  isNavigationOverlayContextKey,
+  userPatternCategoriesSelectKey
+} from "../../../store/private-keys.mjs";
 import { INSERTER_PATTERN_TYPES } from "../block-patterns-tab/utils.mjs";
 import { isFiltered } from "../../../store/utils.mjs";
 var usePatternsState = (onInsert, rootClientId, selectedCategory, isQuick) => {
@@ -24,17 +27,15 @@ var usePatternsState = (onInsert, rootClientId, selectedCategory, isQuick) => {
       const { getSettings, __experimentalGetAllowedPatterns } = unlock(
         select(blockEditorStore)
       );
-      const {
-        __experimentalUserPatternCategories,
-        __experimentalBlockPatternCategories
-      } = getSettings();
+      const settings = getSettings();
+      const userPatternCategoriesSelect = settings[userPatternCategoriesSelectKey];
       return {
         patterns: __experimentalGetAllowedPatterns(
           rootClientId,
           options
         ),
-        userPatternCategories: __experimentalUserPatternCategories,
-        patternCategories: __experimentalBlockPatternCategories
+        userPatternCategories: userPatternCategoriesSelect ? userPatternCategoriesSelect(select) : settings.__experimentalUserPatternCategories,
+        patternCategories: settings.__experimentalBlockPatternCategories
       };
     },
     [rootClientId, options]

package/build-module/components/inserter/hooks/use-patterns-state.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/hooks/use-patterns-state.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { cloneBlock, createBlock } from '@wordpress/blocks';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\nimport { isNavigationOverlayContextKey } from '../../../store/private-keys';\nimport { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';\nimport { isFiltered } from '../../../store/utils';\n\n/**\n * Retrieves the block patterns inserter state.\n *\n * @param {Function} onInsert         function called when inserter a list of blocks.\n * @param {string=}  rootClientId     Insertion's root client ID.\n * @param {string}   selectedCategory The selected pattern category.\n * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.\n *\n * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)\n */\nconst usePatternsState = (\n\tonInsert,\n\trootClientId,\n\tselectedCategory,\n\tisQuick\n) => {\n\tconst options = useMemo(\n\t\t() => ( { [ isFiltered ]: !! isQuick } ),\n\t\t[ isQuick ]\n\t);\n\n\t// Check if we're editing a navigation-overlay template part.\n\t// This information is passed through block editor settings to avoid\n\t// cross-package dependencies.\n\tconst isWithinNavigationOverlayContext = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( blockEditorStore ) );\n\t\tconst settings = getSettings();\n\t\treturn settings[ isNavigationOverlayContextKey ] ?? false;\n\t}, [] );\n\n\tconst { patternCategories, patterns, userPatternCategories } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings, __experimentalGetAllowedPatterns } = unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t);\n\t\t\tconst {\n\t\t\t\t__experimentalUserPatternCategories,\n\t\t\t\t__experimentalBlockPatternCategories,\n\t\t\t} = getSettings();\n\t\t\treturn {\n\t\t\t\tpatterns: __experimentalGetAllowedPatterns(\n\t\t\t\t\trootClientId,\n\t\t\t\t\toptions\n\t\t\t\t),\n\t\t\t\tuserPatternCategories: __experimentalUserPatternCategories,\n\t\t\t\tpatternCategories: __experimentalBlockPatternCategories,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId, options ]\n\t);\n\n\t// Filter out patterns with \"navigation\" category unless we're in\n\t// navigation-overlay template part context.\n\t// TO DO: create an api for patterns to decide in which context they should be shown.\n\tconst filteredPatterns = useMemo( () => {\n\t\treturn patterns.filter( ( pattern ) => {\n\t\t\tconst hasNavigationCategory =\n\t\t\t\tpattern.categories?.includes( 'navigation' );\n\t\t\tif ( hasNavigationCategory && ! isWithinNavigationOverlayContext ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t} );\n\t}, [ patterns, isWithinNavigationOverlayContext ] );\n\tconst { getClosestAllowedInsertionPointForPattern } = unlock(\n\t\tuseSelect( blockEditorStore )\n\t);\n\n\tconst allCategories = useMemo( () => {\n\t\tconst categories = [ ...patternCategories ];\n\t\tuserPatternCategories?.forEach( ( userCategory ) => {\n\t\t\tif (\n\t\t\t\t! categories.find(\n\t\t\t\t\t( existingCategory ) =>\n\t\t\t\t\t\texistingCategory.name === userCategory.name\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tcategories.push( userCategory );\n\t\t\t}\n\t\t} );\n\t\treturn categories;\n\t}, [ patternCategories, userPatternCategories ] );\n\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst onClickPattern = useCallback(\n\t\t( pattern, blocks ) => {\n\t\t\tconst destinationRootClientId = isQuick\n\t\t\t\t? rootClientId\n\t\t\t\t: getClosestAllowedInsertionPointForPattern(\n\t\t\t\t\t\tpattern,\n\t\t\t\t\t\trootClientId\n\t\t\t\t  );\n\t\t\tif ( destinationRootClientId === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst patternBlocks =\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user &&\n\t\t\t\tpattern.syncStatus !== 'unsynced'\n\t\t\t\t\t? [ createBlock( 'core/block', { ref: pattern.id } ) ]\n\t\t\t\t\t: blocks;\n\t\t\tonInsert(\n\t\t\t\t( patternBlocks ?? [] ).map( ( block ) => {\n\t\t\t\t\tconst clonedBlock = cloneBlock( block );\n\t\t\t\t\tif (\n\t\t\t\t\t\tclonedBlock.attributes.metadata?.categories?.includes(\n\t\t\t\t\t\t\tselectedCategory\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\tclonedBlock.attributes.metadata.categories = [\n\t\t\t\t\t\t\tselectedCategory,\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\t\t\t\t\treturn clonedBlock;\n\t\t\t\t} ),\n\t\t\t\tpattern.name,\n\t\t\t\tfalse,\n\t\t\t\tdestinationRootClientId\n\t\t\t);\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t__( 'Block pattern \"%s\" inserted.' ),\n\t\t\t\t\tpattern.title\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tcreateSuccessNotice,\n\t\t\tonInsert,\n\t\t\tselectedCategory,\n\t\t\trootClientId,\n\t\t\tgetClosestAllowedInsertionPointForPattern,\n\t\t\tisQuick,\n\t\t]\n\t);\n\n\treturn [ filteredPatterns, allCategories, onClickPattern ];\n};\n\nexport default usePatternsState;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { cloneBlock, createBlock } from '@wordpress/blocks';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\nimport {\n\tisNavigationOverlayContextKey,\n\tuserPatternCategoriesSelectKey,\n} from '../../../store/private-keys';\nimport { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';\nimport { isFiltered } from '../../../store/utils';\n\n/**\n * Retrieves the block patterns inserter state.\n *\n * @param {Function} onInsert         function called when inserter a list of blocks.\n * @param {string=}  rootClientId     Insertion's root client ID.\n * @param {string}   selectedCategory The selected pattern category.\n * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.\n *\n * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)\n */\nconst usePatternsState = (\n\tonInsert,\n\trootClientId,\n\tselectedCategory,\n\tisQuick\n) => {\n\tconst options = useMemo(\n\t\t() => ( { [ isFiltered ]: !! isQuick } ),\n\t\t[ isQuick ]\n\t);\n\n\t// Check if we're editing a navigation-overlay template part.\n\t// This information is passed through block editor settings to avoid\n\t// cross-package dependencies.\n\tconst isWithinNavigationOverlayContext = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( blockEditorStore ) );\n\t\tconst settings = getSettings();\n\t\treturn settings[ isNavigationOverlayContextKey ] ?? false;\n\t}, [] );\n\n\tconst { patternCategories, patterns, userPatternCategories } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings, __experimentalGetAllowedPatterns } = unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t);\n\t\t\tconst settings = getSettings();\n\t\t\tconst userPatternCategoriesSelect =\n\t\t\t\tsettings[ userPatternCategoriesSelectKey ];\n\t\t\treturn {\n\t\t\t\tpatterns: __experimentalGetAllowedPatterns(\n\t\t\t\t\trootClientId,\n\t\t\t\t\toptions\n\t\t\t\t),\n\t\t\t\tuserPatternCategories: userPatternCategoriesSelect\n\t\t\t\t\t? userPatternCategoriesSelect( select )\n\t\t\t\t\t: settings.__experimentalUserPatternCategories,\n\t\t\t\tpatternCategories:\n\t\t\t\t\tsettings.__experimentalBlockPatternCategories,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId, options ]\n\t);\n\n\t// Filter out patterns with \"navigation\" category unless we're in\n\t// navigation-overlay template part context.\n\t// TO DO: create an api for patterns to decide in which context they should be shown.\n\tconst filteredPatterns = useMemo( () => {\n\t\treturn patterns.filter( ( pattern ) => {\n\t\t\tconst hasNavigationCategory =\n\t\t\t\tpattern.categories?.includes( 'navigation' );\n\t\t\tif ( hasNavigationCategory && ! isWithinNavigationOverlayContext ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t} );\n\t}, [ patterns, isWithinNavigationOverlayContext ] );\n\tconst { getClosestAllowedInsertionPointForPattern } = unlock(\n\t\tuseSelect( blockEditorStore )\n\t);\n\n\tconst allCategories = useMemo( () => {\n\t\tconst categories = [ ...patternCategories ];\n\t\tuserPatternCategories?.forEach( ( userCategory ) => {\n\t\t\tif (\n\t\t\t\t! categories.find(\n\t\t\t\t\t( existingCategory ) =>\n\t\t\t\t\t\texistingCategory.name === userCategory.name\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tcategories.push( userCategory );\n\t\t\t}\n\t\t} );\n\t\treturn categories;\n\t}, [ patternCategories, userPatternCategories ] );\n\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst onClickPattern = useCallback(\n\t\t( pattern, blocks ) => {\n\t\t\tconst destinationRootClientId = isQuick\n\t\t\t\t? rootClientId\n\t\t\t\t: getClosestAllowedInsertionPointForPattern(\n\t\t\t\t\t\tpattern,\n\t\t\t\t\t\trootClientId\n\t\t\t\t  );\n\t\t\tif ( destinationRootClientId === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst patternBlocks =\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user &&\n\t\t\t\tpattern.syncStatus !== 'unsynced'\n\t\t\t\t\t? [ createBlock( 'core/block', { ref: pattern.id } ) ]\n\t\t\t\t\t: blocks;\n\t\t\tonInsert(\n\t\t\t\t( patternBlocks ?? [] ).map( ( block ) => {\n\t\t\t\t\tconst clonedBlock = cloneBlock( block );\n\t\t\t\t\tif (\n\t\t\t\t\t\tclonedBlock.attributes.metadata?.categories?.includes(\n\t\t\t\t\t\t\tselectedCategory\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\tclonedBlock.attributes.metadata.categories = [\n\t\t\t\t\t\t\tselectedCategory,\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\t\t\t\t\treturn clonedBlock;\n\t\t\t\t} ),\n\t\t\t\tpattern.name,\n\t\t\t\tfalse,\n\t\t\t\tdestinationRootClientId\n\t\t\t);\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t__( 'Block pattern \"%s\" inserted.' ),\n\t\t\t\t\tpattern.title\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tcreateSuccessNotice,\n\t\t\tonInsert,\n\t\t\tselectedCategory,\n\t\t\trootClientId,\n\t\t\tgetClosestAllowedInsertionPointForPattern,\n\t\t\tisQuick,\n\t\t]\n\t);\n\n\treturn [ filteredPatterns, allCategories, onClickPattern ];\n};\n\nexport default usePatternsState;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/inserter/index.mjs

@@ -59,6 +59,7 @@ var defaultRenderToggle = ({
       className: "block-editor-inserter__toggle",
       "aria-haspopup": !hasSingleBlockType ? "true" : false,
       "aria-expanded": !hasSingleBlockType ? isOpen : false,
+      isPressed: !hasSingleBlockType && isOpen,
       disabled,
       ...rest
     }