@wordpress/block-editor 12.2.0 → 12.3.1

package/build/components/colors-gradients/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_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\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\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\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\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\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\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<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_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\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\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 tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\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\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\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\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\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<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...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"]}

package/build/components/colors-gradients/dropdown.js

@@ -9,8 +9,6 @@ exports.default = ColorGradientSettingsDropdown;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("@wordpress/components");
@@ -30,14 +28,12 @@ var _control = _interopRequireDefault(require("./control"));
  */
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
-const WithToolsPanelItem = _ref => {
-  let {
-    setting,
-    children,
-    panelId,
-    ...props
-  } = _ref;
-
+const WithToolsPanelItem = ({
+  setting,
+  children,
+  panelId,
+  ...props
+}) => {
   const clearValue = () => {
     if (setting.colorValue) {
       setting.onColorChange();
@@ -46,46 +42,42 @@ const WithToolsPanelItem = _ref => {
     }
   };
 
-  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, (0, _extends2.default)({
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
     hasValue: () => {
       return !!setting.colorValue || !!setting.gradientValue;
     },
     label: setting.label,
     onDeselect: clearValue,
-    isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true
-  }, props, {
+    isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true,
+    ...props,
     className: "block-editor-tools-panel-color-gradient-settings__item",
     panelId: panelId // Pass resetAllFilter if supplied due to rendering via SlotFill
     // into parent ToolsPanel.
     ,
     resetAllFilter: setting.resetAllFilter
-  }), children);
+  }, children);
 };
 
