@wordpress/block-editor 12.1.0 → 12.3.0

package/build/components/global-styles/color-panel.native.js

@@ -44,15 +44,12 @@ var _colorPanel = require("./color-panel.js");
 /**
  * Internal dependencies
  */
-const ColorPanel = _ref => {
-  var _inheritedValue$color, _inheritedValue$color2, _inheritedValue$color3, _settings$color;
-
-  let {
-    value,
-    inheritedValue = value,
-    onChange,
-    settings
-  } = _ref;
+const ColorPanel = ({
+  value,
+  inheritedValue = value,
+  onChange,
+  settings
+}) => {
   const colors = (0, _hooks.useColorsPerOrigin)(settings);
   const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
   const globalStyles = (0, _components.useGlobalStyles)();
@@ -61,13 +58,11 @@ const ColorPanel = _ref => {
   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
+      baseGlobalStyles: getSettings()?.__experimentalGlobalStylesBaseStyles?.color
     };
   });
 
@@ -76,46 +71,34 @@ const ColorPanel = _ref => {
   }, '', rawValue);
 
   const encodeColorValue = (0, _element.useCallback)(colorValue => {
-    const allColors = colors.flatMap(_ref2 => {
-      let {
-        colors: originColors
-      } = _ref2;
-      return originColors;
-    });
-    const colorObject = allColors.find(_ref3 => {
-      let {
-        color
-      } = _ref3;
-      return color === colorValue;
-    });
+    const allColors = colors.flatMap(({
+      colors: originColors
+    }) => originColors);
+    const colorObject = allColors.find(({
+      color
+    }) => color === colorValue);
     return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
   }, [colors]);
   const encodeGradientValue = (0, _element.useCallback)(gradientValue => {
-    const allGradients = gradients.flatMap(_ref4 => {
-      let {
-        gradients: originGradients
-      } = _ref4;
-      return originGradients;
-    });
-    const gradientObject = allGradients.find(_ref5 => {
-      let {
-        gradient
-      } = _ref5;
-      return gradient === gradientValue;
-    });
+    const allGradients = gradients.flatMap(({
+      gradients: originGradients
+    }) => originGradients);
+    const gradientObject = allGradients.find(({
+      gradient
+    }) => gradient === gradientValue);
     return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
   }, [gradients]); // Text Color
 
   const showTextPanel = (0, _colorPanel.useHasTextPanel)(settings);
-  const textColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color = inheritedValue.color) === null || _inheritedValue$color === void 0 ? void 0 : _inheritedValue$color.text);
+  const textColor = decodeValue(inheritedValue?.color?.text);
   const setTextColor = (0, _element.useCallback)(newColor => {
     onChange((0, _object.setImmutably)(value, ['color', 'text'], encodeColorValue(newColor)));
   }, [encodeColorValue, onChange, value]);
   const resetTextColor = (0, _element.useCallback)(() => setTextColor(undefined), [setTextColor]); // BackgroundColor
 
   const showBackgroundPanel = (0, _colorPanel.useHasBackgroundPanel)(settings);
