@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/build/hooks/border-width.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BorderWidthEdit = void 0;
+exports.hasBorderWidthValue = hasBorderWidthValue;
+exports.resetBorderWidth = resetBorderWidth;
 
 var _element = require("@wordpress/element");
 
@@ -15,6 +17,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _utils = require("./utils");
 
+var _border = require("./border");
+
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
 /**
@@ -45,24 +49,12 @@ const BorderWidthEdit = props => {
     width,
     color: customBorderColor,
     style: borderStyle
-  } = (style === null || style === void 0 ? void 0 : style.border) || {};
-  const [styleSelection, setStyleSelection] = (0, _element.useState)();
-  const [colorSelection, setColorSelection] = (0, _element.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.
 
-  (0, _element.useEffect)(() => {
-    if (borderStyle !== 'none') {
-      setStyleSelection(borderStyle);
-    }
-  }, [borderStyle]);
-  (0, _element.useEffect)(() => {
-    if (borderColor || customBorderColor) {
-      setColorSelection({
-        name: !!borderColor ? borderColor : undefined,
-        color: !!customBorderColor ? customBorderColor : undefined
-      });
-    }
-  }, [borderColor, customBorderColor]);
+  const [styleSelection, setStyleSelection] = (0, _element.useState)();
+  const [colorSelection, setColorSelection] = (0, _element.useState)();
+  const [customColorSelection, setCustomColorSelection] = (0, _element.useState)();
 
   const onChange = newWidth => {
     let newStyle = { ...style,
@@ -72,28 +64,38 @@ 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.
 
 
@@ -118,6 +120,43 @@ 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.
+ */
+
 
 exports.BorderWidthEdit = BorderWidthEdit;
+
+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.
+ */
+
+
+function resetBorderWidth(_ref) {
+  let {
+    attributes = {},
+    setAttributes
+  } = _ref;
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    style: (0, _border.removeBorderAttribute)(style, 'width')
+  });
+}
 //# sourceMappingURL=border-width.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/border-width.js"],"names":["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":["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/hooks/border.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BORDER_SUPPORT_KEY = void 0;
 exports.BorderPanel = BorderPanel;
 exports.hasBorderSupport = hasBorderSupport;
+exports.removeBorderAttribute = removeBorderAttribute;
 exports.shouldSkipSerialization = shouldSkipSerialization;
 
 var _element = require("@wordpress/element");
@@ -18,10 +19,6 @@ var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
-var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
-
-var _useSetting = _interopRequireDefault(require("../components/use-setting"));
-
 var _borderColor = require("./border-color");
 
 var _borderRadius = require("./border-radius");
@@ -30,6 +27,12 @@ var _borderStyle = require("./border-style");
 
 var _borderWidth = require("./border-width");
 
+var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
+
+var _useSetting = _interopRequireDefault(require("../components/use-setting"));
+
+var _utils = require("./utils");
+
 /**
  * WordPress dependencies
  */
