@wordpress/block-editor 16.1.0 → 17.0.0

package/build-module/components/colors-gradients/control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/control.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tgradientSlug,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tselectedSlug={ gradientSlug }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient, _index, newSlug ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: ( newGradient, _index, newSlug ) =>\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug )\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tgradientSlug,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tselectedSlug={ gradientSlug }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient, _index, newSlug ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: ( newGradient, _index, newSlug ) =>\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug )\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/colors-gradients/dropdown.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/dropdown.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { reset as resetIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-item',\n\t\t\t\t'block-editor-tools-panel-color-gradient-settings__item'\n\t\t\t) }\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-name\"\n\t\t\ttitle={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle = ( settings ) =>\n\tfunction Toggle( { onToggle, isOpen } ) {\n\t\tconst {\n\t\t\tclearable,\n\t\t\tcolorValue,\n\t\t\tgradientValue,\n\t\t\tonColorChange,\n\t\t\tonGradientChange,\n\t\t\tlabel,\n\t\t} = settings;\n\t\tconst colorButtonRef = useRef( undefined );\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t\tref: colorButtonRef,\n\t\t};\n\n\t\tconst clearValue = () => {\n\t\t\tif ( colorValue ) {\n\t\t\t\tonColorChange();\n\t\t\t} else if ( gradientValue ) {\n\t\t\t\tonGradientChange();\n\t\t\t}\n\t\t};\n\n\t\tconst value = colorValue ?? gradientValue;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button __next40pxDefaultSize { ...toggleProps }>\n\t\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t{ clearable && value && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearValue();\n\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\tcolorButtonRef.current?.focus();\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// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tclearable: setting.clearable,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-item',\n\t\t\t\t'block-editor-tools-panel-color-gradient-settings__item'\n\t\t\t) }\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-name\"\n\t\t\ttitle={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle = ( settings ) =>\n\tfunction Toggle( { onToggle, isOpen } ) {\n\t\tconst {\n\t\t\tclearable,\n\t\t\tcolorValue,\n\t\t\tgradientValue,\n\t\t\tonColorChange,\n\t\t\tonGradientChange,\n\t\t\tlabel,\n\t\t} = settings;\n\t\tconst colorButtonRef = useRef( undefined );\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t\tref: colorButtonRef,\n\t\t};\n\n\t\tconst clearValue = () => {\n\t\t\tif ( colorValue ) {\n\t\t\t\tonColorChange();\n\t\t\t} else if ( gradientValue ) {\n\t\t\t\tonGradientChange();\n\t\t\t}\n\t\t};\n\n\t\tconst value = colorValue ?? gradientValue;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button __next40pxDefaultSize { ...toggleProps }>\n\t\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t{ clearable && value && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearValue();\n\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\tcolorButtonRef.current?.focus();\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// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tclearable: setting.clearable,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/colors-gradients/panel-color-gradient-settings.mjs

@@ -35,13 +35,14 @@ var PanelColorGradientSettingsInner = ({
   )) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     ToolsPanel,
     {
       className: clsx(
         "block-editor-panel-color-gradient-settings",
         className
       ),
+      hasInnerWrapper: true,
       label: showTitle ? title : void 0,
       resetAll: () => {
         batch(() => {
@@ -64,7 +65,7 @@ var PanelColorGradientSettingsInner = ({
       panelId,
       __experimentalFirstVisibleItemClass: "first",
       __experimentalLastVisibleItemClass: "last",
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "block-editor-panel-color-gradient-settings__inner-wrapper", children: [
         /* @__PURE__ */ jsx(
           ColorGradientSettingsDropdown,
           {
@@ -81,11 +82,10 @@ var PanelColorGradientSettingsInner = ({
           }
         ),
         !!children && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Spacer, { marginY: 4 }),
-          " ",
+          /* @__PURE__ */ jsx(Spacer, { marginTop: 4, marginBottom: 0 }),
           children
         ] })
-      ]
+      ] })
     }
   );
 };