-  const backgroundColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color2 = inheritedValue.color) === null || _inheritedValue$color2 === void 0 ? void 0 : _inheritedValue$color2.background);
-  const gradient = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color3 = inheritedValue.color) === null || _inheritedValue$color3 === void 0 ? void 0 : _inheritedValue$color3.gradient);
+  const backgroundColor = decodeValue(inheritedValue?.color?.background);
+  const gradient = decodeValue(inheritedValue?.color?.gradient);
   const setBackgroundColor = (0, _element.useCallback)(newColor => {
     const newValue = (0, _object.setImmutably)(value, ['color', 'background'], encodeColorValue(newColor));
     newValue.color.gradient = undefined;
@@ -131,7 +114,7 @@ const ColorPanel = _ref => {
     newValue.color.gradient = undefined;
     onChange(newValue);
   }, [onChange, value]);
-  const currentGradients = settings === null || settings === void 0 ? void 0 : (_settings$color = settings.color) === null || _settings$color === void 0 ? void 0 : _settings$color.gradients;
+  const currentGradients = settings?.color?.gradients;
   const withoutGradientsSupport = Array.isArray(currentGradients) && currentGradients.length === 0;
   const items = (0, _element.useMemo)(() => [showTextPanel && {
     label: (0, _i18n.__)('Text'),
@@ -154,8 +137,8 @@ const ColorPanel = _ref => {
     // 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 currentDetectedTextColor = (globalStyles === null || globalStyles === void 0 ? void 0 : globalStyles.color) || (baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.text);
-    const currentDetectedBackgroundColor = (globalStyles === null || globalStyles === void 0 ? void 0 : globalStyles.backgroundColor) || (baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.background);
+    const currentDetectedTextColor = globalStyles?.color || baseGlobalStyles?.text;
+    const currentDetectedBackgroundColor = globalStyles?.backgroundColor || baseGlobalStyles?.background;
     setDetectedTextColor(currentDetectedTextColor);
     setDetectedBackgroundColor(currentDetectedBackgroundColor);
   }, [globalStyles, baseGlobalStyles]);

package/build/components/global-styles/color-panel.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/color-panel.native.js"],"names":["ColorPanel","value","inheritedValue","onChange","settings","colors","gradients","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","blockEditorStore","__experimentalGlobalStylesBaseStyles","color","decodeValue","rawValue","encodeColorValue","colorValue","allColors","flatMap","originColors","colorObject","find","slug","encodeGradientValue","gradientValue","allGradients","originGradients","gradientObject","gradient","showTextPanel","textColor","text","setTextColor","newColor","resetTextColor","undefined","showBackgroundPanel","backgroundColor","background","setBackgroundColor","newValue","setGradient","newGradient","resetBackground","currentGradients","withoutGradientsSupport","Array","isArray","length","items","label","onColorChange","onColorCleared","onGradientChange","filter","Boolean","currentDetectedTextColor","currentDetectedBackgroundColor"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState, useMemo, useCallback } 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 '../colors-gradients/panel-color-gradient-settings';\nimport { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';\nimport { getValueFromVariable } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport ContrastChecker from '../contrast-checker';\nimport InspectorControls from '../inspector-controls';\nimport {\n\tuseHasColorPanel,\n\tuseHasTextPanel,\n\tuseHasBackgroundPanel,\n} from './color-panel.js';\n\nconst ColorPanel = ( {\n\tvalue,\n\tinheritedValue = value,\n\tonChange,\n\tsettings,\n} ) => {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( 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:\n\t\t\t\tgetSettings()?.__experimentalGlobalStylesBaseStyles?.color,\n\t\t};\n\t} );\n\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeColorValue = useCallback(\n\t\t( colorValue ) => {\n\t\t\tconst allColors = colors.flatMap(\n\t\t\t\t( { colors: originColors } ) => originColors\n\t\t\t);\n\t\t\tconst colorObject = allColors.find(\n\t\t\t\t( { color } ) => color === colorValue\n\t\t\t);\n\t\t\treturn colorObject\n\t\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t\t: colorValue;\n\t\t},\n\t\t[ colors ]\n\t);\n\tconst encodeGradientValue = useCallback(\n\t\t( gradientValue ) => {\n\t\t\tconst allGradients = gradients.flatMap(\n\t\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t\t);\n\t\t\tconst gradientObject = allGradients.find(\n\t\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t\t);\n\t\t\treturn gradientObject\n\t\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t\t: gradientValue;\n\t\t},\n\t\t[ gradients ]\n\t);\n\n\t// Text Color\n\tconst showTextPanel = useHasTextPanel( settings );\n\tconst textColor = decodeValue( inheritedValue?.color?.text );\n\tconst setTextColor = useCallback(\n\t\t( newColor ) => {\n\t\t\tonChange(\n\t\t\t\tsetImmutably(\n\t\t\t\t\tvalue,\n\t\t\t\t\t[ 'color', 'text' ],\n\t\t\t\t\tencodeColorValue( newColor )\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ encodeColorValue, onChange, value ]\n\t);\n\tconst resetTextColor = useCallback(\n\t\t() => setTextColor( undefined ),\n\t\t[ setTextColor ]\n\t);\n\n\t// BackgroundColor\n\tconst showBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst gradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst setBackgroundColor = useCallback(\n\t\t( newColor ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'color', 'background' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t);\n\t\t\tnewValue.color.gradient = undefined;\n\t\t\tonChange( newValue );\n\t\t},\n\t\t[ encodeColorValue, onChange, value ]\n\t);\n\tconst setGradient = useCallback(\n\t\t( newGradient ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'color', 'gradient' ],\n\t\t\t\tencodeGradientValue( newGradient )\n\t\t\t);\n\t\t\tnewValue.color.background = undefined;\n\t\t\tonChange( newValue );\n\t\t},\n\t\t[ encodeGradientValue, onChange, value ]\n\t);\n\tconst resetBackground = useCallback( () => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue.color.gradient = undefined;\n\t\tonChange( newValue );\n\t}, [ onChange, value ] );\n\tconst currentGradients = settings?.color?.gradients;\n\tconst withoutGradientsSupport =\n\t\tArray.isArray( currentGradients ) && currentGradients.length === 0;\n\n\tconst items = useMemo(\n\t\t() =>\n\t\t\t[\n\t\t\t\tshowTextPanel && {\n\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\tcolorValue: textColor,\n\t\t\t\t\tonColorChange: setTextColor,\n\t\t\t\t\tonColorCleared: resetTextColor,\n\t\t\t\t},\n\t\t\t\tshowBackgroundPanel && {\n\t\t\t\t\tlabel: __( 'Background' ),\n\t\t\t\t\tcolorValue: backgroundColor,\n\t\t\t\t\tonColorChange: setBackgroundColor,\n\t\t\t\t\tonColorCleared: resetBackground,\n\t\t\t\t\tonGradientChange: ! withoutGradientsSupport\n\t\t\t\t\t\t? setGradient\n\t\t\t\t\t\t: undefined,\n\t\t\t\t\tgradientValue: gradient,\n\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t[\n\t\t\tbackgroundColor,\n\t\t\tgradient,\n\t\t\tresetBackground,\n\t\t\tresetTextColor,\n\t\t\tsetBackgroundColor,\n\t\t\tsetGradient,\n\t\t\tsetTextColor,\n\t\t\tshowBackgroundPanel,\n\t\t\tshowTextPanel,\n\t\t\ttextColor,\n\t\t\twithoutGradientsSupport,\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 currentDetectedTextColor =\n\t\t\tglobalStyles?.color || baseGlobalStyles?.text;\n\t\tconst currentDetectedBackgroundColor =\n\t\t\tglobalStyles?.backgroundColor || baseGlobalStyles?.background;\n\n\t\tsetDetectedTextColor( currentDetectedTextColor );\n\t\tsetDetectedBackgroundColor( currentDetectedBackgroundColor );\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={ items }\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 { useHasColorPanel };\nexport default ColorPanel;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/color-panel.native.js"],"names":["ColorPanel","value","inheritedValue","onChange","settings","colors","gradients","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","blockEditorStore","__experimentalGlobalStylesBaseStyles","color","decodeValue","rawValue","encodeColorValue","colorValue","allColors","flatMap","originColors","colorObject","find","slug","encodeGradientValue","gradientValue","allGradients","originGradients","gradientObject","gradient","showTextPanel","textColor","text","setTextColor","newColor","resetTextColor","undefined","showBackgroundPanel","backgroundColor","background","setBackgroundColor","newValue","setGradient","newGradient","resetBackground","currentGradients","withoutGradientsSupport","Array","isArray","length","items","label","onColorChange","onColorCleared","onGradientChange","filter","Boolean","currentDetectedTextColor","currentDetectedBackgroundColor"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState, useMemo, useCallback } 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 '../colors-gradients/panel-color-gradient-settings';\nimport { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';\nimport { getValueFromVariable } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport ContrastChecker from '../contrast-checker';\nimport InspectorControls from '../inspector-controls';\nimport {\n\tuseHasColorPanel,\n\tuseHasTextPanel,\n\tuseHasBackgroundPanel,\n} from './color-panel.js';\n\nconst ColorPanel = ( {\n\tvalue,\n\tinheritedValue = value,\n\tonChange,\n\tsettings,\n} ) => {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst gradients = useGradientsPerOrigin( 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:\n\t\t\t\tgetSettings()?.__experimentalGlobalStylesBaseStyles?.color,\n\t\t};\n\t} );\n\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeColorValue = useCallback(\n\t\t( colorValue ) => {\n\t\t\tconst allColors = colors.flatMap(\n\t\t\t\t( { colors: originColors } ) => originColors\n\t\t\t);\n\t\t\tconst colorObject = allColors.find(\n\t\t\t\t( { color } ) => color === colorValue\n\t\t\t);\n\t\t\treturn colorObject\n\t\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t\t: colorValue;\n\t\t},\n\t\t[ colors ]\n\t);\n\tconst encodeGradientValue = useCallback(\n\t\t( gradientValue ) => {\n\t\t\tconst allGradients = gradients.flatMap(\n\t\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t\t);\n\t\t\tconst gradientObject = allGradients.find(\n\t\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t\t);\n\t\t\treturn gradientObject\n\t\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t\t: gradientValue;\n\t\t},\n\t\t[ gradients ]\n\t);\n\n\t// Text Color\n\tconst showTextPanel = useHasTextPanel( settings );\n\tconst textColor = decodeValue( inheritedValue?.color?.text );\n\tconst setTextColor = useCallback(\n\t\t( newColor ) => {\n\t\t\tonChange(\n\t\t\t\tsetImmutably(\n\t\t\t\t\tvalue,\n\t\t\t\t\t[ 'color', 'text' ],\n\t\t\t\t\tencodeColorValue( newColor )\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ encodeColorValue, onChange, value ]\n\t);\n\tconst resetTextColor = useCallback(\n\t\t() => setTextColor( undefined ),\n\t\t[ setTextColor ]\n\t);\n\n\t// BackgroundColor\n\tconst showBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst gradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst setBackgroundColor = useCallback(\n\t\t( newColor ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'color', 'background' ],\n\t\t\t\tencodeColorValue( newColor )\n\t\t\t);\n\t\t\tnewValue.color.gradient = undefined;\n\t\t\tonChange( newValue );\n\t\t},\n\t\t[ encodeColorValue, onChange, value ]\n\t);\n\tconst setGradient = useCallback(\n\t\t( newGradient ) => {\n\t\t\tconst newValue = setImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'color', 'gradient' ],\n\t\t\t\tencodeGradientValue( newGradient )\n\t\t\t);\n\t\t\tnewValue.color.background = undefined;\n\t\t\tonChange( newValue );\n\t\t},\n\t\t[ encodeGradientValue, onChange, value ]\n\t);\n\tconst resetBackground = useCallback( () => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue.color.gradient = undefined;\n\t\tonChange( newValue );\n\t}, [ onChange, value ] );\n\tconst currentGradients = settings?.color?.gradients;\n\tconst withoutGradientsSupport =\n\t\tArray.isArray( currentGradients ) && currentGradients.length === 0;\n\n\tconst items = useMemo(\n\t\t() =>\n\t\t\t[\n\t\t\t\tshowTextPanel && {\n\t\t\t\t\tlabel: __( 'Text' ),\n\t\t\t\t\tcolorValue: textColor,\n\t\t\t\t\tonColorChange: setTextColor,\n\t\t\t\t\tonColorCleared: resetTextColor,\n\t\t\t\t},\n\t\t\t\tshowBackgroundPanel && {\n\t\t\t\t\tlabel: __( 'Background' ),\n\t\t\t\t\tcolorValue: backgroundColor,\n\t\t\t\t\tonColorChange: setBackgroundColor,\n\t\t\t\t\tonColorCleared: resetBackground,\n\t\t\t\t\tonGradientChange: ! withoutGradientsSupport\n\t\t\t\t\t\t? setGradient\n\t\t\t\t\t\t: undefined,\n\t\t\t\t\tgradientValue: gradient,\n\t\t\t\t},\n\t\t\t].filter( Boolean ),\n\t\t[\n\t\t\tbackgroundColor,\n\t\t\tgradient,\n\t\t\tresetBackground,\n\t\t\tresetTextColor,\n\t\t\tsetBackgroundColor,\n\t\t\tsetGradient,\n\t\t\tsetTextColor,\n\t\t\tshowBackgroundPanel,\n\t\t\tshowTextPanel,\n\t\t\ttextColor,\n\t\t\twithoutGradientsSupport,\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 currentDetectedTextColor =\n\t\t\tglobalStyles?.color || baseGlobalStyles?.text;\n\t\tconst currentDetectedBackgroundColor =\n\t\t\tglobalStyles?.backgroundColor || baseGlobalStyles?.background;\n\n\t\tsetDetectedTextColor( currentDetectedTextColor );\n\t\tsetDetectedBackgroundColor( currentDetectedBackgroundColor );\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={ items }\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 { useHasColorPanel };\nexport default ColorPanel;\n"]}

package/build/components/global-styles/dimensions-panel.js

@@ -55,39 +55,27 @@ function useHasDimensionsPanel(settings) {
 }
 
 function useHasContentSize(settings) {
-  var _settings$layout;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$layout = settings.layout) === null || _settings$layout === void 0 ? void 0 : _settings$layout.contentSize;
+  return settings?.layout?.contentSize;
 }
 
 function useHasWideSize(settings) {
-  var _settings$layout2;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$layout2 = settings.layout) === null || _settings$layout2 === void 0 ? void 0 : _settings$layout2.wideSize;
+  return settings?.layout?.wideSize;
 }
 
 function useHasPadding(settings) {
-  var _settings$spacing;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$spacing = settings.spacing) === null || _settings$spacing === void 0 ? void 0 : _settings$spacing.padding;
+  return settings?.spacing?.padding;
 }
 
 function useHasMargin(settings) {
-  var _settings$spacing2;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$spacing2 = settings.spacing) === null || _settings$spacing2 === void 0 ? void 0 : _settings$spacing2.margin;
+  return settings?.spacing?.margin;
 }
 
 function useHasGap(settings) {
-  var _settings$spacing3;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$spacing3 = settings.spacing) === null || _settings$spacing3 === void 0 ? void 0 : _settings$spacing3.blockGap;
+  return settings?.spacing?.blockGap;
 }
 
 function useHasMinHeight(settings) {
-  var _settings$dimensions;
-
-  return settings === null || settings === void 0 ? void 0 : (_settings$dimensions = settings.dimensions) === null || _settings$dimensions === void 0 ? void 0 : _settings$dimensions.minHeight;
+  return settings?.dimensions?.minHeight;
 }
 
 function useHasChildLayout(settings) {
@@ -99,26 +87,27 @@ function useHasChildLayout(settings) {
       type: defaultParentLayoutType = 'default'
     } = {},
     allowSizingOnChildren = false
-  } = (_settings$parentLayou = settings === null || settings === void 0 ? void 0 : settings.parentLayout) !== null && _settings$parentLayou !== void 0 ? _settings$parentLayou : {};
+  } = (_settings$parentLayou = settings?.parentLayout) !== null && _settings$parentLayou !== void 0 ? _settings$parentLayou : {};
   const support = (defaultParentLayoutType === 'flex' || parentLayoutType === 'flex') && allowSizingOnChildren;
