@wordpress/block-editor 16.2.0 → 17.0.0

package/build-module/components/block-styles/index.mjs

@@ -1,14 +1,14 @@
 // packages/block-editor/src/components/block-styles/index.js
-import clsx from "clsx";
 import { useState, useMemo } from "@wordpress/element";
 import { useSelect } from "@wordpress/data";
-import { debounce } from "@wordpress/compose";
+import { debounce, useInstanceId } from "@wordpress/compose";
 import {
-  Button,
+  Composite,
   __experimentalTruncate as Truncate,
   __experimentalToolsPanel as ToolsPanel,
   __experimentalToolsPanelItem as ToolsPanelItem
 } from "@wordpress/components";
+import { Button } from "@wordpress/ui";
 import { __ } from "@wordpress/i18n";
 import PreviewBlockPopover from "../block-switcher/preview-block-popover.mjs";
 import useStylesForBlocks from "./use-styles-for-block.mjs";
@@ -18,6 +18,7 @@ import { store as blockEditorStore } from "../../store/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
+var getCompositeItemId = (instanceId, style) => `${instanceId}-${style.name}`;
 function BlockStyles({ clientId, onSwitch = noop, onHoverClassName = noop }) {
   const canEdit = useSelect(
     (select) => select(blockEditorStore).canEditBlock(clientId),
@@ -36,6 +37,17 @@ function BlockStyles({ clientId, onSwitch = noop, onHoverClassName = noop }) {
   const [hoveredStyle, setHoveredStyle] = useState(null);
   const [blockStylesAnchor, setBlockStylesAnchor] = useState(null);
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+  const instanceId = useInstanceId(
+    BlockStyles,
+    "block-editor-block-styles"
+  );
+  const styleRows = useMemo(() => {
+    const rows = [];
+    for (let i = 0; i < (stylesToRender?.length ?? 0); i += 2) {
+      rows.push(stylesToRender.slice(i, i + 2));
+    }
+    return rows;
+  }, [stylesToRender]);
   const previewBlocks = useMemo(() => {
     if (!hoveredStyle || !genericPreviewBlock) {
       return null;
@@ -73,6 +85,14 @@ function BlockStyles({ clientId, onSwitch = noop, onHoverClassName = noop }) {
     debouncedSetHoveredStyle(item);
     onHoverClassName(item?.name ?? null);
   };
+  const onSetActiveId = (nextActiveId) => {
+    const nextStyle = stylesToRender.find(
+      (style) => getCompositeItemId(instanceId, style) === nextActiveId
+    );
+    if (nextStyle && nextStyle.name !== activeStyle.name) {
+      onSelectStylePreview(nextStyle);
+    }
+  };
   const defaultStyle = getDefaultStyle(stylesToRender);
   const hasValue = () => {
     return activeStyle?.name !== defaultStyle?.name;
@@ -102,38 +122,62 @@ function BlockStyles({ clientId, onSwitch = noop, onHoverClassName = noop }) {
               ref: setBlockStylesAnchor,
               className: "block-editor-block-styles",
               children: [
-                /* @__PURE__ */ jsx("div", { className: "block-editor-block-styles__variants", children: stylesToRender.map((style) => {
-                  const buttonText = style.label || style.name;
-                  return /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      __next40pxDefaultSize: true,
-                      className: clsx(
-                        "block-editor-block-styles__item",
-                        {
-                          "is-active": activeStyle.name === style.name
-                        }
-                      ),
-                      variant: "secondary",
-                      label: buttonText,
-                      onMouseEnter: () => styleItemHandler(style),
-                      onFocus: () => styleItemHandler(style),
-                      onMouseLeave: () => styleItemHandler(null),
-                      onBlur: () => styleItemHandler(null),
-                      onClick: () => onSelectStylePreview(style),
-                      "aria-current": activeStyle.name === style.name,
-                      children: /* @__PURE__ */ jsx(
-                        Truncate,
-                        {
-                          numberOfLines: 1,
-                          className: "block-editor-block-styles__item-text",
-                          children: buttonText
-                        }
-                      )
-                    },
-                    style.name
-                  );
-                }) }),
+                /* @__PURE__ */ jsx(
+                  Composite,
+                  {
+                    role: "radiogroup",
+                    "aria-label": __("Styles"),
+                    className: "block-editor-block-styles__variants",
+                    activeId: getCompositeItemId(
+                      instanceId,
+                      activeStyle
+                    ),
+                    setActiveId: onSetActiveId,
+                    focusLoop: true,
+                    focusWrap: true,
+                    focusShift: true,
+                    children: styleRows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+                      Composite.Row,
+                      {
+                        className: "block-editor-block-styles__row",
+                        children: row.map((style) => /* @__PURE__ */ jsx(
+                          Composite.Item,
+                          {
+                            id: getCompositeItemId(
+                              instanceId,
+                              style
+                            ),
+                            render: /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                className: "block-editor-block-styles__item",
+                                tone: "neutral",
+                                variant: activeStyle.name === style.name ? "solid" : "outline"
+                              }
+                            ),
+                            role: "radio",
+                            "aria-checked": activeStyle.name === style.name,
+                            onMouseEnter: () => styleItemHandler(style),
+                            onFocus: () => styleItemHandler(style),
+                            onMouseLeave: () => styleItemHandler(null),
+                            onBlur: () => styleItemHandler(null),
+                            onClick: () => onSelectStylePreview(style),
+                            children: /* @__PURE__ */ jsx(
+                              Truncate,
+                              {
+                                numberOfLines: 3,
+                                className: "block-editor-block-styles__item-text",
+                                children: style.label || style.name
+                              }
+                            )
+                          },
+                          style.name
+                        ))
+                      },
+                      rowIndex
+                    ))
+                  }
+                ),
                 previewBlocks && /* @__PURE__ */ jsx(
                   PreviewBlockPopover,
                   {

package/build-module/components/block-styles/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-styles/index.js"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useState, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { debounce } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalTruncate as Truncate,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport PreviewBlockPopover from '../block-switcher/preview-block-popover';\nimport useStylesForBlocks from './use-styles-for-block';\nimport { useToolsPanelDropdownMenuProps } from '../global-styles/utils';\nimport { getDefaultStyle, replaceActiveStyle } from './utils';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst canEdit = useSelect(\n\t\t( select ) => select( blockEditorStore ).canEditBlock( clientId ),\n\t\t[ clientId ]\n\t);\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst previewBlocks = useMemo( () => {\n\t\tif ( ! hoveredStyle || ! genericPreviewBlock ) {\n\t\t\treturn null;\n\t\t}\n\t\tconst previewClassName = replaceActiveStyle(\n\t\t\tclassName,\n\t\t\tactiveStyle,\n\t\t\thoveredStyle\n\t\t);\n\t\treturn [\n\t\t\t{\n\t\t\t\t...genericPreviewBlock,\n\t\t\t\tattributes: {\n\t\t\t\t\t...( genericPreviewBlock.attributes || {} ),\n\t\t\t\t\tclassName: previewClassName,\n\t\t\t\t},\n\t\t\t},\n\t\t];\n\t}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );\n\n\tif ( ! canEdit || ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\tconst defaultStyle = getDefaultStyle( stylesToRender );\n\n\tconst hasValue = () => {\n\t\treturn activeStyle?.name !== defaultStyle?.name;\n\t};\n\n\tconst onDeselect = () => {\n\t\tonSelectStylePreview( defaultStyle );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Styles' ) }\n\t\t\tresetAll={ onDeselect }\n\t\t\tpanelId={ clientId }\n\t\t\thasInnerWrapper\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ hasValue }\n\t\t\t\tlabel={ __( 'Variation' ) }\n\t\t\t\tonDeselect={ onDeselect }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ setBlockStylesAnchor }\n\t\t\t\t\tclassName=\"block-editor-block-styles\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\t\t\tonMouseEnter={ () =>\n\t\t\t\t\t\t\t\t\t\tstyleItemHandler( style )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\t\t\tonMouseLeave={ () =>\n\t\t\t\t\t\t\t\t\t\tstyleItemHandler( null )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectStylePreview( style )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ previewBlocks && (\n\t\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\t\tblocks={ previewBlocks }\n\t\t\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\t\t\toffset={ 34 }\n\t\t\t\t\t\t\tanchor={ blockStylesAnchor }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</ToolsPanelItem>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default BlockStyles;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { debounce, useInstanceId } from '@wordpress/compose';\nimport {\n\tComposite,\n\t__experimentalTruncate as Truncate,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n// eslint-disable-next-line @wordpress/use-recommended-components\nimport { Button } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\nimport PreviewBlockPopover from '../block-switcher/preview-block-popover';\nimport useStylesForBlocks from './use-styles-for-block';\nimport { useToolsPanelDropdownMenuProps } from '../global-styles/utils';\nimport { getDefaultStyle, replaceActiveStyle } from './utils';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\n\nconst getCompositeItemId = ( instanceId, style ) =>\n\t`${ instanceId }-${ style.name }`;\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst canEdit = useSelect(\n\t\t( select ) => select( blockEditorStore ).canEditBlock( clientId ),\n\t\t[ clientId ]\n\t);\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst instanceId = useInstanceId(\n\t\tBlockStyles,\n\t\t'block-editor-block-styles'\n\t);\n\n\tconst styleRows = useMemo( () => {\n\t\tconst rows = [];\n\t\tfor ( let i = 0; i < ( stylesToRender?.length ?? 0 ); i += 2 ) {\n\t\t\trows.push( stylesToRender.slice( i, i + 2 ) );\n\t\t}\n\t\treturn rows;\n\t}, [ stylesToRender ] );\n\n\tconst previewBlocks = useMemo( () => {\n\t\tif ( ! hoveredStyle || ! genericPreviewBlock ) {\n\t\t\treturn null;\n\t\t}\n\t\tconst previewClassName = replaceActiveStyle(\n\t\t\tclassName,\n\t\t\tactiveStyle,\n\t\t\thoveredStyle\n\t\t);\n\t\treturn [\n\t\t\t{\n\t\t\t\t...genericPreviewBlock,\n\t\t\t\tattributes: {\n\t\t\t\t\t...( genericPreviewBlock.attributes || {} ),\n\t\t\t\t\tclassName: previewClassName,\n\t\t\t\t},\n\t\t\t},\n\t\t];\n\t}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );\n\n\tif ( ! canEdit || ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\tconst onSetActiveId = ( nextActiveId ) => {\n\t\tconst nextStyle = stylesToRender.find(\n\t\t\t( style ) =>\n\t\t\t\tgetCompositeItemId( instanceId, style ) === nextActiveId\n\t\t);\n\t\tif ( nextStyle && nextStyle.name !== activeStyle.name ) {\n\t\t\tonSelectStylePreview( nextStyle );\n\t\t}\n\t};\n\n\tconst defaultStyle = getDefaultStyle( stylesToRender );\n\n\tconst hasValue = () => {\n\t\treturn activeStyle?.name !== defaultStyle?.name;\n\t};\n\n\tconst onDeselect = () => {\n\t\tonSelectStylePreview( defaultStyle );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Styles' ) }\n\t\t\tresetAll={ onDeselect }\n\t\t\tpanelId={ clientId }\n\t\t\thasInnerWrapper\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ hasValue }\n\t\t\t\tlabel={ __( 'Variation' ) }\n\t\t\t\tonDeselect={ onDeselect }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ setBlockStylesAnchor }\n\t\t\t\t\tclassName=\"block-editor-block-styles\"\n\t\t\t\t>\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\t\taria-label={ __( 'Styles' ) }\n\t\t\t\t\t\tclassName=\"block-editor-block-styles__variants\"\n\t\t\t\t\t\tactiveId={ getCompositeItemId(\n\t\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\t\tactiveStyle\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tsetActiveId={ onSetActiveId }\n\t\t\t\t\t\tfocusLoop\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\tfocusShift\n\t\t\t\t\t>\n\t\t\t\t\t\t{ styleRows.map( ( row, rowIndex ) => (\n\t\t\t\t\t\t\t<Composite.Row\n\t\t\t\t\t\t\t\tkey={ rowIndex }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__row\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ row.map( ( style ) => (\n\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\t\t\t\tid={ getCompositeItemId(\n\t\t\t\t\t\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\t\t\t\t\t\tstyle\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item\"\n\t\t\t\t\t\t\t\t\t\t\t\ttone=\"neutral\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\tactiveStyle.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle.name\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'outline'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonMouseEnter={ () =>\n\t\t\t\t\t\t\t\t\t\t\tstyleItemHandler( style )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonFocus={ () =>\n\t\t\t\t\t\t\t\t\t\t\tstyleItemHandler( style )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ () =>\n\t\t\t\t\t\t\t\t\t\t\tstyleItemHandler( null )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonBlur={ () =>\n\t\t\t\t\t\t\t\t\t\t\tstyleItemHandler( null )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonSelectStylePreview( style )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\t\t\tnumberOfLines={ 3 }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ style.label || style.name }\n\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Composite.Row>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Composite>\n\t\t\t\t\t{ previewBlocks && (\n\t\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\t\tblocks={ previewBlocks }\n\t\t\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\t\t\toffset={ 34 }\n\t\t\t\t\t\t\tanchor={ blockStylesAnchor }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</ToolsPanelItem>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default BlockStyles;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/block-visibility/constants.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/constants.ts"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { desktop, tablet, mobile } from '@wordpress/icons';\n\n/**\n * The viewports for which block visibility can be controlled.\n */\nexport type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';\n\n/**\n * The choices for the block visibility.\n *\n * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices array)\n * and packages/edit-site/src/components/block-editor/use-viewport-sync.js\n * (VALID_DEVICE_TYPES). Update all three when adding new viewport types.\n *\n * @todo create a single source of truth for the viewport types.\n */\nexport const BLOCK_VISIBILITY_VIEWPORTS = {\n\tdesktop: {\n\t\tlabel: __( 'Desktop' ),\n\t\ticon: desktop,\n\t\tkey: 'desktop',\n\t},\n\ttablet: {\n\t\tlabel: __( 'Tablet' ),\n\t\ticon: tablet,\n\t\tkey: 'tablet',\n\t},\n\tmobile: {\n\t\tlabel: __( 'Mobile' ),\n\t\ticon: mobile,\n\t\tkey: 'mobile',\n\t},\n} satisfies Record<\n\tBlockVisibilityViewport,\n\t{ label: string; icon: ReactElement; key: BlockVisibilityViewport }\n>;\n\nexport const BLOCK_VISIBILITY_VIEWPORT_ENTRIES = Object.entries(\n\tBLOCK_VISIBILITY_VIEWPORTS\n);\n"],
-  "mappings": ";AACA,SAAS,UAAU;AACnB,SAAS,SAAS,QAAQ,cAAc;AAgBjC,IAAM,6BAA6B;AAAA,EACzC,SAAS;AAAA,IACR,OAAO,GAAI,SAAU;AAAA,IACrB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACP,OAAO,GAAI,QAAS;AAAA,IACpB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACP,OAAO,GAAI,QAAS;AAAA,IACpB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AACD;AAKO,IAAM,oCAAoC,OAAO;AAAA,EACvD;AACD;",
+  "sourcesContent": ["import type { ReactElement } from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { desktop, tablet, mobile } from '@wordpress/icons';\n\n/**\n * The viewports for which block visibility can be controlled.\n */\nexport type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';\n\n/**\n * The choices for the block visibility.\n *\n * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices\n * array), packages/edit-site/src/components/block-editor/viewport.js and\n * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all\n * four when adding new viewport types.\n *\n * @todo create a single source of truth for the viewport types.\n */\nexport const BLOCK_VISIBILITY_VIEWPORTS = {\n\tdesktop: {\n\t\tlabel: __( 'Desktop' ),\n\t\ticon: desktop,\n\t\tkey: 'desktop',\n\t},\n\ttablet: {\n\t\tlabel: __( 'Tablet' ),\n\t\ticon: tablet,\n\t\tkey: 'tablet',\n\t},\n\tmobile: {\n\t\tlabel: __( 'Mobile' ),\n\t\ticon: mobile,\n\t\tkey: 'mobile',\n\t},\n} satisfies Record<\n\tBlockVisibilityViewport,\n\t{ label: string; icon: ReactElement; key: BlockVisibilityViewport }\n>;\n\nexport const BLOCK_VISIBILITY_VIEWPORT_ENTRIES = Object.entries(\n\tBLOCK_VISIBILITY_VIEWPORTS\n);\n"],
+  "mappings": ";AACA,SAAS,UAAU;AACnB,SAAS,SAAS,QAAQ,cAAc;AAiBjC,IAAM,6BAA6B;AAAA,EACzC,SAAS;AAAA,IACR,OAAO,GAAI,SAAU;AAAA,IACrB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACP,OAAO,GAAI,QAAS;AAAA,IACpB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACP,OAAO,GAAI,QAAS;AAAA,IACpB,MAAM;AAAA,IACN,KAAK;AAAA,EACN;AACD;AAKO,IAAM,oCAAoC,OAAO;AAAA,EACvD;AACD;",
   "names": []
 }

package/build-module/components/child-layout-control/index.mjs

@@ -3,7 +3,7 @@ import {
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
   __experimentalUnitControl as UnitControl,
-  __experimentalInputControl as InputControl,
+  __experimentalInputControl as WCInputControl,
   __experimentalVStack as VStack,
   __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalUseCustomUnits as useCustomUnits,
@@ -270,7 +270,7 @@ function GridControls({
         panelId,
         children: [
           /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
-            InputControl,
+            WCInputControl,
             {
               label: __("Column span"),
               type: "number",
@@ -290,7 +290,7 @@ function GridControls({
             }
           ) }),
           /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
-            InputControl,
+            WCInputControl,
             {
               label: __("Row span"),
               type: "number",
@@ -326,7 +326,7 @@ function GridControls({
         panelId,
         children: [
           /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
-            InputControl,
+            WCInputControl,
             {
               label: __("Column"),
               type: "number",
@@ -355,7 +355,7 @@ function GridControls({
             }
           ) }),
           /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
-            InputControl,
+            WCInputControl,
             {
               label: __("Row"),
               type: "number",

package/build-module/components/child-layout-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/child-layout-control/index.js"],
-  "sourcesContent": ["import {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\nimport { useSettings } from '../use-settings';\n\n// These are the serialized `selfStretch` values. `max` used to be called\n// \"Fixed\" in the UI, but was renamed and replaced by `fixedNoShrink`.\nconst FLEX_CHILD_LAYOUT_VALUES = {\n\tfit: 'fit',\n\tgrow: 'fill',\n\tmax: 'fixed',\n\tfixed: 'fixedNoShrink',\n};\n\nconst FLEX_SIZE_VALUES = [\n\tFLEX_CHILD_LAYOUT_VALUES.max,\n\tFLEX_CHILD_LAYOUT_VALUES.fixed,\n];\n\nfunction isFlexSizeValue( value ) {\n\treturn FLEX_SIZE_VALUES.includes( value );\n}\n\nfunction maxSizeLabel( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal'\n\t\t? _x( 'Max', 'Block with maximum width in flex layout' )\n\t\t: _x( 'Max', 'Block with maximum height in flex layout' );\n}\n\nfunction helpText( flexControlValue, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\n\tif ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.max &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a maximum width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max ) {\n\t\treturn __( 'Specify a maximum height.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                      Props.\n * @param {Object}   props.value                The child layout value.\n * @param {Function} props.onChange             Function to update the child layout value.\n * @param {Object}   props.parentLayout         The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.\n * @param {string}   props.panelId              The panel ID.\n * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults = true,\n} ) {\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tif ( parentLayoutType === 'flex' ) {\n\t\treturn (\n\t\t\t<FlexControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t} else if ( parentLayoutType === 'grid' ) {\n\t\treturn (\n\t\t\t<GridControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tshowGridSpanDefaults={ showGridSpanDefaults }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction FlexControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\tconst flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;\n\tconst hasFlexSizeValue = isFlexSizeValue( flexControlValue );\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isFlexSizeValue( selfStretch ) && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: FLEX_CHILD_LAYOUT_VALUES.fit,\n\t\t\t} );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\thasValue={ hasFlexValue }\n\t\t\tlabel={ flexResetLabel }\n\t\t\tonDeselect={ resetFlex }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ flexControlValue }\n\t\t\t\thelp={ helpText( flexControlValue, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = isFlexSizeValue( value )\n\t\t\t\t\t\t? flexSize\n\t\t\t\t\t\t: null;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fit',\n\t\t\t\t\t\t'Intrinsic block width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Grow',\n\t\t\t\t\t\t'Block with expanding width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tlabel={ maxSizeLabel( parentLayout ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fixed',\n\t\t\t\t\t\t'Block with fixed width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ hasFlexSizeValue && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tselfStretch: flexControlValue,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n\nfunction GridControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults,\n} ) {\n\tconst { columnStart, rowStart, columnSpan, rowSpan } = childLayout;\n\tconst { columnCount, rowCount } = parentLayout ?? {};\n\tconst rootClientId = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).getBlockRootClientId( panelId )\n\t);\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\trootClientId,\n\t\tcolumnCount || 3\n\t);\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\t// Calculate max column span based on current position and grid width\n\tconst maxColumnSpan = columnCount\n\t\t? columnCount - ( columnStart ?? 1 ) + 1\n\t\t: undefined;\n\n\t// Calculate max row span based on current position and grid height\n\tconst maxRowSpan =\n\t\twindow.__experimentalEnableGridInteractivity && rowCount\n\t\t\t? rowCount - ( rowStart ?? 1 ) + 1\n\t\t\t: undefined;\n\tconst columnSpanValue =\n\t\tcolumnSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\tconst rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Flex\n\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\tconst newColumnSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxColumnSpan\n\t\t\t\t\t\t\t\t? Math.min( newColumnSpan, maxColumnSpan )\n\t\t\t\t\t\t\t\t: newColumnSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\tcolumnSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ columnSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxColumnSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newRowSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxRowSpan\n\t\t\t\t\t\t\t\t? Math.min( newRowSpan, maxRowSpan )\n\t\t\t\t\t\t\t\t: newRowSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\trowSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ rowSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxRowSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\n\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t// sized incorrectly.\n\t\t\t\t<Flex\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newColumnStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tnewColumnStart,\n\t\t\t\t\t\t\t\t\t\trowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tcolumnCount\n\t\t\t\t\t\t\t\t\t? columnCount - ( columnSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newRowStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\tnewRowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\trowCount\n\t\t\t\t\t\t\t\t\t? rowCount - ( rowSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "sourcesContent": ["import {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as WCInputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\nimport { useSettings } from '../use-settings';\n\n// These are the serialized `selfStretch` values. `max` used to be called\n// \"Fixed\" in the UI, but was renamed and replaced by `fixedNoShrink`.\nconst FLEX_CHILD_LAYOUT_VALUES = {\n\tfit: 'fit',\n\tgrow: 'fill',\n\tmax: 'fixed',\n\tfixed: 'fixedNoShrink',\n};\n\nconst FLEX_SIZE_VALUES = [\n\tFLEX_CHILD_LAYOUT_VALUES.max,\n\tFLEX_CHILD_LAYOUT_VALUES.fixed,\n];\n\nfunction isFlexSizeValue( value ) {\n\treturn FLEX_SIZE_VALUES.includes( value );\n}\n\nfunction maxSizeLabel( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal'\n\t\t? _x( 'Max', 'Block with maximum width in flex layout' )\n\t\t: _x( 'Max', 'Block with maximum height in flex layout' );\n}\n\nfunction helpText( flexControlValue, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\n\tif ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.max &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a maximum width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max ) {\n\t\treturn __( 'Specify a maximum height.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                      Props.\n * @param {Object}   props.value                The child layout value.\n * @param {Function} props.onChange             Function to update the child layout value.\n * @param {Object}   props.parentLayout         The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.\n * @param {string}   props.panelId              The panel ID.\n * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults = true,\n} ) {\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tif ( parentLayoutType === 'flex' ) {\n\t\treturn (\n\t\t\t<FlexControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t} else if ( parentLayoutType === 'grid' ) {\n\t\treturn (\n\t\t\t<GridControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tshowGridSpanDefaults={ showGridSpanDefaults }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction FlexControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\tconst flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;\n\tconst hasFlexSizeValue = isFlexSizeValue( flexControlValue );\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isFlexSizeValue( selfStretch ) && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: FLEX_CHILD_LAYOUT_VALUES.fit,\n\t\t\t} );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\thasValue={ hasFlexValue }\n\t\t\tlabel={ flexResetLabel }\n\t\t\tonDeselect={ resetFlex }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ flexControlValue }\n\t\t\t\thelp={ helpText( flexControlValue, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = isFlexSizeValue( value )\n\t\t\t\t\t\t? flexSize\n\t\t\t\t\t\t: null;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fit',\n\t\t\t\t\t\t'Intrinsic block width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Grow',\n\t\t\t\t\t\t'Block with expanding width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tlabel={ maxSizeLabel( parentLayout ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fixed',\n\t\t\t\t\t\t'Block with fixed width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ hasFlexSizeValue && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tselfStretch: flexControlValue,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n\nfunction GridControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults,\n} ) {\n\tconst { columnStart, rowStart, columnSpan, rowSpan } = childLayout;\n\tconst { columnCount, rowCount } = parentLayout ?? {};\n\tconst rootClientId = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).getBlockRootClientId( panelId )\n\t);\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\trootClientId,\n\t\tcolumnCount || 3\n\t);\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\t// Calculate max column span based on current position and grid width\n\tconst maxColumnSpan = columnCount\n\t\t? columnCount - ( columnStart ?? 1 ) + 1\n\t\t: undefined;\n\n\t// Calculate max row span based on current position and grid height\n\tconst maxRowSpan =\n\t\twindow.__experimentalEnableGridInteractivity && rowCount\n\t\t\t? rowCount - ( rowStart ?? 1 ) + 1\n\t\t\t: undefined;\n\tconst columnSpanValue =\n\t\tcolumnSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\tconst rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Flex\n\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<WCInputControl\n\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\tconst newColumnSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxColumnSpan\n\t\t\t\t\t\t\t\t? Math.min( newColumnSpan, maxColumnSpan )\n\t\t\t\t\t\t\t\t: newColumnSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\tcolumnSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ columnSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxColumnSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<WCInputControl\n\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newRowSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxRowSpan\n\t\t\t\t\t\t\t\t? Math.min( newRowSpan, maxRowSpan )\n\t\t\t\t\t\t\t\t: newRowSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\trowSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ rowSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxRowSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\n\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t// sized incorrectly.\n\t\t\t\t<Flex\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<WCInputControl\n\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newColumnStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tnewColumnStart,\n\t\t\t\t\t\t\t\t\t\trowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tcolumnCount\n\t\t\t\t\t\t\t\t\t? columnCount - ( columnSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<WCInputControl\n\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newRowStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\tnewRowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\trowCount\n\t\t\t\t\t\t\t\t\t? rowCount - ( rowSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
   "mappings": "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",
   "names": []
 }

package/build-module/components/colors/with-colors.mjs

@@ -1,5 +1,5 @@
 // packages/block-editor/src/components/colors/with-colors.js
-import { useMemo, Component } from "@wordpress/element";
+import { useMemo, useRef } from "@wordpress/element";
 import { compose, createHigherOrderComponent } from "@wordpress/compose";
 import { kebabCase } from "@wordpress/kebab-case";
 import {
@@ -46,87 +46,71 @@ function createColorHOC(colorTypes, withColorPalette) {
   return compose([
     withColorPalette,
     (WrappedComponent) => {
-      return class WithColors extends Component {
-        constructor(props) {
-          super(props);
-          this.setters = this.createSetters();
-          this.colorUtils = {
-            getMostReadableColor: this.getMostReadableColor.bind(this)
-          };
-          this.state = {};
-        }
-        getMostReadableColor(colorValue) {
-          const { colors } = this.props;
-          return getMostReadableColor(colors, colorValue);
-        }
-        createSetters() {
-          return Object.keys(colorMap).reduce(
-            (settersAccumulator, colorAttributeName) => {
-              const upperFirstColorAttributeName = upperFirst(colorAttributeName);
-              const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
-              settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(
-                colorAttributeName,
-                customColorAttributeName
-              );
-              return settersAccumulator;
-            },
-            {}
-          );
-        }
-        createSetColor(colorAttributeName, customColorAttributeName) {
-          return (colorValue) => {
-            const colorObject = getColorObjectByColorValue(
-              this.props.colors,
-              colorValue
-            );
-            this.props.setAttributes({
-              [colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : void 0,
-              [customColorAttributeName]: colorObject && colorObject.slug ? void 0 : colorValue
-            });
-          };
-        }
-        static getDerivedStateFromProps({ attributes, colors }, previousState) {
-          return Object.entries(colorMap).reduce(
-            (newState, [colorAttributeName, colorContext]) => {
-              const colorObject = getColorObjectByAttributeValues(
-                colors,
-                attributes[colorAttributeName],
-                attributes[`custom${upperFirst(
+      return function WithColors(props) {
+        const { colors: _colors, ...passedProps } = props;
+        const { attributes, setAttributes } = passedProps;
+        const prevColorPropsRef = useRef(null);
+        const colorProps = useMemo(() => {
+          const prevColorProps = prevColorPropsRef.current;
+          const result = Object.fromEntries(
+            Object.entries(colorMap).flatMap(
+              ([colorAttributeName, colorContext]) => {
+                const customAttr = `custom${upperFirst(
                   colorAttributeName
-                )}`]
-              );
-              const previousColorObject = previousState[colorAttributeName];
-              const previousColor = previousColorObject?.color;
-              if (previousColor === colorObject.color && previousColorObject) {
-                newState[colorAttributeName] = previousColorObject;
-              } else {
-                newState[colorAttributeName] = {
+                )}`;
+                const upperFirstColorAttributeName = upperFirst(colorAttributeName);
+                const colorObject = getColorObjectByAttributeValues(
+                  _colors,
+                  attributes[colorAttributeName],
+                  attributes[customAttr]
+                );
+                const prevColorValue = prevColorProps?.[colorAttributeName];
+                const colorValue = prevColorValue?.color === colorObject.color && prevColorValue ? prevColorValue : {
                   ...colorObject,
                   class: getColorClassName(
                     colorContext,
                     colorObject.slug
                   )
                 };
+                const setter = (newColorValue) => {
+                  const resolvedColorObject = getColorObjectByColorValue(
+                    _colors,
+                    newColorValue
+                  );
+                  setAttributes({
+                    [colorAttributeName]: resolvedColorObject?.slug || void 0,
+                    [customAttr]: resolvedColorObject?.slug ? void 0 : newColorValue
+                  });
+                };
+                return [
+                  [colorAttributeName, colorValue],
+                  [
+                    `set${upperFirstColorAttributeName}`,
+                    setter
+                  ]
+                ];
               }
-              return newState;
-            },
-            {}
+            )
           );
-        }
-        render() {
-          return /* @__PURE__ */ jsx(
-            WrappedComponent,
-            {
-              ...{
-                ...this.props,
-                colors: void 0,
-                ...this.state,
-                ...this.setters,
-                colorUtils: this.colorUtils
-              }
+          prevColorPropsRef.current = result;
+          return result;
+        }, [attributes, _colors, setAttributes]);
+        const colorUtils = useMemo(
+          () => ({
+            getMostReadableColor: (colorValue) => getMostReadableColor(_colors, colorValue)
+          }),
+          [_colors]
+        );
+        return /* @__PURE__ */ jsx(
+          WrappedComponent,
+          {
+            ...{
+              ...passedProps,
+              ...colorProps,
+              colorUtils
             }
-          );
-        }
+          }
+        );
       };
     }
   ]);

package/build-module/components/colors/with-colors.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors/with-colors.js"],
-  "sourcesContent": ["import { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tfunction WithCustomColorPalette( props ) {\n\t\t\t\treturn <WrappedComponent { ...props } colors={ colorsArray } />;\n\t\t\t},\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tfunction WithEditorColorPalette( props ) {\n\t\t\t\tconst [ userPalette, themePalette, defaultPalette ] =\n\t\t\t\t\tuseSettings(\n\t\t\t\t\t\t'color.palette.custom',\n\t\t\t\t\t\t'color.palette.theme',\n\t\t\t\t\t\t'color.palette.default'\n\t\t\t\t\t);\n\t\t\t\tconst allColors = useMemo(\n\t\t\t\t\t() => [\n\t\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t\t],\n\t\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t\t);\n\t\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class WithColors extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t\t) }`\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\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},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, useRef } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tfunction WithCustomColorPalette( props ) {\n\t\t\t\treturn <WrappedComponent { ...props } colors={ colorsArray } />;\n\t\t\t},\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tfunction WithEditorColorPalette( props ) {\n\t\t\t\tconst [ userPalette, themePalette, defaultPalette ] =\n\t\t\t\t\tuseSettings(\n\t\t\t\t\t\t'color.palette.custom',\n\t\t\t\t\t\t'color.palette.theme',\n\t\t\t\t\t\t'color.palette.default'\n\t\t\t\t\t);\n\t\t\t\tconst allColors = useMemo(\n\t\t\t\t\t() => [\n\t\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t\t],\n\t\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t\t);\n\t\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn function WithColors( props ) {\n\t\t\t\tconst { colors: _colors, ...passedProps } = props;\n\t\t\t\tconst { attributes, setAttributes } = passedProps;\n\t\t\t\tconst prevColorPropsRef = useRef( null );\n\n\t\t\t\tconst colorProps = useMemo( () => {\n\t\t\t\t\tconst prevColorProps = prevColorPropsRef.current;\n\n\t\t\t\t\tconst result = Object.fromEntries(\n\t\t\t\t\t\tObject.entries( colorMap ).flatMap(\n\t\t\t\t\t\t\t( [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\t\tconst customAttr = `custom${ upperFirst(\n\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t) }`;\n\t\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\n\t\t\t\t\t\t\t\tconst colorObject =\n\t\t\t\t\t\t\t\t\tgetColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\t\t\t_colors,\n\t\t\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\t\t\tattributes[ customAttr ]\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tconst prevColorValue =\n\t\t\t\t\t\t\t\t\tprevColorProps?.[ colorAttributeName ];\n\t\t\t\t\t\t\t\tconst colorValue =\n\t\t\t\t\t\t\t\t\tprevColorValue?.color ===\n\t\t\t\t\t\t\t\t\t\tcolorObject.color && prevColorValue\n\t\t\t\t\t\t\t\t\t\t? prevColorValue\n\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t  };\n\n\t\t\t\t\t\t\t\tconst setter = ( newColorValue ) => {\n\t\t\t\t\t\t\t\t\tconst resolvedColorObject =\n\t\t\t\t\t\t\t\t\t\tgetColorObjectByColorValue(\n\t\t\t\t\t\t\t\t\t\t\t_colors,\n\t\t\t\t\t\t\t\t\t\t\tnewColorValue\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\t\t\t\tresolvedColorObject?.slug ||\n\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t[ customAttr ]:\n\t\t\t\t\t\t\t\t\t\t\tresolvedColorObject?.slug\n\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t: newColorValue,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\t[ colorAttributeName, colorValue ],\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`,\n\t\t\t\t\t\t\t\t\t\tsetter,\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\n\t\t\t\t\tprevColorPropsRef.current = result;\n\t\t\t\t\treturn result;\n\t\t\t\t}, [ attributes, _colors, setAttributes ] );\n\n\t\t\t\tconst colorUtils = useMemo(\n\t\t\t\t\t() => ( {\n\t\t\t\t\t\tgetMostReadableColor: ( colorValue ) =>\n\t\t\t\t\t\t\tgetMostReadableColor( _colors, colorValue ),\n\t\t\t\t\t} ),\n\t\t\t\t\t[ _colors ]\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t...passedProps,\n\t\t\t\t\t\t\t...colorProps,\n\t\t\t\t\t\t\tcolorUtils,\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},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dimensions-tool/aspect-ratio-tool.mjs

@@ -3,6 +3,7 @@ import { SelectControl } from "@wordpress/components";
 import { __, _x } from "@wordpress/i18n";
 import { useSettings } from "../use-settings/index.mjs";
 import { InheritanceToolsPanelItem } from "../global-styles/inheritance/index.mjs";
+import { findAspectRatioOption } from "./utils.mjs";
 import { jsx } from "react/jsx-runtime";
 function AspectRatioTool({
   panelId,
@@ -17,7 +18,6 @@ function AspectRatioTool({
   isInherited,
   hasLocalOverride
 }) {
-  const displayValue = value ?? "auto";
   const [defaultRatios, themeRatios, showDefaultRatios] = useSettings(
     "dimensions.aspectRatios.default",
     "dimensions.aspectRatios.theme",
@@ -48,6 +48,8 @@ function AspectRatioTool({
       hidden: true
     }
   ];
+  const resolvedOptions = options ?? aspectRatioOptions;
+  const displayValue = value === void 0 || value === null || value === "auto" ? "auto" : findAspectRatioOption(value, resolvedOptions)?.value ?? "custom";
   return /* @__PURE__ */ jsx(
     InheritanceToolsPanelItem,
     {
@@ -64,7 +66,7 @@ function AspectRatioTool({
         {
           label: __("Aspect ratio"),
           value: displayValue,
-          options: options ?? aspectRatioOptions,
+          options: resolvedOptions,
           onChange
         }
       )