@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/build-module/components/block-types-list/index.native.js

@@ -4,13 +4,14 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { Dimensions, FlatList, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { Dimensions, FlatList, SectionList, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 /**
  * WordPress dependencies
  */
 
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { usePreferredColorScheme, usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -20,7 +21,7 @@ const MIN_COL_NUM = 3;
 export default function BlockTypesList(_ref) {
   let {
     name,
-    items,
+    sections,
     onSelect,
     listProps,
     initialNumToRender = 3
@@ -65,32 +66,73 @@ export default function BlockTypesList(_ref) {
   }
 
   const contentContainerStyle = StyleSheet.flatten(listProps.contentContainerStyle);
-  return createElement(FlatList, _extends({
+
+  const renderSection = _ref2 => {
+    let {
+      item
+    } = _ref2;
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(FlatList, {
+      data: item.list,
+      key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
+      ,
+      numColumns: numberOfColumns,
+      ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
+        accessible: false
+      }, createElement(View, {
+        style: styles['block-types-list__row-separator']
+      })),
+      scrollEnabled: false,
+      renderItem: renderListItem
+    }));
+  };
+
+  const renderListItem = _ref3 => {
+    let {
+      item
+    } = _ref3;
+    return createElement(InserterButton, {
+      item: item,
+      itemWidth: itemWidth,
+      maxWidth: maxWidth,
+      onSelect: onSelect
+    });
+  };
+
+  const colorScheme = usePreferredColorScheme();
+  const sectionHeaderGradientValue = colorScheme === 'light' ? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))' : 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
+  const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(styles['block-types-list__section-header-title'], styles['block-types-list__section-header-title--dark']);
+
+  const renderSectionHeader = _ref4 => {
+    let {
+      section: {
+        metadata
+      }
+    } = _ref4;
+
+    if (!(metadata !== null && metadata !== void 0 && metadata.icon) || !(metadata !== null && metadata !== void 0 && metadata.title)) {
+      return null;
+    }
+
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(Gradient, {
+      gradientValue: sectionHeaderGradientValue,
+      style: styles['block-types-list__section-header']
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.icon, createElement(Text, {
+      style: sectionHeaderTitleStyles
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.title)));
+  };
+
+  return createElement(SectionList, _extends({
     onLayout: onLayout,
-    key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
-    ,
     testID: `InserterUI-${name}`,
     keyboardShouldPersistTaps: "always",
-    numColumns: numberOfColumns,
-    data: items,
+    sections: sections,
     initialNumToRender: initialNumToRender,
-    ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
-      accessible: false
-    }, createElement(View, {
-      style: styles['block-types-list__row-separator']
-    })),
-    keyExtractor: item => item.id,
-    renderItem: _ref2 => {
-      let {
-        item
-      } = _ref2;
-      return createElement(InserterButton, {
-        item,
-        itemWidth,
-        maxWidth,
-        onSelect
-      });
-    }
+    renderItem: renderSection,
+    renderSectionHeader: renderSectionHeader
   }, listProps, {
     contentContainerStyle: { ...contentContainerStyle,
       paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom)

package/build-module/components/block-types-list/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","StyleSheet","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","InserterButton","styles","MIN_COL_NUM","BlockTypesList","name","items","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","item","id","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tStyleSheet,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, InserterButton } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\titems,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\treturn (\n\t\t<FlatList\n\t\t\tonLayout={ onLayout }\n\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tnumColumns={ numberOfColumns }\n\t\t\tdata={ items }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ styles[ 'block-types-list__row-separator' ] }\n\t\t\t\t\t/>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t) }\n\t\t\tkeyExtractor={ ( item ) => item.id }\n\t\t\trenderItem={ ( { item } ) => (\n\t\t\t\t<InserterButton\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\titem,\n\t\t\t\t\t\titemWidth,\n\t\t\t\t\t\tmaxWidth,\n\t\t\t\t\t\tonSelect,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","SectionList","StyleSheet","Text","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","Gradient","InserterButton","usePreferredColorScheme","usePreferredColorSchemeStyle","styles","MIN_COL_NUM","BlockTypesList","name","sections","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","renderSection","item","list","renderListItem","colorScheme","sectionHeaderGradientValue","sectionHeaderTitleStyles","renderSectionHeader","section","metadata","icon","title","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tSectionList,\n\tStyleSheet,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, Gradient, InserterButton } from '@wordpress/components';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\tsections,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\tconst renderSection = ( { item } ) => {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<FlatList\n\t\t\t\t\tdata={ item.list }\n\t\t\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\t\t\tnumColumns={ numberOfColumns }\n\t\t\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'block-types-list__row-separator' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t) }\n\t\t\t\t\tscrollEnabled={ false }\n\t\t\t\t\trenderItem={ renderListItem }\n\t\t\t\t/>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\tconst renderListItem = ( { item } ) => {\n\t\treturn (\n\t\t\t<InserterButton\n\t\t\t\titem={ item }\n\t\t\t\titemWidth={ itemWidth }\n\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst colorScheme = usePreferredColorScheme();\n\tconst sectionHeaderGradientValue =\n\t\tcolorScheme === 'light'\n\t\t\t? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'\n\t\t\t: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';\n\tconst sectionHeaderTitleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-types-list__section-header-title' ],\n\t\tstyles[ 'block-types-list__section-header-title--dark' ]\n\t);\n\n\tconst renderSectionHeader = ( { section: { metadata } } ) => {\n\t\tif ( ! metadata?.icon || ! metadata?.title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<Gradient\n\t\t\t\t\tgradientValue={ sectionHeaderGradientValue }\n\t\t\t\t\tstyle={ styles[ 'block-types-list__section-header' ] }\n\t\t\t\t>\n\t\t\t\t\t{ metadata?.icon }\n\t\t\t\t\t<Text style={ sectionHeaderTitleStyles }>\n\t\t\t\t\t\t{ metadata?.title }\n\t\t\t\t\t</Text>\n\t\t\t\t</Gradient>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SectionList\n\t\t\tonLayout={ onLayout }\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tsections={ sections }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\trenderItem={ renderSection }\n\t\t\trenderSectionHeader={ renderSectionHeader }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/border-radius-control/all-input-control.js

@@ -10,23 +10,51 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
+import { getAllValue, getAllUnit, hasMixedValues, hasDefinedValues } from './utils';
 export default function AllInputControl(_ref) {
   let {
     onChange,
+    selectedUnits,
+    setSelectedUnits,
     values,
     ...props
   } = _ref;
-  const allValue = getAllValue(values);
+  let allValue = getAllValue(values);
+
+  if (allValue === undefined) {
+    // If we don't have any value set the unit to any current selection
+    // or the most common unit from the individual radii values.
+    allValue = getAllUnit(selectedUnits);
+  }
+
   const hasValues = hasDefinedValues(values);
   const isMixed = hasValues && hasMixedValues(values);
-  const allPlaceholder = isMixed ? __('Mixed') : null;
+  const allPlaceholder = isMixed ? __('Mixed') : null; // Filter out CSS-unit-only values to prevent invalid styles.
+
+  const handleOnChange = next => {
+    const isNumeric = !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : undefined;
+    onChange(nextValue);
+  }; // Store current unit selection for use as fallback for individual
+  // radii controls.
+
+
+  const handleOnUnitChange = unit => {
+    setSelectedUnits({
+      topLeft: unit,
+      topRight: unit,
+      bottomLeft: unit,
+      bottomRight: unit
+    });
+  };
+
   return createElement(UnitControl, _extends({}, props, {
     "aria-label": __('Border radius'),
     disableUnits: isMixed,
     isOnly: true,
     value: allValue,
-    onChange: onChange,
+    onChange: handleOnChange,
+    onUnitChange: handleOnUnitChange,
     placeholder: allPlaceholder
   }));
 }

package/build-module/components/border-radius-control/all-input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/all-input-control.js"],"names":["__experimentalUnitControl","UnitControl","__","getAllValue","hasMixedValues","hasDefinedValues","AllInputControl","onChange","values","props","allValue","hasValues","isMixed","allPlaceholder"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,yBAAyB,IAAIC,WAAtC,QAAyD,uBAAzD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,cAAtB,EAAsCC,gBAAtC,QAA8D,SAA9D;AAEA,eAAe,SAASC,eAAT,OAA2D;AAAA,MAAjC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoB,OAAGC;AAAvB,GAAiC;AACzE,QAAMC,QAAQ,GAAGP,WAAW,CAAEK,MAAF,CAA5B;AACA,QAAMG,SAAS,GAAGN,gBAAgB,CAAEG,MAAF,CAAlC;AACA,QAAMI,OAAO,GAAGD,SAAS,IAAIP,cAAc,CAAEI,MAAF,CAA3C;AACA,QAAMK,cAAc,GAAGD,OAAO,GAAGV,EAAE,CAAE,OAAF,CAAL,GAAmB,IAAjD;AAEA,SACC,cAAC,WAAD,eACMO,KADN;AAEC,kBAAaP,EAAE,CAAE,eAAF,CAFhB;AAGC,IAAA,YAAY,EAAGU,OAHhB;AAIC,IAAA,MAAM,MAJP;AAKC,IAAA,KAAK,EAAGF,QALT;AAMC,IAAA,QAAQ,EAAGH,QANZ;AAOC,IAAA,WAAW,EAAGM;AAPf,KADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUnitControl as UnitControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getAllValue, hasMixedValues, hasDefinedValues } from './utils';\n\nexport default function AllInputControl( { onChange, values, ...props } ) {\n\tconst allValue = getAllValue( values );\n\tconst hasValues = hasDefinedValues( values );\n\tconst isMixed = hasValues && hasMixedValues( values );\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\taria-label={ __( 'Border radius' ) }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ onChange }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/all-input-control.js"],"names":["__experimentalUnitControl","UnitControl","__","getAllValue","getAllUnit","hasMixedValues","hasDefinedValues","AllInputControl","onChange","selectedUnits","setSelectedUnits","values","props","allValue","undefined","hasValues","isMixed","allPlaceholder","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","handleOnUnitChange","unit","topLeft","topRight","bottomLeft","bottomRight"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,yBAAyB,IAAIC,WAAtC,QAAyD,uBAAzD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,WADD,EAECC,UAFD,EAGCC,cAHD,EAICC,gBAJD,QAKO,SALP;AAOA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,aAFwC;AAGxCC,IAAAA,gBAHwC;AAIxCC,IAAAA,MAJwC;AAKxC,OAAGC;AALqC,GAMrC;AACH,MAAIC,QAAQ,GAAGV,WAAW,CAAEQ,MAAF,CAA1B;;AAEA,MAAKE,QAAQ,KAAKC,SAAlB,EAA8B;AAC7B;AACA;AACAD,IAAAA,QAAQ,GAAGT,UAAU,CAAEK,aAAF,CAArB;AACA;;AAED,QAAMM,SAAS,GAAGT,gBAAgB,CAAEK,MAAF,CAAlC;AACA,QAAMK,OAAO,GAAGD,SAAS,IAAIV,cAAc,CAAEM,MAAF,CAA3C;AACA,QAAMM,cAAc,GAAGD,OAAO,GAAGd,EAAE,CAAE,OAAF,CAAL,GAAmB,IAAjD,CAXG,CAaH;;AACA,QAAMgB,cAAc,GAAKC,IAAF,IAAY;AAClC,UAAMC,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAAzB;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUL,SAArC;AACAN,IAAAA,QAAQ,CAAEe,SAAF,CAAR;AACA,GAJD,CAdG,CAoBH;AACA;;;AACA,QAAMC,kBAAkB,GAAKC,IAAF,IAAY;AACtCf,IAAAA,gBAAgB,CAAE;AACjBgB,MAAAA,OAAO,EAAED,IADQ;AAEjBE,MAAAA,QAAQ,EAAEF,IAFO;AAGjBG,MAAAA,UAAU,EAAEH,IAHK;AAIjBI,MAAAA,WAAW,EAAEJ;AAJI,KAAF,CAAhB;AAMA,GAPD;;AASA,SACC,cAAC,WAAD,eACMb,KADN;AAEC,kBAAaV,EAAE,CAAE,eAAF,CAFhB;AAGC,IAAA,YAAY,EAAGc,OAHhB;AAIC,IAAA,MAAM,MAJP;AAKC,IAAA,KAAK,EAAGH,QALT;AAMC,IAAA,QAAQ,EAAGK,cANZ;AAOC,IAAA,YAAY,EAAGM,kBAPhB;AAQC,IAAA,WAAW,EAAGP;AARf,KADD;AAYA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUnitControl as UnitControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasMixedValues,\n\thasDefinedValues,\n} from './utils';\n\nexport default function AllInputControl( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues,\n\t...props\n} ) {\n\tlet allValue = getAllValue( values );\n\n\tif ( allValue === undefined ) {\n\t\t// If we don't have any value set the unit to any current selection\n\t\t// or the most common unit from the individual radii values.\n\t\tallValue = getAllUnit( selectedUnits );\n\t}\n\n\tconst hasValues = hasDefinedValues( values );\n\tconst isMixed = hasValues && hasMixedValues( values );\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\t// Filter out CSS-unit-only values to prevent invalid styles.\n\tconst handleOnChange = ( next ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tonChange( nextValue );\n\t};\n\n\t// Store current unit selection for use as fallback for individual\n\t// radii controls.\n\tconst handleOnUnitChange = ( unit ) => {\n\t\tsetSelectedUnits( {\n\t\t\ttopLeft: unit,\n\t\t\ttopRight: unit,\n\t\t\tbottomLeft: unit,\n\t\t\tbottomRight: unit,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\taria-label={ __( 'Border radius' ) }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/border-radius-control/index.js

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { RangeControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
+import { BaseControl, RangeControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
@@ -16,10 +16,10 @@ import LinkedButton from './linked-button';
 import useSetting from '../use-setting';
 import { getAllValue, getAllUnit, hasDefinedValues, hasMixedValues } from './utils';
 const DEFAULT_VALUES = {
-  topLeft: null,
-  topRight: null,
-  bottomLeft: null,
-  bottomRight: null
+  topLeft: undefined,
+  topRight: undefined,
+  bottomLeft: undefined,
+  bottomRight: undefined
 };
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
@@ -42,11 +42,21 @@ export default function BorderRadiusControl(_ref) {
     onChange,
     values
   } = _ref;
-  const [isLinked, setIsLinked] = useState(!hasDefinedValues(values) || !hasMixedValues(values));
+  const [isLinked, setIsLinked] = useState(!hasDefinedValues(values) || !hasMixedValues(values)); // Tracking selected units via internal state allows filtering of CSS unit
+  // only values from being saved while maintaining preexisting unit selection
+  // behaviour. Filtering CSS unit only values prevents invalid style values.
+
+  const [selectedUnits, setSelectedUnits] = useState({
+    flat: typeof values === 'string' ? parseQuantityAndUnitFromRawValue(values)[1] : undefined,
+    topLeft: parseQuantityAndUnitFromRawValue(values === null || values === void 0 ? void 0 : values.topLeft)[1],
+    topRight: parseQuantityAndUnitFromRawValue(values === null || values === void 0 ? void 0 : values.topRight)[1],
+    bottomLeft: parseQuantityAndUnitFromRawValue(values === null || values === void 0 ? void 0 : values.bottomLeft)[1],
+    bottomRight: parseQuantityAndUnitFromRawValue(values === null || values === void 0 ? void 0 : values.bottomRight)[1]
+  });
   const units = useCustomUnits({
     availableUnits: useSetting('spacing.units') || ['px', 'em', 'rem']
   });
-  const unit = getAllUnit(values);
+  const unit = getAllUnit(selectedUnits);
   const unitConfig = units && units.find(item => item.value === unit);
   const step = (unitConfig === null || unitConfig === void 0 ? void 0 : unitConfig.step) || 1;
   const [allValue] = parseQuantityAndUnitFromRawValue(getAllValue(values));
@@ -59,13 +69,17 @@ export default function BorderRadiusControl(_ref) {
 
   return createElement("fieldset", {
     className: "components-border-radius-control"
-  }, createElement("legend", null, __('Radius')), createElement("div", {
+  }, createElement(BaseControl.VisualLabel, {
+    as: "legend"
+  }, __('Radius')), createElement("div", {
     className: "components-border-radius-control__wrapper"
   }, isLinked ? createElement(Fragment, null, createElement(AllInputControl, {
     className: "components-border-radius-control__unit-control",
     values: values,
     min: MIN_BORDER_RADIUS_VALUE,
     onChange: onChange,
+    selectedUnits: selectedUnits,
+    setSelectedUnits: setSelectedUnits,
     units: units
   }), createElement(RangeControl, {
     label: __('Border radius'),
@@ -81,6 +95,8 @@ export default function BorderRadiusControl(_ref) {
   })) : createElement(InputControls, {
     min: MIN_BORDER_RADIUS_VALUE,
     onChange: onChange,
+    selectedUnits: selectedUnits,
+    setSelectedUnits: setSelectedUnits,
     values: values || DEFAULT_VALUES,
     units: units
   }), createElement(LinkedButton, {

package/build-module/components/border-radius-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["RangeControl","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUseCustomUnits","useCustomUnits","useState","__","AllInputControl","InputControls","LinkedButton","useSetting","getAllValue","getAllUnit","hasDefinedValues","hasMixedValues","DEFAULT_VALUES","topLeft","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: null,\n\ttopRight: null,\n\tbottomLeft: null,\n\tbottomRight: null,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/**\n * Control to display border radius options.\n *\n * @param {Object}   props          Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object}   props.values   Border radius values.\n *\n * @return {WPElement}              Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) || ! hasMixedValues( values )\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( values );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step || 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<legend>{ __( 'Radius' ) }</legend>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalues={ values || DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["BaseControl","RangeControl","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUseCustomUnits","useCustomUnits","useState","__","AllInputControl","InputControls","LinkedButton","useSetting","getAllValue","getAllUnit","hasDefinedValues","hasMixedValues","DEFAULT_VALUES","topLeft","undefined","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","selectedUnits","setSelectedUnits","flat","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: undefined,\n\ttopRight: undefined,\n\tbottomLeft: undefined,\n\tbottomRight: undefined,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/**\n * Control to display border radius options.\n *\n * @param {Object}   props          Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object}   props.values   Border radius values.\n *\n * @return {WPElement}              Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) || ! hasMixedValues( values )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS unit only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\tflat:\n\t\t\ttypeof values === 'string'\n\t\t\t\t? parseQuantityAndUnitFromRawValue( values )[ 1 ]\n\t\t\t\t: undefined,\n\t\ttopLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],\n\t\ttopRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],\n\t\tbottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],\n\t\tbottomRight: parseQuantityAndUnitFromRawValue(\n\t\t\tvalues?.bottomRight\n\t\t)[ 1 ],\n\t} );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( selectedUnits );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step || 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ __( 'Radius' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tselectedUnits={ selectedUnits }\n\t\t\t\t\t\t\tsetSelectedUnits={ setSelectedUnits }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tselectedUnits={ selectedUnits }\n\t\t\t\t\t\tsetSelectedUnits={ setSelectedUnits }\n\t\t\t\t\t\tvalues={ values || DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}

package/build-module/components/border-radius-control/input-controls.js

@@ -4,7 +4,7 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl, Tooltip } from '@wordpress/components';
+import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUnitControl as UnitControl, Tooltip } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 const CORNERS = {
   topLeft: __('Top left'),
@@ -15,6 +15,8 @@ const CORNERS = {
 export default function BoxInputControls(_ref) {
   let {
     onChange,
+    selectedUnits,
+    setSelectedUnits,
     values: valuesProp,
     ...props
   } = _ref;
@@ -22,11 +24,21 @@ export default function BoxInputControls(_ref) {
   const createHandleOnChange = corner => next => {
     if (!onChange) {
       return;
-    }
+    } // Filter out CSS-unit-only values to prevent invalid styles.
 
+
+    const isNumeric = !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : undefined;
     onChange({ ...values,
-      [corner]: next ? next : undefined
+      [corner]: nextValue
     });
+  };
+
+  const createHandleOnUnitChange = side => next => {
+    const newUnits = { ...selectedUnits
+    };
+    newUnits[side] = next;
+    setSelectedUnits(newUnits);
   }; // For shorthand style & backwards compatibility, handle flat string value.
 
 
@@ -42,17 +54,20 @@ export default function BoxInputControls(_ref) {
   return createElement("div", {
     className: "components-border-radius-control__input-controls-wrapper"
   }, Object.entries(CORNERS).map(_ref2 => {
-    let [key, label] = _ref2;
+    let [corner, label] = _ref2;
+    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[corner]);
+    const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
     return createElement(Tooltip, {
       text: label,
       position: "top",
-      key: key
+      key: corner
     }, createElement("div", {
       className: "components-border-radius-control__tooltip-wrapper"
     }, createElement(UnitControl, _extends({}, props, {
       "aria-label": label,
-      value: values[key],
-      onChange: createHandleOnChange(key)
+      value: [parsedQuantity, computedUnit].join(''),
+      onChange: createHandleOnChange(corner),
+      onUnitChange: createHandleOnUnitChange(corner)
     }))));
   }));
 }

package/build-module/components/border-radius-control/input-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"names":["__experimentalUnitControl","UnitControl","Tooltip","__","CORNERS","topLeft","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","values","valuesProp","props","createHandleOnChange","corner","next","undefined","Object","entries","map","key","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,yBAAyB,IAAIC,WAD9B,EAECC,OAFD,QAGO,uBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,MAAMC,OAAO,GAAG;AACfC,EAAAA,OAAO,EAAEF,EAAE,CAAE,UAAF,CADI;AAEfG,EAAAA,QAAQ,EAAEH,EAAE,CAAE,WAAF,CAFG;AAGfI,EAAAA,UAAU,EAAEJ,EAAE,CAAE,aAAF,CAHC;AAIfK,EAAAA,WAAW,EAAEL,EAAE,CAAE,cAAF;AAJA,CAAhB;AAOA,eAAe,SAASM,gBAAT,OAIX;AAAA,MAJsC;AACzCC,IAAAA,QADyC;AAEzCC,IAAAA,MAAM,EAAEC,UAFiC;AAGzC,OAAGC;AAHsC,GAItC;;AACH,QAAMC,oBAAoB,GAAKC,MAAF,IAAgBC,IAAF,IAAY;AACtD,QAAK,CAAEN,QAAP,EAAkB;AACjB;AACA;;AAEDA,IAAAA,QAAQ,CAAE,EACT,GAAGC,MADM;AAET,OAAEI,MAAF,GAAYC,IAAI,GAAGA,IAAH,GAAUC;AAFjB,KAAF,CAAR;AAIA,GATD,CADG,CAYH;;;AACA,QAAMN,MAAM,GACX,OAAOC,UAAP,KAAsB,QAAtB,GACGA,UADH,GAEG;AACAP,IAAAA,OAAO,EAAEO,UADT;AAEAN,IAAAA,QAAQ,EAAEM,UAFV;AAGAL,IAAAA,UAAU,EAAEK,UAHZ;AAIAJ,IAAAA,WAAW,EAAEI;AAJb,GAHJ,CAbG,CAuBH;AACA;AACA;;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,MAAM,CAACC,OAAP,CAAgBf,OAAhB,EAA0BgB,GAA1B,CAA+B;AAAA,QAAE,CAAEC,GAAF,EAAOC,KAAP,CAAF;AAAA,WAChC,cAAC,OAAD;AAAS,MAAA,IAAI,EAAGA,KAAhB;AAAwB,MAAA,QAAQ,EAAC,KAAjC;AAAuC,MAAA,GAAG,EAAGD;AAA7C,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,WAAD,eACMR,KADN;AAEC,oBAAaS,KAFd;AAGC,MAAA,KAAK,EAAGX,MAAM,CAAEU,GAAF,CAHf;AAIC,MAAA,QAAQ,EAAGP,oBAAoB,CAAEO,GAAF;AAJhC,OADD,CADD,CADgC;AAAA,GAA/B,CADH,CADD;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: next ? next : undefined,\n\t\t} );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t  };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (\n\t\t\t\t<Tooltip text={ label } position=\"top\" key={ key }>\n\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\tvalue={ values[ key ] }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( key ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Tooltip>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"names":["__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUnitControl","UnitControl","Tooltip","__","CORNERS","topLeft","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","selectedUnits","setSelectedUnits","values","valuesProp","props","createHandleOnChange","corner","next","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","side","newUnits","Object","entries","map","label","parsedQuantity","parsedUnit","computedUnit","flat","join"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,8CAA8C,IAAIC,gCADnD,EAECC,yBAAyB,IAAIC,WAF9B,EAGCC,OAHD,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,MAAMC,OAAO,GAAG;AACfC,EAAAA,OAAO,EAAEF,EAAE,CAAE,UAAF,CADI;AAEfG,EAAAA,QAAQ,EAAEH,EAAE,CAAE,WAAF,CAFG;AAGfI,EAAAA,UAAU,EAAEJ,EAAE,CAAE,aAAF,CAHC;AAIfK,EAAAA,WAAW,EAAEL,EAAE,CAAE,cAAF;AAJA,CAAhB;AAOA,eAAe,SAASM,gBAAT,OAMX;AAAA,MANsC;AACzCC,IAAAA,QADyC;AAEzCC,IAAAA,aAFyC;AAGzCC,IAAAA,gBAHyC;AAIzCC,IAAAA,MAAM,EAAEC,UAJiC;AAKzC,OAAGC;AALsC,GAMtC;;AACH,QAAMC,oBAAoB,GAAKC,MAAF,IAAgBC,IAAF,IAAY;AACtD,QAAK,CAAER,QAAP,EAAkB;AACjB;AACA,KAHqD,CAKtD;;;AACA,UAAMS,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAAzB;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUK,SAArC;AAEAb,IAAAA,QAAQ,CAAE,EACT,GAAGG,MADM;AAET,OAAEI,MAAF,GAAYK;AAFH,KAAF,CAAR;AAIA,GAbD;;AAeA,QAAME,wBAAwB,GAAKC,IAAF,IAAcP,IAAF,IAAY;AACxD,UAAMQ,QAAQ,GAAG,EAAE,GAAGf;AAAL,KAAjB;AACAe,IAAAA,QAAQ,CAAED,IAAF,CAAR,GAAmBP,IAAnB;AACAN,IAAAA,gBAAgB,CAAEc,QAAF,CAAhB;AACA,GAJD,CAhBG,CAsBH;;;AACA,QAAMb,MAAM,GACX,OAAOC,UAAP,KAAsB,QAAtB,GACGA,UADH,GAEG;AACAT,IAAAA,OAAO,EAAES,UADT;AAEAR,IAAAA,QAAQ,EAAEQ,UAFV;AAGAP,IAAAA,UAAU,EAAEO,UAHZ;AAIAN,IAAAA,WAAW,EAAEM;AAJb,GAHJ,CAvBG,CAiCH;AACA;AACA;;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGa,MAAM,CAACC,OAAP,CAAgBxB,OAAhB,EAA0ByB,GAA1B,CAA+B,SAAyB;AAAA,QAAvB,CAAEZ,MAAF,EAAUa,KAAV,CAAuB;AACzD,UAAM,CAAEC,cAAF,EAAkBC,UAAlB,IACLjC,gCAAgC,CAAEc,MAAM,CAAEI,MAAF,CAAR,CADjC;AAGA,UAAMgB,YAAY,GAAGpB,MAAM,CAAEI,MAAF,CAAN,GAClBe,UADkB,GAElBrB,aAAa,CAAEM,MAAF,CAAb,IAA2BN,aAAa,CAACuB,IAF5C;AAIA,WACC,cAAC,OAAD;AAAS,MAAA,IAAI,EAAGJ,KAAhB;AAAwB,MAAA,QAAQ,EAAC,KAAjC;AAAuC,MAAA,GAAG,EAAGb;AAA7C,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,WAAD,eACMF,KADN;AAEC,oBAAae,KAFd;AAGC,MAAA,KAAK,EAAG,CAAEC,cAAF,EAAkBE,YAAlB,EAAiCE,IAAjC,CACP,EADO,CAHT;AAMC,MAAA,QAAQ,EAAGnB,oBAAoB,CAAEC,MAAF,CANhC;AAOC,MAAA,YAAY,EAAGO,wBAAwB,CACtCP,MADsC;AAPxC,OADD,CADD,CADD;AAiBA,GAzBC,CADH,CADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: nextValue,\n\t\t} );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t  };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ corner ] );\n\n\t\t\t\tconst computedUnit = values[ corner ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ corner ] || selectedUnits.flat;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip text={ label } position=\"top\" key={ corner }>\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\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\tonChange={ createHandleOnChange( corner ) }\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tcorner\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/border-radius-control/utils.js

@@ -21,26 +21,23 @@ export function mode(inputArray) {
   return arr.sort((a, b) => inputArray.filter(v => v === b).length - inputArray.filter(v => v === a).length).shift();
 }
 /**
- * Returns the most common CSS unit in the radius values.
- * Falls back to `px` as a default unit.
+ * Returns the most common CSS unit from the current CSS unit selections.
  *
- * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values. Default: `px`.
+ * - If a single flat border radius is set, its unit will be used
+ * - If individual corner selections, the most common of those will be used
+ * - Failing any unit selections a default of 'px' is returned.
+ *
+ * @param {Object} selectedUnits Unit selections for flat radius & each corner.
+ * @return {string} Most common CSS unit from current selections. Default: `px`.
  */
 
 export function getAllUnit() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  if (typeof values === 'string') {
-    const [, unit] = parseQuantityAndUnitFromRawValue(values);
-    return unit || 'px';
-  }
-
-  const allUnits = Object.values(values).map(value => {
-    const [, unit] = parseQuantityAndUnitFromRawValue(value);
-    return unit;
-  });
-  return mode(allUnits) || 'px';
+  let selectedUnits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    flat,
+    ...cornerUnits
+  } = selectedUnits;
+  return flat || mode(Object.values(cornerUnits).filter(Boolean)) || 'px';
 }
 /**
  * Gets the 'all' input value and unit from values data.

package/build-module/components/border-radius-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","mode","inputArray","arr","sort","a","b","filter","v","length","shift","getAllUnit","values","unit","allUnits","Object","map","value","getAllValue","parsedQuantitiesAndUnits","allValues","every","allValue","undefined","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/**\n * Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n *\n * Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n *\n * @param {Array<any>} inputArray Array of items to check.\n * @return {any}                  The item with the most occurrences.\n */\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/**\n * Returns the most common CSS unit in the radius values.\n * Falls back to `px` as a default unit.\n *\n * @param {Object|string} values Radius values.\n * @return {string}              Most common CSS unit in values. Default: `px`.\n */\nexport function getAllUnit( values = {} ) {\n\tif ( typeof values === 'string' ) {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( values );\n\t\treturn unit || 'px';\n\t}\n\n\tconst allUnits = Object.values( values ).map( ( value ) => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn unit;\n\t} );\n\n\treturn mode( allUnits ) || 'px';\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object|string} values Radius values.\n * @return {string}              A value + unit for the 'all' input.\n */\nexport function getAllValue( values = {} ) {\n\t/**\n\t * Border radius support was originally a single pixel value.\n\t *\n\t * To maintain backwards compatibility treat this case as the all value.\n\t */\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>\n\t\tparseQuantityAndUnitFromRawValue( value )\n\t);\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 || value ? `${ value }${ unit }` : undefined;\n\n\treturn allValue;\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed =\n\t\ttypeof values === 'string' ? false : isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value || value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","mode","inputArray","arr","sort","a","b","filter","v","length","shift","getAllUnit","selectedUnits","flat","cornerUnits","Object","values","Boolean","getAllValue","parsedQuantitiesAndUnits","map","value","allValues","allUnits","every","unit","allValue","undefined","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/**\n * Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n *\n * Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n *\n * @param {Array<any>} inputArray Array of items to check.\n * @return {any}                  The item with the most occurrences.\n */\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/**\n * Returns the most common CSS unit from the current CSS unit selections.\n *\n * - If a single flat border radius is set, its unit will be used\n * - If individual corner selections, the most common of those will be used\n * - Failing any unit selections a default of 'px' is returned.\n *\n * @param {Object} selectedUnits Unit selections for flat radius & each corner.\n * @return {string} Most common CSS unit from current selections. Default: `px`.\n */\nexport function getAllUnit( selectedUnits = {} ) {\n\tconst { flat, ...cornerUnits } = selectedUnits;\n\treturn (\n\t\tflat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'\n\t);\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object|string} values Radius values.\n * @return {string}              A value + unit for the 'all' input.\n */\nexport function getAllValue( values = {} ) {\n\t/**\n\t * Border radius support was originally a single pixel value.\n\t *\n\t * To maintain backwards compatibility treat this case as the all value.\n\t */\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>\n\t\tparseQuantityAndUnitFromRawValue( value )\n\t);\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 || value ? `${ value }${ unit }` : undefined;\n\n\treturn allValue;\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed =\n\t\ttypeof values === 'string' ? false : isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value || value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}

package/build-module/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, maxBy } from 'lodash';
+import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -77,11 +77,15 @@ export function getColorClassName(colorContextName, colorSlug) {
 
 export function getMostReadableColor(colors, colorValue) {
   const colordColor = colord(colorValue);
-  return maxBy(colors, _ref => {
+
+  const getColorContrast = _ref => {
     let {
       color
     } = _ref;
     return colordColor.contrast(color);
-  }).color;
+  };
+
+  const maxContrast = Math.max(...colors.map(getColorContrast));
+  return colors.find(color => getColorContrast(color) === maxContrast).color;
 }
 //# sourceMappingURL=utils.js.map

package/build-module/components/colors/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["find","kebabCase","maxBy","colord","extend","namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","contrast"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,SAAf,EAA0BC,KAA1B,QAAuC,QAAvC;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEAF,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAGX,IAAI,CAAEQ,MAAF,EAAU;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAArB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAOf,IAAI,CAAEQ,MAAF,EAAU;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAV,CAAX;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAOlB,SAAS,CAAEiB,SAAF,CAAe,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAGlB,MAAM,CAAEY,UAAF,CAA1B;AACA,SAAOb,KAAK,CAAEM,MAAF,EAAU;AAAA,QAAE;AAAEK,MAAAA;AAAF,KAAF;AAAA,WAAiBQ,WAAW,CAACC,QAAZ,CAAsBT,KAAtB,CAAjB;AAAA,GAAV,CAAL,CACLA,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase, maxBy } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\treturn maxBy( colors, ( { color } ) => colordColor.contrast( color ) )\n\t\t.color;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["find","kebabCase","colord","extend","namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","getColorContrast","contrast","maxContrast","Math","max","map"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,SAAf,QAAgC,QAAhC;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEAF,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAGV,IAAI,CAAEO,MAAF,EAAU;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAArB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAOd,IAAI,CAAEO,MAAF,EAAU;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAV,CAAX;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAOjB,SAAS,CAAEgB,SAAF,CAAe,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAGlB,MAAM,CAAEY,UAAF,CAA1B;;AACA,QAAMO,gBAAgB,GAAG;AAAA,QAAE;AAAET,MAAAA;AAAF,KAAF;AAAA,WAAiBQ,WAAW,CAACE,QAAZ,CAAsBV,KAAtB,CAAjB;AAAA,GAAzB;;AAEA,QAAMW,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAU,GAAGlB,MAAM,CAACmB,GAAP,CAAYL,gBAAZ,CAAb,CAApB;AACA,SAAOd,MAAM,CAACP,IAAP,CAAeY,KAAF,IAAaS,gBAAgB,CAAET,KAAF,CAAhB,KAA8BW,WAAxD,EACLX,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"]}