-  return !!(settings !== null && settings !== void 0 && settings.layout) && support;
+  return !!settings?.layout && support;
 }
 
 function useHasSpacingPresets(settings) {
-  var _settings$spacing4, _ref, _ref2;
+  var _ref, _ref2;
 
   const {
     custom,
     theme,
     default: defaultPresets
-  } = (settings === null || settings === void 0 ? void 0 : (_settings$spacing4 = settings.spacing) === null || _settings$spacing4 === void 0 ? void 0 : _settings$spacing4.spacingSizes) || {};
+  } = settings?.spacing?.spacingSizes || {};
   const presets = (_ref = (_ref2 = custom !== null && custom !== void 0 ? custom : theme) !== null && _ref2 !== void 0 ? _ref2 : defaultPresets) !== null && _ref !== void 0 ? _ref : [];
   return presets.length > 0;
 }
 
 function filterValuesBySides(values, sides) {
-  if (!sides) {
-    // If no custom side configuration all sides are opted into by default.
+  // If no custom side configuration, all sides are opted into by default.
+  // Without any values, we have nothing to filter either.
+  if (!sides || !values) {
     return values;
   } // Only include sides opted into within filtered values.
 
@@ -135,7 +124,7 @@ function filterValuesBySides(values, sides) {
       filteredValues.right = values.right;
     }
 
-    filteredValues[side] = values === null || values === void 0 ? void 0 : values[side];
+    filteredValues[side] = values?.[side];
   });
   return filteredValues;
 }
