@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -20,15 +20,12 @@ import ContrastChecker from '../contrast-checker';
 import InspectorControls from '../inspector-controls';
 import { useHasColorPanel, useHasTextPanel, useHasBackgroundPanel } from './color-panel.js';
 
-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 = useColorsPerOrigin(settings);
   const gradients = useGradientsPerOrigin(settings);
   const globalStyles = useGlobalStyles();
@@ -37,13 +34,11 @@ const ColorPanel = _ref => {
   const {
     baseGlobalStyles
   } = useSelect(select => {
-    var _getSettings, _getSettings$__experi;
-
     const {
       getSettings
     } = select(blockEditorStore);
     return {
-      baseGlobalStyles: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : (_getSettings$__experi = _getSettings.__experimentalGlobalStylesBaseStyles) === null || _getSettings$__experi === void 0 ? void 0 : _getSettings$__experi.color
+      baseGlobalStyles: getSettings()?.__experimentalGlobalStylesBaseStyles?.color
     };
   });
 
@@ -52,46 +47,34 @@ const ColorPanel = _ref => {
   }, '', rawValue);
 
   const encodeColorValue = 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 = 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 = 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 = useCallback(newColor => {
     onChange(setImmutably(value, ['color', 'text'], encodeColorValue(newColor)));
   }, [encodeColorValue, onChange, value]);
   const resetTextColor = useCallback(() => setTextColor(undefined), [setTextColor]); // BackgroundColor
 
   const showBackgroundPanel = 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 = useCallback(newColor => {
     const newValue = setImmutably(value, ['color', 'background'], encodeColorValue(newColor));
     newValue.color.gradient = undefined;
@@ -107,7 +90,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 = useMemo(() => [showTextPanel && {
     label: __('Text'),
@@ -130,8 +113,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-module/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":["useSelect","useEffect","useState","useMemo","useCallback","__","useGlobalStyles","store","blockEditorStore","PanelColorGradientSettings","useColorsPerOrigin","useGradientsPerOrigin","getValueFromVariable","setImmutably","ContrastChecker","InspectorControls","useHasColorPanel","useHasTextPanel","useHasBackgroundPanel","ColorPanel","value","inheritedValue","onChange","settings","colors","gradients","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","__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":["useSelect","useEffect","useState","useMemo","useCallback","__","useGlobalStyles","store","blockEditorStore","PanelColorGradientSettings","useColorsPerOrigin","useGradientsPerOrigin","getValueFromVariable","setImmutably","ContrastChecker","InspectorControls","useHasColorPanel","useHasTextPanel","useHasBackgroundPanel","ColorPanel","value","inheritedValue","onChange","settings","colors","gradients","globalStyles","detectedBackgroundColor","setDetectedBackgroundColor","detectedTextColor","setDetectedTextColor","baseGlobalStyles","select","getSettings","__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-module/components/global-styles/dimensions-panel.js

@@ -35,39 +35,27 @@ export 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) {
@@ -79,26 +67,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.
 
@@ -115,7 +104,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;
 }
@@ -146,23 +135,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);
@@ -184,68 +171,69 @@ const DEFAULT_CONTROLS = {
   minHeight: true,
   childLayout: true
 };
-export default 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 => getValueFromVariable({
-    settings
-  }, '', rawValue);
+export default 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] = getValueFromVariable({
+          settings
+        }, '', rawValue[key]);
+        return acc;
+      }, {});
+    }
+
+    return getValueFromVariable({
+      settings
+    }, '', rawValue);
+  };
 
   const showSpacingPresetsControl = useHasSpacingPresets(settings);
   const units = useCustomUnits({
-    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(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(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 => {
@@ -253,11 +241,7 @@ export default function DimensionsPanel(_ref4) {
     onChange(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);
 
@@ -265,9 +249,9 @@ export default 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 => {
@@ -275,11 +259,7 @@ export default function DimensionsPanel(_ref4) {
     onChange(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);
 
@@ -287,9 +267,9 @@ export default 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 => {
@@ -302,27 +282,23 @@ export default 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(setImmutably(value, ['dimensions', 'minHeight'], newValue));
@@ -332,23 +308,19 @@ export default 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' ? __('Width') : __('Height');
 
   const setChildLayout = newChildLayout => {
     onChange({ ...value,
-      layout: { ...(value === null || value === void 0 ? void 0 : value.layout),
+      layout: { ...value?.layout,
         ...newChildLayout
       }
     });
@@ -361,22 +333,22 @@ export default function DimensionsPanel(_ref4) {
     });
   };
 
-  const hasChildLayoutValue = () => !!(value !== null && value !== void 0 && value.layout);
+  const hasChildLayoutValue = () => !!value?.layout;
 
   const resetAllFilter = useCallback(previousValue => {
     return { ...previousValue,
-      layout: cleanEmptyObject({ ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.layout),
+      layout: 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
       }
     };
@@ -459,7 +431,6 @@ export default function DimensionsPanel(_ref4) {
     sides: paddingSides,
     units: units,
     allowReset: false,
-    splitOnAxis: isAxialPadding,
     onMouseOver: onMouseOverPadding,
     onMouseOut: onMouseLeaveControls
   })), showMarginControl && createElement(ToolsPanelItem, {
@@ -488,7 +459,6 @@ export default function DimensionsPanel(_ref4) {
     sides: marginSides,
     units: units,
     allowReset: false,
-    splitOnAxis: isAxialMargin,
     onMouseOver: onMouseOverMargin,
     onMouseOut: onMouseLeaveControls
   })), showGapControl && createElement(ToolsPanelItem, {
@@ -520,11 +490,11 @@ export default function DimensionsPanel(_ref4) {
     label: __('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 && createElement(ToolsPanelItem, {
     hasValue: hasMinHeightValue,
     label: __('Min. height'),
@@ -546,7 +516,7 @@ export default function DimensionsPanel(_ref4) {
   }, createElement(ChildLayoutControl, {
     value: childLayout,
     onChange: setChildLayout,
-    parentLayout: settings === null || settings === void 0 ? void 0 : settings.parentLayout
+    parentLayout: settings?.parentLayout
   })));
 }
 //# sourceMappingURL=dimensions-panel.js.map