@@ -41,6 +44,9 @@ const BORDER_SUPPORT_KEY = '__experimentalBorder';
 exports.BORDER_SUPPORT_KEY = BORDER_SUPPORT_KEY;
 
 function BorderPanel(props) {
+  const {
+    clientId
+  } = props;
   const isDisabled = useIsBorderDisabled(props);
   const isSupported = hasBorderSupport(props.name);
   const isColorSupported = (0, _useSetting.default)('border.color') && hasBorderSupport(props.name, 'color');
@@ -52,13 +58,59 @@ function BorderPanel(props) {
     return null;
   }
 
-  return (0, _element.createElement)(_inspectorControls.default, null, (0, _element.createElement)(_components.PanelBody, {
-    className: "block-editor-hooks__border-controls",
-    title: (0, _i18n.__)('Border'),
-    initialOpen: false
-  }, (isWidthSupported || isStyleSupported) && (0, _element.createElement)("div", {
-    className: "block-editor-hooks__border-controls-row"
-  }, isWidthSupported && (0, _element.createElement)(_borderWidth.BorderWidthEdit, props), isStyleSupported && (0, _element.createElement)(_borderStyle.BorderStyleEdit, props)), isColorSupported && (0, _element.createElement)(_borderColor.BorderColorEdit, props), isRadiusSupported && (0, _element.createElement)(_borderRadius.BorderRadiusEdit, props)));
+  const defaultBorderControls = (0, _blocks.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 (0, _element.createElement)(_inspectorControls.default, {
+    __experimentalGroup: "border"
+  }, isWidthSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => (0, _borderWidth.hasBorderWidthValue)(props),
+    label: (0, _i18n.__)('Width'),
+    onDeselect: () => (0, _borderWidth.resetBorderWidth)(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.width,
+    resetAllFilter: createResetAllFilter('width'),
+    panelId: clientId
+  }, (0, _element.createElement)(_borderWidth.BorderWidthEdit, props)), isStyleSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => (0, _borderStyle.hasBorderStyleValue)(props),
+    label: (0, _i18n.__)('Style'),
+    onDeselect: () => (0, _borderStyle.resetBorderStyle)(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.style,
+    resetAllFilter: createResetAllFilter('style'),
+    panelId: clientId
+  }, (0, _element.createElement)(_borderStyle.BorderStyleEdit, props)), isColorSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => (0, _borderColor.hasBorderColorValue)(props),
+    label: (0, _i18n.__)('Color'),
+    onDeselect: () => (0, _borderColor.resetBorderColor)(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.color,
+    resetAllFilter: createResetAllFilter('color', {
+      borderColor: undefined
+    }),
+    panelId: clientId
+  }, (0, _element.createElement)(_borderColor.BorderColorEdit, props)), isRadiusSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => (0, _borderRadius.hasBorderRadiusValue)(props),
+    label: (0, _i18n.__)('Radius'),
+    onDeselect: () => (0, _borderRadius.resetBorderRadius)(props),
+    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.radius,
+    resetAllFilter: createResetAllFilter('radius'),
+    panelId: clientId
+  }, (0, _element.createElement)(_borderRadius.BorderRadiusEdit, props)));
 }
 /**
  * Determine whether there is block support for border properties.
@@ -113,4 +165,22 @@ const useIsBorderDisabled = () => {
   const configs = [!(0, _useSetting.default)('border.color'), !(0, _useSetting.default)('border.radius'), !(0, _useSetting.default)('border.style'), !(0, _useSetting.default)('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.
+ */
+
+
+function removeBorderAttribute(style, attribute) {
+  return (0, _utils.cleanEmptyObject)({ ...style,
+    border: { ...(style === null || style === void 0 ? void 0 : style.border),
+      [attribute]: undefined
+    }
+  });
+}
 //# sourceMappingURL=border.js.map

package/build/hooks/border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/border.js"],"names":["BORDER_SUPPORT_KEY","BorderPanel","props","isDisabled","useIsBorderDisabled","isSupported","hasBorderSupport","name","isColorSupported","isRadiusSupported","isStyleSupported","isWidthSupported","blockName","feature","Platform","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":["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","Platform","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/hooks/color-panel.js

@@ -9,12 +9,10 @@ exports.default = ColorPanel;
 
 var _element = require("@wordpress/element");
 
-var _i18n = require("@wordpress/i18n");
-
-var _panelColorGradientSettings = _interopRequireDefault(require("../components/colors-gradients/panel-color-gradient-settings"));
-
 var _contrastChecker = _interopRequireDefault(require("../components/contrast-checker"));
 
+var _toolsPanelColorDropdown = _interopRequireDefault(require("../components/colors-gradients/tools-panel-color-dropdown"));
+
 var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
 
 var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