@@ -166,23 +155,21 @@ function splitGapValue(value) {
 
   if (value) {
     return { ...value,
-      right: value === null || value === void 0 ? void 0 : value.left,
-      bottom: value === null || value === void 0 ? void 0 : value.top
+      right: value?.left,
+      bottom: value?.top
     };
   }
 
   return value;
 }
 
-function DimensionsToolsPanel(_ref3) {
-  let {
-    resetAllFilter,
-    onChange,
-    value,
-    panelId,
-    children
-  } = _ref3;
-
+function DimensionsToolsPanel({
+  resetAllFilter,
+  onChange,
+  value,
+  panelId,
+  children
+}) {
   const resetAll = () => {
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
@@ -205,68 +192,69 @@ const DEFAULT_CONTROLS = {
   childLayout: true
 };
 
-function DimensionsPanel(_ref4) {
-  var _settings$spacing5, _inheritedValue$layou, _inheritedValue$layou2, _inheritedValue$spaci, _settings$spacing6, _settings$spacing7, _settings$spacing8, _settings$spacing8$pa, _inheritedValue$spaci2, _settings$spacing9, _settings$spacing10, _settings$spacing11, _settings$spacing11$m, _inheritedValue$spaci3, _settings$spacing12, _settings$spacing13, _settings$spacing14, _settings$spacing14$b, _inheritedValue$dimen, _settings$parentLayou2, _defaultControls$cont, _defaultControls$wide, _defaultControls$padd, _defaultControls$marg, _defaultControls$bloc, _defaultControls$minH, _defaultControls$chil;
-
-  let {
-    as: Wrapper = DimensionsToolsPanel,
-    value,
-    onChange,
-    inheritedValue = value,
-    settings,
-    panelId,
-    defaultControls = DEFAULT_CONTROLS,
-    onVisualize = () => {},
-    // Special case because the layout controls are not part of the dimensions panel
-    // in global styles but not in block inspector.
-    includeLayoutControls = false
-  } = _ref4;
-
-  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
-    settings
-  }, '', rawValue);
+function DimensionsPanel({
+  as: Wrapper = DimensionsToolsPanel,
+  value,
+  onChange,
+  inheritedValue = value,
+  settings,
+  panelId,
+  defaultControls = DEFAULT_CONTROLS,
+  onVisualize = () => {},
+  // Special case because the layout controls are not part of the dimensions panel
+  // in global styles but not in block inspector.
+  includeLayoutControls = false
+}) {
+  var _settings$parentLayou2, _defaultControls$cont, _defaultControls$wide, _defaultControls$padd, _defaultControls$marg, _defaultControls$bloc, _defaultControls$minH, _defaultControls$chil;
+
+  const decodeValue = rawValue => {
+    if (rawValue && typeof rawValue === 'object') {
+      return Object.keys(rawValue).reduce((acc, key) => {
+        acc[key] = (0, _utils.getValueFromVariable)({
+          settings
+        }, '', rawValue[key]);
+        return acc;
+      }, {});
+    }
+
+    return (0, _utils.getValueFromVariable)({
+      settings
+    }, '', rawValue);
+  };
 
   const showSpacingPresetsControl = useHasSpacingPresets(settings);
   const units = (0, _components.__experimentalUseCustomUnits)({
-    availableUnits: (settings === null || settings === void 0 ? void 0 : (_settings$spacing5 = settings.spacing) === null || _settings$spacing5 === void 0 ? void 0 : _settings$spacing5.units) || ['%', 'px', 'em', 'rem', 'vw']
+    availableUnits: settings?.spacing?.units || ['%', 'px', 'em', 'rem', 'vw']
   }); // Content Size
 
   const showContentSizeControl = useHasContentSize(settings) && includeLayoutControls;
-  const contentSizeValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$layou = inheritedValue.layout) === null || _inheritedValue$layou === void 0 ? void 0 : _inheritedValue$layou.contentSize);
+  const contentSizeValue = decodeValue(inheritedValue?.layout?.contentSize);
 
   const setContentSizeValue = newValue => {
     onChange((0, _object.setImmutably)(value, ['layout', 'contentSize'], newValue || undefined));
   };
 
-  const hasUserSetContentSizeValue = () => {
-    var _value$layout;
-
-    return !!(value !== null && value !== void 0 && (_value$layout = value.layout) !== null && _value$layout !== void 0 && _value$layout.contentSize);
-  };
+  const hasUserSetContentSizeValue = () => !!value?.layout?.contentSize;
 
   const resetContentSizeValue = () => setContentSizeValue(undefined); // Wide Size
 
 
   const showWideSizeControl = useHasWideSize(settings) && includeLayoutControls;
-  const wideSizeValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$layou2 = inheritedValue.layout) === null || _inheritedValue$layou2 === void 0 ? void 0 : _inheritedValue$layou2.wideSize);
+  const wideSizeValue = decodeValue(inheritedValue?.layout?.wideSize);
 
   const setWideSizeValue = newValue => {
     onChange((0, _object.setImmutably)(value, ['layout', 'wideSize'], newValue || undefined));
   };
 
-  const hasUserSetWideSizeValue = () => {
-    var _value$layout2;
-
-    return !!(value !== null && value !== void 0 && (_value$layout2 = value.layout) !== null && _value$layout2 !== void 0 && _value$layout2.wideSize);
-  };
+  const hasUserSetWideSizeValue = () => !!value?.layout?.wideSize;
 
   const resetWideSizeValue = () => setWideSizeValue(undefined); // Padding
 
 
   const showPaddingControl = useHasPadding(settings);
-  const rawPadding = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci = inheritedValue.spacing) === null || _inheritedValue$spaci === void 0 ? void 0 : _inheritedValue$spaci.padding);
+  const rawPadding = decodeValue(inheritedValue?.spacing?.padding);
   const paddingValues = splitStyleValue(rawPadding);
-  const paddingSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing6 = settings.spacing) === null || _settings$spacing6 === void 0 ? void 0 : _settings$spacing6.padding) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing7 = settings.spacing) === null || _settings$spacing7 === void 0 ? void 0 : _settings$spacing7.padding : settings === null || settings === void 0 ? void 0 : (_settings$spacing8 = settings.spacing) === null || _settings$spacing8 === void 0 ? void 0 : (_settings$spacing8$pa = _settings$spacing8.padding) === null || _settings$spacing8$pa === void 0 ? void 0 : _settings$spacing8$pa.sides;
+  const paddingSides = Array.isArray(settings?.spacing?.padding) ? settings?.spacing?.padding : settings?.spacing?.padding?.sides;
   const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side));
 
   const setPaddingValues = newPaddingValues => {
@@ -274,11 +262,7 @@ function DimensionsPanel(_ref4) {
     onChange((0, _object.setImmutably)(value, ['spacing', 'padding'], padding));
   };
 
-  const hasPaddingValue = () => {
-    var _value$spacing, _value$spacing2;
-
-    return !!(value !== null && value !== void 0 && (_value$spacing = value.spacing) !== null && _value$spacing !== void 0 && _value$spacing.padding) && Object.keys(value === null || value === void 0 ? void 0 : (_value$spacing2 = value.spacing) === null || _value$spacing2 === void 0 ? void 0 : _value$spacing2.padding).length;
-  };
+  const hasPaddingValue = () => !!value?.spacing?.padding && Object.keys(value?.spacing?.padding).length;
 
   const resetPaddingValue = () => setPaddingValues(undefined);
 
@@ -286,9 +270,9 @@ function DimensionsPanel(_ref4) {
 
 
   const showMarginControl = useHasMargin(settings);
-  const rawMargin = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci2 = inheritedValue.spacing) === null || _inheritedValue$spaci2 === void 0 ? void 0 : _inheritedValue$spaci2.margin);
+  const rawMargin = decodeValue(inheritedValue?.spacing?.margin);
   const marginValues = splitStyleValue(rawMargin);
-  const marginSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing9 = settings.spacing) === null || _settings$spacing9 === void 0 ? void 0 : _settings$spacing9.margin) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing10 = settings.spacing) === null || _settings$spacing10 === void 0 ? void 0 : _settings$spacing10.margin : settings === null || settings === void 0 ? void 0 : (_settings$spacing11 = settings.spacing) === null || _settings$spacing11 === void 0 ? void 0 : (_settings$spacing11$m = _settings$spacing11.margin) === null || _settings$spacing11$m === void 0 ? void 0 : _settings$spacing11$m.sides;
+  const marginSides = Array.isArray(settings?.spacing?.margin) ? settings?.spacing?.margin : settings?.spacing?.margin?.sides;
   const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side));
 
   const setMarginValues = newMarginValues => {
@@ -296,11 +280,7 @@ function DimensionsPanel(_ref4) {
     onChange((0, _object.setImmutably)(value, ['spacing', 'margin'], margin));
   };
 
-  const hasMarginValue = () => {
-    var _value$spacing3, _value$spacing4;
-
-    return !!(value !== null && value !== void 0 && (_value$spacing3 = value.spacing) !== null && _value$spacing3 !== void 0 && _value$spacing3.margin) && Object.keys(value === null || value === void 0 ? void 0 : (_value$spacing4 = value.spacing) === null || _value$spacing4 === void 0 ? void 0 : _value$spacing4.margin).length;
-  };
+  const hasMarginValue = () => !!value?.spacing?.margin && Object.keys(value?.spacing?.margin).length;
 
   const resetMarginValue = () => setMarginValues(undefined);
 
@@ -308,9 +288,9 @@ function DimensionsPanel(_ref4) {
 
 
   const showGapControl = useHasGap(settings);
-  const gapValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci3 = inheritedValue.spacing) === null || _inheritedValue$spaci3 === void 0 ? void 0 : _inheritedValue$spaci3.blockGap);
+  const gapValue = decodeValue(inheritedValue?.spacing?.blockGap);
   const gapValues = splitGapValue(gapValue);