-const LabeledColorIndicator = _ref2 => {
-  let {
-    colorValue,
-    label
-  } = _ref2;
-  return (0, _element.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start"
-  }, (0, _element.createElement)(_components.ColorIndicator, {
-    className: "block-editor-panel-color-gradient-settings__color-indicator",
-    colorValue: colorValue
-  }), (0, _element.createElement)(_components.FlexItem, {
-    className: "block-editor-panel-color-gradient-settings__color-name",
-    title: label
-  }, label));
-}; // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
+const LabeledColorIndicator = ({
+  colorValue,
+  label
+}) => (0, _element.createElement)(_components.__experimentalHStack, {
+  justify: "flex-start"
+}, (0, _element.createElement)(_components.ColorIndicator, {
+  className: "block-editor-panel-color-gradient-settings__color-indicator",
+  colorValue: colorValue
+}), (0, _element.createElement)(_components.FlexItem, {
+  className: "block-editor-panel-color-gradient-settings__color-name",
+  title: label
+}, label)); // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
 
 
-const renderToggle = settings => _ref3 => {
-  let {
-    onToggle,
-    isOpen
-  } = _ref3;
+const renderToggle = settings => ({
+  onToggle,
+  isOpen
+}) => {
   const {
     colorValue,
     label
@@ -97,7 +89,8 @@ const renderToggle = settings => _ref3 => {
     }),
     'aria-expanded': isOpen
   };
-  return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(LabeledColorIndicator, {
+  return (0, _element.createElement)(_components.Button, { ...toggleProps
+  }, (0, _element.createElement)(LabeledColorIndicator, {
     colorValue: colorValue,
     label: label
   }));
@@ -110,17 +103,16 @@ const renderToggle = settings => _ref3 => {
 // For more context see: https://github.com/WordPress/gutenberg/pull/40084
 
 
-function ColorGradientSettingsDropdown(_ref4) {
-  let {
-    colors,
-    disableCustomColors,
-    disableCustomGradients,
-    enableAlpha,
-    gradients,
-    settings,
-    __experimentalIsRenderedInSidebar,
-    ...props
-  } = _ref4;
+function ColorGradientSettingsDropdown({
+  colors,
+  disableCustomColors,
+  disableCustomGradients,
+  enableAlpha,
+  gradients,
+  settings,
+  __experimentalIsRenderedInSidebar,
+  ...props
+}) {
   let popoverProps;
 
   if (__experimentalIsRenderedInSidebar) {
@@ -156,10 +148,11 @@ function ColorGradientSettingsDropdown(_ref4) {
     };
     return setting && // If not in an `ItemGroup` wrap the dropdown in a
     // `ToolsPanelItem`
-    (0, _element.createElement)(WithToolsPanelItem, (0, _extends2.default)({
+    (0, _element.createElement)(WithToolsPanelItem, {
       key: index,
-      setting: setting
-    }, props), (0, _element.createElement)(_components.Dropdown, {
+      setting: setting,
+      ...props
+    }, (0, _element.createElement)(_components.Dropdown, {
       popoverProps: popoverProps,
       className: "block-editor-tools-panel-color-gradient-settings__dropdown",
       renderToggle: renderToggle(toggleSettings),
@@ -167,7 +160,8 @@ function ColorGradientSettingsDropdown(_ref4) {
         paddingSize: "none"
       }, (0, _element.createElement)("div", {
         className: "block-editor-panel-color-gradient-settings__dropdown-content"
-      }, (0, _element.createElement)(_control.default, controlProps)))
+      }, (0, _element.createElement)(_control.default, { ...controlProps
+      })))
     }));
   }));
 }

package/build/components/colors-gradients/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","shift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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';\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 =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\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};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\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\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","shift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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';\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 =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\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};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\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\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\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"]}

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

@@ -9,12 +9,8 @@ exports.default = exports.PanelColorGradientSettingsInner = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _components = require("@wordpress/components");
 
 var _data = require("@wordpress/data");
@@ -38,26 +34,25 @@ var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./use
  */
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 
-const PanelColorGradientSettingsInner = _ref => {
-  let {
-    className,
-    colors,
-    gradients,
-    disableCustomColors,
-    disableCustomGradients,
-    children,
-    settings,
-    title,
-    showTitle = true,
-    __experimentalIsRenderedInSidebar,
-    enableAlpha
-  } = _ref;
+const PanelColorGradientSettingsInner = ({
+  className,
+  colors,
+  gradients,
+  disableCustomColors,
+  disableCustomGradients,
+  children,
+  settings,
+  title,
+  showTitle = true,
+  __experimentalIsRenderedInSidebar,
+  enableAlpha
+}) => {
   const panelId = (0, _compose.useInstanceId)(PanelColorGradientSettingsInner);
   const {
     batch
   } = (0, _data.useRegistry)();
 
-  if ((0, _lodash.isEmpty)(colors) && (0, _lodash.isEmpty)(gradients) && disableCustomColors && disableCustomGradients && settings !== null && settings !== void 0 && settings.every(setting => (0, _lodash.isEmpty)(setting.colors) && (0, _lodash.isEmpty)(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
+  if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(setting => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
     return null;
   }
 
@@ -66,14 +61,12 @@ const PanelColorGradientSettingsInner = _ref => {
     label: showTitle ? title : undefined,
     resetAll: () => {
       batch(() => {
-        settings.forEach(_ref2 => {
-          let {
-            colorValue,
-            gradientValue,
-            onColorChange,
-            onGradientChange
-          } = _ref2;
-
+        settings.forEach(({
+          colorValue,
+          gradientValue,
+          onColorChange,
+          onGradientChange
+        }) => {
           if (colorValue) {
             onColorChange();
           } else if (gradientValue) {
@@ -103,15 +96,19 @@ exports.PanelColorGradientSettingsInner = PanelColorGradientSettingsInner;
 
 const PanelColorGradientSettingsSelect = props => {
   const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
-  return (0, _element.createElement)(PanelColorGradientSettingsInner, (0, _extends2.default)({}, colorGradientSettings, props));
+  return (0, _element.createElement)(PanelColorGradientSettingsInner, { ...colorGradientSettings,
+    ...props
+  });
 };
 
 const PanelColorGradientSettings = props => {
   if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
-    return (0, _element.createElement)(PanelColorGradientSettingsInner, props);
+    return (0, _element.createElement)(PanelColorGradientSettingsInner, { ...props
+    });
   }
 
-  return (0, _element.createElement)(PanelColorGradientSettingsSelect, props);
+  return (0, _element.createElement)(PanelColorGradientSettingsSelect, { ...props
+  });
 };
 
 var _default = PanelColorGradientSettings;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorsAndGradientKeys","PanelColorGradientSettingsInner","className","colors","gradients","disableCustomColors","disableCustomGradients","children","settings","title","showTitle","__experimentalIsRenderedInSidebar","enableAlpha","panelId","batch","every","setting","undefined","forEach","colorValue","gradientValue","onColorChange","onGradientChange","PanelColorGradientSettingsSelect","props","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isEmpty } from 'lodash';\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\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tsettings?.every(\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\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={ classnames(\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorsAndGradientKeys","PanelColorGradientSettingsInner","className","colors","gradients","disableCustomColors","disableCustomGradients","children","settings","title","showTitle","__experimentalIsRenderedInSidebar","enableAlpha","panelId","batch","length","every","setting","undefined","forEach","colorValue","gradientValue","onColorChange","onGradientChange","PanelColorGradientSettingsSelect","props","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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={ classnames(\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"]}

package/build/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -24,39 +24,35 @@ var _blockSettings = require("../block-settings");
 /**
  * Internal dependencies
  */
-function PanelColorGradientSettings(_ref) {
-  let {
-    settings,
-    title,
-    children
-  } = _ref;
+function PanelColorGradientSettings({
+  settings,
+  title,
+  children
+}) {
   const navigation = (0, _native.useNavigation)();
   const mappedSettings = (0, _element.useMemo)(() => {
-    return settings.map(_ref2 => {
-      let {
-        onColorChange,
-        onColorCleared,
-        colorValue,
-        onGradientChange,
-        gradientValue,
-        label
-      } = _ref2;
-      return (0, _element.createElement)(_components.ColorControl, {
-        onPress: () => {
-          navigation.navigate(_blockSettings.blockSettingsScreens.color, {
-            onColorChange,
-            colorValue: gradientValue || colorValue,
-            gradientValue,
-            onGradientChange,
-            onColorCleared,
-            label
-          });
-        },
-        key: `color-setting-${label}`,
-        label: label,
-        color: gradientValue || colorValue
-      });
-    });
+    return settings.map(({
+      onColorChange,
+      onColorCleared,
+      colorValue,
+      onGradientChange,
+      gradientValue,
+      label
+    }) => (0, _element.createElement)(_components.ColorControl, {
+      onPress: () => {
+        navigation.navigate(_blockSettings.blockSettingsScreens.color, {
+          onColorChange,
+          colorValue: gradientValue || colorValue,
+          gradientValue,
+          onGradientChange,
+          onColorCleared,
+          label
+        });
+      },
+      key: `color-setting-${label}`,
+      label: label,
+      color: gradientValue || colorValue
+    }));
   }, [settings]);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.PanelBody, {
     title: title

package/build/components/colors-gradients/panel-color-gradient-settings.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["PanelColorGradientSettings","settings","title","children","navigation","mappedSettings","map","onColorChange","onColorCleared","colorValue","onGradientChange","gradientValue","label","navigate","blockSettingsScreens","color"],"mappings":";;;;;;;AASA;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,0BAAT,OAIX;AAAA,MAJgD;AACnDC,IAAAA,QADmD;AAEnDC,IAAAA,KAFmD;AAGnDC,IAAAA;AAHmD,GAIhD;AACH,QAAMC,UAAU,GAAG,4BAAnB;AAEA,QAAMC,cAAc,GAAG,sBAAS,MAAM;AACrC,WAAOJ,QAAQ,CAACK,GAAT,CACN;AAAA,UAAE;AACDC,QAAAA,aADC;AAEDC,QAAAA,cAFC;AAGDC,QAAAA,UAHC;AAIDC,QAAAA,gBAJC;AAKDC,QAAAA,aALC;AAMDC,QAAAA;AANC,OAAF;AAAA,aAQC,4BAAC,wBAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfR,UAAAA,UAAU,CAACS,QAAX,CAAqBC,oCAAqBC,KAA1C,EAAiD;AAChDR,YAAAA,aADgD;AAEhDE,YAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,YAAAA,aAHgD;AAIhDD,YAAAA,gBAJgD;AAKhDF,YAAAA,cALgD;AAMhDI,YAAAA;AANgD,WAAjD;AAQA,SAVF;AAWC,QAAA,GAAG,EAAI,iBAAiBA,KAAO,EAXhC;AAYC,QAAA,KAAK,EAAGA,KAZT;AAaC,QAAA,KAAK,EAAGD,aAAa,IAAIF;AAb1B,QARD;AAAA,KADM,CAAP;AA0BA,GA3BsB,EA2BpB,CAAER,QAAF,CA3BoB,CAAvB;AA6BA,SACC,qDACC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BG,cAA7B,CADD,EAEC,4BAAC,qBAAD,QAAaF,QAAb,CAFD,CADD;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( {\n\tsettings,\n\ttitle,\n\tchildren,\n} ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tonColorCleared,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tonColorCleared,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ title }>{ mappedSettings }</PanelBody>\n\t\t\t<PanelBody>{ children }</PanelBody>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["PanelColorGradientSettings","settings","title","children","navigation","mappedSettings","map","onColorChange","onColorCleared","colorValue","onGradientChange","gradientValue","label","navigate","blockSettingsScreens","color"],"mappings":";;;;;;;AASA;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,0BAAT,CAAqC;AACnDC,EAAAA,QADmD;AAEnDC,EAAAA,KAFmD;AAGnDC,EAAAA;AAHmD,CAArC,EAIX;AACH,QAAMC,UAAU,GAAG,4BAAnB;AAEA,QAAMC,cAAc,GAAG,sBAAS,MAAM;AACrC,WAAOJ,QAAQ,CAACK,GAAT,CACN,CAAE;AACDC,MAAAA,aADC;AAEDC,MAAAA,cAFC;AAGDC,MAAAA,UAHC;AAIDC,MAAAA,gBAJC;AAKDC,MAAAA,aALC;AAMDC,MAAAA;AANC,KAAF,KAQC,4BAAC,wBAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfR,QAAAA,UAAU,CAACS,QAAX,CAAqBC,oCAAqBC,KAA1C,EAAiD;AAChDR,UAAAA,aADgD;AAEhDE,UAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,UAAAA,aAHgD;AAIhDD,UAAAA,gBAJgD;AAKhDF,UAAAA,cALgD;AAMhDI,UAAAA;AANgD,SAAjD;AAQA,OAVF;AAWC,MAAA,GAAG,EAAI,iBAAiBA,KAAO,EAXhC;AAYC,MAAA,KAAK,EAAGA,KAZT;AAaC,MAAA,KAAK,EAAGD,aAAa,IAAIF;AAb1B,MATK,CAAP;AA0BA,GA3BsB,EA2BpB,CAAER,QAAF,CA3BoB,CAAvB;AA6BA,SACC,qDACC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BG,cAA7B,CADD,EAEC,4BAAC,qBAAD,QAAaF,QAAb,CAFD,CADD;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( {\n\tsettings,\n\ttitle,\n\tchildren,\n} ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tonColorCleared,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tonColorCleared,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ title }>{ mappedSettings }</PanelBody>\n\t\t\t<PanelBody>{ children }</PanelBody>\n\t\t</>\n\t);\n}\n"]}

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

@@ -30,19 +30,18 @@ var _a11y2 = require("@wordpress/a11y");
  */
 (0, _colord.extend)([_names.default, _a11y.default]);
 
-function ContrastChecker(_ref) {
-  let {
-    backgroundColor,
-    fallbackBackgroundColor,
-    fallbackTextColor,
-    fallbackLinkColor,
-    fontSize,
-    // Font size value in pixels.
-    isLargeText,
-    textColor,
-    linkColor,
-    enableAlphaChecker = false
-  } = _ref;
+function ContrastChecker({
+  backgroundColor,
+  fallbackBackgroundColor,
+  fallbackTextColor,
+  fallbackLinkColor,
+  fontSize,
+  // Font size value in pixels.
+  isLargeText,
+  textColor,
+  linkColor,
+  enableAlphaChecker = false
+}) {
   const currentBackgroundColor = backgroundColor || fallbackBackgroundColor; // Must have a background color.
 
   if (!currentBackgroundColor) {

package/build/components/contrast-checker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["namesPlugin","a11yPlugin","ContrastChecker","backgroundColor","fallbackBackgroundColor","fallbackTextColor","fallbackLinkColor","fontSize","isLargeText","textColor","linkColor","enableAlphaChecker","currentBackgroundColor","currentTextColor","currentLinkColor","textColors","color","description","colordBackgroundColor","backgroundColorHasTransparency","alpha","backgroundColorBrightness","brightness","isReadableOptions","level","size","message","speakMessage","item","colordTextColor","isColordTextReadable","isReadable","textHasTransparency"],"mappings":"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","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["namesPlugin","a11yPlugin","ContrastChecker","backgroundColor","fallbackBackgroundColor","fallbackTextColor","fallbackLinkColor","fontSize","isLargeText","textColor","linkColor","enableAlphaChecker","currentBackgroundColor","currentTextColor","currentLinkColor","textColors","color","description","colordBackgroundColor","backgroundColorHasTransparency","alpha","backgroundColorBrightness","brightness","isReadableOptions","level","size","message","speakMessage","item","colordTextColor","isColordTextReadable","isReadable","textHasTransparency"],"mappings":"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","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"]}

package/build/components/contrast-checker/index.native.js

@@ -40,14 +40,13 @@ var _style = _interopRequireDefault(require("./style.scss"));
  */
 (0, _colord.extend)([_names.default, _a11y.default]);
 
-function ContrastCheckerMessage(_ref) {
-  let {
-    colordBackgroundColor,
-    colordTextColor,
-    backgroundColor,
-    textColor,
-    msgStyle
-  } = _ref;
+function ContrastCheckerMessage({
+  colordBackgroundColor,
+  colordTextColor,
+  backgroundColor,
+  textColor,
+  msgStyle
+}) {
   const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
   // prop, but the contrast checker requires granular control over when the
   // announcements are made. Notably, the message will be re-announced if a
@@ -67,16 +66,15 @@ function ContrastCheckerMessage(_ref) {
   }, msg));
 }
 
-function ContrastChecker(_ref2) {
-  let {
-    backgroundColor,
-    fallbackBackgroundColor,
-    fallbackTextColor,
-    fontSize,
-    // font size value in pixels
-    isLargeText,
-    textColor
-  } = _ref2;
+function ContrastChecker({
+  backgroundColor,
+  fallbackBackgroundColor,
+  fallbackTextColor,
+  fontSize,
+  // font size value in pixels
+  isLargeText,
+  textColor
+}) {
   const msgStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-editor-contrast-checker__notice'], _style.default['block-editor-contrast-checker__notice-dark']);
 
   if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {