@wordpress/block-editor 11.5.0 → 11.7.0

package/build/components/editor-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["EDITOR_STYLES_SELECTOR","namesPlugin","a11yPlugin","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","transformedStyles","map","css","index"],"mappings":";;;;;;;;;AAUA;;AAPA;;AACA;;AACA;;AAUA;;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG,wBAA/B;AACA,oBAAQ,CAAEC,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,yBAAT,CAAoCC,MAApC,EAA6C;AAC5C,SAAO,0BACJC,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,IAA1B;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAwBF,aAA9B;AACA,UAAMG,MAAM,GAAGH,aAAa,CAACI,aAAd,CACdV,sBADc,CAAf;AAIA,QAAIW,eAAJ;;AAEA,QAAK,CAAEF,MAAP,EAAgB;AACf;AACA;AACA;AACA,YAAMG,UAAU,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAnB;AACAD,MAAAA,UAAU,CAACE,SAAX,CAAqBC,GAArB,CAA0B,uBAA1B;AACAP,MAAAA,IAAI,CAACQ,WAAL,CAAkBJ,UAAlB;AAEAD,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACEL,UADF,EACc,IADd,EAEhBM,gBAFgB,CAEE,kBAFF,CAAlB;AAIAV,MAAAA,IAAI,CAACW,WAAL,CAAkBP,UAAlB;AACA,KAbD,MAaO;AACND,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACER,MADF,EACU,IADV,EAEhBS,gBAFgB,CAEE,kBAFF,CAAlB;AAGA;;AACD,UAAME,qBAAqB,GAAG,oBAAQT,eAAR,CAA9B,CA/BW,CAgCX;;AACA,QACCS,qBAAqB,CAACC,SAAtB,KAAoC,GAApC,IACAD,qBAAqB,CAACE,KAAtB,OAAkC,CAFnC,EAGE;AACDd,MAAAA,IAAI,CAACM,SAAL,CAAeS,MAAf,CAAuB,eAAvB;AACA,KALD,MAKO;AACNf,MAAAA,IAAI,CAACM,SAAL,CAAeC,GAAf,CAAoB,eAApB;AACA;AACD,GA1CK,EA2CN,CAAEX,MAAF,CA3CM,CAAP;AA6CA;;AAEc,SAASoB,YAAT,OAAoC;AAAA,MAAb;AAAEpB,IAAAA;AAAF,GAAa;AAClD,QAAMqB,iBAAiB,GAAG,sBACzB,MAAM,8BAAiBrB,MAAjB,EAAyBJ,sBAAzB,CADmB,EAEzB,CAAEI,MAAF,CAFyB,CAA1B;AAKA,SACC,qDAGC;AAAO,IAAA,GAAG,EAAGD,yBAAyB,CAAEC,MAAF;AAAtC,IAHD,EAIGqB,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,GAAF,EAAOC,KAAP,KACxB;AAAO,IAAA,GAAG,EAAGA;AAAb,KAAuBD,GAAvB,CADC,CAJH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),\n\t\t[ styles ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["EDITOR_STYLES_SELECTOR","namesPlugin","a11yPlugin","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","transformedStyles","filter","style","css","transformedSvgs","__unstableType","map","assets","join","index","visibility","position","left","overflow","__html"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { SVG } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() =>\n\t\t\ttransformStyles(\n\t\t\t\tstyles.filter( ( style ) => style?.css ),\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t),\n\t\t[ styles ]\n\t);\n\n\tconst transformedSvgs = useMemo(\n\t\t() =>\n\t\t\tstyles\n\t\t\t\t.filter( ( style ) => style.__unstableType === 'svgs' )\n\t\t\t\t.map( ( style ) => style.assets )\n\t\t\t\t.join( '' ),\n\t\t[ styles ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t\tdangerouslySetInnerHTML={ { __html: transformedSvgs } }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}

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

@@ -0,0 +1,306 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BorderPanel;
+exports.useHasBorderPanel = useHasBorderPanel;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _borderRadiusControl = _interopRequireDefault(require("../border-radius-control"));
+
+var _hooks = require("./hooks");
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useHasBorderPanel(settings) {
+  const controls = [useHasBorderColorControl(settings), useHasBorderRadiusControl(settings), useHasBorderStyleControl(settings), useHasBorderWidthControl(settings)];
+  return controls.some(Boolean);
+}
+
+function useHasBorderColorControl(settings) {
+  var _settings$border;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$border = settings.border) === null || _settings$border === void 0 ? void 0 : _settings$border.color;
+}
+
+function useHasBorderRadiusControl(settings) {
+  var _settings$border2;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$border2 = settings.border) === null || _settings$border2 === void 0 ? void 0 : _settings$border2.radius;
+}
+
+function useHasBorderStyleControl(settings) {
+  var _settings$border3;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$border3 = settings.border) === null || _settings$border3 === void 0 ? void 0 : _settings$border3.style;
+}
+
+function useHasBorderWidthControl(settings) {
+  var _settings$border4;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$border4 = settings.border) === null || _settings$border4 === void 0 ? void 0 : _settings$border4.width;
+}
+
+function applyFallbackStyle(border) {
+  if (!border) {
+    return border;
+  }
+
+  if (!border.style && (border.color || border.width)) {
+    return { ...border,
+      style: 'solid'
+    };
+  }
+
+  return border;
+}
+
+function applyAllFallbackStyles(border) {
+  if (!border) {
+    return border;
+  }
+
+  if ((0, _components.__experimentalHasSplitBorders)(border)) {
+    return {
+      top: applyFallbackStyle(border.top),
+      right: applyFallbackStyle(border.right),
+      bottom: applyFallbackStyle(border.bottom),
+      left: applyFallbackStyle(border.left)
+    };
+  }
+
+  return applyFallbackStyle(border);
+}
+
+function BorderToolsPanel(_ref) {
+  let {
+    resetAllFilter,
+    onChange,
+    value,
+    panelId,
+    children
+  } = _ref;
+
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Border'),
+    resetAll: resetAll,
+    panelId: panelId
+  }, children);
+}
+
+const DEFAULT_CONTROLS = {
+  radius: true,
+  color: true,
+  width: true
+};
+
+function BorderPanel(_ref2) {
+  let {
+    as: Wrapper = BorderToolsPanel,
+    value,
+    onChange,
+    inheritedValue = value,
+    settings,
+    panelId,
+    defaultControls = DEFAULT_CONTROLS
+  } = _ref2;
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+
+  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
+    settings
+  }, '', rawValue);
+
+  const encodeColorValue = colorValue => {
+    const allColors = colors.flatMap(_ref3 => {
+      let {
+        colors: originColors
+      } = _ref3;
+      return originColors;
+    });
+    const colorObject = allColors.find(_ref4 => {
+      let {
+        color
+      } = _ref4;
+      return color === colorValue;
+    });
+    return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
+  };
+
+  const decodeColorValue = (0, _element.useCallback)(colorValue => {
+    const allColors = colors.flatMap(_ref5 => {
+      let {
+        colors: originColors
+      } = _ref5;
+      return originColors;
+    });
+    const colorObject = allColors.find(_ref6 => {
+      let {
+        slug
+      } = _ref6;
+      return colorValue === 'var:preset|color|' + slug;
+    });
+    return colorObject ? colorObject.color : colorValue;
+  }, [colors]);
+  const border = (0, _element.useMemo)(() => {
+    var _inheritedValue$borde, _inheritedValue$borde2;
+
+    if ((0, _components.__experimentalHasSplitBorders)(inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.border)) {
+      const borderValue = { ...(inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.border)
+      };
+      ['top', 'right', 'bottom', 'left'].forEach(side => {
+        var _borderValue$side;
+
+        borderValue[side] = { ...borderValue[side],
+          color: decodeColorValue((_borderValue$side = borderValue[side]) === null || _borderValue$side === void 0 ? void 0 : _borderValue$side.color)
+        };
+      });
+      return borderValue;
+    }
+
+    return { ...(inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.border),
+      color: inheritedValue !== null && inheritedValue !== void 0 && (_inheritedValue$borde = inheritedValue.border) !== null && _inheritedValue$borde !== void 0 && _inheritedValue$borde.color ? decodeColorValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$borde2 = inheritedValue.border) === null || _inheritedValue$borde2 === void 0 ? void 0 : _inheritedValue$borde2.color) : undefined
+    };
+  }, [inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.border, decodeColorValue]);
+
+  const setBorder = newBorder => onChange({ ...value,
+    border: newBorder
+  });
+
+  const showBorderColor = useHasBorderColorControl(settings);
+  const showBorderStyle = useHasBorderStyleControl(settings);
+  const showBorderWidth = useHasBorderWidthControl(settings); // Border radius.
+
+  const showBorderRadius = useHasBorderRadiusControl(settings);
+  const borderRadiusValues = decodeValue(border === null || border === void 0 ? void 0 : border.radius);
+
+  const setBorderRadius = newBorderRadius => setBorder({ ...border,
+    radius: newBorderRadius
+  });
+
+  const hasBorderRadius = () => {
+    var _value$border;
+
+    const borderValues = value === null || value === void 0 ? void 0 : (_value$border = value.border) === null || _value$border === void 0 ? void 0 : _value$border.radius;
+
+    if (typeof borderValues === 'object') {
+      return Object.entries(borderValues).some(Boolean);
+    }
+
+    return !!borderValues;
+  };
+
+  const resetBorder = () => {
+    if (hasBorderRadius()) {
+      var _value$border2;
+
+      return setBorder({
+        radius: value === null || value === void 0 ? void 0 : (_value$border2 = value.border) === null || _value$border2 === void 0 ? void 0 : _value$border2.radius
+      });
+    }
+
+    setBorder(undefined);
+  };
+
+  const onBorderChange = newBorder => {
+    // Ensure we have a visible border style when a border width or
+    // color is being selected.
+    const newBorderWithStyle = applyAllFallbackStyles(newBorder); // As we can't conditionally generate styles based on if other
+    // style properties have been set we need to force split border
+    // definitions for user set border styles. Border radius is derived
+    // from the same property i.e. `border.radius` if it is a string
+    // that is used. The longhand border radii styles are only generated
+    // if that property is an object.
+    //
+    // For borders (color, style, and width) those are all properties on
+    // the `border` style property. This means if the theme.json defined
+    // split borders and the user condenses them into a flat border or
+    // vice-versa we'd get both sets of styles which would conflict.
+
+    const updatedBorder = !(0, _components.__experimentalHasSplitBorders)(newBorderWithStyle) ? {
+      top: newBorderWithStyle,
+      right: newBorderWithStyle,
+      bottom: newBorderWithStyle,
+      left: newBorderWithStyle
+    } : {
+      color: null,
+      style: null,
+      width: null,
+      ...newBorderWithStyle
+    };
+    ['top', 'right', 'bottom', 'left'].forEach(side => {
+      var _updatedBorder$side;
+
+      updatedBorder[side] = { ...updatedBorder[side],
+        color: encodeColorValue((_updatedBorder$side = updatedBorder[side]) === null || _updatedBorder$side === void 0 ? void 0 : _updatedBorder$side.color)
+      };
+    }); // As radius is maintained separately to color, style, and width
+    // maintain its value. Undefined values here will be cleaned when
+    // global styles are saved.
+
+    setBorder({
+      radius: border === null || border === void 0 ? void 0 : border.radius,
+      ...updatedBorder
+    });
+  };
+
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return { ...previousValue,
+      border: undefined
+    };
+  }, []);
+  const showBorderByDefault = (defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.color) || (defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.width);
+  return (0, _element.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, (showBorderWidth || showBorderColor) && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => (0, _components.__experimentalIsDefinedBorder)(value === null || value === void 0 ? void 0 : value.border),
+    label: (0, _i18n.__)('Border'),
+    onDeselect: () => resetBorder(),
+    isShownByDefault: showBorderByDefault,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalBorderBoxControl, {
+    colors: colors,
+    enableAlpha: true,
+    enableStyle: showBorderStyle,
+    onChange: onBorderChange,
+    popoverOffset: 40,
+    popoverPlacement: "left-start",
+    value: border,
+    __experimentalIsRenderedInSidebar: true,
+    size: '__unstable-large'
+  })), showBorderRadius && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasBorderRadius,
+    label: (0, _i18n.__)('Radius'),
+    onDeselect: () => setBorderRadius(undefined),
+    isShownByDefault: defaultControls.radius,
+    panelId: panelId
+  }, (0, _element.createElement)(_borderRadiusControl.default, {
+    values: borderRadiusValues,
+    onChange: newValue => {
+      setBorderRadius(newValue || undefined);
+    }
+  })));
+}
+//# sourceMappingURL=border-panel.js.map