package/build-module/components/colors-gradients/panel-color-gradient-settings.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/panel-color-gradient-settings.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientSettingsDropdown from './dropdown';\nimport useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n} ) => {\n\tconst panelId = useInstanceId( PanelColorGradientSettingsInner );\n\tconst { batch } = useRegistry();\n\tif (\n\t\t( ! colors || colors.length === 0 ) &&\n\t\t( ! gradients || gradients.length === 0 ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tsettings?.every(\n\t\t\t( setting ) =>\n\t\t\t\t( ! setting.colors || setting.colors.length === 0 ) &&\n\t\t\t\t( ! setting.gradients || setting.gradients.length === 0 ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tlabel={ showTitle ? title : undefined }\n\t\t\tresetAll={ () => {\n\t\t\t\tbatch( () => {\n\t\t\t\t\tsettings.forEach(\n\t\t\t\t\t\t( {\n\t\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tif ( colorValue ) {\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t} else if ( gradientValue ) {\n\t\t\t\t\t\t\t\tonGradientChange();\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\tpanelId={ panelId }\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t>\n\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\tsettings={ settings }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\t{ ...{\n\t\t\t\t\tcolors,\n\t\t\t\t\tgradients,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ !! children && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer marginY={ 4 } /> { children }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = useColorsAndGradientsPalettes();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,OACtB;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAK9B,OAAO,mCAAmC;AAC1C,OAAO,mCAAmC;AAuEvC,SAaC,UAbD,KAaC,YAbD;AArEH,IAAM,wBAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,kCAAkC,CAAE;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACD,MAAO;AACN,QAAM,UAAU,cAAe,+BAAgC;AAC/D,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,OACG,CAAE,UAAU,OAAO,WAAW,OAC9B,CAAE,aAAa,UAAU,WAAW,MACtC,uBACA,0BACA,UAAU;AAAA,IACT,CAAE,aACC,CAAE,QAAQ,UAAU,QAAQ,OAAO,WAAW,OAC9C,CAAE,QAAQ,aAAa,QAAQ,UAAU,WAAW,OACpD,QAAQ,wBAAwB,UACjC,QAAQ,yBACP,QAAQ,2BAA2B,UACpC,QAAQ;AAAA,EACX,GACC;AACD,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAQ,YAAY,QAAQ;AAAA,MAC5B,UAAW,MAAM;AAChB,cAAO,MAAM;AACZ,mBAAS;AAAA,YACR,CAAE;AAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD,MAAO;AACN,kBAAK,YAAa;AACjB,8BAAc;AAAA,cACf,WAAY,eAAgB;AAC3B,iCAAiB;AAAA,cAClB;AAAA,YACD;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA;AAAA,MACA,qCAAoC;AAAA,MACpC,oCAAmC;AAAA,MAEnC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,YACJ,iCACC;AAAA,8BAAC,UAAO,SAAU,GAAI;AAAA,UAAE;AAAA,UAAG;AAAA,WAC5B;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAM,mCAAmC,CAAE,UAAW;AACrD,QAAM,wBAAwB,8BAA8B;AAC5D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,EAAE,GAAG,uBAAuB,GAAG,MAAM;AAAA;AAAA,EAC3C;AAEF;AAEA,IAAM,6BAA6B,CAAE,UAAW;AAC/C,MACC,sBAAsB,MAAO,CAAE,QAAS,MAAM,eAAgB,GAAI,CAAE,GACnE;AACD,WAAO,oBAAC,mCAAkC,GAAG,OAAQ;AAAA,EACtD;AACA,SAAO,oBAAC,oCAAmC,GAAG,OAAQ;AACvD;AAEA,IAAO,wCAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport ColorGradientSettingsDropdown from './dropdown';\nimport useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n} ) => {\n\tconst panelId = useInstanceId( PanelColorGradientSettingsInner );\n\tconst { batch } = useRegistry();\n\tif (\n\t\t( ! colors || colors.length === 0 ) &&\n\t\t( ! gradients || gradients.length === 0 ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tsettings?.every(\n\t\t\t( setting ) =>\n\t\t\t\t( ! setting.colors || setting.colors.length === 0 ) &&\n\t\t\t\t( ! setting.gradients || setting.gradients.length === 0 ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thasInnerWrapper\n\t\t\tlabel={ showTitle ? title : undefined }\n\t\t\tresetAll={ () => {\n\t\t\t\tbatch( () => {\n\t\t\t\t\tsettings.forEach(\n\t\t\t\t\t\t( {\n\t\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tif ( colorValue ) {\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t} else if ( gradientValue ) {\n\t\t\t\t\t\t\t\tonGradientChange();\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\tpanelId={ panelId }\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t>\n\t\t\t<div className=\"block-editor-panel-color-gradient-settings__inner-wrapper\">\n\t\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ !! children && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Spacer marginTop={ 4 } marginBottom={ 0 } />\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = useColorsAndGradientsPalettes();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,OACtB;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,OAAO,mCAAmC;AAC1C,OAAO,mCAAmC;AAyEtC,SAaC,UAbD,KAaC,YAbD;AAvEJ,IAAM,wBAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,kCAAkC,CAAE;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACD,MAAO;AACN,QAAM,UAAU,cAAe,+BAAgC;AAC/D,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,OACG,CAAE,UAAU,OAAO,WAAW,OAC9B,CAAE,aAAa,UAAU,WAAW,MACtC,uBACA,0BACA,UAAU;AAAA,IACT,CAAE,aACC,CAAE,QAAQ,UAAU,QAAQ,OAAO,WAAW,OAC9C,CAAE,QAAQ,aAAa,QAAQ,UAAU,WAAW,OACpD,QAAQ,wBAAwB,UACjC,QAAQ,yBACP,QAAQ,2BAA2B,UACpC,QAAQ;AAAA,EACX,GACC;AACD,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACA,iBAAe;AAAA,MACf,OAAQ,YAAY,QAAQ;AAAA,MAC5B,UAAW,MAAM;AAChB,cAAO,MAAM;AACZ,mBAAS;AAAA,YACR,CAAE;AAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD,MAAO;AACN,kBAAK,YAAa;AACjB,8BAAc;AAAA,cACf,WAAY,eAAgB;AAC3B,iCAAiB;AAAA,cAClB;AAAA,YACD;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA;AAAA,MACA,qCAAoC;AAAA,MACpC,oCAAmC;AAAA,MAEnC,+BAAC,SAAI,WAAU,6DACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,YACJ,iCACC;AAAA,8BAAC,UAAO,WAAY,GAAI,cAAe,GAAI;AAAA,UACzC;AAAA,WACH;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,mCAAmC,CAAE,UAAW;AACrD,QAAM,wBAAwB,8BAA8B;AAC5D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,EAAE,GAAG,uBAAuB,GAAG,MAAM;AAAA;AAAA,EAC3C;AAEF;AAEA,IAAM,6BAA6B,CAAE,UAAW;AAC/C,MACC,sBAAsB,MAAO,CAAE,QAAS,MAAM,eAAgB,GAAI,CAAE,GACnE;AACD,WAAO,oBAAC,mCAAkC,GAAG,OAAQ;AAAA,EACtD;AACA,SAAO,oBAAC,oCAAmC,GAAG,OAAQ;AACvD;AAEA,IAAO,wCAAQ;",
   "names": []
 }

package/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * Retrieves color and gradient related settings.\n *\n * The arrays for colors and gradients are made up of color palettes from each\n * origin i.e. \"Core\", \"Theme\", and \"User\".\n *\n * @return {Object} Color and gradient related settings.\n */\nexport default function useMultipleOriginColorsAndGradients() {\n\tconst [\n\t\tenableCustomColors,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t\tenableCustomGradients,\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.defaultPalette',\n\t\t'color.customGradient',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default',\n\t\t'color.defaultGradients'\n\t);\n\n\tconst colorGradientSettings = {\n\t\tdisableCustomColors: ! enableCustomColors,\n\t\tdisableCustomGradients: ! enableCustomGradients,\n\t};\n\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t] );\n\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] );\n\n\tcolorGradientSettings.hasColorsOrGradients =\n\t\t!! colorGradientSettings.colors.length ||\n\t\t!! colorGradientSettings.gradients.length;\n\n\treturn colorGradientSettings;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AAUb,SAAR,sCAAuD;AAC7D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,wBAAwB;AAAA,IAC7B,qBAAqB,CAAE;AAAA,IACvB,wBAAwB,CAAE;AAAA,EAC3B;AAEA,wBAAsB,SAAS,QAAS,MAAM;AAC7C,UAAM,SAAS,CAAC;AAChB,QAAK,eAAe,YAAY,QAAS;AACxC,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QACC,8BACA,iBACA,cAAc,QACb;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QAAK,gBAAgB,aAAa,QAAS;AAC1C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,YAAY,QAAS,MAAM;AAChD,UAAM,SAAS,CAAC;AAChB,QAAK,kBAAkB,eAAe,QAAS;AAC9C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QACC,iCACA,oBACA,iBAAiB,QAChB;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QAAK,mBAAmB,gBAAgB,QAAS;AAChD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,uBACrB,CAAC,CAAE,sBAAsB,OAAO,UAChC,CAAC,CAAE,sBAAsB,UAAU;AAEpC,SAAO;AACR;",
+  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\nimport { useSettings } from '../use-settings';\n\n/**\n * Retrieves color and gradient related settings.\n *\n * The arrays for colors and gradients are made up of color palettes from each\n * origin i.e. \"Core\", \"Theme\", and \"User\".\n *\n * @return {Object} Color and gradient related settings.\n */\nexport default function useMultipleOriginColorsAndGradients() {\n\tconst [\n\t\tenableCustomColors,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t\tenableCustomGradients,\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.defaultPalette',\n\t\t'color.customGradient',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default',\n\t\t'color.defaultGradients'\n\t);\n\n\tconst colorGradientSettings = {\n\t\tdisableCustomColors: ! enableCustomColors,\n\t\tdisableCustomGradients: ! enableCustomGradients,\n\t};\n\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t] );\n\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] );\n\n\tcolorGradientSettings.hasColorsOrGradients =\n\t\t!! colorGradientSettings.colors.length ||\n\t\t!! colorGradientSettings.gradients.length;\n\n\treturn colorGradientSettings;\n}\n"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAUb,SAAR,sCAAuD;AAC7D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,wBAAwB;AAAA,IAC7B,qBAAqB,CAAE;AAAA,IACvB,wBAAwB,CAAE;AAAA,EAC3B;AAEA,wBAAsB,SAAS,QAAS,MAAM;AAC7C,UAAM,SAAS,CAAC;AAChB,QAAK,eAAe,YAAY,QAAS;AACxC,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QACC,8BACA,iBACA,cAAc,QACb;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QAAK,gBAAgB,aAAa,QAAS;AAC1C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,YAAY,QAAS,MAAM;AAChD,UAAM,SAAS,CAAC;AAChB,QAAK,kBAAkB,eAAe,QAAS;AAC9C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QACC,iCACA,oBACA,iBAAiB,QAChB;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QAAK,mBAAmB,gBAAgB,QAAS;AAChD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,uBACrB,CAAC,CAAE,sBAAsB,OAAO,UAChC,CAAC,CAAE,sBAAsB,UAAU;AAEpC,SAAO;AACR;",
   "names": []
 }

package/build-module/components/contrast-checker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/contrast-checker/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\nimport { colord, extend } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Computes a contrast warning for the given color combination, if any.\n *\n * Shared between the `ContrastChecker` component and the block inspector\n * contrast warning indicators, which surface the result without rendering\n * a notice.\n *\n * @param {Object}  props\n * @param {string}  [props.backgroundColor]         Background color.\n * @param {string}  [props.fallbackBackgroundColor] Fallback background color.\n * @param {string}  [props.fallbackTextColor]       Fallback text color.\n * @param {string}  [props.fallbackLinkColor]       Fallback link color.\n * @param {number}  [props.fontSize]                Font size value in pixels.\n * @param {boolean} [props.isLargeText]             Whether the text is large.\n * @param {string}  [props.textColor]               Text color.\n * @param {string}  [props.linkColor]               Link color.\n * @param {string}  [props.messageOverride]         Caller-provided copy used in place of the generic guidance.\n * @param {boolean} [props.enableAlphaChecker]      Whether to warn about transparent text.\n *\n * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.\n */\nexport function getContrastWarning( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // Font size value in pixels.\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\n\tmessageOverride,\n\tenableAlphaChecker = false,\n} ) {\n\tconst currentBackgroundColor = backgroundColor || fallbackBackgroundColor;\n\n\t// Must have a background color.\n\tif ( ! currentBackgroundColor ) {\n\t\treturn null;\n\t}\n\n\tconst currentTextColor = textColor || fallbackTextColor;\n\tconst currentLinkColor = linkColor || fallbackLinkColor;\n\n\t// Must have at least one text color.\n\tif ( ! currentTextColor && ! currentLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst textColors = [\n\t\t{\n\t\t\tcolor: currentTextColor,\n\t\t\tdescription: __( 'text color' ),\n\t\t},\n\t\t{\n\t\t\tcolor: currentLinkColor,\n\t\t\tdescription: __( 'link color' ),\n\t\t},\n\t];\n\tconst colordBackgroundColor = colord( currentBackgroundColor );\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst backgroundColorBrightness = colordBackgroundColor.brightness();\n\tconst isReadableOptions = {\n\t\tlevel: 'AA',\n\t\tsize:\n\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t? 'large'\n\t\t\t\t: 'small',\n\t};\n\n\tlet message = '';\n\tlet speakMessage = '';\n\tfor ( const item of textColors ) {\n\t\t// If there is no color, go no further.\n\t\tif ( ! item.color ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst colordTextColor = colord( item.color );\n\t\tconst isColordTextReadable = colordTextColor.isReadable(\n\t\t\tcolordBackgroundColor,\n\t\t\tisReadableOptions\n\t\t);\n\t\tconst textHasTransparency = colordTextColor.alpha() < 1;\n\n\t\t// If the contrast is not readable.\n\t\tif ( ! isColordTextReadable ) {\n\t\t\t// Don't show the message if the background or text is transparent.\n\t\t\tif ( backgroundColorHasTransparency || textHasTransparency ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// A caller can provide panel-specific copy that is clearer and\n\t\t\t// more concise than the generic brighter/darker guidance.\n\t\t\tif ( messageOverride ) {\n\t\t\t\tmessage = messageOverride;\n\t\t\t\tspeakMessage = messageOverride;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tmessage =\n\t\t\t\tbackgroundColorBrightness < colordTextColor.brightness()\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  );\n\t\t\tspeakMessage = __(\n\t\t\t\t'This color combination may be hard for people to read.'\n\t\t\t);\n\t\t\t// Break from the loop when we have a contrast warning.\n\t\t\t// These messages take priority over the transparency warning.\n\t\t\tbreak;\n\t\t}\n\n\t\t// If there is no contrast warning and the text is transparent,\n\t\t// show the transparent warning if alpha check is enabled.\n\t\tif ( textHasTransparency && enableAlphaChecker ) {\n\t\t\tmessage = __( 'Transparent text may be hard for people to read.' );\n\t\t\tspeakMessage = __(\n\t\t\t\t'Transparent text may be hard for people to read.'\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( ! message ) {\n\t\treturn null;\n\t}\n\n\treturn { message, speakMessage };\n}\n\nfunction ContrastChecker( props ) {\n\tconst warning = getContrastWarning( props );\n\n\tif ( ! warning ) {\n\t\treturn null;\n\t}\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tspeak( warning.speakMessage );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ warning.message }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md\n */\nexport default ContrastChecker;\n"],
-  "mappings": ";AAGA,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,QAAQ,cAAc;AAK/B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AACvB,SAAS,aAAa;AA4JnB;AA1JH,OAAQ,CAAE,aAAa,UAAW,CAAE;AAuB7B,SAAS,mBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACtB,GAAI;AACH,QAAM,yBAAyB,mBAAmB;AAGlD,MAAK,CAAE,wBAAyB;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAmB,aAAa;AACtC,QAAM,mBAAmB,aAAa;AAGtC,MAAK,CAAE,oBAAoB,CAAE,kBAAmB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,wBAAwB,OAAQ,sBAAuB;AAC7D,QAAM,iCAAiC,sBAAsB,MAAM,IAAI;AACvE,QAAM,4BAA4B,sBAAsB,WAAW;AACnE,QAAM,oBAAoB;AAAA,IACzB,OAAO;AAAA,IACP,MACC,eAAiB,gBAAgB,SAAS,YAAY,KACnD,UACA;AAAA,EACL;AAEA,MAAI,UAAU;AACd,MAAI,eAAe;AACnB,aAAY,QAAQ,YAAa;AAEhC,QAAK,CAAE,KAAK,OAAQ;AACnB;AAAA,IACD;AACA,UAAM,kBAAkB,OAAQ,KAAK,KAAM;AAC3C,UAAM,uBAAuB,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,UAAM,sBAAsB,gBAAgB,MAAM,IAAI;AAGtD,QAAK,CAAE,sBAAuB;AAE7B,UAAK,kCAAkC,qBAAsB;AAC5D;AAAA,MACD;AAGA,UAAK,iBAAkB;AACtB,kBAAU;AACV,uBAAe;AACf;AAAA,MACD;AACA,gBACC,4BAA4B,gBAAgB,WAAW,IACpD;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,IACA;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,qBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,gBAAU,GAAI,kDAAmD;AACjE,qBAAe;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SAAO,EAAE,SAAS,aAAa;AAChC;AAEA,SAAS,gBAAiB,OAAQ;AACjC,QAAM,UAAU,mBAAoB,KAAM;AAE1C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAMA,QAAO,QAAQ,YAAa;AAE5B,SACC,oBAAC,SAAI,WAAU,iCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd,kBAAQ;AAAA;AAAA,EACX,GACD;AAEF;AAKA,IAAO,2BAAQ;",
+  "sourcesContent": ["import a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\nimport { colord, extend } from 'colord';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Computes a contrast warning for the given color combination, if any.\n *\n * Shared between the `ContrastChecker` component and the block inspector\n * contrast warning indicators, which surface the result without rendering\n * a notice.\n *\n * @param {Object}  props\n * @param {string}  [props.backgroundColor]         Background color.\n * @param {string}  [props.fallbackBackgroundColor] Fallback background color.\n * @param {string}  [props.fallbackTextColor]       Fallback text color.\n * @param {string}  [props.fallbackLinkColor]       Fallback link color.\n * @param {number}  [props.fontSize]                Font size value in pixels.\n * @param {boolean} [props.isLargeText]             Whether the text is large.\n * @param {string}  [props.textColor]               Text color.\n * @param {string}  [props.linkColor]               Link color.\n * @param {string}  [props.messageOverride]         Caller-provided copy used in place of the generic guidance.\n * @param {boolean} [props.enableAlphaChecker]      Whether to warn about transparent text.\n *\n * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.\n */\nexport function getContrastWarning( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // Font size value in pixels.\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\n\tmessageOverride,\n\tenableAlphaChecker = false,\n} ) {\n\tconst currentBackgroundColor = backgroundColor || fallbackBackgroundColor;\n\n\t// Must have a background color.\n\tif ( ! currentBackgroundColor ) {\n\t\treturn null;\n\t}\n\n\tconst currentTextColor = textColor || fallbackTextColor;\n\tconst currentLinkColor = linkColor || fallbackLinkColor;\n\n\t// Must have at least one text color.\n\tif ( ! currentTextColor && ! currentLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst textColors = [\n\t\t{\n\t\t\tcolor: currentTextColor,\n\t\t\tdescription: __( 'text color' ),\n\t\t},\n\t\t{\n\t\t\tcolor: currentLinkColor,\n\t\t\tdescription: __( 'link color' ),\n\t\t},\n\t];\n\tconst colordBackgroundColor = colord( currentBackgroundColor );\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst backgroundColorBrightness = colordBackgroundColor.brightness();\n\tconst isReadableOptions = {\n\t\tlevel: 'AA',\n\t\tsize:\n\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t? 'large'\n\t\t\t\t: 'small',\n\t};\n\n\tlet message = '';\n\tlet speakMessage = '';\n\tfor ( const item of textColors ) {\n\t\t// If there is no color, go no further.\n\t\tif ( ! item.color ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst colordTextColor = colord( item.color );\n\t\tconst isColordTextReadable = colordTextColor.isReadable(\n\t\t\tcolordBackgroundColor,\n\t\t\tisReadableOptions\n\t\t);\n\t\tconst textHasTransparency = colordTextColor.alpha() < 1;\n\n\t\t// If the contrast is not readable.\n\t\tif ( ! isColordTextReadable ) {\n\t\t\t// Don't show the message if the background or text is transparent.\n\t\t\tif ( backgroundColorHasTransparency || textHasTransparency ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// A caller can provide panel-specific copy that is clearer and\n\t\t\t// more concise than the generic brighter/darker guidance.\n\t\t\tif ( messageOverride ) {\n\t\t\t\tmessage = messageOverride;\n\t\t\t\tspeakMessage = messageOverride;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tmessage =\n\t\t\t\tbackgroundColorBrightness < colordTextColor.brightness()\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  );\n\t\t\tspeakMessage = __(\n\t\t\t\t'This color combination may be hard for people to read.'\n\t\t\t);\n\t\t\t// Break from the loop when we have a contrast warning.\n\t\t\t// These messages take priority over the transparency warning.\n\t\t\tbreak;\n\t\t}\n\n\t\t// If there is no contrast warning and the text is transparent,\n\t\t// show the transparent warning if alpha check is enabled.\n\t\tif ( textHasTransparency && enableAlphaChecker ) {\n\t\t\tmessage = __( 'Transparent text may be hard for people to read.' );\n\t\t\tspeakMessage = __(\n\t\t\t\t'Transparent text may be hard for people to read.'\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( ! message ) {\n\t\treturn null;\n\t}\n\n\treturn { message, speakMessage };\n}\n\nfunction ContrastChecker( props ) {\n\tconst warning = getContrastWarning( props );\n\n\tif ( ! warning ) {\n\t\treturn null;\n\t}\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tspeak( warning.speakMessage );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ warning.message }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md\n */\nexport default ContrastChecker;\n"],
+  "mappings": ";AAAA,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,QAAQ,cAAc;AAC/B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AACvB,SAAS,aAAa;AA4JnB;AA1JH,OAAQ,CAAE,aAAa,UAAW,CAAE;AAuB7B,SAAS,mBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACtB,GAAI;AACH,QAAM,yBAAyB,mBAAmB;AAGlD,MAAK,CAAE,wBAAyB;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAmB,aAAa;AACtC,QAAM,mBAAmB,aAAa;AAGtC,MAAK,CAAE,oBAAoB,CAAE,kBAAmB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,wBAAwB,OAAQ,sBAAuB;AAC7D,QAAM,iCAAiC,sBAAsB,MAAM,IAAI;AACvE,QAAM,4BAA4B,sBAAsB,WAAW;AACnE,QAAM,oBAAoB;AAAA,IACzB,OAAO;AAAA,IACP,MACC,eAAiB,gBAAgB,SAAS,YAAY,KACnD,UACA;AAAA,EACL;AAEA,MAAI,UAAU;AACd,MAAI,eAAe;AACnB,aAAY,QAAQ,YAAa;AAEhC,QAAK,CAAE,KAAK,OAAQ;AACnB;AAAA,IACD;AACA,UAAM,kBAAkB,OAAQ,KAAK,KAAM;AAC3C,UAAM,uBAAuB,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,UAAM,sBAAsB,gBAAgB,MAAM,IAAI;AAGtD,QAAK,CAAE,sBAAuB;AAE7B,UAAK,kCAAkC,qBAAsB;AAC5D;AAAA,MACD;AAGA,UAAK,iBAAkB;AACtB,kBAAU;AACV,uBAAe;AACf;AAAA,MACD;AACA,gBACC,4BAA4B,gBAAgB,WAAW,IACpD;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,IACA;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,qBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,gBAAU,GAAI,kDAAmD;AACjE,qBAAe;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SAAO,EAAE,SAAS,aAAa;AAChC;AAEA,SAAS,gBAAiB,OAAQ;AACjC,QAAM,UAAU,mBAAoB,KAAM;AAE1C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAMA,QAAO,QAAQ,YAAa;AAE5B,SACC,oBAAC,SAAI,WAAU,iCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd,kBAAQ;AAAA;AAAA,EACX,GACD;AAEF;AAKA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/index.mjs

@@ -1,10 +1,10 @@
 // packages/block-editor/src/components/convert-to-group-buttons/index.js
 import { MenuItem } from "@wordpress/components";
 import { _x } from "@wordpress/i18n";
-import { switchToBlockType } from "@wordpress/blocks";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { displayShortcut } from "@wordpress/keycodes";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { groupBlocks } from "../../utils/group-blocks.mjs";
 import useConvertToGroupButtonProps from "./use-convert-to-group-button-props.mjs";
 import BlockGroupToolbar from "./toolbar.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -21,10 +21,7 @@ function ConvertToGroupButton({
   const { getSelectedBlockClientIds } = useSelect(blockEditorStore);
   const { replaceBlocks } = useDispatch(blockEditorStore);
   const onConvertToGroup = () => {
-    const newBlocks = switchToBlockType(
-      blocksSelection,
-      groupingBlockName
-    );
+    const newBlocks = groupBlocks(blocksSelection, groupingBlockName);
     if (newBlocks) {
       replaceBlocks(clientIds, newBlocks);
     }

package/build-module/components/convert-to-group-buttons/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { switchToBlockType } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { displayShortcut } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useConvertToGroupButtonProps from './use-convert-to-group-button-props';\nimport BlockGroupToolbar from './toolbar';\n\nfunction ConvertToGroupButton( {\n\tclientIds,\n\tisGroupable,\n\tisUngroupable,\n\tonUngroup,\n\tblocksSelection,\n\tgroupingBlockName,\n\tonClose = () => {},\n} ) {\n\tconst { getSelectedBlockClientIds } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onConvertToGroup = () => {\n\t\t// Activate the `transform` on the Grouping Block which does the conversion.\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\t\tif ( newBlocks ) {\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertFromGroup = () => {\n\t\tlet innerBlocks = blocksSelection[ 0 ].innerBlocks;\n\t\tif ( ! innerBlocks.length ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( onUngroup ) {\n\t\t\tinnerBlocks = onUngroup(\n\t\t\t\tblocksSelection[ 0 ].attributes,\n\t\t\t\tblocksSelection[ 0 ].innerBlocks\n\t\t\t);\n\t\t}\n\t\treplaceBlocks( clientIds, innerBlocks );\n\t};\n\n\tif ( ! isGroupable && ! isUngroupable ) {\n\t\treturn null;\n\t}\n\n\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\treturn (\n\t\t<>\n\t\t\t{ isGroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tshortcut={\n\t\t\t\t\t\tselectedBlockClientIds.length > 1\n\t\t\t\t\t\t\t? displayShortcut.primary( 'g' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertToGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Group', 'verb' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t\t{ isUngroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertFromGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x(\n\t\t\t\t\t\t'Ungroup',\n\t\t\t\t\t\t'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport {\n\tBlockGroupToolbar,\n\tConvertToGroupButton,\n\tuseConvertToGroupButtonProps,\n};\n"],
-  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAClC,SAAS,WAAW,mBAAmB;AACvC,SAAS,uBAAuB;AAKhC,SAAS,SAAS,wBAAwB;AAC1C,OAAO,kCAAkC;AACzC,OAAO,uBAAuB;AA6C5B,mBAEE,KAFF;AA3CF,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAAC;AAClB,GAAI;AACH,QAAM,EAAE,0BAA0B,IAAI,UAAW,gBAAiB;AAClE,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AACxD,QAAM,mBAAmB,MAAM;AAE9B,UAAM,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,qBAAqB,MAAM;AAChC,QAAI,cAAc,gBAAiB,CAAE,EAAE;AACvC,QAAK,CAAE,YAAY,QAAS;AAC3B;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAc;AAAA,QACb,gBAAiB,CAAE,EAAE;AAAA,QACrB,gBAAiB,CAAE,EAAE;AAAA,MACtB;AAAA,IACD;AACA,kBAAe,WAAW,WAAY;AAAA,EACvC;AAEA,MAAK,CAAE,eAAe,CAAE,eAAgB;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,yBAAyB,0BAA0B;AAEzD,SACC,iCACG;AAAA,mBACD;AAAA,MAAC;AAAA;AAAA,QACA,UACC,uBAAuB,SAAS,IAC7B,gBAAgB,QAAS,GAAI,IAC7B;AAAA,QAEJ,SAAU,MAAM;AACf,2BAAiB;AACjB,kBAAQ;AAAA,QACT;AAAA,QAEE,aAAI,SAAS,MAAO;AAAA;AAAA,IACvB;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,6BAAmB;AACnB,kBAAQ;AAAA,QACT;AAAA,QAEE;AAAA,UACD;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as blockEditorStore } from '../../store';\nimport { groupBlocks } from '../../utils/group-blocks';\nimport useConvertToGroupButtonProps from './use-convert-to-group-button-props';\nimport BlockGroupToolbar from './toolbar';\n\nfunction ConvertToGroupButton( {\n\tclientIds,\n\tisGroupable,\n\tisUngroupable,\n\tonUngroup,\n\tblocksSelection,\n\tgroupingBlockName,\n\tonClose = () => {},\n} ) {\n\tconst { getSelectedBlockClientIds } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onConvertToGroup = () => {\n\t\tconst newBlocks = groupBlocks( blocksSelection, groupingBlockName );\n\t\tif ( newBlocks ) {\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertFromGroup = () => {\n\t\tlet innerBlocks = blocksSelection[ 0 ].innerBlocks;\n\t\tif ( ! innerBlocks.length ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( onUngroup ) {\n\t\t\tinnerBlocks = onUngroup(\n\t\t\t\tblocksSelection[ 0 ].attributes,\n\t\t\t\tblocksSelection[ 0 ].innerBlocks\n\t\t\t);\n\t\t}\n\t\treplaceBlocks( clientIds, innerBlocks );\n\t};\n\n\tif ( ! isGroupable && ! isUngroupable ) {\n\t\treturn null;\n\t}\n\n\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\treturn (\n\t\t<>\n\t\t\t{ isGroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tshortcut={\n\t\t\t\t\t\tselectedBlockClientIds.length > 1\n\t\t\t\t\t\t\t? displayShortcut.primary( 'g' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertToGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Group', 'verb' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t\t{ isUngroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertFromGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x(\n\t\t\t\t\t\t'Ungroup',\n\t\t\t\t\t\t'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport {\n\tBlockGroupToolbar,\n\tConvertToGroupButton,\n\tuseConvertToGroupButtonProps,\n};\n"],
+  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,WAAW,mBAAmB;AACvC,SAAS,uBAAuB;AAChC,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAC5B,OAAO,kCAAkC;AACzC,OAAO,uBAAuB;AAyC5B,mBAEE,KAFF;AAvCF,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAAC;AAClB,GAAI;AACH,QAAM,EAAE,0BAA0B,IAAI,UAAW,gBAAiB;AAClE,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AACxD,QAAM,mBAAmB,MAAM;AAC9B,UAAM,YAAY,YAAa,iBAAiB,iBAAkB;AAClE,QAAK,WAAY;AAChB,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,qBAAqB,MAAM;AAChC,QAAI,cAAc,gBAAiB,CAAE,EAAE;AACvC,QAAK,CAAE,YAAY,QAAS;AAC3B;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAc;AAAA,QACb,gBAAiB,CAAE,EAAE;AAAA,QACrB,gBAAiB,CAAE,EAAE;AAAA,MACtB;AAAA,IACD;AACA,kBAAe,WAAW,WAAY;AAAA,EACvC;AAEA,MAAK,CAAE,eAAe,CAAE,eAAgB;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,yBAAyB,0BAA0B;AAEzD,SACC,iCACG;AAAA,mBACD;AAAA,MAAC;AAAA;AAAA,QACA,UACC,uBAAuB,SAAS,IAC7B,gBAAgB,QAAS,GAAI,IAC7B;AAAA,QAEJ,SAAU,MAAM;AACf,2BAAiB;AACjB,kBAAQ;AAAA,QACT;AAAA,QAEE,aAAI,SAAS,MAAO;AAAA;AAAA,IACvB;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,6BAAmB;AACnB,kBAAQ;AAAA,QACT;AAAA,QAEE;AAAA,UACD;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/toolbar.mjs

@@ -1,11 +1,12 @@
 // packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
 import { useDispatch, useSelect } from "@wordpress/data";
-import { switchToBlockType, store as blocksStore } from "@wordpress/blocks";
+import { store as blocksStore } from "@wordpress/blocks";
 import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
 import { group, row, stack, grid } from "@wordpress/icons";
 import { _x } from "@wordpress/i18n";
 import { useConvertToGroupButtonProps } from "./index.mjs";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { groupBlocks } from "../../utils/group-blocks.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var layouts = {
   group: { type: "constrained" },
@@ -31,10 +32,7 @@ function BlockGroupToolbar() {
     [clientIds, groupingBlockName]
   );
   const onConvertToGroup = (layout) => {
-    const newBlocks = switchToBlockType(
-      blocksSelection,
-      groupingBlockName
-    );
+    const newBlocks = groupBlocks(blocksSelection, groupingBlockName);
     if (typeof layout !== "string") {
       layout = "group";
     }

package/build-module/components/convert-to-group-buttons/toolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/toolbar.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { switchToBlockType, store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack, grid } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n\tgrid: { type: 'grid' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\tconst onConvertToGrid = () => onConvertToGroup( 'grid' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\tconst canInsertGrid = !! variations.find(\n\t\t( { name } ) => name === 'group-grid'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'action: convert blocks to group' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'action: convert blocks to row' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'action: convert blocks to stack' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertGrid && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ grid }\n\t\t\t\t\tlabel={ _x( 'Grid', 'action: convert blocks to grid' ) }\n\t\t\t\t\tonClick={ onConvertToGrid }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],
-  "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AACvC,SAAS,mBAAmB,SAAS,mBAAmB;AACxD,SAAS,eAAe,oBAAoB;AAC5C,SAAS,OAAO,KAAK,OAAO,YAAY;AACxC,SAAS,UAAU;AAKnB,SAAS,oCAAoC;AAC7C,SAAS,SAAS,wBAAwB;AAuExC,SACC,KADD;AArEF,IAAM,UAAU;AAAA,EACf,OAAO,EAAE,MAAM,cAAc;AAAA,EAC7B,KAAK,EAAE,MAAM,QAAQ,UAAU,SAAS;AAAA,EACxC,OAAO,EAAE,MAAM,QAAQ,aAAa,WAAW;AAAA,EAC/C,MAAM,EAAE,MAAM,OAAO;AACtB;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,WAAW,mBAAmB,YAAY,IAClE,6BAA6B;AAC9B,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AAExD,QAAM,EAAE,WAAW,WAAW,IAAI;AAAA,IACjC,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,gBAAiB;AACrD,YAAM,EAAE,mBAAmB,IAAI,OAAQ,WAAY;AAEnD,aAAO;AAAA,QACN,WAAW,gBAAiB,SAAU;AAAA,QACtC,YAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,iBAAkB;AAAA,EAChC;AAEA,QAAM,mBAAmB,CAAE,WAAY;AACtC,UAAM,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,IACD;AAEA,QAAK,OAAO,WAAW,UAAW;AACjC,eAAS;AAAA,IACV;AAEA,QAAK,aAAa,UAAU,SAAS,GAAI;AAGxC,gBAAW,CAAE,EAAE,WAAW,SAAS,QAAS,MAAO;AACnD,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,iBAAiB,MAAM,iBAAkB,KAAM;AACrD,QAAM,mBAAmB,MAAM,iBAAkB,OAAQ;AACzD,QAAM,kBAAkB,MAAM,iBAAkB,MAAO;AAMvD,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,CAAC,CAAE,WAAW;AAAA,IAClC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,iBAAiB,CAAC,CAAE,WAAW;AAAA,IACpC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,gBAAgB,CAAC,CAAE,WAAW;AAAA,IACnC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AAEA,SACC,qBAAC,gBACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IACE,gBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,OAAO,+BAAgC;AAAA,QACnD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,QAAQ,gCAAiC;AAAA,QACrD,SAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import { useDispatch, useSelect } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack, grid } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\nimport { groupBlocks } from '../../utils/group-blocks';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n\tgrid: { type: 'grid' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = groupBlocks( blocksSelection, groupingBlockName );\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\tconst onConvertToGrid = () => onConvertToGroup( 'grid' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\tconst canInsertGrid = !! variations.find(\n\t\t( { name } ) => name === 'group-grid'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'action: convert blocks to group' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'action: convert blocks to row' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'action: convert blocks to stack' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertGrid && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ grid }\n\t\t\t\t\tlabel={ _x( 'Grid', 'action: convert blocks to grid' ) }\n\t\t\t\t\tonClick={ onConvertToGrid }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],
+  "mappings": ";AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,SAAS,mBAAmB;AACrC,SAAS,eAAe,oBAAoB;AAC5C,SAAS,OAAO,KAAK,OAAO,YAAY;AACxC,SAAS,UAAU;AACnB,SAAS,oCAAoC;AAC7C,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAoE1B,SACC,KADD;AAlEF,IAAM,UAAU;AAAA,EACf,OAAO,EAAE,MAAM,cAAc;AAAA,EAC7B,KAAK,EAAE,MAAM,QAAQ,UAAU,SAAS;AAAA,EACxC,OAAO,EAAE,MAAM,QAAQ,aAAa,WAAW;AAAA,EAC/C,MAAM,EAAE,MAAM,OAAO;AACtB;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,WAAW,mBAAmB,YAAY,IAClE,6BAA6B;AAC9B,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AAExD,QAAM,EAAE,WAAW,WAAW,IAAI;AAAA,IACjC,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,gBAAiB;AACrD,YAAM,EAAE,mBAAmB,IAAI,OAAQ,WAAY;AAEnD,aAAO;AAAA,QACN,WAAW,gBAAiB,SAAU;AAAA,QACtC,YAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,iBAAkB;AAAA,EAChC;AAEA,QAAM,mBAAmB,CAAE,WAAY;AACtC,UAAM,YAAY,YAAa,iBAAiB,iBAAkB;AAElE,QAAK,OAAO,WAAW,UAAW;AACjC,eAAS;AAAA,IACV;AAEA,QAAK,aAAa,UAAU,SAAS,GAAI;AAGxC,gBAAW,CAAE,EAAE,WAAW,SAAS,QAAS,MAAO;AACnD,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,iBAAiB,MAAM,iBAAkB,KAAM;AACrD,QAAM,mBAAmB,MAAM,iBAAkB,OAAQ;AACzD,QAAM,kBAAkB,MAAM,iBAAkB,MAAO;AAMvD,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,CAAC,CAAE,WAAW;AAAA,IAClC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,iBAAiB,CAAC,CAAE,WAAW;AAAA,IACpC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,gBAAgB,CAAC,CAAE,WAAW;AAAA,IACnC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AAEA,SACC,qBAAC,gBACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IACE,gBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,OAAO,+BAAgC;AAAA,QACnD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,QAAQ,gCAAiC;AAAA,QACrD,SAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/use-convert-to-group-button-props.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/use-convert-to-group-button-props.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Contains the properties `ConvertToGroupButton` component needs.\n *\n * @typedef {Object} ConvertToGroupButtonProps\n * @property {string[]}  clientIds         An array of the selected client ids.\n * @property {boolean}   isGroupable       Indicates if the selected blocks can be grouped.\n * @property {boolean}   isUngroupable     Indicates if the selected blocks can be ungrouped.\n * @property {WPBlock[]} blocksSelection   An array of the selected blocks.\n * @property {string}    groupingBlockName The name of block used for handling grouping interactions.\n */\n\n/**\n * Returns the properties `ConvertToGroupButton` component needs to work properly.\n * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`\n * should be rendered, to avoid ending up with an empty MenuGroup.\n *\n * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks\n *                                      from the block editor store are used if this is not provided.\n *\n * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.\n */\nexport default function useConvertToGroupButtonProps( selectedClientIds ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tisUngroupable,\n\t\t\t\tisGroupable,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getGroupingBlockName, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst clientIds = selectedClientIds?.length\n\t\t\t\t? selectedClientIds\n\t\t\t\t: getSelectedBlockClientIds();\n\t\t\tconst blocksSelection = getBlocksByClientId( clientIds );\n\t\t\tconst [ firstSelectedBlock ] = blocksSelection;\n\t\t\tconst _isUngroupable =\n\t\t\t\tclientIds.length === 1 && isUngroupable( clientIds[ 0 ] );\n\t\t\treturn {\n\t\t\t\tclientIds,\n\t\t\t\tisGroupable: isGroupable( clientIds ),\n\t\t\t\tisUngroupable: _isUngroupable,\n\t\t\t\tblocksSelection,\n\t\t\t\tgroupingBlockName: getGroupingBlockName(),\n\t\t\t\tonUngroup:\n\t\t\t\t\t_isUngroupable &&\n\t\t\t\t\tgetBlockType( firstSelectedBlock.name )?.transforms\n\t\t\t\t\t\t?.ungroup,\n\t\t\t};\n\t\t},\n\t\t[ selectedClientIds ]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAuB3B,SAAR,6BAA+C,mBAAoB;AACzE,SAAO;AAAA,IACN,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAC7B,YAAM,EAAE,sBAAsB,aAAa,IAC1C,OAAQ,WAAY;AACrB,YAAM,YAAY,mBAAmB,SAClC,oBACA,0BAA0B;AAC7B,YAAM,kBAAkB,oBAAqB,SAAU;AACvD,YAAM,CAAE,kBAAmB,IAAI;AAC/B,YAAM,iBACL,UAAU,WAAW,KAAK,cAAe,UAAW,CAAE,CAAE;AACzD,aAAO;AAAA,QACN;AAAA,QACA,aAAa,YAAa,SAAU;AAAA,QACpC,eAAe;AAAA,QACf;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC,WACC,kBACA,aAAc,mBAAmB,IAAK,GAAG,YACtC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,iBAAkB;AAAA,EACrB;AACD;",
+  "sourcesContent": ["import { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Contains the properties `ConvertToGroupButton` component needs.\n *\n * @typedef {Object} ConvertToGroupButtonProps\n * @property {string[]}  clientIds         An array of the selected client ids.\n * @property {boolean}   isGroupable       Indicates if the selected blocks can be grouped.\n * @property {boolean}   isUngroupable     Indicates if the selected blocks can be ungrouped.\n * @property {WPBlock[]} blocksSelection   An array of the selected blocks.\n * @property {string}    groupingBlockName The name of block used for handling grouping interactions.\n */\n\n/**\n * Returns the properties `ConvertToGroupButton` component needs to work properly.\n * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`\n * should be rendered, to avoid ending up with an empty MenuGroup.\n *\n * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks\n *                                      from the block editor store are used if this is not provided.\n *\n * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.\n */\nexport default function useConvertToGroupButtonProps( selectedClientIds ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tisUngroupable,\n\t\t\t\tisGroupable,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getGroupingBlockName, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst clientIds = selectedClientIds?.length\n\t\t\t\t? selectedClientIds\n\t\t\t\t: getSelectedBlockClientIds();\n\t\t\tconst blocksSelection = getBlocksByClientId( clientIds );\n\t\t\tconst [ firstSelectedBlock ] = blocksSelection;\n\t\t\tconst _isUngroupable =\n\t\t\t\tclientIds.length === 1 && isUngroupable( clientIds[ 0 ] );\n\t\t\treturn {\n\t\t\t\tclientIds,\n\t\t\t\tisGroupable: isGroupable( clientIds ),\n\t\t\t\tisUngroupable: _isUngroupable,\n\t\t\t\tblocksSelection,\n\t\t\t\tgroupingBlockName: getGroupingBlockName(),\n\t\t\t\tonUngroup:\n\t\t\t\t\t_isUngroupable &&\n\t\t\t\t\tgetBlockType( firstSelectedBlock.name )?.transforms\n\t\t\t\t\t\t?.ungroup,\n\t\t\t};\n\t\t},\n\t\t[ selectedClientIds ]\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAuB3B,SAAR,6BAA+C,mBAAoB;AACzE,SAAO;AAAA,IACN,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAC7B,YAAM,EAAE,sBAAsB,aAAa,IAC1C,OAAQ,WAAY;AACrB,YAAM,YAAY,mBAAmB,SAClC,oBACA,0BAA0B;AAC7B,YAAM,kBAAkB,oBAAqB,SAAU;AACvD,YAAM,CAAE,kBAAmB,IAAI;AAC/B,YAAM,iBACL,UAAU,WAAW,KAAK,cAAe,UAAW,CAAE,CAAE;AACzD,aAAO;AAAA,QACN;AAAA,QACA,aAAa,YAAa,SAAU;AAAA,QACpC,eAAe;AAAA,QACf;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC,WACC,kBACA,aAAc,mBAAmB,IAAK,GAAG,YACtC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,iBAAkB;AAAA,EACrB;AACD;",
   "names": []
 }

package/build-module/components/copy-handler/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/copy-handler/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport useClipboardHandler from '../writing-flow/use-clipboard-handler';\n\n/**\n * @deprecated\n */\nexport const __unstableUseClipboardHandler = () => {\n\tdeprecated( '__unstableUseClipboardHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\treturn useClipboardHandler();\n};\n\n/**\n * @deprecated\n * @param {Object} props\n */\nexport default function CopyHandler( props ) {\n\tdeprecated( 'CopyHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\treturn <div { ...props } ref={ useClipboardHandler() } />;\n}\n"],
-  "mappings": ";AAGA,OAAO,gBAAgB;AAKvB,OAAO,yBAAyB;AAyBxB;AApBD,IAAM,gCAAgC,MAAM;AAClD,aAAY,iCAAiC;AAAA,IAC5C,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SAAO,oBAAoB;AAC5B;AAMe,SAAR,YAA8B,OAAQ;AAC5C,aAAY,eAAe;AAAA,IAC1B,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AACF,SAAO,oBAAC,SAAM,GAAG,OAAQ,KAAM,oBAAoB,GAAI;AACxD;",
+  "sourcesContent": ["import deprecated from '@wordpress/deprecated';\nimport useClipboardHandler from '../writing-flow/use-clipboard-handler';\n\n/**\n * @deprecated\n */\nexport const __unstableUseClipboardHandler = () => {\n\tdeprecated( '__unstableUseClipboardHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\treturn useClipboardHandler();\n};\n\n/**\n * @deprecated\n * @param {Object} props\n */\nexport default function CopyHandler( props ) {\n\tdeprecated( 'CopyHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\treturn <div { ...props } ref={ useClipboardHandler() } />;\n}\n"],
+  "mappings": ";AAAA,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAyBxB;AApBD,IAAM,gCAAgC,MAAM;AAClD,aAAY,iCAAiC;AAAA,IAC5C,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SAAO,oBAAoB;AAC5B;AAMe,SAAR,YAA8B,OAAQ;AAC5C,aAAY,eAAe;AAAA,IAC1B,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AACF,SAAO,oBAAC,SAAM,GAAG,OAAQ,KAAM,oBAAoB,GAAI;AACxD;",
   "names": []
 }

package/build-module/components/date-format-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/date-format-picker/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}      props\n * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.\n * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden render={ <legend /> }>\n\t\t\t\t{ __( 'Date format' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}      props\n * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.\n * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden render={ <legend /> }>\n\t\t\t\t{ __( 'Date format' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/default-block-appender/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/default-block-appender/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport default function DefaultBlockAppender( { rootClientId } ) {\n\tconst { showPrompt, isLocked, placeholder, isManualGrid } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockCount,\n\t\t\t\tgetSettings,\n\t\t\t\tgetTemplateLock,\n\t\t\t\tgetBlockAttributes,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst isEmpty = ! getBlockCount( rootClientId );\n\t\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\t\treturn {\n\t\t\t\tshowPrompt: isEmpty,\n\t\t\t\tisLocked: !! getTemplateLock( rootClientId ),\n\t\t\t\tplaceholder: bodyPlaceholder,\n\t\t\t\tisManualGrid:\n\t\t\t\t\tgetBlockAttributes( rootClientId )?.layout\n\t\t\t\t\t\t?.isManualPlacement,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );\n\n\tif ( isLocked || isManualGrid ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\tconst onAppend = () => {\n\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\tstartTyping();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ clsx( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add default block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tonClick={ () => onAppend() }\n\t\t\t\tonFocus={ () => {\n\t\t\t\t\tif ( showPrompt ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,WAAW,mBAAmB;AACvC,SAAS,OAAO,aAAa;AAK7B,OAAO,cAAc;AACrB,SAAS,SAAS,wBAAwB;AAgDxC,SAMC,KAND;AA1CK,IAAM,SAAS;AAEP,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,UAAU,aAAa,aAAa,IAAI;AAAA,IAC3D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAE7B,YAAM,UAAU,CAAE,cAAe,YAAa;AAC9C,YAAM,EAAE,gBAAgB,IAAI,YAAY;AAExC,aAAO;AAAA,QACN,YAAY;AAAA,QACZ,UAAU,CAAC,CAAE,gBAAiB,YAAa;AAAA,QAC3C,aAAa;AAAA,QACb,cACC,mBAAoB,YAAa,GAAG,QACjC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,EAAE,oBAAoB,YAAY,IAAI,YAAa,gBAAiB;AAE1E,MAAK,YAAY,cAAe;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,QACL,eAAgB,WAAY,KAAK,GAAI,0BAA2B;AAEjE,QAAM,WAAW,MAAM;AACtB,uBAAoB,QAAW,YAAa;AAC5C,gBAAY;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAsB,gBAAgB;AAAA,MACtC,WAAY,KAAM,uCAAuC;AAAA,QACxD,sBAAsB;AAAA,MACvB,CAAE;AAAA,MAEF;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,UAAS;AAAA,YAGT,MAAK;AAAA,YACL,cAAa,GAAI,mBAAoB;AAAA,YAErC,WAAU;AAAA,YACV,WAAY,CAAE,UAAW;AACxB,kBAAK,UAAU,MAAM,WAAW,UAAU,MAAM,SAAU;AACzD,yBAAS;AAAA,cACV;AAAA,YACD;AAAA,YACA,SAAU,MAAM,SAAS;AAAA,YACzB,SAAU,MAAM;AACf,kBAAK,YAAa;AACjB,yBAAS;AAAA,cACV;AAAA,YACD;AAAA,YAEE,uBAAa,QAAQ;AAAA;AAAA,QACxB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,UAAS;AAAA,YACT,YAAU;AAAA,YACV,uBAAqB;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport default function DefaultBlockAppender( { rootClientId } ) {\n\tconst { showPrompt, isLocked, placeholder, isManualGrid } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockCount,\n\t\t\t\tgetSettings,\n\t\t\t\tgetTemplateLock,\n\t\t\t\tgetBlockAttributes,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst isEmpty = ! getBlockCount( rootClientId );\n\t\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\t\treturn {\n\t\t\t\tshowPrompt: isEmpty,\n\t\t\t\tisLocked: !! getTemplateLock( rootClientId ),\n\t\t\t\tplaceholder: bodyPlaceholder,\n\t\t\t\tisManualGrid:\n\t\t\t\t\tgetBlockAttributes( rootClientId )?.layout\n\t\t\t\t\t\t?.isManualPlacement,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );\n\n\tif ( isLocked || isManualGrid ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\tconst onAppend = () => {\n\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\tstartTyping();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ clsx( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add default block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tonClick={ () => onAppend() }\n\t\t\t\tonFocus={ () => {\n\t\t\t\t\tif ( showPrompt ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,WAAW,mBAAmB;AACvC,SAAS,OAAO,aAAa;AAC7B,OAAO,cAAc;AACrB,SAAS,SAAS,wBAAwB;AAgDxC,SAMC,KAND;AA1CK,IAAM,SAAS;AAEP,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,UAAU,aAAa,aAAa,IAAI;AAAA,IAC3D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAE7B,YAAM,UAAU,CAAE,cAAe,YAAa;AAC9C,YAAM,EAAE,gBAAgB,IAAI,YAAY;AAExC,aAAO;AAAA,QACN,YAAY;AAAA,QACZ,UAAU,CAAC,CAAE,gBAAiB,YAAa;AAAA,QAC3C,aAAa;AAAA,QACb,cACC,mBAAoB,YAAa,GAAG,QACjC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,EAAE,oBAAoB,YAAY,IAAI,YAAa,gBAAiB;AAE1E,MAAK,YAAY,cAAe;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,QACL,eAAgB,WAAY,KAAK,GAAI,0BAA2B;AAEjE,QAAM,WAAW,MAAM;AACtB,uBAAoB,QAAW,YAAa;AAC5C,gBAAY;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAsB,gBAAgB;AAAA,MACtC,WAAY,KAAM,uCAAuC;AAAA,QACxD,sBAAsB;AAAA,MACvB,CAAE;AAAA,MAEF;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,UAAS;AAAA,YAGT,MAAK;AAAA,YACL,cAAa,GAAI,mBAAoB;AAAA,YAErC,WAAU;AAAA,YACV,WAAY,CAAE,UAAW;AACxB,kBAAK,UAAU,MAAM,WAAW,UAAU,MAAM,SAAU;AACzD,yBAAS;AAAA,cACV;AAAA,YACD;AAAA,YACA,SAAU,MAAM,SAAS;AAAA,YACzB,SAAU,MAAM;AACf,kBAAK,YAAa;AACjB,yBAAS;AAAA,cACV;AAAA,YACD;AAAA,YAEE,uBAAa,QAAQ;AAAA;AAAA,QACxB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,UAAS;AAAA,YACT,YAAU;AAAA,YACV,uBAAqB;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dimension-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimension-control/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport PresetInputControl from '../preset-input-control';\nimport { CUSTOM_VALUE_SETTINGS } from '../preset-input-control/constants';\n\nconst EMPTY_ARRAY = [];\n\n// Dimension-specific custom value settings - override defaults for larger dimension values\nconst DIMENSION_CUSTOM_VALUE_SETTINGS = {\n\t...CUSTOM_VALUE_SETTINGS,\n\tpx: { max: 1000, steps: 1 },\n\tem: { max: 50, steps: 0.1 },\n\trem: { max: 50, steps: 0.1 },\n};\n\n/**\n * Hook to retrieve dimension sizes from theme settings.\n *\n * @param {Object} presets Dimension presets object containing default, theme, and custom sizes.\n * @return {Array} Array of dimension size options.\n */\nfunction useDimensionSizes( presets ) {\n\tconst defaultSizes = presets?.default ?? EMPTY_ARRAY;\n\tconst customSizes = presets?.custom ?? EMPTY_ARRAY;\n\tconst themeSizes = presets?.theme ?? EMPTY_ARRAY;\n\n\treturn useMemo( () => {\n\t\tconst sizes = [\n\t\t\t{ name: __( 'None' ), slug: '0', size: 0 },\n\t\t\t...customSizes,\n\t\t\t...themeSizes,\n\t\t\t...defaultSizes,\n\t\t];\n\n\t\treturn sizes;\n\t}, [ customSizes, themeSizes, defaultSizes ] );\n}\n\n/**\n * DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label          A label for the control.\n * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.\n * @param {string}                     props.value          The current dimension value.\n * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.\n * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.\n * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function DimensionControl( {\n\tlabel = __( 'Dimension' ),\n\tonChange,\n\tvalue,\n\tplaceholder,\n\tclassName,\n\tdimensionSizes: dimensionSizesProp,\n} ) {\n\tconst [ dimensionSizesFromSettings, availableUnits ] = useSettings(\n\t\t'dimensions.dimensionSizes',\n\t\t'spacing.units'\n\t);\n\tconst dimensionSizes = dimensionSizesProp ?? dimensionSizesFromSettings;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst options = useDimensionSizes( dimensionSizes );\n\n\t// Track selected unit for PresetInputControl\n\tconst [ selectedUnit, setSelectedUnit ] = useState( () => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn unit || units[ 0 ]?.value || 'px';\n\t} );\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\n\t\tsetSelectedUnit( newUnit );\n\t};\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName={ clsx( 'block-editor-dimension-control', className ) }\n\t\t>\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<PresetInputControl\n\t\t\t\tariaLabel={ label }\n\t\t\t\tclassName=\"block-editor-dimension-control\"\n\t\t\t\tcustomValueSettings={ DIMENSION_CUSTOM_VALUE_SETTINGS }\n\t\t\t\tminimumCustomValue={ 0 }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tpresets={ options }\n\t\t\t\tpresetType=\"dimension\"\n\t\t\t\tselectedUnit={ selectedUnit }\n\t\t\t\tshowTooltip\n\t\t\t\tunits={ units }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,SAAS,gBAAgB;AAClC;AAAA,EACC;AAAA,EACA,kDAAkD;AAAA,EAClD,gCAAgC;AAAA,OAC1B;AACP,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AAC5B,OAAO,wBAAwB;AAC/B,SAAS,6BAA6B;AAwIpC,SAGC,KAHD;AAtIF,IAAM,cAAc,CAAC;AAGrB,IAAM,kCAAkC;AAAA,EACvC,GAAG;AAAA,EACH,IAAI,EAAE,KAAK,KAAM,OAAO,EAAE;AAAA,EAC1B,IAAI,EAAE,KAAK,IAAI,OAAO,IAAI;AAAA,EAC1B,KAAK,EAAE,KAAK,IAAI,OAAO,IAAI;AAC5B;AAQA,SAAS,kBAAmB,SAAU;AACrC,QAAM,eAAe,SAAS,WAAW;AACzC,QAAM,cAAc,SAAS,UAAU;AACvC,QAAM,aAAa,SAAS,SAAS;AAErC,SAAO,QAAS,MAAM;AACrB,UAAM,QAAQ;AAAA,MACb,EAAE,MAAM,GAAI,MAAO,GAAG,MAAM,KAAK,MAAM,EAAE;AAAA,MACzC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACJ;AAEA,WAAO;AAAA,EACR,GAAG,CAAE,aAAa,YAAY,YAAa,CAAE;AAC9C;AAiBe,SAAR,iBAAmC;AAAA,EACzC,QAAQ,GAAI,WAAY;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AACjB,GAAI;AACH,QAAM,CAAE,4BAA4B,cAAe,IAAI;AAAA,IACtD;AAAA,IACA;AAAA,EACD;AACA,QAAM,iBAAiB,sBAAsB;AAE7C,QAAM,QAAQ,eAAgB;AAAA,IAC7B,gBAAgB,kBAAkB;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,CAAE;AAEF,QAAM,UAAU,kBAAmB,cAAe;AAGlD,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,MAAM;AACzD,UAAM,CAAE,EAAE,IAAK,IAAI,iCAAkC,KAAM;AAC3D,WAAO,QAAQ,MAAO,CAAE,GAAG,SAAS;AAAA,EACrC,CAAE;AAEF,QAAM,mBAAmB,CAAE,YAAa;AAGvC,UAAM,CAAE,cAAc,WAAY,IACjC,iCAAkC,KAAM;AAEzC,QAAK,CAAE,MAAM,KAAM,EAAE,SAAU,OAAQ,KAAK,gBAAgB,MAAO;AAElE,gBAAY,eAAe,IAAK,QAAS,CAAE,IAAI,OAAQ;AAAA,IACxD,WACC,CAAE,MAAM,KAAM,EAAE,SAAU,WAAY,KACtC,YAAY,MACX;AAED,eAAU,KAAK,MAAO,eAAe,EAAG,IAAI,OAAQ;AAAA,IACrD,WACC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,EAAE,SAAU,OAAQ,KACpB,eAAe,KACd;AAED,eAAU,MAAM,OAAQ;AAAA,IACzB;AAEA,oBAAiB,OAAQ;AAAA,EAC1B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,kCAAkC,SAAU;AAAA,MAE9D;AAAA,4BAAC,YAAY,aAAZ,EAAwB,IAAG,UACzB,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAY;AAAA,YACZ,WAAU;AAAA,YACV,qBAAsB;AAAA,YACtB,oBAAqB;AAAA,YACrB;AAAA,YACA,cAAe;AAAA,YACf;AAAA,YACA,SAAU;AAAA,YACV,YAAW;AAAA,YACX;AAAA,YACA,aAAW;AAAA,YACX;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSettings } from '../use-settings';\nimport PresetInputControl from '../preset-input-control';\nimport { CUSTOM_VALUE_SETTINGS } from '../preset-input-control/constants';\n\nconst EMPTY_ARRAY = [];\n\n// Dimension-specific custom value settings - override defaults for larger dimension values\nconst DIMENSION_CUSTOM_VALUE_SETTINGS = {\n\t...CUSTOM_VALUE_SETTINGS,\n\tpx: { max: 1000, steps: 1 },\n\tem: { max: 50, steps: 0.1 },\n\trem: { max: 50, steps: 0.1 },\n};\n\n/**\n * Hook to retrieve dimension sizes from theme settings.\n *\n * @param {Object} presets Dimension presets object containing default, theme, and custom sizes.\n * @return {Array} Array of dimension size options.\n */\nfunction useDimensionSizes( presets ) {\n\tconst defaultSizes = presets?.default ?? EMPTY_ARRAY;\n\tconst customSizes = presets?.custom ?? EMPTY_ARRAY;\n\tconst themeSizes = presets?.theme ?? EMPTY_ARRAY;\n\n\treturn useMemo( () => {\n\t\tconst sizes = [\n\t\t\t{ name: __( 'None' ), slug: '0', size: 0 },\n\t\t\t...customSizes,\n\t\t\t...themeSizes,\n\t\t\t...defaultSizes,\n\t\t];\n\n\t\treturn sizes;\n\t}, [ customSizes, themeSizes, defaultSizes ] );\n}\n\n/**\n * DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label          A label for the control.\n * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.\n * @param {string}                     props.value          The current dimension value.\n * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.\n * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.\n * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function DimensionControl( {\n\tlabel = __( 'Dimension' ),\n\tonChange,\n\tvalue,\n\tplaceholder,\n\tclassName,\n\tdimensionSizes: dimensionSizesProp,\n} ) {\n\tconst [ dimensionSizesFromSettings, availableUnits ] = useSettings(\n\t\t'dimensions.dimensionSizes',\n\t\t'spacing.units'\n\t);\n\tconst dimensionSizes = dimensionSizesProp ?? dimensionSizesFromSettings;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst options = useDimensionSizes( dimensionSizes );\n\n\t// Track selected unit for PresetInputControl\n\tconst [ selectedUnit, setSelectedUnit ] = useState( () => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn unit || units[ 0 ]?.value || 'px';\n\t} );\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\n\t\tsetSelectedUnit( newUnit );\n\t};\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName={ clsx( 'block-editor-dimension-control', className ) }\n\t\t>\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<PresetInputControl\n\t\t\t\tariaLabel={ label }\n\t\t\t\tclassName=\"block-editor-dimension-control\"\n\t\t\t\tcustomValueSettings={ DIMENSION_CUSTOM_VALUE_SETTINGS }\n\t\t\t\tminimumCustomValue={ 0 }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tpresets={ options }\n\t\t\t\tpresetType=\"dimension\"\n\t\t\t\tselectedUnit={ selectedUnit }\n\t\t\t\tshowTooltip\n\t\t\t\tunits={ units }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</fieldset>\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
         }
       )