@wordpress/block-editor 15.21.0 → 15.22.0

package/build/components/colors-gradients/dropdown.cjs.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=\"block-editor-tools-panel-color-gradient-settings__item\"\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": ["ToolsPanelItem", "HStack", "clsx", "resetIcon", "DropdownContentWrapper", "ColorGradientControl"]
+  "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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",
+  "names": ["ToolsPanelItem", "clsx", "HStack", "resetIcon", "DropdownContentWrapper", "ColorGradientControl"]
 }

package/build/components/contrast-checker/index.cjs

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/contrast-checker/index.js
 var contrast_checker_exports = {};
 __export(contrast_checker_exports, {
-  default: () => contrast_checker_default
+  default: () => contrast_checker_default,
+  getContrastWarning: () => getContrastWarning
 });
 module.exports = __toCommonJS(contrast_checker_exports);
 var import_a11y = __toESM(require("colord/plugins/a11y"));
@@ -41,7 +42,7 @@ var import_components = require("@wordpress/components");
 var import_a11y2 = require("@wordpress/a11y");
 var import_jsx_runtime = require("react/jsx-runtime");
 (0, import_colord.extend)([import_names.default, import_a11y.default]);
-function ContrastChecker({
+function getContrastWarning({
   backgroundColor,
   fallbackBackgroundColor,
   fallbackTextColor,
@@ -51,6 +52,7 @@ function ContrastChecker({
   isLargeText,
   textColor,
   linkColor,
+  messageOverride,
   enableAlphaChecker = false
 }) {
   const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
@@ -95,6 +97,11 @@ function ContrastChecker({
       if (backgroundColorHasTransparency || textHasTransparency) {
         continue;
       }
+      if (messageOverride) {
+        message = messageOverride;
+        speakMessage = messageOverride;
+        break;
+      }
       message = backgroundColorBrightness < colordTextColor.brightness() ? (0, import_i18n.sprintf)(
         // translators: %s is a type of text color, e.g., "text color" or "link color".
         (0, import_i18n.__)(
@@ -123,16 +130,27 @@ function ContrastChecker({
   if (!message) {
     return null;
   }
-  (0, import_a11y2.speak)(speakMessage);
+  return { message, speakMessage };
+}
+function ContrastChecker(props) {
+  const warning = getContrastWarning(props);
+  if (!warning) {
+    return null;
+  }
+  (0, import_a11y2.speak)(warning.speakMessage);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-contrast-checker", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.Notice,
     {
       spokenMessage: null,
       status: "warning",
       isDismissible: false,
-      children: message
+      children: warning.message
     }
   ) });
 }
 var contrast_checker_default = ContrastChecker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getContrastWarning
+});
 //# sourceMappingURL=index.cjs.map

package/build/components/contrast-checker/index.cjs.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\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // Font size value in pixels.\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\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\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\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( 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{ 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;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuB;AACvB,mBAAwB;AACxB,oBAA+B;AAK/B,kBAA4B;AAC5B,wBAAuB;AACvB,IAAAA,eAAsB;AAqHnB;AAAA,IAnHH,sBAAQ,CAAE,aAAAC,SAAa,YAAAC,OAAW,CAAE;AAEpC,SAAS,gBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;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,iBAAa,gBAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,iBAAa,gBAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,4BAAwB,sBAAQ,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,sBAAkB,sBAAQ,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;AACA,gBACC,4BAA4B,gBAAgB,WAAW,QACpD;AAAA;AAAA,YAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,QACA;AAAA;AAAA,YAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,yBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,oBAAU,gBAAI,kDAAmD;AACjE,yBAAe;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAMA,0BAAO,YAAa;AAEpB,SACC,4CAAC,SAAI,WAAU,iCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd;AAAA;AAAA,EACH,GACD;AAEF;AAKA,IAAO,2BAAQ;",
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuB;AACvB,mBAAwB;AACxB,oBAA+B;AAK/B,kBAA4B;AAC5B,wBAAuB;AACvB,IAAAA,eAAsB;AA4JnB;AAAA,IA1JH,sBAAQ,CAAE,aAAAC,SAAa,YAAAC,OAAW,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,iBAAa,gBAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,iBAAa,gBAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,4BAAwB,sBAAQ,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,sBAAkB,sBAAQ,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,QACpD;AAAA;AAAA,YAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,QACA;AAAA;AAAA,YAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,yBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,oBAAU,gBAAI,kDAAmD;AACjE,yBAAe;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,0BAAO,QAAQ,YAAa;AAE5B,SACC,4CAAC,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": ["import_a11y", "namesPlugin", "a11yPlugin"]
 }

package/build/components/date-format-picker/index.cjs

@@ -128,7 +128,6 @@ function NonDefaultControls({ format, onChange }) {
     isCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.TextControl,
       {
-        __next40pxDefaultSize: true,
         label: (0, import_i18n.__)("Custom format"),
         hideLabelFromVision: true,
         help: (0, import_element.createInterpolateElement)(

package/build/components/date-format-picker/index.cjs.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\t__next40pxDefaultSize\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\t__next40pxDefaultSize\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": ["/**\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\t__next40pxDefaultSize\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": ["VStack"]
 }

package/build/components/dimensions-tool/index.cjs

@@ -49,8 +49,7 @@ function DimensionsTool({
   // Match CSS default value for aspect-ratio.
   scaleOptions,
   // Default options handled by ScaleTool.
-  defaultScale = "fill",
-  // Match CSS default value for object-fit.
+  defaultScale = "cover",
   unitsOptions,
   // Default options handled by UnitControl.
   tools = ["aspectRatio", "widthHeight", "scale"]
@@ -58,10 +57,11 @@ function DimensionsTool({
   const width = value.width === void 0 || value.width === "auto" ? null : value.width;
   const height = value.height === void 0 || value.height === "auto" ? null : value.height;
   const aspectRatio = value.aspectRatio === void 0 || value.aspectRatio === "auto" ? null : value.aspectRatio;
-  const scale = value.scale === void 0 || value.scale === "fill" ? null : value.scale;
+  const scale = value.scale === void 0 ? null : value.scale;
   const [lastScale, setLastScale] = (0, import_element.useState)(scale);
   const [lastAspectRatio, setLastAspectRatio] = (0, import_element.useState)(aspectRatio);
-  const aspectRatioValue = width && height ? "custom" : lastAspectRatio;
+  const hasCustomAspectRatio = !!(width && height);
+  const aspectRatioValue = hasCustomAspectRatio ? "custom" : aspectRatio;
   const showScaleControl = aspectRatio || width && height;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     tools.includes("aspectRatio") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -142,7 +142,6 @@ function DimensionsTool({
         value: lastScale,
         onChange: (nextScale) => {
           const nextValue = { ...value };
-          nextScale = nextScale === "fill" ? null : nextScale;
           setLastScale(nextScale);
           if (!nextScale) {
             delete nextValue.scale;

package/build/components/dimensions-tool/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {Element} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'fill', // Match CSS default value for object-fit.\n\tunitsOptions, // Default options handled by UnitControl.\n\ttools = [ 'aspectRatio', 'widthHeight', 'scale' ],\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale =\n\t\tvalue.scale === undefined || value.scale === 'fill'\n\t\t\t? null\n\t\t\t: value.scale;\n\n\t// Keep track of state internally, so when the value is cleared by means\n\t// other than directly editing that field, it's easier to restore the\n\t// previous value.\n\tconst [ lastScale, setLastScale ] = useState( scale );\n\tconst [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = width && height ? 'custom' : lastAspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t{ tools.includes( 'aspectRatio' ) && (\n\t\t\t\t<AspectRatioTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\t\tsetLastAspectRatio( nextAspectRatio );\n\n\t\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\t\tif ( 'custom' !== nextAspectRatio && width && height ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'widthHeight' ) && (\n\t\t\t\t<WidthHeightTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tunits={ unitsOptions }\n\t\t\t\t\tvalue={ { width, height } }\n\t\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t\t// Update width.\n\t\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Update height.\n\t\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else if ( lastAspectRatio ) {\n\t\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! lastAspectRatio &&\n\t\t\t\t\t\t\t!! nextWidth !== !! nextHeight\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'scale' ) && showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ lastScale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'fill' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextScale = nextScale === 'fill' ? null : nextScale;\n\n\t\t\t\t\t\tsetLastScale( nextScale );\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {Element} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'cover',\n\tunitsOptions, // Default options handled by UnitControl.\n\ttools = [ 'aspectRatio', 'widthHeight', 'scale' ],\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale = value.scale === undefined ? null : value.scale;\n\n\t// Keep track of state internally, so when the value is cleared by means\n\t// other than directly editing that field, it's easier to restore the\n\t// previous value.\n\tconst [ lastScale, setLastScale ] = useState( scale );\n\tconst [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );\n\tconst hasCustomAspectRatio = !! ( width && height );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = hasCustomAspectRatio ? 'custom' : aspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t{ tools.includes( 'aspectRatio' ) && (\n\t\t\t\t<AspectRatioTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\t\tsetLastAspectRatio( nextAspectRatio );\n\n\t\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\t\tif ( 'custom' !== nextAspectRatio && width && height ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'widthHeight' ) && (\n\t\t\t\t<WidthHeightTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tunits={ unitsOptions }\n\t\t\t\t\tvalue={ { width, height } }\n\t\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t\t// Update width.\n\t\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Update height.\n\t\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else if ( lastAspectRatio ) {\n\t\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! lastAspectRatio &&\n\t\t\t\t\t\t\t!! nextWidth !== !! nextHeight\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'scale' ) && showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ lastScale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\tsetLastScale( nextScale );\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"],
+  "mappings": "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",
   "names": ["AspectRatioTool", "WidthHeightTool", "ScaleTool"]
 }

package/build/components/dimensions-tool/scale-tool.cjs

@@ -66,7 +66,7 @@ function ScaleTool({
   defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
   isShownByDefault = true
 }) {
-  const displayValue = value ?? "fill";
+  const displayValue = value ?? defaultValue;
   const scaleHelp = (0, import_element.useMemo)(() => {
     return options.reduce((acc, option) => {
       acc[option.value] = option.help;

package/build/components/dimensions-tool/scale-tool.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/scale-tool.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'fill';\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AA0GlB;AA3FL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA,UAEH,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\tconst displayValue = value ?? defaultValue;\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AAyGlB;AA1FL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AACH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA,UAEH,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
   "names": ["ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOption"]
 }

package/build/components/global-styles/advanced-panel.cjs

@@ -83,21 +83,29 @@ function AdvancedPanel({
   function handleOnBlur(event) {
     setCSSError(getCSSValidationError(event?.target?.value));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "md", children: [
-    cssError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.TextareaControl,
-      {
-        label: (0, import_i18n.__)("Additional CSS"),
-        value: customCSS,
-        onChange: (newValue) => handleOnChange(newValue),
-        onBlur: handleOnBlur,
-        className: "block-editor-global-styles-advanced-panel__custom-css-input",
-        spellCheck: false,
-        help
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ui.Stack,
+    {
+      direction: "column",
+      gap: "md",
+      className: "block-editor-global-styles-advanced-panel",
+      children: [
+        cssError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.TextareaControl,
+          {
+            label: (0, import_i18n.__)("Additional CSS"),
+            value: customCSS,
+            onChange: (newValue) => handleOnChange(newValue),
+            onBlur: handleOnBlur,
+            className: "block-editor-global-styles-advanced-panel__custom-css-input",
+            spellCheck: false,
+            help
+          }
+        )
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/components/global-styles/advanced-panel.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/advanced-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { TextareaControl, Notice } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\n/**\n * Validates that a CSS string doesn't contain HTML markup.\n * Uses the same validation as the PHP/global styles REST API.\n *\n * @param {string} css The CSS string to validate.\n * @return {boolean} True if the CSS is valid, false otherwise.\n */\nexport function validateCSS( css ) {\n\t// Check for HTML markup.\n\tif ( typeof css === 'string' && /<\\/?\\w/.test( css ) ) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/**\n * Returns the error message string if the CSS contains HTML markup, or null if it is clean.\n *\n * @param {string} css The CSS string to check.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getMarkupValidationError( css ) {\n\treturn validateCSS( css )\n\t\t? null\n\t\t: __( 'The custom CSS is invalid. Do not use <> markup.' );\n}\n\n/**\n * Full CSS validation: markup check first (fast), then a CSS parser (slower).\n *\n * @param {string} css The CSS string to validate.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getCSSValidationError( css ) {\n\tif ( ! css ) {\n\t\treturn null;\n\t}\n\tconst markupError = getMarkupValidationError( css );\n\tif ( markupError ) {\n\t\treturn markupError;\n\t}\n\tconst [ transformed ] = transformStyles(\n\t\t[ { css } ],\n\t\t'.for-validation-only'\n\t);\n\treturn transformed === null\n\t\t? __( 'There is an error with your CSS structure.' )\n\t\t: null;\n}\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\thelp,\n} ) {\n\t// Custom CSS\n\tconst customCSS = inheritedValue?.css;\n\tconst [ cssError, setCSSError ] = useState( () =>\n\t\tgetCSSValidationError( customCSS )\n\t);\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\n\t\tsetCSSError( getMarkupValidationError( newValue ) );\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tsetCSSError( getCSSValidationError( event?.target?.value ) );\n\t}\n\n\treturn (\n\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t\thelp={ help }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwC;AACxC,gBAAsB;AACtB,qBAAyB;AACzB,kBAAmB;AAKnB,8BAA2C;AA4EzC;AAnEK,SAAS,YAAa,KAAM;AAElC,MAAK,OAAO,QAAQ,YAAY,SAAS,KAAM,GAAI,GAAI;AACtD,WAAO;AAAA,EACR;AACA,SAAO;AACR;AAQA,SAAS,yBAA0B,KAAM;AACxC,SAAO,YAAa,GAAI,IACrB,WACA,gBAAI,kDAAmD;AAC3D;AAQA,SAAS,sBAAuB,KAAM;AACrC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AACA,QAAM,cAAc,yBAA0B,GAAI;AAClD,MAAK,aAAc;AAClB,WAAO;AAAA,EACR;AACA,QAAM,CAAE,WAAY,QAAI,wBAAAA;AAAA,IACvB,CAAE,EAAE,IAAI,CAAE;AAAA,IACV;AAAA,EACD;AACA,SAAO,gBAAgB,WACpB,gBAAI,4CAA6C,IACjD;AACJ;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACD,GAAI;AAEH,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAE,UAAU,WAAY,QAAI;AAAA,IAAU,MAC3C,sBAAuB,SAAU;AAAA,EAClC;AACA,WAAS,eAAgB,UAAW;AACnC,aAAU;AAAA,MACT,GAAG;AAAA,MACH,KAAK;AAAA,IACN,CAAE;AAEF,gBAAa,yBAA0B,QAAS,CAAE;AAAA,EACnD;AACA,WAAS,aAAc,OAAQ;AAC9B,gBAAa,sBAAuB,OAAO,QAAQ,KAAM,CAAE;AAAA,EAC5D;AAEA,SACC,6CAAC,mBAAM,WAAU,UAAS,KAAI,MAC3B;AAAA,gBACD,4CAAC,4BAAO,QAAO,SAAQ,UAAW,MAAM,YAAa,IAAK,GACvD,oBACH;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,gBAAiB;AAAA,QAC7B,OAAQ;AAAA,QACR,UAAW,CAAE,aAAc,eAAgB,QAAS;AAAA,QACpD,QAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAa;AAAA,QACb;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { TextareaControl, Notice } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\n/**\n * Validates that a CSS string doesn't contain HTML markup.\n * Uses the same validation as the PHP/global styles REST API.\n *\n * @param {string} css The CSS string to validate.\n * @return {boolean} True if the CSS is valid, false otherwise.\n */\nexport function validateCSS( css ) {\n\t// Check for HTML markup.\n\tif ( typeof css === 'string' && /<\\/?\\w/.test( css ) ) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/**\n * Returns the error message string if the CSS contains HTML markup, or null if it is clean.\n *\n * @param {string} css The CSS string to check.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getMarkupValidationError( css ) {\n\treturn validateCSS( css )\n\t\t? null\n\t\t: __( 'The custom CSS is invalid. Do not use <> markup.' );\n}\n\n/**\n * Full CSS validation: markup check first (fast), then a CSS parser (slower).\n *\n * @param {string} css The CSS string to validate.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getCSSValidationError( css ) {\n\tif ( ! css ) {\n\t\treturn null;\n\t}\n\tconst markupError = getMarkupValidationError( css );\n\tif ( markupError ) {\n\t\treturn markupError;\n\t}\n\tconst [ transformed ] = transformStyles(\n\t\t[ { css } ],\n\t\t'.for-validation-only'\n\t);\n\treturn transformed === null\n\t\t? __( 'There is an error with your CSS structure.' )\n\t\t: null;\n}\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\thelp,\n} ) {\n\t// Custom CSS\n\tconst customCSS = inheritedValue?.css;\n\tconst [ cssError, setCSSError ] = useState( () =>\n\t\tgetCSSValidationError( customCSS )\n\t);\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\n\t\tsetCSSError( getMarkupValidationError( newValue ) );\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tsetCSSError( getCSSValidationError( event?.target?.value ) );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"block-editor-global-styles-advanced-panel\"\n\t\t>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t\thelp={ help }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwC;AACxC,gBAAsB;AACtB,qBAAyB;AACzB,kBAAmB;AAKnB,8BAA2C;AA4EzC;AAnEK,SAAS,YAAa,KAAM;AAElC,MAAK,OAAO,QAAQ,YAAY,SAAS,KAAM,GAAI,GAAI;AACtD,WAAO;AAAA,EACR;AACA,SAAO;AACR;AAQA,SAAS,yBAA0B,KAAM;AACxC,SAAO,YAAa,GAAI,IACrB,WACA,gBAAI,kDAAmD;AAC3D;AAQA,SAAS,sBAAuB,KAAM;AACrC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AACA,QAAM,cAAc,yBAA0B,GAAI;AAClD,MAAK,aAAc;AAClB,WAAO;AAAA,EACR;AACA,QAAM,CAAE,WAAY,QAAI,wBAAAA;AAAA,IACvB,CAAE,EAAE,IAAI,CAAE;AAAA,IACV;AAAA,EACD;AACA,SAAO,gBAAgB,WACpB,gBAAI,4CAA6C,IACjD;AACJ;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACD,GAAI;AAEH,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAE,UAAU,WAAY,QAAI;AAAA,IAAU,MAC3C,sBAAuB,SAAU;AAAA,EAClC;AACA,WAAS,eAAgB,UAAW;AACnC,aAAU;AAAA,MACT,GAAG;AAAA,MACH,KAAK;AAAA,IACN,CAAE;AAEF,gBAAa,yBAA0B,QAAS,CAAE;AAAA,EACnD;AACA,WAAS,aAAc,OAAQ;AAC9B,gBAAa,sBAAuB,OAAO,QAAQ,KAAM,CAAE;AAAA,EAC5D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAU;AAAA,MAER;AAAA,oBACD,4CAAC,4BAAO,QAAO,SAAQ,UAAW,MAAM,YAAa,IAAK,GACvD,oBACH;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,WAAQ,gBAAI,gBAAiB;AAAA,YAC7B,OAAQ;AAAA,YACR,UAAW,CAAE,aAAc,eAAgB,QAAS;AAAA,YACpD,QAAS;AAAA,YACT,WAAU;AAAA,YACV,YAAa;AAAA,YACb;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": ["transformStyles"]
 }