@@ -32,15 +30,18 @@ function getComputedStyle(node) {
 
 function ColorPanel(_ref) {
   let {
+    enableAlpha = false,
     settings,
     clientId,
-    enableContrastChecking = true,
-    showTitle = true
+    enableContrastChecking = true
   } = _ref;
   const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
   const [detectedColor, setDetectedColor] = (0, _element.useState)();
+  const [detectedLinkColor, setDetectedLinkColor] = (0, _element.useState)();
   const ref = (0, _useBlockRefs.__unstableUseBlockRef)(clientId);
   (0, _element.useEffect)(() => {
+    var _ref$current;
+
     if (!enableContrastChecking) {
       return;
     }
@@ -50,6 +51,12 @@ function ColorPanel(_ref) {
     }
 
     setDetectedColor(getComputedStyle(ref.current).color);
+    const firstLinkElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('a');
+
+    if (firstLinkElement && !!firstLinkElement.innerText) {
+      setDetectedLinkColor(getComputedStyle(firstLinkElement).color);
+    }
+
     let backgroundColorNode = ref.current;
     let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
 
@@ -60,16 +67,18 @@ function ColorPanel(_ref) {
 
     setDetectedBackgroundColor(backgroundColor);
   });
-  return (0, _element.createElement)(_inspectorControls.default, null, (0, _element.createElement)(_panelColorGradientSettings.default, {
-    title: (0, _i18n.__)('Color'),
-    initialOpen: false,
-    settings: settings,
-    showTitle: showTitle,
-    __experimentalHasMultipleOrigins: true,
-    __experimentalIsRenderedInSidebar: true
-  }, enableContrastChecking && (0, _element.createElement)(_contrastChecker.default, {
+  return (0, _element.createElement)(_inspectorControls.default, {
+    __experimentalGroup: "color"
+  }, settings.map((setting, index) => (0, _element.createElement)(_toolsPanelColorDropdown.default, {
+    key: index,
+    settings: setting,
+    panelId: clientId,
+    enableAlpha: enableAlpha
+  })), enableContrastChecking && (0, _element.createElement)(_contrastChecker.default, {
     backgroundColor: detectedBackgroundColor,
-    textColor: detectedColor
-  })));
+    textColor: detectedColor,
+    enableAlphaChecker: enableAlpha,
+    linkColor: detectedLinkColor
+  }));
 }
 //# sourceMappingURL=color-panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/color-panel.js"],"names":["getComputedStyle","node","ownerDocument","defaultView","ColorPanel","settings","clientId","enableContrastChecking","showTitle","detectedBackgroundColor","setDetectedBackgroundColor","detectedColor","setDetectedColor","ref","current","color","backgroundColorNode","backgroundColor","parentNode","nodeType","ELEMENT_NODE"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAIA;AACA;AACA;AAMA,SAASA,gBAAT,CAA2BC,IAA3B,EAAkC;AACjC,SAAOA,IAAI,CAACC,aAAL,CAAmBC,WAAnB,CAA+BH,gBAA/B,CAAiDC,IAAjD,CAAP;AACA;;AAEc,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,IAA0D,wBAAhE;AACA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,wBAA5C;AACA,QAAMC,GAAG,GAAG,yCAAaP,QAAb,CAAZ;AAEA,0BAAW,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,GAzBD;AA2BA,SACC,4BAAC,0BAAD,QACC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,WAAW,EAAG,KAFf;AAGC,IAAA,QAAQ,EAAGZ,QAHZ;AAIC,IAAA,SAAS,EAAGG,SAJb;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,iCAAiC;AANlC,KAQGD,sBAAsB,IACvB,4BAAC,wBAAD;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":["getComputedStyle","node","ownerDocument","defaultView","ColorPanel","enableAlpha","settings","clientId","enableContrastChecking","detectedBackgroundColor","setDetectedBackgroundColor","detectedColor","setDetectedColor","detectedLinkColor","setDetectedLinkColor","ref","current","color","firstLinkElement","querySelector","innerText","backgroundColorNode","backgroundColor","parentNode","nodeType","ELEMENT_NODE","map","setting","index"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,gBAAT,CAA2BC,IAA3B,EAAkC;AACjC,SAAOA,IAAI,CAACC,aAAL,CAAmBC,WAAnB,CAA+BH,gBAA/B,CAAiDC,IAAjD,CAAP;AACA;;AAEc,SAASG,UAAT,OAKX;AAAA,MALgC;AACnCC,IAAAA,WAAW,GAAG,KADqB;AAEnCC,IAAAA,QAFmC;AAGnCC,IAAAA,QAHmC;AAInCC,IAAAA,sBAAsB,GAAG;AAJU,GAKhC;AACH,QAAM,CAAEC,uBAAF,EAA2BC,0BAA3B,IAA0D,wBAAhE;AACA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,wBAA5C;AACA,QAAM,CAAEC,iBAAF,EAAqBC,oBAArB,IAA8C,wBAApD;AACA,QAAMC,GAAG,GAAG,yCAAaR,QAAb,CAAZ;AAEA,0BAAW,MAAM;AAAA;;AAChB,QAAK,CAAEC,sBAAP,EAAgC;AAC/B;AACA;;AAED,QAAK,CAAEO,GAAG,CAACC,OAAX,EAAqB;AACpB;AACA;;AACDJ,IAAAA,gBAAgB,CAAEZ,gBAAgB,CAAEe,GAAG,CAACC,OAAN,CAAhB,CAAgCC,KAAlC,CAAhB;AAEA,UAAMC,gBAAgB,mBAAGH,GAAG,CAACC,OAAP,iDAAG,aAAaG,aAAb,CAA4B,GAA5B,CAAzB;;AACA,QAAKD,gBAAgB,IAAI,CAAC,CAAEA,gBAAgB,CAACE,SAA7C,EAAyD;AACxDN,MAAAA,oBAAoB,CAAEd,gBAAgB,CAAEkB,gBAAF,CAAhB,CAAqCD,KAAvC,CAApB;AACA;;AAED,QAAII,mBAAmB,GAAGN,GAAG,CAACC,OAA9B;AACA,QAAIM,eAAe,GAAGtB,gBAAgB,CAAEqB,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,GAAGtB,gBAAgB,CAAEqB,mBAAF,CAAhB,CAChBC,eADF;AAEA;;AAEDZ,IAAAA,0BAA0B,CAAEY,eAAF,CAA1B;AACA,GA9BD;AAgCA,SACC,4BAAC,0BAAD;AAAmB,IAAA,mBAAmB,EAAC;AAAvC,KACGhB,QAAQ,CAACoB,GAAT,CAAc,CAAEC,OAAF,EAAWC,KAAX,KACf,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,QAAQ,EAAGD,OAFZ;AAGC,IAAA,OAAO,EAAGpB,QAHX;AAIC,IAAA,WAAW,EAAGF;AAJf,IADC,CADH,EASGG,sBAAsB,IACvB,4BAAC,wBAAD;AACC,IAAA,eAAe,EAAGC,uBADnB;AAEC,IAAA,SAAS,EAAGE,aAFb;AAGC,IAAA,kBAAkB,EAAGN,WAHtB;AAIC,IAAA,SAAS,EAAGQ;AAJb,IAVF,CADD;AAoBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ContrastChecker from '../components/contrast-checker';\nimport ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';\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} ) {\n\tconst [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();\n\tconst [ detectedColor, setDetectedColor ] = useState();\n\tconst [ detectedLinkColor, setDetectedLinkColor ] = 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\tconst firstLinkElement = ref.current?.querySelector( 'a' );\n\t\tif ( firstLinkElement && !! firstLinkElement.innerText ) {\n\t\t\tsetDetectedLinkColor( getComputedStyle( firstLinkElement ).color );\n\t\t}\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 __experimentalGroup=\"color\">\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ToolsPanelColorDropdown\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tsettings={ setting }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ enableContrastChecking && (\n\t\t\t\t<ContrastChecker\n\t\t\t\t\tbackgroundColor={ detectedBackgroundColor }\n\t\t\t\t\ttextColor={ detectedColor }\n\t\t\t\t\tenableAlphaChecker={ enableAlpha }\n\t\t\t\t\tlinkColor={ detectedLinkColor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n"]}

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _panelColorGradientSettings = _interopRequireDefault(require("../components/colors-gradients/panel-color-gradient-settings"));
+
+var _contrastChecker = _interopRequireDefault(require("../components/contrast-checker"));
+
+var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const ColorPanel = _ref => {
+  let {
+    settings
+  } = _ref;
+  const globalStyles = (0, _components.useGlobalStyles)();
+  const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
+  const [detectedTextColor, setDetectedTextColor] = (0, _element.useState)();
+  const {
+    baseGlobalStyles
+  } = (0, _data.useSelect)(select => {
+    var _getSettings, _getSettings$__experi;
+
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    return {
+      baseGlobalStyles: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : (_getSettings$__experi = _getSettings.__experimentalGlobalStylesBaseStyles) === null || _getSettings$__experi === void 0 ? void 0 : _getSettings$__experi.color
+    };
+  });
+  (0, _element.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 (0, _element.createElement)(_inspectorControls.default, null, (0, _element.createElement)(_panelColorGradientSettings.default, {
+    title: (0, _i18n.__)('Color'),
+    initialOpen: false,
+    settings: settings
+  }, (0, _element.createElement)(_contrastChecker.default, {
+    backgroundColor: detectedBackgroundColor,
+    textColor: detectedTextColor
+  })));
+};
+
+var _default = ColorPanel;
+exports.default = _default;
+//# sourceMappingURL=color-panel.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/color-panel.native.js"],"names":["ColorPanel","settings","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","blockEditorStore","__experimentalGlobalStylesBaseStyles","color","textColor","text","backgroundColor","background"],"mappings":";;;;;;;;;AAIA;;AADA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAdA;AACA;AACA;;AAOA;AACA;AACA;AAKA,MAAMA,UAAU,GAAG,QAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AACtC,QAAMC,YAAY,GAAG,kCAArB;AAEA,QAAM,CAAEC,uBAAF,EAA2BC,0BAA3B,IAA0D,wBAAhE;AACA,QAAM,CAAEC,iBAAF,EAAqBC,oBAArB,IAA8C,wBAApD;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,qBAAaC,MAAF,IAAc;AAAA;;AACrD,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,MAAM,CAAEE,kBAAF,CAA9B;AACA,WAAO;AACNH,MAAAA,gBAAgB,kBAAEE,WAAW,EAAb,0EAAE,aACfE,oCADa,0DAAE,sBACuBC;AAFnC,KAAP;AAIA,GAN4B,CAA7B;AAQA,0BAAW,MAAM;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAMC,SAAS,GAAG,CAAAX,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEU,KAAd,MAAuBL,gBAAvB,aAAuBA,gBAAvB,uBAAuBA,gBAAgB,CAAEO,IAAzC,CAAlB;AACA,UAAMC,eAAe,GACpB,CAAAb,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEa,eAAd,MAAiCR,gBAAjC,aAAiCA,gBAAjC,uBAAiCA,gBAAgB,CAAES,UAAnD,CADD;AAGAV,IAAAA,oBAAoB,CAAEO,SAAF,CAApB;AACAT,IAAAA,0BAA0B,CAAEW,eAAF,CAA1B;AACA,GAdD,EAcG,CAAEb,YAAF,EAAgBK,gBAAhB,CAdH;AAgBA,SACC,4BAAC,0BAAD,QACC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,WAAW,EAAG,KAFf;AAGC,IAAA,QAAQ,EAAGN;AAHZ,KAKC,4BAAC,wBAAD;AACC,IAAA,eAAe,EAAGE,uBADnB;AAEC,IAAA,SAAS,EAAGE;AAFb,IALD,CADD,CADD;AAcA,CA5CD;;eA8CeL,U","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"]}