-  const gapSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing12 = settings.spacing) === null || _settings$spacing12 === void 0 ? void 0 : _settings$spacing12.blockGap) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing13 = settings.spacing) === null || _settings$spacing13 === void 0 ? void 0 : _settings$spacing13.blockGap : settings === null || settings === void 0 ? void 0 : (_settings$spacing14 = settings.spacing) === null || _settings$spacing14 === void 0 ? void 0 : (_settings$spacing14$b = _settings$spacing14.blockGap) === null || _settings$spacing14$b === void 0 ? void 0 : _settings$spacing14$b.sides;
+  const gapSides = Array.isArray(settings?.spacing?.blockGap) ? settings?.spacing?.blockGap : settings?.spacing?.blockGap?.sides;
   const isAxialGap = gapSides && gapSides.some(side => AXIAL_SIDES.includes(side));
 
   const setGapValue = newGapValue => {
@@ -323,27 +303,23 @@ function DimensionsPanel(_ref4) {
     } // If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
 
 
-    if (!isAxialGap && nextBoxGapValue !== null && nextBoxGapValue !== void 0 && nextBoxGapValue.hasOwnProperty('top')) {
+    if (!isAxialGap && nextBoxGapValue?.hasOwnProperty('top')) {
       setGapValue(nextBoxGapValue.top);
     } else {
       setGapValue({
-        top: nextBoxGapValue === null || nextBoxGapValue === void 0 ? void 0 : nextBoxGapValue.top,
-        left: nextBoxGapValue === null || nextBoxGapValue === void 0 ? void 0 : nextBoxGapValue.left
+        top: nextBoxGapValue?.top,
+        left: nextBoxGapValue?.left
       });
     }
   };
 
   const resetGapValue = () => setGapValue(undefined);
 
-  const hasGapValue = () => {
-    var _value$spacing5;
-
-    return !!(value !== null && value !== void 0 && (_value$spacing5 = value.spacing) !== null && _value$spacing5 !== void 0 && _value$spacing5.blockGap);
-  }; // Min Height
+  const hasGapValue = () => !!value?.spacing?.blockGap; // Min Height
 
 
   const showMinHeightControl = useHasMinHeight(settings);
-  const minHeightValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$dimen = inheritedValue.dimensions) === null || _inheritedValue$dimen === void 0 ? void 0 : _inheritedValue$dimen.minHeight);
+  const minHeightValue = decodeValue(inheritedValue?.dimensions?.minHeight);
 
   const setMinHeightValue = newValue => {
     onChange((0, _object.setImmutably)(value, ['dimensions', 'minHeight'], newValue));
@@ -353,23 +329,19 @@ function DimensionsPanel(_ref4) {
     setMinHeightValue(undefined);
   };
 
-  const hasMinHeightValue = () => {
-    var _value$dimensions;
-
-    return !!(value !== null && value !== void 0 && (_value$dimensions = value.dimensions) !== null && _value$dimensions !== void 0 && _value$dimensions.minHeight);
-  }; // Child Layout
+  const hasMinHeightValue = () => !!value?.dimensions?.minHeight; // Child Layout
 
 
   const showChildLayoutControl = useHasChildLayout(settings);
-  const childLayout = inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.layout;
+  const childLayout = inheritedValue?.layout;
   const {
     orientation = 'horizontal'
-  } = (_settings$parentLayou2 = settings === null || settings === void 0 ? void 0 : settings.parentLayout) !== null && _settings$parentLayou2 !== void 0 ? _settings$parentLayou2 : {};
+  } = (_settings$parentLayou2 = settings?.parentLayout) !== null && _settings$parentLayou2 !== void 0 ? _settings$parentLayou2 : {};
   const childLayoutOrientationLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
 
   const setChildLayout = newChildLayout => {
     onChange({ ...value,
-      layout: { ...(value === null || value === void 0 ? void 0 : value.layout),
+      layout: { ...value?.layout,
         ...newChildLayout
       }
     });
@@ -382,22 +354,22 @@ function DimensionsPanel(_ref4) {
     });
   };
 
