@wordpress/block-editor 8.0.16 → 8.1.0

package/build-module/hooks/border-width.js

@@ -4,13 +4,14 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 import useSetting from '../components/use-setting';
 const MIN_BORDER_WIDTH = 0;
 /**
@@ -33,24 +34,12 @@ export const BorderWidthEdit = props => {
     width,
     color: customBorderColor,
     style: borderStyle
-  } = (style === null || style === void 0 ? void 0 : style.border) || {};
-  const [styleSelection, setStyleSelection] = useState();
-  const [colorSelection, setColorSelection] = useState(); // Temporarily track previous border color & style selections to be able to
-  // restore them when border width changes from zero value.
+  } = (style === null || style === void 0 ? void 0 : style.border) || {}; // Used to temporarily track previous border color & style selections to be
+  // able to restore them when border width changes from zero value.
 
-  useEffect(() => {
-    if (borderStyle !== 'none') {
-      setStyleSelection(borderStyle);
-    }
-  }, [borderStyle]);
-  useEffect(() => {
-    if (borderColor || customBorderColor) {
-      setColorSelection({
-        name: !!borderColor ? borderColor : undefined,
-        color: !!customBorderColor ? customBorderColor : undefined
-      });
-    }
-  }, [borderColor, customBorderColor]);
+  const [styleSelection, setStyleSelection] = useState();
+  const [colorSelection, setColorSelection] = useState();
+  const [customColorSelection, setCustomColorSelection] = useState();
 
   const onChange = newWidth => {
     let newStyle = { ...style,
@@ -60,28 +49,38 @@ export const BorderWidthEdit = props => {
     }; // Used to clear named border color attribute.
 
     let borderPaletteColor = borderColor;
-    const hasZeroWidth = parseFloat(newWidth) === 0; // Setting the border width explicitly to zero will also set the
+    const hasZeroWidth = parseFloat(newWidth) === 0;
+    const hadPreviousZeroWidth = parseFloat(width) === 0; // Setting the border width explicitly to zero will also set the
     // border style to `none` and clear border color attributes.
 
-    if (hasZeroWidth) {
+    if (hasZeroWidth && !hadPreviousZeroWidth) {
+      // Before clearing color and style selections, keep track of
+      // the current selections so they can be restored when the width
+      // changes to a non-zero value.
+      setColorSelection(borderColor);
+      setCustomColorSelection(customBorderColor);
+      setStyleSelection(borderStyle); // Clear style and color attributes.
+
       borderPaletteColor = undefined;
       newStyle.border.color = undefined;
       newStyle.border.style = 'none';
-    } // Restore previous border style selection if width is now not zero and
-    // border style was 'none'. This is to support changes to the UI which
-    // change the border style UI to a segmented control without a "none"
-    // option.
-
+    }
 
-    if (!hasZeroWidth && borderStyle === 'none') {
-      newStyle.border.style = styleSelection;
-    } // Restore previous border color selection if width is no longer zero
-    // and current border color is undefined.
+    if (!hasZeroWidth && hadPreviousZeroWidth) {
+      // Restore previous border style selection if width is now not zero and
+      // border style was 'none'. This is to support changes to the UI which
+      // change the border style UI to a segmented control without a "none"
+      // option.
+      if (borderStyle === 'none') {
+        newStyle.border.style = styleSelection;
+      } // Restore previous border color selection if width is no longer zero
+      // and current border color is undefined.
 
 
-    if (!hasZeroWidth && borderColor === undefined) {
-      borderPaletteColor = colorSelection === null || colorSelection === void 0 ? void 0 : colorSelection.name;
-      newStyle.border.color = colorSelection === null || colorSelection === void 0 ? void 0 : colorSelection.color;
+      if (borderColor === undefined) {
+        borderPaletteColor = colorSelection;
+        newStyle.border.color = customColorSelection;
+      }
     } // If width was reset, clean out undefined styles.
 
 
@@ -106,4 +105,39 @@ export const BorderWidthEdit = props => {
     units: units
   });
 };
+/**
+ * Checks if there is a current value in the border width block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border width value set.
+ */
+
+export function hasBorderWidthValue(props) {
+  var _props$attributes$sty, _props$attributes$sty2;
+
+  return !!((_props$attributes$sty = props.attributes.style) !== null && _props$attributes$sty !== void 0 && (_props$attributes$sty2 = _props$attributes$sty.border) !== null && _props$attributes$sty2 !== void 0 && _props$attributes$sty2.width);
+}
+/**
+ * Resets the border width block support attribute. This can be used when
+ * disabling the border width support control for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+
+export function resetBorderWidth(_ref) {
+  let {
+    attributes = {},
+    setAttributes
+  } = _ref;
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    style: removeBorderAttribute(style, 'width')
+  });
+}
 //# sourceMappingURL=border-width.js.map

package/build-module/hooks/border-width.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/border-width.js"],"names":["__experimentalUnitControl","UnitControl","__experimentalUseCustomUnits","useCustomUnits","useEffect","useState","__","cleanEmptyObject","useSetting","MIN_BORDER_WIDTH","BorderWidthEdit","props","attributes","borderColor","style","setAttributes","width","color","customBorderColor","borderStyle","border","styleSelection","setStyleSelection","colorSelection","setColorSelection","name","undefined","onChange","newWidth","newStyle","borderPaletteColor","hasZeroWidth","parseFloat","units","availableUnits"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { cleanEmptyObject } from './utils';\nimport useSetting from '../components/use-setting';\n\nconst MIN_BORDER_WIDTH = 0;\n\n/**\n * Inspector control for configuring border width property.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Border width edit element.\n */\nexport const BorderWidthEdit = ( props ) => {\n\tconst {\n\t\tattributes: { borderColor, style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst { width, color: customBorderColor, style: borderStyle } =\n\t\tstyle?.border || {};\n\tconst [ styleSelection, setStyleSelection ] = useState();\n\tconst [ colorSelection, setColorSelection ] = useState();\n\n\t// Temporarily track previous border color & style selections to be able to\n\t// restore them when border width changes from zero value.\n\tuseEffect( () => {\n\t\tif ( borderStyle !== 'none' ) {\n\t\t\tsetStyleSelection( borderStyle );\n\t\t}\n\t}, [ borderStyle ] );\n\n\tuseEffect( () => {\n\t\tif ( borderColor || customBorderColor ) {\n\t\t\tsetColorSelection( {\n\t\t\t\tname: !! borderColor ? borderColor : undefined,\n\t\t\t\tcolor: !! customBorderColor ? customBorderColor : undefined,\n\t\t\t} );\n\t\t}\n\t}, [ borderColor, customBorderColor ] );\n\n\tconst onChange = ( newWidth ) => {\n\t\tlet newStyle = {\n\t\t\t...style,\n\t\t\tborder: {\n\t\t\t\t...style?.border,\n\t\t\t\twidth: newWidth,\n\t\t\t},\n\t\t};\n\n\t\t// Used to clear named border color attribute.\n\t\tlet borderPaletteColor = borderColor;\n\n\t\tconst hasZeroWidth = parseFloat( newWidth ) === 0;\n\n\t\t// Setting the border width explicitly to zero will also set the\n\t\t// border style to `none` and clear border color attributes.\n\t\tif ( hasZeroWidth ) {\n\t\t\tborderPaletteColor = undefined;\n\t\t\tnewStyle.border.color = undefined;\n\t\t\tnewStyle.border.style = 'none';\n\t\t}\n\n\t\t// Restore previous border style selection if width is now not zero and\n\t\t// border style was 'none'. This is to support changes to the UI which\n\t\t// change the border style UI to a segmented control without a \"none\"\n\t\t// option.\n\t\tif ( ! hasZeroWidth && borderStyle === 'none' ) {\n\t\t\tnewStyle.border.style = styleSelection;\n\t\t}\n\n\t\t// Restore previous border color selection if width is no longer zero\n\t\t// and current border color is undefined.\n\t\tif ( ! hasZeroWidth && borderColor === undefined ) {\n\t\t\tborderPaletteColor = colorSelection?.name;\n\t\t\tnewStyle.border.color = colorSelection?.color;\n\t\t}\n\n\t\t// If width was reset, clean out undefined styles.\n\t\tif ( newWidth === undefined || newWidth === '' ) {\n\t\t\tnewStyle = cleanEmptyObject( newStyle );\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tborderColor: borderPaletteColor,\n\t\t\tstyle: newStyle,\n\t\t} );\n\t};\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\treturn (\n\t\t<UnitControl\n\t\t\tvalue={ width }\n\t\t\tlabel={ __( 'Width' ) }\n\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\tonChange={ onChange }\n\t\t\tunits={ units }\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/border-width.js"],"names":["__experimentalUnitControl","UnitControl","__experimentalUseCustomUnits","useCustomUnits","useState","__","cleanEmptyObject","removeBorderAttribute","useSetting","MIN_BORDER_WIDTH","BorderWidthEdit","props","attributes","borderColor","style","setAttributes","width","color","customBorderColor","borderStyle","border","styleSelection","setStyleSelection","colorSelection","setColorSelection","customColorSelection","setCustomColorSelection","onChange","newWidth","newStyle","borderPaletteColor","hasZeroWidth","parseFloat","hadPreviousZeroWidth","undefined","units","availableUnits","hasBorderWidthValue","resetBorderWidth"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\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 { cleanEmptyObject } from './utils';\nimport { removeBorderAttribute } from './border';\nimport useSetting from '../components/use-setting';\n\nconst MIN_BORDER_WIDTH = 0;\n\n/**\n * Inspector control for configuring border width property.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Border width edit element.\n */\nexport const BorderWidthEdit = ( props ) => {\n\tconst {\n\t\tattributes: { borderColor, style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst { width, color: customBorderColor, style: borderStyle } =\n\t\tstyle?.border || {};\n\n\t// Used to temporarily track previous border color & style selections to be\n\t// able to restore them when border width changes from zero value.\n\tconst [ styleSelection, setStyleSelection ] = useState();\n\tconst [ colorSelection, setColorSelection ] = useState();\n\tconst [ customColorSelection, setCustomColorSelection ] = useState();\n\n\tconst onChange = ( newWidth ) => {\n\t\tlet newStyle = {\n\t\t\t...style,\n\t\t\tborder: {\n\t\t\t\t...style?.border,\n\t\t\t\twidth: newWidth,\n\t\t\t},\n\t\t};\n\n\t\t// Used to clear named border color attribute.\n\t\tlet borderPaletteColor = borderColor;\n\n\t\tconst hasZeroWidth = parseFloat( newWidth ) === 0;\n\t\tconst hadPreviousZeroWidth = parseFloat( width ) === 0;\n\n\t\t// Setting the border width explicitly to zero will also set the\n\t\t// border style to `none` and clear border color attributes.\n\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t// Before clearing color and style selections, keep track of\n\t\t\t// the current selections so they can be restored when the width\n\t\t\t// changes to a non-zero value.\n\t\t\tsetColorSelection( borderColor );\n\t\t\tsetCustomColorSelection( customBorderColor );\n\t\t\tsetStyleSelection( borderStyle );\n\n\t\t\t// Clear style and color attributes.\n\t\t\tborderPaletteColor = undefined;\n\t\t\tnewStyle.border.color = undefined;\n\t\t\tnewStyle.border.style = 'none';\n\t\t}\n\n\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t// Restore previous border style selection if width is now not zero and\n\t\t\t// border style was 'none'. This is to support changes to the UI which\n\t\t\t// change the border style UI to a segmented control without a \"none\"\n\t\t\t// option.\n\t\t\tif ( borderStyle === 'none' ) {\n\t\t\t\tnewStyle.border.style = styleSelection;\n\t\t\t}\n\n\t\t\t// Restore previous border color selection if width is no longer zero\n\t\t\t// and current border color is undefined.\n\t\t\tif ( borderColor === undefined ) {\n\t\t\t\tborderPaletteColor = colorSelection;\n\t\t\t\tnewStyle.border.color = customColorSelection;\n\t\t\t}\n\t\t}\n\n\t\t// If width was reset, clean out undefined styles.\n\t\tif ( newWidth === undefined || newWidth === '' ) {\n\t\t\tnewStyle = cleanEmptyObject( newStyle );\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tborderColor: borderPaletteColor,\n\t\t\tstyle: newStyle,\n\t\t} );\n\t};\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\treturn (\n\t\t<UnitControl\n\t\t\tvalue={ width }\n\t\t\tlabel={ __( 'Width' ) }\n\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\tonChange={ onChange }\n\t\t\tunits={ units }\n\t\t/>\n\t);\n};\n\n/**\n * Checks if there is a current value in the border width block support\n * attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a border width value set.\n */\nexport function hasBorderWidthValue( props ) {\n\treturn !! props.attributes.style?.border?.width;\n}\n\n/**\n * Resets the border width block support attribute. This can be used when\n * disabling the border width support control for a block via a progressive\n * discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetBorderWidth( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\tsetAttributes( { style: removeBorderAttribute( style, 'width' ) } );\n}\n"]}

package/build-module/hooks/border.js

@@ -4,21 +4,25 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
+import { BorderColorEdit, hasBorderColorValue, resetBorderColor } from './border-color';
+import { BorderRadiusEdit, hasBorderRadiusValue, resetBorderRadius } from './border-radius';
+import { BorderStyleEdit, hasBorderStyleValue, resetBorderStyle } from './border-style';
+import { BorderWidthEdit, hasBorderWidthValue, resetBorderWidth } from './border-width';
 import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
-import { BorderColorEdit } from './border-color';
-import { BorderRadiusEdit } from './border-radius';
-import { BorderStyleEdit } from './border-style';
-import { BorderWidthEdit } from './border-width';
+import { cleanEmptyObject } from './utils';
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export function BorderPanel(props) {
+  const {
+    clientId
+  } = props;
   const isDisabled = useIsBorderDisabled(props);
   const isSupported = hasBorderSupport(props.name);
   const isColorSupported = useSetting('border.color') && hasBorderSupport(props.name, 'color');
@@ -30,13 +34,59 @@ export function BorderPanel(props) {
     return null;
   }
 
-  return createElement(InspectorControls, null, createElement(PanelBody, {
-    className: "block-editor-hooks__border-controls",
-    title: __('Border'),
-    initialOpen: false
-  }, (isWidthSupported || isStyleSupported) && createElement("div", {
-    className: "block-editor-hooks__border-controls-row"
-  }, isWidthSupported && createElement(BorderWidthEdit, props), isStyleSupported && createElement(BorderStyleEdit, props)), isColorSupported && createElement(BorderColorEdit, props), isRadiusSupported && createElement(BorderRadiusEdit, props)));
+  const defaultBorderControls = getBlockSupport(props.name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']);
+
+  const createResetAllFilter = function (borderAttribute) {
+    let topLevelAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return newAttributes => {
+      var _newAttributes$style;
+
+      return { ...newAttributes,
+        ...topLevelAttributes,
+        style: { ...newAttributes.style,
+          border: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.border),
+            [borderAttribute]: undefined
+          }
+        }
+      };
+    };
+  };
+
+  return createElement(InspectorControls, {
+    __experimentalGroup: "border"
+  }, isWidthSupported && createElement(ToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => hasBorderWidthValue(props),
+    label: __('Width'),
+    onDeselect: () => resetBorderWidth(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.width,
+    resetAllFilter: createResetAllFilter('width'),
+    panelId: clientId
+  }, createElement(BorderWidthEdit, props)), isStyleSupported && createElement(ToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => hasBorderStyleValue(props),
+    label: __('Style'),
+    onDeselect: () => resetBorderStyle(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.style,
+    resetAllFilter: createResetAllFilter('style'),
+    panelId: clientId
+  }, createElement(BorderStyleEdit, props)), isColorSupported && createElement(ToolsPanelItem, {
+    hasValue: () => hasBorderColorValue(props),
+    label: __('Color'),
+    onDeselect: () => resetBorderColor(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.color,
+    resetAllFilter: createResetAllFilter('color', {
+      borderColor: undefined
+    }),
+    panelId: clientId
+  }, createElement(BorderColorEdit, props)), isRadiusSupported && createElement(ToolsPanelItem, {
+    hasValue: () => hasBorderRadiusValue(props),
+    label: __('Radius'),
+    onDeselect: () => resetBorderRadius(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.radius,
+    resetAllFilter: createResetAllFilter('radius'),
+    panelId: clientId
+  }, createElement(BorderRadiusEdit, props)));
 }
 /**
  * Determine whether there is block support for border properties.
@@ -88,4 +138,22 @@ const useIsBorderDisabled = () => {
   const configs = [!useSetting('border.color'), !useSetting('border.radius'), !useSetting('border.style'), !useSetting('border.width')];
   return configs.every(Boolean);
 };
+/**
+ * Returns a new style object where the specified border attribute has been
+ * removed.
+ *
+ * @param {Object} style     Styles from block attributes.
+ * @param {string} attribute The border style attribute to clear.
+ *
+ * @return {Object} Style object with the specified attribute removed.
+ */
+
+
+export function removeBorderAttribute(style, attribute) {
+  return cleanEmptyObject({ ...style,
+    border: { ...(style === null || style === void 0 ? void 0 : style.border),
+      [attribute]: undefined
+    }
+  });
+}
 //# sourceMappingURL=border.js.map

package/build-module/hooks/border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/border.js"],"names":["getBlockSupport","PanelBody","Platform","__","InspectorControls","useSetting","BorderColorEdit","BorderRadiusEdit","BorderStyleEdit","BorderWidthEdit","BORDER_SUPPORT_KEY","BorderPanel","props","isDisabled","useIsBorderDisabled","isSupported","hasBorderSupport","name","isColorSupported","isRadiusSupported","isStyleSupported","isWidthSupported","blockName","feature","OS","support","color","radius","width","style","shouldSkipSerialization","blockType","__experimentalSkipSerialization","configs","every","Boolean"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { PanelBody } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport useSetting from '../components/use-setting';\nimport { BorderColorEdit } from './border-color';\nimport { BorderRadiusEdit } from './border-radius';\nimport { BorderStyleEdit } from './border-style';\nimport { BorderWidthEdit } from './border-width';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nexport function BorderPanel( props ) {\n\tconst isDisabled = useIsBorderDisabled( props );\n\tconst isSupported = hasBorderSupport( props.name );\n\n\tconst isColorSupported =\n\t\tuseSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );\n\n\tconst isRadiusSupported =\n\t\tuseSetting( 'border.radius' ) &&\n\t\thasBorderSupport( props.name, 'radius' );\n\n\tconst isStyleSupported =\n\t\tuseSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );\n\n\tconst isWidthSupported =\n\t\tuseSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelBody\n\t\t\t\tclassName=\"block-editor-hooks__border-controls\"\n\t\t\t\ttitle={ __( 'Border' ) }\n\t\t\t\tinitialOpen={ false }\n\t\t\t>\n\t\t\t\t{ ( isWidthSupported || isStyleSupported ) && (\n\t\t\t\t\t<div className=\"block-editor-hooks__border-controls-row\">\n\t\t\t\t\t\t{ isWidthSupported && <BorderWidthEdit { ...props } /> }\n\t\t\t\t\t\t{ isStyleSupported && <BorderStyleEdit { ...props } /> }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isColorSupported && <BorderColorEdit { ...props } /> }\n\t\t\t\t{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Check whether serialization of border classes and styles should be skipped.\n *\n * @param {string|Object} blockType Block name or block type object.\n *\n * @return {boolean} Whether serialization of border properties should occur.\n */\nexport function shouldSkipSerialization( blockType ) {\n\tconst support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );\n\n\treturn support?.__experimentalSkipSerialization;\n}\n\n/**\n * Determines if all border support features have been disabled.\n *\n * @return {boolean} If border support is completely disabled.\n */\nconst useIsBorderDisabled = () => {\n\tconst configs = [\n\t\t! useSetting( 'border.color' ),\n\t\t! useSetting( 'border.radius' ),\n\t\t! useSetting( 'border.style' ),\n\t\t! useSetting( 'border.width' ),\n\t];\n\n\treturn configs.every( Boolean );\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/border.js"],"names":["getBlockSupport","__experimentalToolsPanelItem","ToolsPanelItem","Platform","__","BorderColorEdit","hasBorderColorValue","resetBorderColor","BorderRadiusEdit","hasBorderRadiusValue","resetBorderRadius","BorderStyleEdit","hasBorderStyleValue","resetBorderStyle","BorderWidthEdit","hasBorderWidthValue","resetBorderWidth","InspectorControls","useSetting","cleanEmptyObject","BORDER_SUPPORT_KEY","BorderPanel","props","clientId","isDisabled","useIsBorderDisabled","isSupported","hasBorderSupport","name","isColorSupported","isRadiusSupported","isStyleSupported","isWidthSupported","defaultBorderControls","createResetAllFilter","borderAttribute","topLevelAttributes","newAttributes","style","border","undefined","width","color","borderColor","radius","blockName","feature","OS","support","shouldSkipSerialization","blockType","__experimentalSkipSerialization","configs","every","Boolean","removeBorderAttribute","attribute"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBorderColorEdit,\n\thasBorderColorValue,\n\tresetBorderColor,\n} from './border-color';\nimport {\n\tBorderRadiusEdit,\n\thasBorderRadiusValue,\n\tresetBorderRadius,\n} from './border-radius';\nimport {\n\tBorderStyleEdit,\n\thasBorderStyleValue,\n\tresetBorderStyle,\n} from './border-style';\nimport {\n\tBorderWidthEdit,\n\thasBorderWidthValue,\n\tresetBorderWidth,\n} from './border-width';\nimport InspectorControls from '../components/inspector-controls';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject } from './utils';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nexport function BorderPanel( props ) {\n\tconst { clientId } = props;\n\tconst isDisabled = useIsBorderDisabled( props );\n\tconst isSupported = hasBorderSupport( props.name );\n\n\tconst isColorSupported =\n\t\tuseSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );\n\n\tconst isRadiusSupported =\n\t\tuseSetting( 'border.radius' ) &&\n\t\thasBorderSupport( props.name, 'radius' );\n\n\tconst isStyleSupported =\n\t\tuseSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );\n\n\tconst isWidthSupported =\n\t\tuseSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultBorderControls = getBlockSupport( props.name, [\n\t\tBORDER_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter = (\n\t\tborderAttribute,\n\t\ttopLevelAttributes = {}\n\t) => ( newAttributes ) => ( {\n\t\t...newAttributes,\n\t\t...topLevelAttributes,\n\t\tstyle: {\n\t\t\t...newAttributes.style,\n\t\t\tborder: {\n\t\t\t\t...newAttributes.style?.border,\n\t\t\t\t[ borderAttribute ]: undefined,\n\t\t\t},\n\t\t},\n\t} );\n\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"border\">\n\t\t\t{ isWidthSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ () => hasBorderWidthValue( props ) }\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderWidth( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.width }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'width' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderWidthEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isStyleSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ () => hasBorderStyleValue( props ) }\n\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderStyle( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.style }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'style' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderStyleEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isColorSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderColorValue( props ) }\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderColor( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.color }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'color', {\n\t\t\t\t\t\tborderColor: undefined,\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderColorEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isRadiusSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderRadiusValue( props ) }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderRadius( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.radius }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'radius' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Check whether serialization of border classes and styles should be skipped.\n *\n * @param {string|Object} blockType Block name or block type object.\n *\n * @return {boolean} Whether serialization of border properties should occur.\n */\nexport function shouldSkipSerialization( blockType ) {\n\tconst support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );\n\n\treturn support?.__experimentalSkipSerialization;\n}\n\n/**\n * Determines if all border support features have been disabled.\n *\n * @return {boolean} If border support is completely disabled.\n */\nconst useIsBorderDisabled = () => {\n\tconst configs = [\n\t\t! useSetting( 'border.color' ),\n\t\t! useSetting( 'border.radius' ),\n\t\t! useSetting( 'border.style' ),\n\t\t! useSetting( 'border.width' ),\n\t];\n\n\treturn configs.every( Boolean );\n};\n\n/**\n * Returns a new style object where the specified border attribute has been\n * removed.\n *\n * @param {Object} style     Styles from block attributes.\n * @param {string} attribute The border style attribute to clear.\n *\n * @return {Object} Style object with the specified attribute removed.\n */\nexport function removeBorderAttribute( style, attribute ) {\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tborder: {\n\t\t\t...style?.border,\n\t\t\t[ attribute ]: undefined,\n\t\t},\n\t} );\n}\n"]}

package/build-module/hooks/color-panel.js

@@ -20,6 +20,7 @@ function getComputedStyle(node) {
 
 export default function ColorPanel(_ref) {
   let {
+    enableAlpha = false,
     settings,
     clientId,
     enableContrastChecking = true,
@@ -53,11 +54,13 @@ export default function ColorPanel(_ref) {
     initialOpen: false,
     settings: settings,
     showTitle: showTitle,
+    enableAlpha: enableAlpha,
     __experimentalHasMultipleOrigins: true,
     __experimentalIsRenderedInSidebar: true
   }, enableContrastChecking && createElement(ContrastChecker, {
     backgroundColor: detectedBackgroundColor,
-    textColor: detectedColor
+    textColor: detectedColor,
+    enableAlphaChecker: enableAlpha
   })));
 }
 //# sourceMappingURL=color-panel.js.map

package/build-module/hooks/color-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/color-panel.js"],"names":["useState","useEffect","__","PanelColorGradientSettings","ContrastChecker","InspectorControls","__unstableUseBlockRef","useBlockRef","getComputedStyle","node","ownerDocument","defaultView","ColorPanel","settings","clientId","enableContrastChecking","showTitle","detectedBackgroundColor","setDetectedBackgroundColor","detectedColor","setDetectedColor","ref","current","color","backgroundColorNode","backgroundColor","parentNode","nodeType","ELEMENT_NODE"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,oBAApC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,0BAAP,MAAuC,8DAAvC;AACA,OAAOC,eAAP,MAA4B,gCAA5B;AACA,OAAOC,iBAAP,MAA8B,kCAA9B;AACA,SAASC,qBAAqB,IAAIC,WAAlC,QAAqD,yDAArD;;AAEA,SAASC,gBAAT,CAA2BC,IAA3B,EAAkC;AACjC,SAAOA,IAAI,CAACC,aAAL,CAAmBC,WAAnB,CAA+BH,gBAA/B,CAAiDC,IAAjD,CAAP;AACA;;AAED,eAAe,SAASG,UAAT,OAKX;AAAA,MALgC;AACnCC,IAAAA,QADmC;AAEnCC,IAAAA,QAFmC;AAGnCC,IAAAA,sBAAsB,GAAG,IAHU;AAInCC,IAAAA,SAAS,GAAG;AAJuB,GAKhC;AACH,QAAM,CAAEC,uBAAF,EAA2BC,0BAA3B,IAA0DlB,QAAQ,EAAxE;AACA,QAAM,CAAEmB,aAAF,EAAiBC,gBAAjB,IAAsCpB,QAAQ,EAApD;AACA,QAAMqB,GAAG,GAAGd,WAAW,CAAEO,QAAF,CAAvB;AAEAb,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEc,sBAAP,EAAgC;AAC/B;AACA;;AAED,QAAK,CAAEM,GAAG,CAACC,OAAX,EAAqB;AACpB;AACA;;AACDF,IAAAA,gBAAgB,CAAEZ,gBAAgB,CAAEa,GAAG,CAACC,OAAN,CAAhB,CAAgCC,KAAlC,CAAhB;AAEA,QAAIC,mBAAmB,GAAGH,GAAG,CAACC,OAA9B;AACA,QAAIG,eAAe,GAAGjB,gBAAgB,CAAEgB,mBAAF,CAAhB,CACpBC,eADF;;AAEA,WACCA,eAAe,KAAK,kBAApB,IACAD,mBAAmB,CAACE,UADpB,IAEAF,mBAAmB,CAACE,UAApB,CAA+BC,QAA/B,KACCH,mBAAmB,CAACE,UAApB,CAA+BE,YAJjC,EAKE;AACDJ,MAAAA,mBAAmB,GAAGA,mBAAmB,CAACE,UAA1C;AACAD,MAAAA,eAAe,GAAGjB,gBAAgB,CAAEgB,mBAAF,CAAhB,CAChBC,eADF;AAEA;;AAEDP,IAAAA,0BAA0B,CAAEO,eAAF,CAA1B;AACA,GAzBQ,CAAT;AA2BA,SACC,cAAC,iBAAD,QACC,cAAC,0BAAD;AACC,IAAA,KAAK,EAAGvB,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,WAAW,EAAG,KAFf;AAGC,IAAA,QAAQ,EAAGW,QAHZ;AAIC,IAAA,SAAS,EAAGG,SAJb;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,iCAAiC;AANlC,KAQGD,sBAAsB,IACvB,cAAC,eAAD;AACC,IAAA,eAAe,EAAGE,uBADnB;AAEC,IAAA,SAAS,EAAGE;AAFb,IATF,CADD,CADD;AAmBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';\nimport ContrastChecker from '../components/contrast-checker';\nimport InspectorControls from '../components/inspector-controls';\nimport { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedStyle( node ) {\n\treturn node.ownerDocument.defaultView.getComputedStyle( node );\n}\n\nexport default function ColorPanel( {\n\tsettings,\n\tclientId,\n\tenableContrastChecking = true,\n\tshowTitle = true,\n} ) {\n\tconst [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();\n\tconst [ detectedColor, setDetectedColor ] = useState();\n\tconst ref = useBlockRef( clientId );\n\n\tuseEffect( () => {\n\t\tif ( ! enableContrastChecking ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\t\tsetDetectedColor( getComputedStyle( ref.current ).color );\n\n\t\tlet backgroundColorNode = ref.current;\n\t\tlet backgroundColor = getComputedStyle( backgroundColorNode )\n\t\t\t.backgroundColor;\n\t\twhile (\n\t\t\tbackgroundColor === 'rgba(0, 0, 0, 0)' &&\n\t\t\tbackgroundColorNode.parentNode &&\n\t\t\tbackgroundColorNode.parentNode.nodeType ===\n\t\t\t\tbackgroundColorNode.parentNode.ELEMENT_NODE\n\t\t) {\n\t\t\tbackgroundColorNode = backgroundColorNode.parentNode;\n\t\t\tbackgroundColor = getComputedStyle( backgroundColorNode )\n\t\t\t\t.backgroundColor;\n\t\t}\n\n\t\tsetDetectedBackgroundColor( backgroundColor );\n\t} );\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tinitialOpen={ false }\n\t\t\t\tsettings={ settings }\n\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t>\n\t\t\t\t{ enableContrastChecking && (\n\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\tbackgroundColor={ detectedBackgroundColor }\n\t\t\t\t\t\ttextColor={ detectedColor }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</PanelColorGradientSettings>\n\t\t</InspectorControls>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/color-panel.js"],"names":["useState","useEffect","__","PanelColorGradientSettings","ContrastChecker","InspectorControls","__unstableUseBlockRef","useBlockRef","getComputedStyle","node","ownerDocument","defaultView","ColorPanel","enableAlpha","settings","clientId","enableContrastChecking","showTitle","detectedBackgroundColor","setDetectedBackgroundColor","detectedColor","setDetectedColor","ref","current","color","backgroundColorNode","backgroundColor","parentNode","nodeType","ELEMENT_NODE"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,oBAApC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,0BAAP,MAAuC,8DAAvC;AACA,OAAOC,eAAP,MAA4B,gCAA5B;AACA,OAAOC,iBAAP,MAA8B,kCAA9B;AACA,SAASC,qBAAqB,IAAIC,WAAlC,QAAqD,yDAArD;;AAEA,SAASC,gBAAT,CAA2BC,IAA3B,EAAkC;AACjC,SAAOA,IAAI,CAACC,aAAL,CAAmBC,WAAnB,CAA+BH,gBAA/B,CAAiDC,IAAjD,CAAP;AACA;;AAED,eAAe,SAASG,UAAT,OAMX;AAAA,MANgC;AACnCC,IAAAA,WAAW,GAAG,KADqB;AAEnCC,IAAAA,QAFmC;AAGnCC,IAAAA,QAHmC;AAInCC,IAAAA,sBAAsB,GAAG,IAJU;AAKnCC,IAAAA,SAAS,GAAG;AALuB,GAMhC;AACH,QAAM,CAAEC,uBAAF,EAA2BC,0BAA3B,IAA0DnB,QAAQ,EAAxE;AACA,QAAM,CAAEoB,aAAF,EAAiBC,gBAAjB,IAAsCrB,QAAQ,EAApD;AACA,QAAMsB,GAAG,GAAGf,WAAW,CAAEQ,QAAF,CAAvB;AAEAd,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEe,sBAAP,EAAgC;AAC/B;AACA;;AAED,QAAK,CAAEM,GAAG,CAACC,OAAX,EAAqB;AACpB;AACA;;AACDF,IAAAA,gBAAgB,CAAEb,gBAAgB,CAAEc,GAAG,CAACC,OAAN,CAAhB,CAAgCC,KAAlC,CAAhB;AAEA,QAAIC,mBAAmB,GAAGH,GAAG,CAACC,OAA9B;AACA,QAAIG,eAAe,GAAGlB,gBAAgB,CAAEiB,mBAAF,CAAhB,CACpBC,eADF;;AAEA,WACCA,eAAe,KAAK,kBAApB,IACAD,mBAAmB,CAACE,UADpB,IAEAF,mBAAmB,CAACE,UAApB,CAA+BC,QAA/B,KACCH,mBAAmB,CAACE,UAApB,CAA+BE,YAJjC,EAKE;AACDJ,MAAAA,mBAAmB,GAAGA,mBAAmB,CAACE,UAA1C;AACAD,MAAAA,eAAe,GAAGlB,gBAAgB,CAAEiB,mBAAF,CAAhB,CAChBC,eADF;AAEA;;AAEDP,IAAAA,0BAA0B,CAAEO,eAAF,CAA1B;AACA,GAzBQ,CAAT;AA2BA,SACC,cAAC,iBAAD,QACC,cAAC,0BAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,WAAW,EAAG,KAFf;AAGC,IAAA,QAAQ,EAAGY,QAHZ;AAIC,IAAA,SAAS,EAAGG,SAJb;AAKC,IAAA,WAAW,EAAGJ,WALf;AAMC,IAAA,gCAAgC,MANjC;AAOC,IAAA,iCAAiC;AAPlC,KASGG,sBAAsB,IACvB,cAAC,eAAD;AACC,IAAA,eAAe,EAAGE,uBADnB;AAEC,IAAA,SAAS,EAAGE,aAFb;AAGC,IAAA,kBAAkB,EAAGP;AAHtB,IAVF,CADD,CADD;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';\nimport ContrastChecker from '../components/contrast-checker';\nimport InspectorControls from '../components/inspector-controls';\nimport { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedStyle( node ) {\n\treturn node.ownerDocument.defaultView.getComputedStyle( node );\n}\n\nexport default function ColorPanel( {\n\tenableAlpha = false,\n\tsettings,\n\tclientId,\n\tenableContrastChecking = true,\n\tshowTitle = true,\n} ) {\n\tconst [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();\n\tconst [ detectedColor, setDetectedColor ] = useState();\n\tconst ref = useBlockRef( clientId );\n\n\tuseEffect( () => {\n\t\tif ( ! enableContrastChecking ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\t\tsetDetectedColor( getComputedStyle( ref.current ).color );\n\n\t\tlet backgroundColorNode = ref.current;\n\t\tlet backgroundColor = getComputedStyle( backgroundColorNode )\n\t\t\t.backgroundColor;\n\t\twhile (\n\t\t\tbackgroundColor === 'rgba(0, 0, 0, 0)' &&\n\t\t\tbackgroundColorNode.parentNode &&\n\t\t\tbackgroundColorNode.parentNode.nodeType ===\n\t\t\t\tbackgroundColorNode.parentNode.ELEMENT_NODE\n\t\t) {\n\t\t\tbackgroundColorNode = backgroundColorNode.parentNode;\n\t\t\tbackgroundColor = getComputedStyle( backgroundColorNode )\n\t\t\t\t.backgroundColor;\n\t\t}\n\n\t\tsetDetectedBackgroundColor( backgroundColor );\n\t} );\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tinitialOpen={ false }\n\t\t\t\tsettings={ settings }\n\t\t\t\tshowTitle={ showTitle }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t>\n\t\t\t\t{ enableContrastChecking && (\n\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\tbackgroundColor={ detectedBackgroundColor }\n\t\t\t\t\t\ttextColor={ detectedColor }\n\t\t\t\t\t\tenableAlphaChecker={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</PanelColorGradientSettings>\n\t\t</InspectorControls>\n\t);\n}\n"]}

package/build-module/hooks/color-panel.native.js

@@ -0,0 +1,62 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+
+import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+
+const ColorPanel = _ref => {
+  let {
+    settings
+  } = _ref;
+  const globalStyles = useGlobalStyles();
+  const [detectedBackgroundColor, setDetectedBackgroundColor] = useState();
+  const [detectedTextColor, setDetectedTextColor] = useState();
+  const {
+    baseGlobalStyles
+  } = useSelect(select => {
+    var _getSettings, _getSettings$__experi;
+
+    const {
+      getSettings
+    } = select(blockEditorStore);
+    return {
+      baseGlobalStyles: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : (_getSettings$__experi = _getSettings.__experimentalGlobalStylesBaseStyles) === null || _getSettings$__experi === void 0 ? void 0 : _getSettings$__experi.color
+    };
+  });
+  useEffect(() => {
+    // The following logic is used to determine current text/background colors:
+    // 1. The globalStyles object is queried to determine whether a color has been
+    // set via a block's settings.
+    // 2. If a block-based theme is in use and no globalStyles exist, the theme's
+    // default/base colors are used.
+    // 3. If no globalStyles exist and a theme isn't block-based, there is no way
+    // to determine the default text/background color and the checker won't run.
+    const textColor = (globalStyles === null || globalStyles === void 0 ? void 0 : globalStyles.color) || (baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.text);
+    const backgroundColor = (globalStyles === null || globalStyles === void 0 ? void 0 : globalStyles.backgroundColor) || (baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.background);
+    setDetectedTextColor(textColor);
+    setDetectedBackgroundColor(backgroundColor);
+  }, [globalStyles, baseGlobalStyles]);
+  return createElement(InspectorControls, null, createElement(PanelColorGradientSettings, {
+    title: __('Color'),
+    initialOpen: false,
+    settings: settings
+  }, createElement(ContrastChecker, {
+    backgroundColor: detectedBackgroundColor,
+    textColor: detectedTextColor
+  })));
+};
+
+export default ColorPanel;
+//# sourceMappingURL=color-panel.native.js.map

package/build-module/hooks/color-panel.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/color-panel.native.js"],"names":["useSelect","useEffect","useState","__","useGlobalStyles","store","blockEditorStore","PanelColorGradientSettings","ContrastChecker","InspectorControls","ColorPanel","settings","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","__experimentalGlobalStylesBaseStyles","color","textColor","text","backgroundColor","background"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,oBAApC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,eAAT,QAAgC,uBAAhC;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,yBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,0BAAP,MAAuC,8DAAvC;AACA,OAAOC,eAAP,MAA4B,gCAA5B;AACA,OAAOC,iBAAP,MAA8B,kCAA9B;;AAEA,MAAMC,UAAU,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AACtC,QAAMC,YAAY,GAAGR,eAAe,EAApC;AAEA,QAAM,CAAES,uBAAF,EAA2BC,0BAA3B,IAA0DZ,QAAQ,EAAxE;AACA,QAAM,CAAEa,iBAAF,EAAqBC,oBAArB,IAA8Cd,QAAQ,EAA5D;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAuBjB,SAAS,CAAIkB,MAAF,IAAc;AAAA;;AACrD,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,MAAM,CAAEZ,gBAAF,CAA9B;AACA,WAAO;AACNW,MAAAA,gBAAgB,kBAAEE,WAAW,EAAb,0EAAE,aACfC,oCADa,0DAAE,sBACuBC;AAFnC,KAAP;AAIA,GANqC,CAAtC;AAQApB,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAMqB,SAAS,GAAG,CAAAV,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAES,KAAd,MAAuBJ,gBAAvB,aAAuBA,gBAAvB,uBAAuBA,gBAAgB,CAAEM,IAAzC,CAAlB;AACA,UAAMC,eAAe,GACpB,CAAAZ,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEY,eAAd,MAAiCP,gBAAjC,aAAiCA,gBAAjC,uBAAiCA,gBAAgB,CAAEQ,UAAnD,CADD;AAGAT,IAAAA,oBAAoB,CAAEM,SAAF,CAApB;AACAR,IAAAA,0BAA0B,CAAEU,eAAF,CAA1B;AACA,GAdQ,EAcN,CAAEZ,YAAF,EAAgBK,gBAAhB,CAdM,CAAT;AAgBA,SACC,cAAC,iBAAD,QACC,cAAC,0BAAD;AACC,IAAA,KAAK,EAAGd,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,WAAW,EAAG,KAFf;AAGC,IAAA,QAAQ,EAAGQ;AAHZ,KAKC,cAAC,eAAD;AACC,IAAA,eAAe,EAAGE,uBADnB;AAEC,IAAA,SAAS,EAAGE;AAFb,IALD,CADD,CADD;AAcA,CA5CD;;AA8CA,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useGlobalStyles } from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';\nimport ContrastChecker from '../components/contrast-checker';\nimport InspectorControls from '../components/inspector-controls';\n\nconst ColorPanel = ( { settings } ) => {\n\tconst globalStyles = useGlobalStyles();\n\n\tconst [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();\n\tconst [ detectedTextColor, setDetectedTextColor ] = useState();\n\n\tconst { baseGlobalStyles } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tbaseGlobalStyles: getSettings()\n\t\t\t\t?.__experimentalGlobalStylesBaseStyles?.color,\n\t\t};\n\t} );\n\n\tuseEffect( () => {\n\t\t// The following logic is used to determine current text/background colors:\n\t\t// 1. The globalStyles object is queried to determine whether a color has been\n\t\t// set via a block's settings.\n\t\t// 2. If a block-based theme is in use and no globalStyles exist, the theme's\n\t\t// default/base colors are used.\n\t\t// 3. If no globalStyles exist and a theme isn't block-based, there is no way\n\t\t// to determine the default text/background color and the checker won't run.\n\t\tconst textColor = globalStyles?.color || baseGlobalStyles?.text;\n\t\tconst backgroundColor =\n\t\t\tglobalStyles?.backgroundColor || baseGlobalStyles?.background;\n\n\t\tsetDetectedTextColor( textColor );\n\t\tsetDetectedBackgroundColor( backgroundColor );\n\t}, [ globalStyles, baseGlobalStyles ] );\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tinitialOpen={ false }\n\t\t\t\tsettings={ settings }\n\t\t\t>\n\t\t\t\t<ContrastChecker\n\t\t\t\t\tbackgroundColor={ detectedBackgroundColor }\n\t\t\t\t\ttextColor={ detectedTextColor }\n\t\t\t\t/>\n\t\t\t</PanelColorGradientSettings>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default ColorPanel;\n"]}