package/build/components/global-styles/border-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/border-panel.js"],"names":["useHasBorderPanel","settings","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","border","color","radius","style","width","applyFallbackStyle","applyAllFallbackStyles","top","right","bottom","left","BorderToolsPanel","resetAllFilter","onChange","value","panelId","children","resetAll","updatedValue","DEFAULT_CONTROLS","BorderPanel","as","Wrapper","inheritedValue","defaultControls","colors","decodeValue","rawValue","encodeColorValue","colorValue","allColors","flatMap","originColors","colorObject","find","slug","decodeColorValue","borderValue","forEach","side","undefined","setBorder","newBorder","showBorderColor","showBorderStyle","showBorderWidth","showBorderRadius","borderRadiusValues","setBorderRadius","newBorderRadius","hasBorderRadius","borderValues","Object","entries","resetBorder","onBorderChange","newBorderWithStyle","updatedBorder","previousValue","showBorderByDefault","newValue"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderBoxControl as BorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderRadiusControl from '../border-radius-control';\nimport { useColorsPerOrigin } from './hooks';\nimport { getValueFromVariable } from './utils';\n\nexport function useHasBorderPanel( settings ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( settings ),\n\t\tuseHasBorderRadiusControl( settings ),\n\t\tuseHasBorderStyleControl( settings ),\n\t\tuseHasBorderWidthControl( settings ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( settings ) {\n\treturn settings?.border?.color;\n}\n\nfunction useHasBorderRadiusControl( settings ) {\n\treturn settings?.border?.radius;\n}\n\nfunction useHasBorderStyleControl( settings ) {\n\treturn settings?.border?.style;\n}\n\nfunction useHasBorderWidthControl( settings ) {\n\treturn settings?.border?.width;\n}\n\nfunction applyFallbackStyle( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( ! border.style && ( border.color || border.width ) ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nfunction BorderToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Border' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tradius: true,\n\tcolor: true,\n\twidth: true,\n};\n\nexport default function BorderPanel( {\n\tas: Wrapper = BorderToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\tconst decodeColorValue = 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( { slug } ) => colorValue === 'var:preset|color|' + slug\n\t\t\t);\n\t\t\treturn colorObject ? colorObject.color : colorValue;\n\t\t},\n\t\t[ colors ]\n\t);\n\tconst border = useMemo( () => {\n\t\tif ( hasSplitBorders( inheritedValue?.border ) ) {\n\t\t\tconst borderValue = { ...inheritedValue?.border };\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tborderValue[ side ] = {\n\t\t\t\t\t...borderValue[ side ],\n\t\t\t\t\tcolor: decodeColorValue( borderValue[ side ]?.color ),\n\t\t\t\t};\n\t\t\t} );\n\t\t\treturn borderValue;\n\t\t}\n\t\treturn {\n\t\t\t...inheritedValue?.border,\n\t\t\tcolor: inheritedValue?.border?.color\n\t\t\t\t? decodeColorValue( inheritedValue?.border?.color )\n\t\t\t\t: undefined,\n\t\t};\n\t}, [ inheritedValue?.border, decodeColorValue ] );\n\tconst setBorder = ( newBorder ) =>\n\t\tonChange( { ...value, border: newBorder } );\n\tconst showBorderColor = useHasBorderColorControl( settings );\n\tconst showBorderStyle = useHasBorderStyleControl( settings );\n\tconst showBorderWidth = useHasBorderWidthControl( settings );\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( settings );\n\tconst borderRadiusValues = decodeValue( border?.radius );\n\tconst setBorderRadius = ( newBorderRadius ) =>\n\t\tsetBorder( { ...border, radius: newBorderRadius } );\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = value?.border?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( Boolean );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\n\tconst resetBorder = () => {\n\t\tif ( hasBorderRadius() ) {\n\t\t\treturn setBorder( { radius: value?.border?.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Ensure we have a visible border style when a border width or\n\t\t// color is being selected.\n\t\tconst newBorderWithStyle = applyAllFallbackStyles( newBorder );\n\n\t\t// As we can't conditionally generate styles based on if other\n\t\t// style properties have been set we need to force split border\n\t\t// definitions for user set border styles. Border radius is derived\n\t\t// from the same property i.e. `border.radius` if it is a string\n\t\t// that is used. The longhand border radii styles are only generated\n\t\t// if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst updatedBorder = ! hasSplitBorders( newBorderWithStyle )\n\t\t\t? {\n\t\t\t\t\ttop: newBorderWithStyle,\n\t\t\t\t\tright: newBorderWithStyle,\n\t\t\t\t\tbottom: newBorderWithStyle,\n\t\t\t\t\tleft: newBorderWithStyle,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...newBorderWithStyle,\n\t\t\t  };\n\n\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\tupdatedBorder[ side ] = {\n\t\t\t\t...updatedBorder[ side ],\n\t\t\t\tcolor: encodeColorValue( updatedBorder[ side ]?.color ),\n\t\t\t};\n\t\t} );\n\n\t\t// As radius is maintained separately to color, style, and width\n\t\t// maintain its value. Undefined values here will be cleaned when\n\t\t// global styles are saved.\n\t\tsetBorder( { radius: border?.radius, ...updatedBorder } );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tborder: undefined,\n\t\t};\n\t}, [] );\n\n\tconst showBorderByDefault =\n\t\tdefaultControls?.color || defaultControls?.width;\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => isDefinedBorder( value?.border ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tenableAlpha={ true }\n\t\t\t\t\t\tenableStyle={ showBorderStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverOffset={ 40 }\n\t\t\t\t\t\tpopoverPlacement=\"left-start\"\n\t\t\t\t\t\tvalue={ border }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={ true }\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ () => setBorderRadius( undefined ) }\n\t\t\t\t\tisShownByDefault={ defaultControls.radius }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetBorderRadius( newValue || undefined );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"]}