-  const hasChildLayoutValue = () => !!(value !== null && value !== void 0 && value.layout);
+  const hasChildLayoutValue = () => !!value?.layout;
 
   const resetAllFilter = (0, _element.useCallback)(previousValue => {
     return { ...previousValue,
-      layout: (0, _utils2.cleanEmptyObject)({ ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.layout),
+      layout: (0, _utils2.cleanEmptyObject)({ ...previousValue?.layout,
         contentSize: undefined,
         wideSize: undefined,
         selfStretch: undefined,
         flexSize: undefined
       }),
-      spacing: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.spacing),
+      spacing: { ...previousValue?.spacing,
         padding: undefined,
         margin: undefined,
         blockGap: undefined
       },
-      dimensions: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.dimensions),
+      dimensions: { ...previousValue?.dimensions,
         minHeight: undefined
       }
     };
@@ -480,7 +452,6 @@ function DimensionsPanel(_ref4) {
     sides: paddingSides,
     units: units,
     allowReset: false,
-    splitOnAxis: isAxialPadding,
     onMouseOver: onMouseOverPadding,
     onMouseOut: onMouseLeaveControls
   })), showMarginControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
@@ -509,7 +480,6 @@ function DimensionsPanel(_ref4) {
     sides: marginSides,
     units: units,
     allowReset: false,
-    splitOnAxis: isAxialMargin,
     onMouseOver: onMouseOverMargin,
     onMouseOut: onMouseLeaveControls
   })), showGapControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
@@ -541,11 +511,11 @@ function DimensionsPanel(_ref4) {
     label: (0, _i18n.__)('Block spacing'),
     min: 0,
     onChange: setGapValues,
+    showSideInLabel: false,
     sides: isAxialGap ? gapSides : ['top'] // Use 'top' as the shorthand property in non-axial configurations.
     ,
     values: gapValues,
-    allowReset: false,
-    splitOnAxis: isAxialGap
+    allowReset: false
   })), showMinHeightControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
     hasValue: hasMinHeightValue,
     label: (0, _i18n.__)('Min. height'),
@@ -567,7 +537,7 @@ function DimensionsPanel(_ref4) {
   }, (0, _element.createElement)(_childLayoutControl.default, {
     value: childLayout,
     onChange: setChildLayout,
-    parentLayout: settings === null || settings === void 0 ? void 0 : settings.parentLayout
+    parentLayout: settings?.parentLayout
   })));
 }
 //# sourceMappingURL=dimensions-panel.js.map