package/build-module/hooks/color.js

@@ -322,22 +322,23 @@ export function ColorEdit(props) {
     });
   };
 
+  const enableContrastChecking = Platform.OS === 'web' && !gradient && !(style !== null && style !== void 0 && (_style$color6 = style.color) !== null && _style$color6 !== void 0 && _style$color6.gradient);
   return createElement(ColorPanel, {
-    enableContrastChecking: // Turn on contrast checker for web only since it's not supported on mobile yet.
-    Platform.OS === 'web' && !gradient && !(style !== null && style !== void 0 && (_style$color6 = style.color) !== null && _style$color6 !== void 0 && _style$color6.gradient),
+    enableContrastChecking: enableContrastChecking,
     clientId: props.clientId,
+    enableAlpha: true,
     settings: [...(hasTextColor ? [{
-      label: __('Text color'),
+      label: __('Text'),
       onColorChange: onChangeColor('text'),
       colorValue: getColorObjectByAttributeValues(allSolids, textColor, style === null || style === void 0 ? void 0 : (_style$color7 = style.color) === null || _style$color7 === void 0 ? void 0 : _style$color7.text).color
     }] : []), ...(hasBackgroundColor || hasGradientColor ? [{
-      label: __('Background color'),
+      label: __('Background'),
       onColorChange: hasBackgroundColor ? onChangeColor('background') : undefined,
       colorValue: getColorObjectByAttributeValues(allSolids, backgroundColor, style === null || style === void 0 ? void 0 : (_style$color8 = style.color) === null || _style$color8 === void 0 ? void 0 : _style$color8.background).color,
       gradientValue,
       onGradientChange: hasGradientColor ? onChangeGradient : undefined
     }] : []), ...(hasLinkColor ? [{
-      label: __('Link Color'),
+      label: __('Link'),
       onColorChange: onChangeLinkColor,
       colorValue: getLinkColorFromAttributeValue(allSolids, style === null || style === void 0 ? void 0 : (_style$elements2 = style.elements) === null || _style$elements2 === void 0 ? void 0 : (_style$elements2$link = _style$elements2.link) === null || _style$elements2$link === void 0 ? void 0 : (_style$elements2$link2 = _style$elements2$link.color) === null || _style$elements2$link2 === void 0 ? void 0 : _style$elements2$link2.text),
       clearable: !!(style !== null && style !== void 0 && (_style$elements3 = style.elements) !== null && _style$elements3 !== void 0 && (_style$elements3$link = _style$elements3.link) !== null && _style$elements3$link !== void 0 && (_style$elements3$link2 = _style$elements3$link.color) !== null && _style$elements3$link2 !== void 0 && _style$elements3$link2.text)