@wordpress/block-editor 15.21.0 → 15.22.0

package/build-module/components/global-styles/typography-panel.mjs

@@ -9,7 +9,6 @@ import {
 } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import { useCallback, useMemo } from "@wordpress/element";
-import { getValueFromVariable } from "@wordpress/global-styles-engine";
 import FontFamilyControl from "../font-family/index.mjs";
 import FontAppearanceControl from "../font-appearance-control/index.mjs";
 import LineHeightControl from "../line-height-control/index.mjs";
@@ -19,8 +18,15 @@ import TextTransformControl from "../text-transform-control/index.mjs";
 import TextDecorationControl from "../text-decoration-control/index.mjs";
 import TextIndentControl from "../text-indent-control/index.mjs";
 import WritingModeControl from "../writing-mode-control/index.mjs";
+import ColorGradientDropdownItem from "./color-gradient-dropdown-item.mjs";
+import { useHasTextPanel } from "./color-panel.mjs";
+import { useColorGradientSettings } from "./hooks.mjs";
 import { useToolsPanelDropdownMenuProps } from "./utils.mjs";
 import { setImmutably } from "../../utils/object.mjs";
+import {
+  extractPresetSlug,
+  encodeColorValueWithPalette
+} from "../../utils/color-values.mjs";
 import {
   getMergedFontFamiliesAndFontFamilyFaces,
   findNearestStyleAndWeight
@@ -41,7 +47,8 @@ function useHasTypographyPanel(settings) {
   const hasWritingMode = useHasWritingModeControl(settings);
   const hasTextColumns = useHasTextColumnsControl(settings);
   const hasFontSize = useHasFontSizeControl(settings);
-  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns;
+  const hasTextColor = useHasTextPanel(settings);
+  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns || hasTextColor;
 }
 function useHasFontSizeControl(settings) {
   return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
@@ -114,12 +121,14 @@ function TypographyToolsPanel({
       label: __("Typography"),
       resetAll,
       panelId,
+      __experimentalFirstVisibleItemClass: "first",
       dropdownMenuProps,
       children
     }
   );
 }
 var DEFAULT_CONTROLS = {
+  textColor: true,
   fontFamily: true,
   fontSize: true,
   fontAppearance: true,
@@ -140,9 +149,31 @@ function TypographyPanel({
   settings,
   panelId,
   defaultControls = DEFAULT_CONTROLS,
-  isGlobalStyles = false
+  isGlobalStyles = false,
+  contrastWarning
 }) {
-  const decodeValue = (rawValue) => getValueFromVariable({ settings }, "", rawValue);
+  const { colors, allColors, areCustomSolidsEnabled, decodeValue } = useColorGradientSettings(settings);
+  const hasTextColorEnabled = useHasTextPanel(settings);
+  const textColor = decodeValue(inheritedValue?.color?.text);
+  const userTextColor = decodeValue(value?.color?.text);
+  const hasTextColorValue = () => !!value?.color?.text;
+  const setTextColor = (newColor, newSlug) => {
+    const encoded = encodeColorValueWithPalette(
+      allColors,
+      newColor,
+      newSlug
+    );
+    let changedObject = setImmutably(value, ["color", "text"], encoded);
+    if (inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text) {
+      changedObject = setImmutably(
+        changedObject,
+        ["elements", "link", "color", "text"],
+        encoded
+      );
+    }
+    onChange(changedObject);
+  };
+  const resetTextColor = () => setTextColor(void 0);
   const hasFontFamilyEnabled = useHasFontFamilyControl(settings);
   const fontFamily = decodeValue(inheritedValue?.typography?.fontFamily);
   const { fontFamilies, fontFamilyFaces } = useMemo(() => {
@@ -379,12 +410,25 @@ function TypographyPanel({
   };
   const hasTextAlign = () => !!value?.typography?.textAlign;
   const resetTextAlign = () => setTextAlign(void 0);
-  const resetAllFilter = useCallback((previousValue) => {
-    return {
-      ...previousValue,
-      typography: {}
-    };
-  }, []);
+  const resetAllFilter = useCallback(
+    (previousValue) => {
+      if (!hasTextColorEnabled) {
+        return {
+          ...previousValue,
+          typography: {}
+        };
+      }
+      return {
+        ...previousValue,
+        typography: {},
+        color: {
+          ...previousValue?.color,
+          text: void 0
+        }
+      };
+    },
+    [hasTextColorEnabled]
+  );
   return /* @__PURE__ */ jsxs(
     Wrapper,
     {
@@ -393,6 +437,35 @@ function TypographyPanel({
       onChange,
       panelId,
       children: [
+        hasTextColorEnabled && /* @__PURE__ */ jsx(
+          ColorGradientDropdownItem,
+          {
+            label: __("Color"),
+            hasValue: hasTextColorValue,
+            resetValue: resetTextColor,
+            isShownByDefault: defaultControls.textColor,
+            indicators: [textColor],
+            contrastWarning,
+            tabs: [
+              {
+                key: "text",
+                label: __("Color"),
+                inheritedValue: textColor,
+                inheritedSlug: extractPresetSlug(
+                  inheritedValue?.color?.text,
+                  "color"
+                ),
+                setValue: setTextColor,
+                userValue: userTextColor
+              }
+            ],
+            colorGradientControlSettings: {
+              colors,
+              disableCustomColors: !areCustomSolidsEnabled
+            },
+            panelId
+          }
+        ),
         hasFontFamilyEnabled && /* @__PURE__ */ jsx(
           ToolsPanelItem,
           {
@@ -643,6 +716,7 @@ function TypographyPanel({
   );
 }
 export {
+  TypographyToolsPanel,
   TypographyPanel as default,
   useHasTypographyPanel
 };

package/build-module/components/global-styles/typography-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/typography-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFontSizePicker,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tNotice,\n\tToggleControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport FontFamilyControl from '../font-family';\nimport FontAppearanceControl from '../font-appearance-control';\nimport LineHeightControl from '../line-height-control';\nimport LetterSpacingControl from '../letter-spacing-control';\nimport TextAlignmentControl from '../text-alignment-control';\nimport TextTransformControl from '../text-transform-control';\nimport TextDecorationControl from '../text-decoration-control';\nimport TextIndentControl from '../text-indent-control';\nimport WritingModeControl from '../writing-mode-control';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport {\n\tgetMergedFontFamiliesAndFontFamilyFaces,\n\tfindNearestStyleAndWeight,\n} from './typography-utils';\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\n\nconst MIN_TEXT_COLUMNS = 1;\nconst MAX_TEXT_COLUMNS = 6;\n\nexport function useHasTypographyPanel( settings ) {\n\tconst hasFontFamily = useHasFontFamilyControl( settings );\n\tconst hasLineHeight = useHasLineHeightControl( settings );\n\tconst hasFontAppearance = useHasAppearanceControl( settings );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( settings );\n\tconst hasTextAlign = useHasTextAlignmentControl( settings );\n\tconst hasTextTransform = useHasTextTransformControl( settings );\n\tconst hasTextDecoration = useHasTextDecorationControl( settings );\n\tconst hasTextIndent = useHasTextIndentControl( settings );\n\tconst hasWritingMode = useHasWritingModeControl( settings );\n\tconst hasTextColumns = useHasTextColumnsControl( settings );\n\tconst hasFontSize = useHasFontSizeControl( settings );\n\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\thasTextAlign ||\n\t\thasTextTransform ||\n\t\thasFontSize ||\n\t\thasTextDecoration ||\n\t\thasTextIndent ||\n\t\thasWritingMode ||\n\t\thasTextColumns\n\t);\n}\n\nfunction useHasFontSizeControl( settings ) {\n\treturn (\n\t\t( settings?.typography?.defaultFontSizes !== false &&\n\t\t\tsettings?.typography?.fontSizes?.default?.length ) ||\n\t\tsettings?.typography?.fontSizes?.theme?.length ||\n\t\tsettings?.typography?.fontSizes?.custom?.length ||\n\t\tsettings?.typography?.customFontSize\n\t);\n}\n\nfunction useHasFontFamilyControl( settings ) {\n\treturn [ 'default', 'theme', 'custom' ].some(\n\t\t( key ) => settings?.typography?.fontFamilies?.[ key ]?.length\n\t);\n}\n\nfunction useHasLineHeightControl( settings ) {\n\treturn settings?.typography?.lineHeight;\n}\n\nfunction useHasAppearanceControl( settings ) {\n\treturn settings?.typography?.fontStyle || settings?.typography?.fontWeight;\n}\n\nfunction useAppearanceControlLabel( settings ) {\n\tif ( ! settings?.typography?.fontStyle ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! settings?.typography?.fontWeight ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( settings ) {\n\treturn settings?.typography?.letterSpacing;\n}\n\nfunction useHasTextTransformControl( settings ) {\n\treturn settings?.typography?.textTransform;\n}\n\nfunction useHasTextAlignmentControl( settings ) {\n\treturn settings?.typography?.textAlign;\n}\n\nfunction useHasTextDecorationControl( settings ) {\n\treturn settings?.typography?.textDecoration;\n}\n\nfunction useHasWritingModeControl( settings ) {\n\treturn settings?.typography?.writingMode;\n}\n\nfunction useHasTextColumnsControl( settings ) {\n\treturn settings?.typography?.textColumns;\n}\n\nfunction useHasTextIndentControl( settings ) {\n\treturn settings?.typography?.textIndent;\n}\n\n/**\n * Concatenate all the font sizes into a single list for the font size picker.\n *\n * @param {Object} settings The global styles settings.\n *\n * @return {Array} The merged font sizes.\n */\nfunction getMergedFontSizes( settings ) {\n\tconst fontSizes = settings?.typography?.fontSizes;\n\tconst defaultFontSizesEnabled = !! settings?.typography?.defaultFontSizes;\n\treturn [\n\t\t...( fontSizes?.custom ?? [] ),\n\t\t...( fontSizes?.theme ?? [] ),\n\t\t...( defaultFontSizesEnabled ? fontSizes?.default ?? [] : [] ),\n\t];\n}\n\nfunction TypographyToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Typography' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tfontFamily: true,\n\tfontSize: true,\n\tfontAppearance: true,\n\tlineHeight: true,\n\tletterSpacing: true,\n\ttextAlign: true,\n\ttextTransform: true,\n\ttextDecoration: true,\n\ttextIndent: true,\n\twritingMode: true,\n\ttextColumns: true,\n};\n\nexport default function TypographyPanel( {\n\tas: Wrapper = TypographyToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tisGlobalStyles = false,\n} ) {\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\n\t// Font Family\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( settings );\n\tconst fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );\n\tconst { fontFamilies, fontFamilyFaces } = useMemo( () => {\n\t\treturn getMergedFontFamiliesAndFontFamilyFaces( settings, fontFamily );\n\t}, [ settings, fontFamily ] );\n\n\tconst setFontFamily = ( newValue ) => {\n\t\tconst slug = fontFamilies?.find(\n\t\t\t( { fontFamily: f } ) => f === newValue\n\t\t)?.slug;\n\t\tlet updatedValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'typography', 'fontFamily' ],\n\t\t\tslug ? `var:preset|font-family|${ slug }` : newValue || undefined\n\t\t);\n\n\t\t// Check if current font style/weight are available in the new font family.\n\t\tconst newFontFamilyFaces =\n\t\t\tfontFamilies?.find( ( { fontFamily: f } ) => f === newValue )\n\t\t\t\t?.fontFace ?? [];\n\t\tconst { fontStyles, fontWeights } =\n\t\t\tgetFontStylesAndWeights( newFontFamilyFaces );\n\t\tconst hasFontStyle = fontStyles?.some(\n\t\t\t( { value: fs } ) => fs === fontStyle\n\t\t);\n\t\tconst hasFontWeight = fontWeights?.some(\n\t\t\t( { value: fw } ) => fw?.toString() === fontWeight?.toString()\n\t\t);\n\n\t\t// Find the nearest available font style/weight if not available.\n\t\tif ( ! hasFontStyle || ! hasFontWeight ) {\n\t\t\tconst { nearestFontStyle, nearestFontWeight } =\n\t\t\t\tfindNearestStyleAndWeight(\n\t\t\t\t\tnewFontFamilyFaces,\n\t\t\t\t\tfontStyle,\n\t\t\t\t\tfontWeight\n\t\t\t\t);\n\t\t\tif ( nearestFontStyle || nearestFontWeight ) {\n\t\t\t\t// Update to the nearest available font style/weight in the new font family.\n\t\t\t\tupdatedValue = {\n\t\t\t\t\t...updatedValue,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...updatedValue?.typography,\n\t\t\t\t\t\tfontStyle: nearestFontStyle || undefined,\n\t\t\t\t\t\tfontWeight: nearestFontWeight || undefined,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t} else if ( fontStyle || fontWeight ) {\n\t\t\t\t// Reset if no available styles/weights found.\n\t\t\t\tupdatedValue = {\n\t\t\t\t\t...updatedValue,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...updatedValue?.typography,\n\t\t\t\t\t\tfontStyle: undefined,\n\t\t\t\t\t\tfontWeight: undefined,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\tonChange( updatedValue );\n\t};\n\tconst hasFontFamily = () => !! value?.typography?.fontFamily;\n\tconst resetFontFamily = () => setFontFamily( undefined );\n\n\t// Font Size\n\tconst hasFontSizeEnabled = useHasFontSizeControl( settings );\n\tconst disableCustomFontSizes = ! settings?.typography?.customFontSize;\n\tconst mergedFontSizes = getMergedFontSizes( settings );\n\n\tconst fontSize = decodeValue( inheritedValue?.typography?.fontSize );\n\n\t// Extract the slug from the CSS custom property if it exists\n\tconst currentFontSizeSlug = ( () => {\n\t\tconst rawValue = inheritedValue?.typography?.fontSize;\n\t\tif ( ! rawValue || typeof rawValue !== 'string' ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\t// Block supports use `var:preset` format.\n\t\tif ( rawValue.startsWith( 'var:preset|font-size|' ) ) {\n\t\t\treturn rawValue.replace( 'var:preset|font-size|', '' );\n\t\t}\n\n\t\t// Global styles data uses `var(--wp--preset)` format.\n\t\tconst cssVarMatch = rawValue.match(\n\t\t\t/^var\\(--wp--preset--font-size--([^)]+)\\)$/\n\t\t);\n\t\tif ( cssVarMatch ) {\n\t\t\treturn cssVarMatch[ 1 ];\n\t\t}\n\n\t\treturn undefined;\n\t} )();\n\n\tconst setFontSize = ( newValue, metadata ) => {\n\t\tconst actualValue = !! metadata?.slug\n\t\t\t? `var:preset|font-size|${ metadata?.slug }`\n\t\t\t: newValue;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t\tactualValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasFontSize = () => !! value?.typography?.fontSize;\n\tconst resetFontSize = () => setFontSize( undefined );\n\n\t// Appearance\n\tconst hasAppearanceControl = useHasAppearanceControl( settings );\n\tconst appearanceControlLabel = useAppearanceControlLabel( settings );\n\tconst hasFontStyles = settings?.typography?.fontStyle;\n\tconst hasFontWeights = settings?.typography?.fontWeight;\n\tconst fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );\n\tconst fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );\n\tconst setFontAppearance = useCallback(\n\t\t( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {\n\t\t\t// Only update the font style and weight if they have changed.\n\t\t\tif ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {\n\t\t\t\tonChange( {\n\t\t\t\t\t...value,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...value?.typography,\n\t\t\t\t\t\tfontStyle: newFontStyle || undefined,\n\t\t\t\t\t\tfontWeight: newFontWeight || undefined,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ fontStyle, fontWeight, onChange, value ]\n\t);\n\tconst hasFontAppearance = () =>\n\t\t!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;\n\tconst resetFontAppearance = useCallback( () => {\n\t\tsetFontAppearance( {} );\n\t}, [ setFontAppearance ] );\n\n\t// Line Height\n\tconst hasLineHeightEnabled = useHasLineHeightControl( settings );\n\tconst lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );\n\tconst setLineHeight = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLineHeight = () => value?.typography?.lineHeight !== undefined;\n\tconst resetLineHeight = () => setLineHeight( undefined );\n\n\t// Letter Spacing\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( settings );\n\tconst letterSpacing = decodeValue(\n\t\tinheritedValue?.typography?.letterSpacing\n\t);\n\tconst setLetterSpacing = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLetterSpacing = () => !! value?.typography?.letterSpacing;\n\tconst resetLetterSpacing = () => setLetterSpacing( undefined );\n\n\t// Text Indent\n\tconst hasTextIndentControl = useHasTextIndentControl( settings );\n\tconst textIndent = decodeValue( inheritedValue?.typography?.textIndent );\n\n\t// Get the setting value - can be 'subsequent' (default), 'all', or false.\n\t// The setting determines which CSS selector is used for the text-indent style.\n\tconst textIndentSetting = settings?.typography?.textIndent ?? 'subsequent';\n\tconst isTextIndentAll = textIndentSetting === 'all';\n\n\tconst setTextIndentValue = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textIndent' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\n\tconst onToggleTextIndentAll = ( newValue ) => {\n\t\t// Toggle between 'all' and 'subsequent' for the setting.\n\t\t// Include the settings change so it can be handled atomically by the parent.\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tsettings: {\n\t\t\t\ttypography: {\n\t\t\t\t\ttextIndent: newValue ? 'all' : 'subsequent',\n\t\t\t\t},\n\t\t\t},\n\t\t} );\n\t};\n\n\tconst hasTextIndent = () => !! value?.typography?.textIndent;\n\tconst resetTextIndent = () => {\n\t\tonChange(\n\t\t\tsetImmutably( value, [ 'typography', 'textIndent' ], undefined )\n\t\t);\n\t};\n\tconst textIndentHelp = isTextIndentAll\n\t\t? __( 'Indents the first line of all paragraphs.' )\n\t\t: __( 'Indents the first line of each paragraph after the first one.' );\n\n\t// Text Columns\n\tconst hasTextColumnsControl = useHasTextColumnsControl( settings );\n\tconst textColumns = decodeValue( inheritedValue?.typography?.textColumns );\n\tconst setTextColumns = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textColumns' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextColumns = () => !! value?.typography?.textColumns;\n\tconst resetTextColumns = () => setTextColumns( undefined );\n\n\t// Text Transform\n\tconst hasTextTransformControl = useHasTextTransformControl( settings );\n\tconst textTransform = decodeValue(\n\t\tinheritedValue?.typography?.textTransform\n\t);\n\tconst setTextTransform = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextTransform = () => !! value?.typography?.textTransform;\n\tconst resetTextTransform = () => setTextTransform( undefined );\n\n\t// Text Decoration\n\tconst hasTextDecorationControl = useHasTextDecorationControl( settings );\n\tconst textDecoration = decodeValue(\n\t\tinheritedValue?.typography?.textDecoration\n\t);\n\tconst setTextDecoration = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextDecoration = () => !! value?.typography?.textDecoration;\n\tconst resetTextDecoration = () => setTextDecoration( undefined );\n\n\t// Text Orientation\n\tconst hasWritingModeControl = useHasWritingModeControl( settings );\n\tconst writingMode = decodeValue( inheritedValue?.typography?.writingMode );\n\tconst setWritingMode = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'writingMode' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasWritingMode = () => !! value?.typography?.writingMode;\n\tconst resetWritingMode = () => setWritingMode( undefined );\n\n\t// Text Alignment\n\tconst hasTextAlignmentControl = useHasTextAlignmentControl( settings );\n\n\tconst textAlign = decodeValue( inheritedValue?.typography?.textAlign );\n\tconst setTextAlign = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textAlign' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextAlign = () => !! value?.typography?.textAlign;\n\tconst resetTextAlign = () => setTextAlign( undefined );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\ttypography: {},\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontFamily }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontSize }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ currentFontSizeSlug || fontSize }\n\t\t\t\t\t\tvalueMode={ currentFontSizeSlug ? 'slug' : 'literal' }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ mergedFontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontAppearance }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ setFontAppearance }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tfontFamilyFaces={ fontFamilyFaces }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault={ defaultControls.lineHeight }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault={ defaultControls.letterSpacing }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextIndentControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Line indent' ) }\n\t\t\t\t\thasValue={ hasTextIndent }\n\t\t\t\t\tonDeselect={ resetTextIndent }\n\t\t\t\t\tisShownByDefault={ defaultControls.textIndent }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextIndentControl\n\t\t\t\t\t\tvalue={ textIndent }\n\t\t\t\t\t\tonChange={ setTextIndentValue }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\thasBottomMargin={ isGlobalStyles }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isGlobalStyles && (\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Indent all paragraphs' ) }\n\t\t\t\t\t\t\tchecked={ isTextIndentAll }\n\t\t\t\t\t\t\tonChange={ onToggleTextIndentAll }\n\t\t\t\t\t\t\thelp={ textIndentHelp }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextColumnsControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\thasValue={ hasTextColumns }\n\t\t\t\t\tonDeselect={ resetTextColumns }\n\t\t\t\t\tisShownByDefault={ defaultControls.textColumns }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\tmax={ MAX_TEXT_COLUMNS }\n\t\t\t\t\t\tmin={ MIN_TEXT_COLUMNS }\n\t\t\t\t\t\tonChange={ setTextColumns }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tspinControls=\"custom\"\n\t\t\t\t\t\tvalue={ textColumns }\n\t\t\t\t\t\tinitialPosition={ 1 }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextDecorationControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Decoration' ) }\n\t\t\t\t\thasValue={ hasTextDecoration }\n\t\t\t\t\tonDeselect={ resetTextDecoration }\n\t\t\t\t\tisShownByDefault={ defaultControls.textDecoration }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextDecorationControl\n\t\t\t\t\t\tvalue={ textDecoration }\n\t\t\t\t\t\tonChange={ setTextDecoration }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasWritingModeControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\t\t\thasValue={ hasWritingMode }\n\t\t\t\t\tonDeselect={ resetWritingMode }\n\t\t\t\t\tisShownByDefault={ defaultControls.writingMode }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<WritingModeControl\n\t\t\t\t\t\tvalue={ writingMode }\n\t\t\t\t\t\tonChange={ setWritingMode }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault={ defaultControls.textTransform }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextAlignmentControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Text alignment' ) }\n\t\t\t\t\thasValue={ hasTextAlign }\n\t\t\t\t\tonDeselect={ resetTextAlign }\n\t\t\t\t\tisShownByDefault={ defaultControls.textAlign }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextAlignmentControl\n\t\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\t\tonChange={ setTextAlign }\n\t\t\t\t\t\toptions={ [ 'left', 'center', 'right', 'justify' ] }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ textAlign === 'justify' && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Notice status=\"warning\" isDismissible={ false }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Justified text can reduce readability. For better accessibility, use left-aligned text instead.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFontSizePicker,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tNotice,\n\tToggleControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontFamilyControl from '../font-family';\nimport FontAppearanceControl from '../font-appearance-control';\nimport LineHeightControl from '../line-height-control';\nimport LetterSpacingControl from '../letter-spacing-control';\nimport TextAlignmentControl from '../text-alignment-control';\nimport TextTransformControl from '../text-transform-control';\nimport TextDecorationControl from '../text-decoration-control';\nimport TextIndentControl from '../text-indent-control';\nimport WritingModeControl from '../writing-mode-control';\nimport ColorGradientDropdownItem from './color-gradient-dropdown-item';\nimport { useHasTextPanel } from './color-panel';\nimport { useColorGradientSettings } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport {\n\textractPresetSlug,\n\tencodeColorValueWithPalette,\n} from '../../utils/color-values';\nimport {\n\tgetMergedFontFamiliesAndFontFamilyFaces,\n\tfindNearestStyleAndWeight,\n} from './typography-utils';\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\n\nconst MIN_TEXT_COLUMNS = 1;\nconst MAX_TEXT_COLUMNS = 6;\n\nexport function useHasTypographyPanel( settings ) {\n\tconst hasFontFamily = useHasFontFamilyControl( settings );\n\tconst hasLineHeight = useHasLineHeightControl( settings );\n\tconst hasFontAppearance = useHasAppearanceControl( settings );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( settings );\n\tconst hasTextAlign = useHasTextAlignmentControl( settings );\n\tconst hasTextTransform = useHasTextTransformControl( settings );\n\tconst hasTextDecoration = useHasTextDecorationControl( settings );\n\tconst hasTextIndent = useHasTextIndentControl( settings );\n\tconst hasWritingMode = useHasWritingModeControl( settings );\n\tconst hasTextColumns = useHasTextColumnsControl( settings );\n\tconst hasFontSize = useHasFontSizeControl( settings );\n\tconst hasTextColor = useHasTextPanel( settings );\n\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\thasTextAlign ||\n\t\thasTextTransform ||\n\t\thasFontSize ||\n\t\thasTextDecoration ||\n\t\thasTextIndent ||\n\t\thasWritingMode ||\n\t\thasTextColumns ||\n\t\thasTextColor\n\t);\n}\n\nfunction useHasFontSizeControl( settings ) {\n\treturn (\n\t\t( settings?.typography?.defaultFontSizes !== false &&\n\t\t\tsettings?.typography?.fontSizes?.default?.length ) ||\n\t\tsettings?.typography?.fontSizes?.theme?.length ||\n\t\tsettings?.typography?.fontSizes?.custom?.length ||\n\t\tsettings?.typography?.customFontSize\n\t);\n}\n\nfunction useHasFontFamilyControl( settings ) {\n\treturn [ 'default', 'theme', 'custom' ].some(\n\t\t( key ) => settings?.typography?.fontFamilies?.[ key ]?.length\n\t);\n}\n\nfunction useHasLineHeightControl( settings ) {\n\treturn settings?.typography?.lineHeight;\n}\n\nfunction useHasAppearanceControl( settings ) {\n\treturn settings?.typography?.fontStyle || settings?.typography?.fontWeight;\n}\n\nfunction useAppearanceControlLabel( settings ) {\n\tif ( ! settings?.typography?.fontStyle ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! settings?.typography?.fontWeight ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( settings ) {\n\treturn settings?.typography?.letterSpacing;\n}\n\nfunction useHasTextTransformControl( settings ) {\n\treturn settings?.typography?.textTransform;\n}\n\nfunction useHasTextAlignmentControl( settings ) {\n\treturn settings?.typography?.textAlign;\n}\n\nfunction useHasTextDecorationControl( settings ) {\n\treturn settings?.typography?.textDecoration;\n}\n\nfunction useHasWritingModeControl( settings ) {\n\treturn settings?.typography?.writingMode;\n}\n\nfunction useHasTextColumnsControl( settings ) {\n\treturn settings?.typography?.textColumns;\n}\n\nfunction useHasTextIndentControl( settings ) {\n\treturn settings?.typography?.textIndent;\n}\n\n/**\n * Concatenate all the font sizes into a single list for the font size picker.\n *\n * @param {Object} settings The global styles settings.\n *\n * @return {Array} The merged font sizes.\n */\nfunction getMergedFontSizes( settings ) {\n\tconst fontSizes = settings?.typography?.fontSizes;\n\tconst defaultFontSizesEnabled = !! settings?.typography?.defaultFontSizes;\n\treturn [\n\t\t...( fontSizes?.custom ?? [] ),\n\t\t...( fontSizes?.theme ?? [] ),\n\t\t...( defaultFontSizesEnabled ? fontSizes?.default ?? [] : [] ),\n\t];\n}\n\nexport function TypographyToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Typography' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\ttextColor: true,\n\tfontFamily: true,\n\tfontSize: true,\n\tfontAppearance: true,\n\tlineHeight: true,\n\tletterSpacing: true,\n\ttextAlign: true,\n\ttextTransform: true,\n\ttextDecoration: true,\n\ttextIndent: true,\n\twritingMode: true,\n\ttextColumns: true,\n};\n\nexport default function TypographyPanel( {\n\tas: Wrapper = TypographyToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tisGlobalStyles = false,\n\tcontrastWarning,\n} ) {\n\tconst { colors, allColors, areCustomSolidsEnabled, decodeValue } =\n\t\tuseColorGradientSettings( settings );\n\n\t// Text color. Writes to `color.text` (unchanged storage path). The\n\t// control is rendered here instead of the Color panel because text\n\t// color is a typographic concern.\n\tconst hasTextColorEnabled = useHasTextPanel( settings );\n\tconst textColor = decodeValue( inheritedValue?.color?.text );\n\tconst userTextColor = decodeValue( value?.color?.text );\n\tconst hasTextColorValue = () => !! value?.color?.text;\n\tconst setTextColor = ( newColor, newSlug ) => {\n\t\tconst encoded = encodeColorValueWithPalette(\n\t\t\tallColors,\n\t\t\tnewColor,\n\t\t\tnewSlug\n\t\t);\n\t\tlet changedObject = setImmutably( value, [ 'color', 'text' ], encoded );\n\t\t// Keep an in-sync link color following the text color (e.g. a\n\t\t// Button's link color tracks its text color). Compare raw encoded\n\t\t// references (e.g. `var:preset|color|slug`), not decoded hex values.\n\t\t// Two palette entries can share the same hex but carry different\n\t\t// slugs (e.g. `var:preset|color|dark-background` and\n\t\t// `var:preset|color|dark-text` both resolving to `#000`); comparing\n\t\t// decoded values would conflate them and incorrectly force the link\n\t\t// color to follow the text color even when the user deliberately\n\t\t// chose a different palette slot.\n\t\tif (\n\t\t\tinheritedValue?.color?.text ===\n\t\t\tinheritedValue?.elements?.link?.color?.text\n\t\t) {\n\t\t\tchangedObject = setImmutably(\n\t\t\t\tchangedObject,\n\t\t\t\t[ 'elements', 'link', 'color', 'text' ],\n\t\t\t\tencoded\n\t\t\t);\n\t\t}\n\t\tonChange( changedObject );\n\t};\n\tconst resetTextColor = () => setTextColor( undefined );\n\n\t// Font Family\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( settings );\n\tconst fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );\n\tconst { fontFamilies, fontFamilyFaces } = useMemo( () => {\n\t\treturn getMergedFontFamiliesAndFontFamilyFaces( settings, fontFamily );\n\t}, [ settings, fontFamily ] );\n\n\tconst setFontFamily = ( newValue ) => {\n\t\tconst slug = fontFamilies?.find(\n\t\t\t( { fontFamily: f } ) => f === newValue\n\t\t)?.slug;\n\t\tlet updatedValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'typography', 'fontFamily' ],\n\t\t\tslug ? `var:preset|font-family|${ slug }` : newValue || undefined\n\t\t);\n\n\t\t// Check if current font style/weight are available in the new font family.\n\t\tconst newFontFamilyFaces =\n\t\t\tfontFamilies?.find( ( { fontFamily: f } ) => f === newValue )\n\t\t\t\t?.fontFace ?? [];\n\t\tconst { fontStyles, fontWeights } =\n\t\t\tgetFontStylesAndWeights( newFontFamilyFaces );\n\t\tconst hasFontStyle = fontStyles?.some(\n\t\t\t( { value: fs } ) => fs === fontStyle\n\t\t);\n\t\tconst hasFontWeight = fontWeights?.some(\n\t\t\t( { value: fw } ) => fw?.toString() === fontWeight?.toString()\n\t\t);\n\n\t\t// Find the nearest available font style/weight if not available.\n\t\tif ( ! hasFontStyle || ! hasFontWeight ) {\n\t\t\tconst { nearestFontStyle, nearestFontWeight } =\n\t\t\t\tfindNearestStyleAndWeight(\n\t\t\t\t\tnewFontFamilyFaces,\n\t\t\t\t\tfontStyle,\n\t\t\t\t\tfontWeight\n\t\t\t\t);\n\t\t\tif ( nearestFontStyle || nearestFontWeight ) {\n\t\t\t\t// Update to the nearest available font style/weight in the new font family.\n\t\t\t\tupdatedValue = {\n\t\t\t\t\t...updatedValue,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...updatedValue?.typography,\n\t\t\t\t\t\tfontStyle: nearestFontStyle || undefined,\n\t\t\t\t\t\tfontWeight: nearestFontWeight || undefined,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t} else if ( fontStyle || fontWeight ) {\n\t\t\t\t// Reset if no available styles/weights found.\n\t\t\t\tupdatedValue = {\n\t\t\t\t\t...updatedValue,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...updatedValue?.typography,\n\t\t\t\t\t\tfontStyle: undefined,\n\t\t\t\t\t\tfontWeight: undefined,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\tonChange( updatedValue );\n\t};\n\tconst hasFontFamily = () => !! value?.typography?.fontFamily;\n\tconst resetFontFamily = () => setFontFamily( undefined );\n\n\t// Font Size\n\tconst hasFontSizeEnabled = useHasFontSizeControl( settings );\n\tconst disableCustomFontSizes = ! settings?.typography?.customFontSize;\n\tconst mergedFontSizes = getMergedFontSizes( settings );\n\n\tconst fontSize = decodeValue( inheritedValue?.typography?.fontSize );\n\n\t// Extract the slug from the CSS custom property if it exists\n\tconst currentFontSizeSlug = ( () => {\n\t\tconst rawValue = inheritedValue?.typography?.fontSize;\n\t\tif ( ! rawValue || typeof rawValue !== 'string' ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\t// Block supports use `var:preset` format.\n\t\tif ( rawValue.startsWith( 'var:preset|font-size|' ) ) {\n\t\t\treturn rawValue.replace( 'var:preset|font-size|', '' );\n\t\t}\n\n\t\t// Global styles data uses `var(--wp--preset)` format.\n\t\tconst cssVarMatch = rawValue.match(\n\t\t\t/^var\\(--wp--preset--font-size--([^)]+)\\)$/\n\t\t);\n\t\tif ( cssVarMatch ) {\n\t\t\treturn cssVarMatch[ 1 ];\n\t\t}\n\n\t\treturn undefined;\n\t} )();\n\n\tconst setFontSize = ( newValue, metadata ) => {\n\t\tconst actualValue = !! metadata?.slug\n\t\t\t? `var:preset|font-size|${ metadata?.slug }`\n\t\t\t: newValue;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t\tactualValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasFontSize = () => !! value?.typography?.fontSize;\n\tconst resetFontSize = () => setFontSize( undefined );\n\n\t// Appearance\n\tconst hasAppearanceControl = useHasAppearanceControl( settings );\n\tconst appearanceControlLabel = useAppearanceControlLabel( settings );\n\tconst hasFontStyles = settings?.typography?.fontStyle;\n\tconst hasFontWeights = settings?.typography?.fontWeight;\n\tconst fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );\n\tconst fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );\n\tconst setFontAppearance = useCallback(\n\t\t( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {\n\t\t\t// Only update the font style and weight if they have changed.\n\t\t\tif ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {\n\t\t\t\tonChange( {\n\t\t\t\t\t...value,\n\t\t\t\t\ttypography: {\n\t\t\t\t\t\t...value?.typography,\n\t\t\t\t\t\tfontStyle: newFontStyle || undefined,\n\t\t\t\t\t\tfontWeight: newFontWeight || undefined,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ fontStyle, fontWeight, onChange, value ]\n\t);\n\tconst hasFontAppearance = () =>\n\t\t!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;\n\tconst resetFontAppearance = useCallback( () => {\n\t\tsetFontAppearance( {} );\n\t}, [ setFontAppearance ] );\n\n\t// Line Height\n\tconst hasLineHeightEnabled = useHasLineHeightControl( settings );\n\tconst lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );\n\tconst setLineHeight = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLineHeight = () => value?.typography?.lineHeight !== undefined;\n\tconst resetLineHeight = () => setLineHeight( undefined );\n\n\t// Letter Spacing\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( settings );\n\tconst letterSpacing = decodeValue(\n\t\tinheritedValue?.typography?.letterSpacing\n\t);\n\tconst setLetterSpacing = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasLetterSpacing = () => !! value?.typography?.letterSpacing;\n\tconst resetLetterSpacing = () => setLetterSpacing( undefined );\n\n\t// Text Indent\n\tconst hasTextIndentControl = useHasTextIndentControl( settings );\n\tconst textIndent = decodeValue( inheritedValue?.typography?.textIndent );\n\n\t// Get the setting value - can be 'subsequent' (default), 'all', or false.\n\t// The setting determines which CSS selector is used for the text-indent style.\n\tconst textIndentSetting = settings?.typography?.textIndent ?? 'subsequent';\n\tconst isTextIndentAll = textIndentSetting === 'all';\n\n\tconst setTextIndentValue = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textIndent' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\n\tconst onToggleTextIndentAll = ( newValue ) => {\n\t\t// Toggle between 'all' and 'subsequent' for the setting.\n\t\t// Include the settings change so it can be handled atomically by the parent.\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tsettings: {\n\t\t\t\ttypography: {\n\t\t\t\t\ttextIndent: newValue ? 'all' : 'subsequent',\n\t\t\t\t},\n\t\t\t},\n\t\t} );\n\t};\n\n\tconst hasTextIndent = () => !! value?.typography?.textIndent;\n\tconst resetTextIndent = () => {\n\t\tonChange(\n\t\t\tsetImmutably( value, [ 'typography', 'textIndent' ], undefined )\n\t\t);\n\t};\n\tconst textIndentHelp = isTextIndentAll\n\t\t? __( 'Indents the first line of all paragraphs.' )\n\t\t: __( 'Indents the first line of each paragraph after the first one.' );\n\n\t// Text Columns\n\tconst hasTextColumnsControl = useHasTextColumnsControl( settings );\n\tconst textColumns = decodeValue( inheritedValue?.typography?.textColumns );\n\tconst setTextColumns = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textColumns' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextColumns = () => !! value?.typography?.textColumns;\n\tconst resetTextColumns = () => setTextColumns( undefined );\n\n\t// Text Transform\n\tconst hasTextTransformControl = useHasTextTransformControl( settings );\n\tconst textTransform = decodeValue(\n\t\tinheritedValue?.typography?.textTransform\n\t);\n\tconst setTextTransform = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextTransform = () => !! value?.typography?.textTransform;\n\tconst resetTextTransform = () => setTextTransform( undefined );\n\n\t// Text Decoration\n\tconst hasTextDecorationControl = useHasTextDecorationControl( settings );\n\tconst textDecoration = decodeValue(\n\t\tinheritedValue?.typography?.textDecoration\n\t);\n\tconst setTextDecoration = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextDecoration = () => !! value?.typography?.textDecoration;\n\tconst resetTextDecoration = () => setTextDecoration( undefined );\n\n\t// Text Orientation\n\tconst hasWritingModeControl = useHasWritingModeControl( settings );\n\tconst writingMode = decodeValue( inheritedValue?.typography?.writingMode );\n\tconst setWritingMode = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'writingMode' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasWritingMode = () => !! value?.typography?.writingMode;\n\tconst resetWritingMode = () => setWritingMode( undefined );\n\n\t// Text Alignment\n\tconst hasTextAlignmentControl = useHasTextAlignmentControl( settings );\n\n\tconst textAlign = decodeValue( inheritedValue?.typography?.textAlign );\n\tconst setTextAlign = ( newValue ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'typography', 'textAlign' ],\n\t\t\t\tnewValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasTextAlign = () => !! value?.typography?.textAlign;\n\tconst resetTextAlign = () => setTextAlign( undefined );\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\tif ( ! hasTextColorEnabled ) {\n\t\t\t\treturn {\n\t\t\t\t\t...previousValue,\n\t\t\t\t\ttypography: {},\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\ttypography: {},\n\t\t\t\tcolor: {\n\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\ttext: undefined,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t\t[ hasTextColorEnabled ]\n\t);\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ hasTextColorEnabled && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\thasValue={ hasTextColorValue }\n\t\t\t\t\tresetValue={ resetTextColor }\n\t\t\t\t\tisShownByDefault={ defaultControls.textColor }\n\t\t\t\t\tindicators={ [ textColor ] }\n\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'text',\n\t\t\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\t\t\tinheritedValue: textColor,\n\t\t\t\t\t\t\tinheritedSlug: extractPresetSlug(\n\t\t\t\t\t\t\t\tinheritedValue?.color?.text,\n\t\t\t\t\t\t\t\t'color'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tsetValue: setTextColor,\n\t\t\t\t\t\t\tuserValue: userTextColor,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tdisableCustomColors: ! areCustomSolidsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontFamily }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontSize }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ currentFontSizeSlug || fontSize }\n\t\t\t\t\t\tvalueMode={ currentFontSizeSlug ? 'slug' : 'literal' }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ mergedFontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault={ defaultControls.fontAppearance }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ setFontAppearance }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tfontFamilyFaces={ fontFamilyFaces }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault={ defaultControls.lineHeight }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault={ defaultControls.letterSpacing }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextIndentControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Line indent' ) }\n\t\t\t\t\thasValue={ hasTextIndent }\n\t\t\t\t\tonDeselect={ resetTextIndent }\n\t\t\t\t\tisShownByDefault={ defaultControls.textIndent }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextIndentControl\n\t\t\t\t\t\tvalue={ textIndent }\n\t\t\t\t\t\tonChange={ setTextIndentValue }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\thasBottomMargin={ isGlobalStyles }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isGlobalStyles && (\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Indent all paragraphs' ) }\n\t\t\t\t\t\t\tchecked={ isTextIndentAll }\n\t\t\t\t\t\t\tonChange={ onToggleTextIndentAll }\n\t\t\t\t\t\t\thelp={ textIndentHelp }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextColumnsControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\thasValue={ hasTextColumns }\n\t\t\t\t\tonDeselect={ resetTextColumns }\n\t\t\t\t\tisShownByDefault={ defaultControls.textColumns }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\tmax={ MAX_TEXT_COLUMNS }\n\t\t\t\t\t\tmin={ MIN_TEXT_COLUMNS }\n\t\t\t\t\t\tonChange={ setTextColumns }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tspinControls=\"custom\"\n\t\t\t\t\t\tvalue={ textColumns }\n\t\t\t\t\t\tinitialPosition={ 1 }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextDecorationControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Decoration' ) }\n\t\t\t\t\thasValue={ hasTextDecoration }\n\t\t\t\t\tonDeselect={ resetTextDecoration }\n\t\t\t\t\tisShownByDefault={ defaultControls.textDecoration }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextDecorationControl\n\t\t\t\t\t\tvalue={ textDecoration }\n\t\t\t\t\t\tonChange={ setTextDecoration }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasWritingModeControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\t\t\thasValue={ hasWritingMode }\n\t\t\t\t\tonDeselect={ resetWritingMode }\n\t\t\t\t\tisShownByDefault={ defaultControls.writingMode }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<WritingModeControl\n\t\t\t\t\t\tvalue={ writingMode }\n\t\t\t\t\t\tonChange={ setWritingMode }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault={ defaultControls.textTransform }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextAlignmentControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Text alignment' ) }\n\t\t\t\t\thasValue={ hasTextAlign }\n\t\t\t\t\tonDeselect={ resetTextAlign }\n\t\t\t\t\tisShownByDefault={ defaultControls.textAlign }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<TextAlignmentControl\n\t\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\t\tonChange={ setTextAlign }\n\t\t\t\t\t\toptions={ [ 'left', 'center', 'right', 'justify' ] }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ textAlign === 'justify' && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Notice status=\"warning\" isDismissible={ false }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Justified text can reduce readability. For better accessibility, use left-aligned text instead.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/grid/grid-item-resizer.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/grid/grid-item-resizer.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\n\t\t\tconst topAvailable = blockClientRect.top > rootBlockClientRect.top;\n\t\t\tconst bottomAvailable =\n\t\t\t\tblockClientRect.bottom < rootBlockClientRect.bottom;\n\t\t\tconst leftAvailable =\n\t\t\t\tblockClientRect.left > rootBlockClientRect.left;\n\t\t\tconst rightAvailable =\n\t\t\t\tblockClientRect.right < rootBlockClientRect.right;\n\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: !! isManualGrid\n\t\t\t\t\t? topAvailable\n\t\t\t\t\t: ! bottomAvailable && topAvailable,\n\t\t\t\tbottom: bottomAvailable,\n\t\t\t\tleft: !! isManualGrid\n\t\t\t\t\t? leftAvailable\n\t\t\t\t\t: ! rightAvailable && leftAvailable,\n\t\t\t\tright: rightAvailable,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement, isManualGrid ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it\u2019s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\n\t\t\tconst topAvailable = blockClientRect.top > rootBlockClientRect.top;\n\t\t\tconst bottomAvailable =\n\t\t\t\tblockClientRect.bottom < rootBlockClientRect.bottom;\n\t\t\tconst leftAvailable =\n\t\t\t\tblockClientRect.left > rootBlockClientRect.left;\n\t\t\tconst rightAvailable =\n\t\t\t\tblockClientRect.right < rootBlockClientRect.right;\n\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: !! isManualGrid\n\t\t\t\t\t? topAvailable\n\t\t\t\t\t: ! bottomAvailable && topAvailable,\n\t\t\t\tbottom: bottomAvailable,\n\t\t\t\tleft: !! isManualGrid\n\t\t\t\t\t? leftAvailable\n\t\t\t\t\t: ! rightAvailable && leftAvailable,\n\t\t\t\tright: rightAvailable,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement, isManualGrid ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it’s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/grid/grid-visualizer.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef, useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { range, GridRect, getGridInfo, getGridItemRect } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';\nimport ButtonBlockAppender from '../button-block-appender';\nimport { unlock } from '../../lock-unlock';\n\nexport function GridVisualizer( {\n\tclientId,\n\tcontentRef,\n\tparentLayout,\n\tchildGridClientId,\n} ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst gridElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! gridElement ) {\n\t\treturn null;\n\t}\n\n\tconst isManualGrid =\n\t\tparentLayout?.isManualPlacement &&\n\t\twindow.__experimentalEnableGridInteractivity;\n\treturn (\n\t\t<GridVisualizerGrid\n\t\t\tgridClientId={ clientId }\n\t\t\tgridElement={ gridElement }\n\t\t\tisManualGrid={ isManualGrid }\n\t\t\tref={ contentRef }\n\t\t\tchildGridClientId={ childGridClientId }\n\t\t/>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef(\n\t( { gridClientId, gridElement, isManualGrid, childGridClientId }, ref ) => {\n\t\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\t\tgetGridInfo( gridElement )\n\t\t);\n\t\tconst [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );\n\n\t\t// Get the element for the child grid block so we can\n\t\t// compute its position and hide overlapping visualizer cells.\n\t\tconst childGridElement = useBlockElement( childGridClientId );\n\n\t\t// Compute the child grid block's rect from its position in the grid.\n\t\t// This works for both manual and non-manual grids.\n\t\tconst childGridRect = useMemo( () => {\n\t\t\tif ( ! childGridElement ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn getGridItemRect( childGridElement );\n\t\t}, [ childGridElement ] );\n\n\t\tuseEffect( () => {\n\t\t\tconst resizeCallback = () =>\n\t\t\t\tsetGridInfo( getGridInfo( gridElement ) );\n\t\t\t// Both border-box and content-box are observed as they may change\n\t\t\t// independently. This requires two observers because a single one\n\t\t\t// can\u2019t be made to monitor both on the same element.\n\t\t\tconst borderBoxSpy = new window.ResizeObserver( resizeCallback );\n\t\t\tborderBoxSpy.observe( gridElement, { box: 'border-box' } );\n\t\t\tconst contentBoxSpy = new window.ResizeObserver( resizeCallback );\n\t\t\tcontentBoxSpy.observe( gridElement );\n\t\t\tfor ( const element of gridElement.children ) {\n\t\t\t\tcontentBoxSpy.observe( element );\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tborderBoxSpy.disconnect();\n\t\t\t\tcontentBoxSpy.disconnect();\n\t\t\t};\n\t\t}, [ gridElement ] );\n\n\t\tuseEffect( () => {\n\t\t\tfunction onGlobalDrag() {\n\t\t\t\tsetIsDroppingAllowed( true );\n\t\t\t}\n\t\t\tfunction onGlobalDragEnd() {\n\t\t\t\tsetIsDroppingAllowed( false );\n\t\t\t}\n\t\t\tdocument.addEventListener( 'drag', onGlobalDrag );\n\t\t\tdocument.addEventListener( 'dragend', onGlobalDragEnd );\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener( 'drag', onGlobalDrag );\n\t\t\t\tdocument.removeEventListener( 'dragend', onGlobalDragEnd );\n\t\t\t};\n\t\t}, [] );\n\n\t\treturn (\n\t\t\t<BlockPopoverCover\n\t\t\t\tclassName={ clsx( 'block-editor-grid-visualizer', {\n\t\t\t\t\t'is-dropping-allowed': isDroppingAllowed,\n\t\t\t\t} ) }\n\t\t\t\tclientId={ gridClientId }\n\t\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\t\t\tstyle={ gridInfo.style }\n\t\t\t\t>\n\t\t\t\t\t{ isManualGrid ? (\n\t\t\t\t\t\t<ManualGridVisualizer\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tchildGridRect={ childGridRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AutoGridVisualizer\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tchildGridRect={ childGridRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BlockPopoverCover>\n\t\t);\n\t}\n);\n\nfunction AutoGridVisualizer( { gridInfo, childGridRect } ) {\n\treturn range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\trange( 1, gridInfo.numColumns ).map( ( column ) => {\n\t\t\t// Don't render visualizer cells for a selected child block\n\t\t\t// that is itself a grid, so that only the child's grid\n\t\t\t// visualizer is visible.\n\t\t\tlet color = gridInfo.currentColor;\n\t\t\tif ( childGridRect?.contains( column, row ) ) {\n\t\t\t\tcolor = 'transparent';\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<GridVisualizerCell\n\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\tcolor={ color }\n\t\t\t\t/>\n\t\t\t);\n\t\t} )\n\t);\n}\n\nfunction ManualGridVisualizer( { gridClientId, gridInfo, childGridRect } ) {\n\tconst [ highlightedRect, setHighlightedRect ] = useState( null );\n\n\tconst gridItemStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockOrder, getBlockStyles } = unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t);\n\t\t\tconst blockOrder = getBlockOrder( gridClientId );\n\t\t\treturn getBlockStyles( blockOrder );\n\t\t},\n\t\t[ gridClientId ]\n\t);\n\tconst occupiedRects = useMemo( () => {\n\t\tconst rects = [];\n\t\tfor ( const style of Object.values( gridItemStyles ) ) {\n\t\t\tconst {\n\t\t\t\tcolumnStart,\n\t\t\t\trowStart,\n\t\t\t\tcolumnSpan = 1,\n\t\t\t\trowSpan = 1,\n\t\t\t} = style?.layout ?? {};\n\t\t\tif ( ! columnStart || ! rowStart ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\trects.push(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart,\n\t\t\t\t\trowStart,\n\t\t\t\t\tcolumnSpan,\n\t\t\t\t\trowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\t\treturn rects;\n\t}, [ gridItemStyles ] );\n\n\treturn range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\trange( 1, gridInfo.numColumns ).map( ( column ) => {\n\t\t\t// Don't render visualizer cells for a selected child block\n\t\t\t// that is itself a grid, so that only the child's grid\n\t\t\t// visualizer is visible.\n\t\t\tconst isChildGridCell = childGridRect?.contains( column, row );\n\t\t\tlet color = gridInfo.currentColor;\n\t\t\tif ( isChildGridCell ) {\n\t\t\t\tcolor = 'transparent';\n\t\t\t}\n\t\t\tconst isCellOccupied = occupiedRects.some( ( rect ) =>\n\t\t\t\trect.contains( column, row )\n\t\t\t);\n\t\t\tconst isHighlighted =\n\t\t\t\thighlightedRect?.contains( column, row ) ?? false;\n\t\t\treturn (\n\t\t\t\t<GridVisualizerCell\n\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\tcolor={ color }\n\t\t\t\t\tclassName={ isHighlighted && 'is-highlighted' }\n\t\t\t\t>\n\t\t\t\t\t{ isCellOccupied && ! isChildGridCell ? (\n\t\t\t\t\t\t<GridVisualizerDropZone\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<GridVisualizerAppender\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</GridVisualizerCell>\n\t\t\t);\n\t\t} )\n\t);\n}\n\nfunction GridVisualizerCell( { color, children, className } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-grid-visualizer__cell',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,\n\t\t\t\tcolor,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nfunction useGridVisualizerDropZone(\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect\n) {\n\tconst {\n\t\tgetBlockAttributes,\n\t\tgetBlockRootClientId,\n\t\tcanInsertBlockType,\n\t\tgetBlockName,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tmoveBlocksToPosition,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tgridInfo.numColumns\n\t);\n\n\treturn useDropZoneWithValidation( {\n\t\tvalidateDrag( srcClientId ) {\n\t\t\tconst blockName = getBlockName( srcClientId );\n\t\t\tif ( ! canInsertBlockType( blockName, gridClientId ) ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tconst rect = new GridRect( {\n\t\t\t\tcolumnStart: column,\n\t\t\t\trowStart: row,\n\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t} );\n\t\t\tconst isInBounds = new GridRect( {\n\t\t\t\tcolumnSpan: gridInfo.numColumns,\n\t\t\t\trowSpan: gridInfo.numRows,\n\t\t\t} ).containsRect( rect );\n\t\t\treturn isInBounds;\n\t\t},\n\t\tonDragEnter( srcClientId ) {\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tsetHighlightedRect(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\trowStart: row,\n\t\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tonDragLeave() {\n\t\t\t// onDragEnter can be called before onDragLeave if the user moves\n\t\t\t// their mouse quickly, so only clear the highlight if it was set\n\t\t\t// by this cell.\n\t\t\tsetHighlightedRect( ( prevHighlightedRect ) =>\n\t\t\t\tprevHighlightedRect?.columnStart === column &&\n\t\t\t\tprevHighlightedRect?.rowStart === row\n\t\t\t\t\t? null\n\t\t\t\t\t: prevHighlightedRect\n\t\t\t);\n\t\t},\n\t\tonDrop( srcClientId ) {\n\t\t\tsetHighlightedRect( null );\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tupdateBlockAttributes( srcClientId, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...attributes.style,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...attributes.style?.layout,\n\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tmoveBlocksToPosition(\n\t\t\t\t[ srcClientId ],\n\t\t\t\tgetBlockRootClientId( srcClientId ),\n\t\t\t\tgridClientId,\n\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t);\n\t\t},\n\t} );\n}\n\nfunction GridVisualizerDropZone( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-grid-visualizer__drop-zone\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction GridVisualizerAppender( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tmoveBlocksToPosition,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tgridInfo.numColumns\n\t);\n\n\treturn (\n\t\t<ButtonBlockAppender\n\t\t\trootClientId={ gridClientId }\n\t\t\tclassName=\"block-editor-grid-visualizer__appender\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tcolor: gridInfo.currentColor,\n\t\t\t} }\n\t\t\tonSelect={ ( block ) => {\n\t\t\t\tif ( ! block ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tupdateBlockAttributes( block.clientId, {\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t[ block.clientId ],\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction useDropZoneWithValidation( {\n\tvalidateDrag,\n\tonDragEnter,\n\tonDragLeave,\n\tonDrop,\n} ) {\n\tconst { getDraggedBlockClientIds } = useSelect( blockEditorStore );\n\treturn useDropZone( {\n\t\tonDragEnter() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDragEnter( srcClientId );\n\t\t\t}\n\t\t},\n\t\tonDragLeave() {\n\t\t\tonDragLeave();\n\t\t},\n\t\tonDrop() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDrop( srcClientId );\n\t\t\t}\n\t\t},\n\t} );\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef, useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { range, GridRect, getGridInfo, getGridItemRect } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';\nimport ButtonBlockAppender from '../button-block-appender';\nimport { unlock } from '../../lock-unlock';\n\nexport function GridVisualizer( {\n\tclientId,\n\tcontentRef,\n\tparentLayout,\n\tchildGridClientId,\n} ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst gridElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! gridElement ) {\n\t\treturn null;\n\t}\n\n\tconst isManualGrid =\n\t\tparentLayout?.isManualPlacement &&\n\t\twindow.__experimentalEnableGridInteractivity;\n\treturn (\n\t\t<GridVisualizerGrid\n\t\t\tgridClientId={ clientId }\n\t\t\tgridElement={ gridElement }\n\t\t\tisManualGrid={ isManualGrid }\n\t\t\tref={ contentRef }\n\t\t\tchildGridClientId={ childGridClientId }\n\t\t/>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef(\n\t( { gridClientId, gridElement, isManualGrid, childGridClientId }, ref ) => {\n\t\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\t\tgetGridInfo( gridElement )\n\t\t);\n\t\tconst [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );\n\n\t\t// Get the element for the child grid block so we can\n\t\t// compute its position and hide overlapping visualizer cells.\n\t\tconst childGridElement = useBlockElement( childGridClientId );\n\n\t\t// Compute the child grid block's rect from its position in the grid.\n\t\t// This works for both manual and non-manual grids.\n\t\tconst childGridRect = useMemo( () => {\n\t\t\tif ( ! childGridElement ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn getGridItemRect( childGridElement );\n\t\t}, [ childGridElement ] );\n\n\t\tuseEffect( () => {\n\t\t\tconst resizeCallback = () =>\n\t\t\t\tsetGridInfo( getGridInfo( gridElement ) );\n\t\t\t// Both border-box and content-box are observed as they may change\n\t\t\t// independently. This requires two observers because a single one\n\t\t\t// can’t be made to monitor both on the same element.\n\t\t\tconst borderBoxSpy = new window.ResizeObserver( resizeCallback );\n\t\t\tborderBoxSpy.observe( gridElement, { box: 'border-box' } );\n\t\t\tconst contentBoxSpy = new window.ResizeObserver( resizeCallback );\n\t\t\tcontentBoxSpy.observe( gridElement );\n\t\t\tfor ( const element of gridElement.children ) {\n\t\t\t\tcontentBoxSpy.observe( element );\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tborderBoxSpy.disconnect();\n\t\t\t\tcontentBoxSpy.disconnect();\n\t\t\t};\n\t\t}, [ gridElement ] );\n\n\t\tuseEffect( () => {\n\t\t\tfunction onGlobalDrag() {\n\t\t\t\tsetIsDroppingAllowed( true );\n\t\t\t}\n\t\t\tfunction onGlobalDragEnd() {\n\t\t\t\tsetIsDroppingAllowed( false );\n\t\t\t}\n\t\t\tdocument.addEventListener( 'drag', onGlobalDrag );\n\t\t\tdocument.addEventListener( 'dragend', onGlobalDragEnd );\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener( 'drag', onGlobalDrag );\n\t\t\t\tdocument.removeEventListener( 'dragend', onGlobalDragEnd );\n\t\t\t};\n\t\t}, [] );\n\n\t\treturn (\n\t\t\t<BlockPopoverCover\n\t\t\t\tclassName={ clsx( 'block-editor-grid-visualizer', {\n\t\t\t\t\t'is-dropping-allowed': isDroppingAllowed,\n\t\t\t\t} ) }\n\t\t\t\tclientId={ gridClientId }\n\t\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\t\t\tstyle={ gridInfo.style }\n\t\t\t\t>\n\t\t\t\t\t{ isManualGrid ? (\n\t\t\t\t\t\t<ManualGridVisualizer\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tchildGridRect={ childGridRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AutoGridVisualizer\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tchildGridRect={ childGridRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BlockPopoverCover>\n\t\t);\n\t}\n);\n\nfunction AutoGridVisualizer( { gridInfo, childGridRect } ) {\n\treturn range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\trange( 1, gridInfo.numColumns ).map( ( column ) => {\n\t\t\t// Don't render visualizer cells for a selected child block\n\t\t\t// that is itself a grid, so that only the child's grid\n\t\t\t// visualizer is visible.\n\t\t\tlet color = gridInfo.currentColor;\n\t\t\tif ( childGridRect?.contains( column, row ) ) {\n\t\t\t\tcolor = 'transparent';\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<GridVisualizerCell\n\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\tcolor={ color }\n\t\t\t\t/>\n\t\t\t);\n\t\t} )\n\t);\n}\n\nfunction ManualGridVisualizer( { gridClientId, gridInfo, childGridRect } ) {\n\tconst [ highlightedRect, setHighlightedRect ] = useState( null );\n\n\tconst gridItemStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockOrder, getBlockStyles } = unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t);\n\t\t\tconst blockOrder = getBlockOrder( gridClientId );\n\t\t\treturn getBlockStyles( blockOrder );\n\t\t},\n\t\t[ gridClientId ]\n\t);\n\tconst occupiedRects = useMemo( () => {\n\t\tconst rects = [];\n\t\tfor ( const style of Object.values( gridItemStyles ) ) {\n\t\t\tconst {\n\t\t\t\tcolumnStart,\n\t\t\t\trowStart,\n\t\t\t\tcolumnSpan = 1,\n\t\t\t\trowSpan = 1,\n\t\t\t} = style?.layout ?? {};\n\t\t\tif ( ! columnStart || ! rowStart ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\trects.push(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart,\n\t\t\t\t\trowStart,\n\t\t\t\t\tcolumnSpan,\n\t\t\t\t\trowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\t\treturn rects;\n\t}, [ gridItemStyles ] );\n\n\treturn range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\trange( 1, gridInfo.numColumns ).map( ( column ) => {\n\t\t\t// Don't render visualizer cells for a selected child block\n\t\t\t// that is itself a grid, so that only the child's grid\n\t\t\t// visualizer is visible.\n\t\t\tconst isChildGridCell = childGridRect?.contains( column, row );\n\t\t\tlet color = gridInfo.currentColor;\n\t\t\tif ( isChildGridCell ) {\n\t\t\t\tcolor = 'transparent';\n\t\t\t}\n\t\t\tconst isCellOccupied = occupiedRects.some( ( rect ) =>\n\t\t\t\trect.contains( column, row )\n\t\t\t);\n\t\t\tconst isHighlighted =\n\t\t\t\thighlightedRect?.contains( column, row ) ?? false;\n\t\t\treturn (\n\t\t\t\t<GridVisualizerCell\n\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\tcolor={ color }\n\t\t\t\t\tclassName={ isHighlighted && 'is-highlighted' }\n\t\t\t\t>\n\t\t\t\t\t{ isCellOccupied && ! isChildGridCell ? (\n\t\t\t\t\t\t<GridVisualizerDropZone\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<GridVisualizerAppender\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</GridVisualizerCell>\n\t\t\t);\n\t\t} )\n\t);\n}\n\nfunction GridVisualizerCell( { color, children, className } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-grid-visualizer__cell',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,\n\t\t\t\tcolor,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nfunction useGridVisualizerDropZone(\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect\n) {\n\tconst {\n\t\tgetBlockAttributes,\n\t\tgetBlockRootClientId,\n\t\tcanInsertBlockType,\n\t\tgetBlockName,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tmoveBlocksToPosition,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tgridInfo.numColumns\n\t);\n\n\treturn useDropZoneWithValidation( {\n\t\tvalidateDrag( srcClientId ) {\n\t\t\tconst blockName = getBlockName( srcClientId );\n\t\t\tif ( ! canInsertBlockType( blockName, gridClientId ) ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tconst rect = new GridRect( {\n\t\t\t\tcolumnStart: column,\n\t\t\t\trowStart: row,\n\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t} );\n\t\t\tconst isInBounds = new GridRect( {\n\t\t\t\tcolumnSpan: gridInfo.numColumns,\n\t\t\t\trowSpan: gridInfo.numRows,\n\t\t\t} ).containsRect( rect );\n\t\t\treturn isInBounds;\n\t\t},\n\t\tonDragEnter( srcClientId ) {\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tsetHighlightedRect(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\trowStart: row,\n\t\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tonDragLeave() {\n\t\t\t// onDragEnter can be called before onDragLeave if the user moves\n\t\t\t// their mouse quickly, so only clear the highlight if it was set\n\t\t\t// by this cell.\n\t\t\tsetHighlightedRect( ( prevHighlightedRect ) =>\n\t\t\t\tprevHighlightedRect?.columnStart === column &&\n\t\t\t\tprevHighlightedRect?.rowStart === row\n\t\t\t\t\t? null\n\t\t\t\t\t: prevHighlightedRect\n\t\t\t);\n\t\t},\n\t\tonDrop( srcClientId ) {\n\t\t\tsetHighlightedRect( null );\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tupdateBlockAttributes( srcClientId, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...attributes.style,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...attributes.style?.layout,\n\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tmoveBlocksToPosition(\n\t\t\t\t[ srcClientId ],\n\t\t\t\tgetBlockRootClientId( srcClientId ),\n\t\t\t\tgridClientId,\n\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t);\n\t\t},\n\t} );\n}\n\nfunction GridVisualizerDropZone( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-grid-visualizer__drop-zone\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction GridVisualizerAppender( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tmoveBlocksToPosition,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tgridInfo.numColumns\n\t);\n\n\treturn (\n\t\t<ButtonBlockAppender\n\t\t\trootClientId={ gridClientId }\n\t\t\tclassName=\"block-editor-grid-visualizer__appender\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tcolor: gridInfo.currentColor,\n\t\t\t} }\n\t\t\tonSelect={ ( block ) => {\n\t\t\t\tif ( ! block ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tupdateBlockAttributes( block.clientId, {\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t[ block.clientId ],\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction useDropZoneWithValidation( {\n\tvalidateDrag,\n\tonDragEnter,\n\tonDragLeave,\n\tonDrop,\n} ) {\n\tconst { getDraggedBlockClientIds } = useSelect( blockEditorStore );\n\treturn useDropZone( {\n\t\tonDragEnter() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDragEnter( srcClientId );\n\t\t\t}\n\t\t},\n\t\tonDragLeave() {\n\t\t\tonDragLeave();\n\t\t},\n\t\tonDrop() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDrop( srcClientId );\n\t\t\t}\n\t\t},\n\t} );\n}\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 // packages/block-editor/src/components/iframe/index.js
 import clsx from "clsx";
+import { version as reactVersion } from "react";
 import { useState, createPortal, forwardRef } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { useMergeRefs, useRefEffect, useDisabled } from "@wordpress/compose";
@@ -64,6 +65,10 @@ function getIframeSrc(resolvedAssets) {
   if (src) {
     return src;
   }
+  let body = "";
+  if (reactVersion.split(".")[0] === "18") {
+    body = "<body><script>document.currentScript.parentElement.remove()</script></body>";
+  }
   const html = `<!doctype html>
 <html>
 	<head>
@@ -85,9 +90,7 @@ function getIframeSrc(resolvedAssets) {
 		${resolvedAssets.styles ?? ""}
 		${resolvedAssets.scripts ?? ""}
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
+	${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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU,cAAc,kBAAkB;AACnD,SAAS,UAAU;AACnB,SAAS,cAAc,cAAc,mBAAmB;AACxD,SAAS,+BAA+B,qBAAqB;AAC7D,SAAS,iBAAiB;AAK1B,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,SAAS,wBAAwB;AA6RxC,mBAwDK,KATD,YA/CJ;AA3RF,SAAS,YAAa,OAAO,aAAa,OAAQ;AACjD,QAAM,OAAO,CAAC;AAEd,aAAY,OAAO,OAAQ;AAC1B,SAAM,GAAI,IAAI,MAAO,GAAI;AAAA,EAC1B;AASA,MAAK,iBAAiB,MAAM,gBAAgB,YAAY,YAAa;AACpE,UAAM,OAAO,MAAM,sBAAsB;AACzC,SAAK,WAAW,KAAK;AACrB,SAAK,WAAW,KAAK;AAAA,EACtB;AAEA,QAAM,WAAW,IAAI,YAAa,MAAM,MAAM,IAAK;AACnD,MAAK,KAAK,kBAAmB;AAC5B,aAAS,eAAe;AAAA,EACzB;AACA,QAAM,YAAY,CAAE,MAAM,cAAe,QAAS;AAElD,MAAK,WAAY;AAChB,UAAM,eAAe;AAAA,EACtB;AACD;AAYA,SAAS,gBAAiB,gBAAiB;AAC1C,SAAO,aAAc,MAAM;AAC1B,UAAM,EAAE,YAAY,IAAI;AACxB,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AACA,UAAM,EAAE,aAAa,IAAI;AACzB,UAAM,OAAO,eAAe;AAC5B,UAAM,aAAa,CAAE,YAAY,WAAY;AAC7C,UAAM,WAAW,CAAC;AAClB,eAAY,QAAQ,YAAa;AAChC,eAAU,IAAK,IAAI,CAAE,UAAW;AAC/B,cAAM,YAAY,OAAO,eAAgB,KAAM;AAC/C,cAAM,kBAAkB,UAAU,YAAY;AAC9C,cAAM,cAAc,OAAQ,eAAgB;AAC5C,oBAAa,OAAO,aAAa,YAAa;AAAA,MAC/C;AACA,WAAK,iBAAkB,MAAM,SAAU,IAAK,CAAE;AAAA,IAC/C;AAEA,WAAO,MAAM;AACZ,iBAAY,QAAQ,YAAa;AAChC,aAAK,oBAAqB,MAAM,SAAU,IAAK,CAAE;AAAA,MAClD;AAAA,IACD;AAAA,EACD,CAAE;AACH;AAEA,IAAM,iBAAiB,oBAAI,QAAQ;AACnC,IAAM,mBAAmB,WAAW,uBACjC,IAAI,WAAW;AAAA,EAAsB,CAAE,QACvC,IAAI,gBAAiB,GAAI;AACzB,IACA;AAEH,SAAS,aAAc,gBAAiB;AACvC,MAAI,MAAM,eAAe,IAAK,cAAe;AAC7C,MAAK,KAAM;AACV,WAAO;AAAA,EACR;AAIA,QAAM,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIG,OAAO,SAAS,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcjC,eAAe,UAAU,EAAG;AAAA,IAC5B,eAAe,WAAW,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,QAAM,IAAI,gBAAiB,IAAI,KAAM,CAAE,IAAK,GAAG,EAAE,MAAM,YAAY,CAAE,CAAE;AACvE,iBAAe,IAAK,gBAAgB,GAAI;AACxC,oBAAkB,SAAU,gBAAgB,GAAI;AAChD,SAAO;AACR;AAEA,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,GAAI,eAAgB;AAAA,EAC5B,GAAG;AACJ,GAAI;AACH,QAAM,EAAE,gBAAgB,cAAc,IAAI,UAAW,CAAE,WAAY;AAClE,UAAM,WAAW,OAAQ,gBAAiB,EAAE,YAAY;AACxD,WAAO;AAAA,MACN,gBAAgB,SAAS;AAAA,MACzB,eAAe,SAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAS;AACvD,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,CAAC,CAAE;AACrD,QAAM,CAAE,QAAQ,gBAAgB,KAAM,IAAI,eAAe;AAEzD,QAAM,SAAS,aAAc,CAAE,SAAU;AACxC,QAAI;AAEJ,aAAS,uBAAwB,OAAQ;AACxC,YAAM,eAAe;AAAA,IACtB;AAIA,aAAS,oBAAqB,OAAQ;AACrC,UACC,MAAM,OAAO,YAAY,OACzB,MAAM,OAAO,aAAc,MAAO,GAAG,WAAY,GAAI,GACpD;AACD,cAAM,eAAe;AAUrB,uBAAe,YAAY,SAAS,OAAO,MAAM,OAC/C,aAAc,MAAO,EACrB,MAAO,CAAE;AAAA,MACZ;AAAA,IACD;AAEA,UAAM,EAAE,cAAc,IAAI;AAK1B;AAAA,MACC,MAAM,KAAM,cAAc,KAAK,SAAU,EAAE;AAAA,QAC1C,CAAE,SACD,KAAK,WAAY,cAAe,KAChC,KAAK,WAAY,YAAa,KAC9B,SAAS;AAAA,MACX;AAAA,IACD;AAEA,aAAS,SAAS;AACjB,YAAM,EAAE,gBAAgB,IAAI;AAC5B,YAAM,EAAE,gBAAgB,IAAI;AAC5B,uBAAiB;AACjB,wBAAmB,eAAgB;AAEnC,sBAAgB,UAAU,IAAK,2BAA4B;AAE3D,sBAAgB,MAAM,cAAc;AAEpC,iBAAY,eAAe,uBAAuB,GAAI;AACrD,YAAK,gBAAgB,eAAgB,YAAY,EAAG,GAAI;AACvD;AAAA,QACD;AAEA,wBAAgB,KAAK;AAAA,UACpB,YAAY,UAAW,IAAK;AAAA,QAC7B;AAEA,YAAK,CAAE,eAAgB;AAEtB,kBAAQ;AAAA,YACP,GAAI,YAAY,EAAG;AAAA,YACnB;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAEA,qBAAe;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,qBAAe;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,qBAAe,iBAAkB,SAAS,mBAAoB;AAAA,IAC/D;AAEA,SAAK,iBAAkB,QAAQ,MAAO;AAEtC,WAAO,MAAM;AACZ,wBAAmB,MAAU;AAC7B,WAAK,oBAAqB,QAAQ,MAAO;AACzC,sBAAgB;AAAA,QACf;AAAA,QACA;AAAA,MACD;AACA,sBAAgB;AAAA,QACf;AAAA,QACA;AAAA,MACD;AACA,sBAAgB,oBAAqB,SAAS,mBAAoB;AAAA,IACnE;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,eAAgB;AAAA,IACnB;AAAA,IACA,WAAW,SAAU,SAAU;AAAA,IAC/B;AAAA,EACD,CAAE;AAEF,QAAM,cAAc,YAAa,EAAE,YAAY,CAAE,SAAS,CAAE;AAE5D,QAAM,mBAAmB,aAAc;AAAA,IACtC,gBAAiB,cAAe;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAMF,QAAM,UAAU;AAAA,IACf,CAAE,SAAU;AACX,UAAK,KAAK,cAAc,aAAc;AACrC,yBAAkB,IAAK;AACvB,eAAO,MAAM,iBAAkB,IAAK;AAAA,MACrC;AACA,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,QAAM,MAAM,aAAc,cAAe;AAIzC,QAAM,mCAAmC,YAAY,KAAK,CAAE;AAE5D,QAAM,SACL,iCACG;AAAA,wCAAoC;AAAA,IAEtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACL,OAAQ;AAAA,UACP,GAAG,MAAM;AAAA,UACT,QAAQ,MAAM,OAAO;AAAA,UACrB,QAAQ;AAAA,QACT;AAAA,QACA,KAAM,aAAc,CAAE,KAAK,MAAO,CAAE;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAY,CAAE,UAAW;AACxB,cAAK,MAAM,WAAY;AACtB,kBAAM,UAAW,KAAM;AAAA,UACxB;AAOA,cACC,MAAM,cAAc,kBACpB,MAAM,OAAO,eACZ;AAMD,kBAAM,EAAE,gBAAgB,IAAI,MAAM;AAClC,kBAAM,YAAY,kBAAkB,MAAM;AAAA,YAAC;AAC3C,kBAAM,gBAAgB;AACtB,kBAAM,YAAY,kBAAkB;AACpC;AAAA,cACC;AAAA,cACA,OAAO;AAAA,cACP,MAAM;AAAA,YACP;AAAA,UACD;AAAA,QACD;AAAA,QAEE,4BACD;AAAA,UACC;AAAA,YAAC;AAAA;AAAA,cACA,KAAM;AAAA,cACN,WAAY;AAAA,gBACX;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACJ;AAAA,cAEE;AAAA;AAAA,gBACF,oBAAC,iBAAc,UAAW,gBACvB,UACH;AAAA;AAAA;AAAA,UACD;AAAA,UACA,eAAe;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,IACE,oCAAoC;AAAA,KACvC;AAGD,SACC,qBAAC,SAAI,WAAU,kCACZ;AAAA;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACA,WAAY;AAAA,UACX;AAAA,UACA,eAAe;AAAA,QAChB;AAAA,QACA,OAAQ;AAAA,UACP,2DACC,eAAe,GAAI,mBAAoB;AAAA,QACzC;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,KACD;AAEF;AAEA,SAAS,cAAe,OAAO,KAAM;AACpC,QAAM,gBAAgB;AAAA,IACrB,CAAE,WACD,OAAQ,gBAAiB,EAAE,YAAY,EAAE;AAAA,IAC1C,CAAC;AAAA,EACF;AAOA,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SAAO,oBAAC,UAAS,GAAG,OAAQ,cAAe,KAAM;AAClD;AAEA,IAAO,iBAAQ,WAAY,aAAc;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { version as reactVersion } from 'react';\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\tlet body = '';\n\tif ( reactVersion.split( '.' )[ 0 ] === '18' ) {\n\t\tbody =\n\t\t\t'<body><script>document.currentScript.parentElement.remove()</script></body>';\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</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": []
 }