@wordpress/edit-site 5.4.0 → 5.6.0

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

@@ -4,18 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BorderPanel;
-exports.useHasBorderPanel = useHasBorderPanel;
 
 var _element = require("@wordpress/element");
 
 var _blockEditor = require("@wordpress/block-editor");
 
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _hooks = require("./hooks");
-
 var _privateApis = require("../../private-apis");
 
 /**
@@ -26,167 +19,35 @@ var _privateApis = require("../../private-apis");
  * Internal dependencies
  */
 const {
+  useGlobalStyle,
   useGlobalSetting,
-  useGlobalStyle
+  useSettingsForBlockElement,
+  BorderPanel: StylesBorderPanel
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
 
-function useHasBorderPanel(name) {
-  const controls = [useHasBorderColorControl(name), useHasBorderRadiusControl(name), useHasBorderStyleControl(name), useHasBorderWidthControl(name)];
-  return controls.some(Boolean);
-}
-
-function useHasBorderColorControl(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return useGlobalSetting('border.color', name)[0] && supports.includes('borderColor');
-}
-
-function useHasBorderRadiusControl(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return useGlobalSetting('border.radius', name)[0] && supports.includes('borderRadius');
-}
-
-function useHasBorderStyleControl(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return useGlobalSetting('border.style', name)[0] && supports.includes('borderStyle');
-}
-
-function useHasBorderWidthControl(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return useGlobalSetting('border.width', name)[0] && supports.includes('borderWidth');
-}
-
-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 BorderPanel(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const prefix = variation ? `variations.${variation}.` : ''; // To better reflect if the user has customized a value we need to
-  // ensure the style value being checked is from the `user` origin.
-
-  const [userBorderStyles] = useGlobalStyle(`${prefix}border`, name, 'user');
-  const [border, setBorder] = useGlobalStyle(`${prefix}border`, name);
-  const colors = (0, _hooks.useColorsPerOrigin)(name);
-  const showBorderColor = useHasBorderColorControl(name);
-  const showBorderStyle = useHasBorderStyleControl(name);
-  const showBorderWidth = useHasBorderWidthControl(name); // Border radius.
+  let prefixParts = [];
 
-  const showBorderRadius = useHasBorderRadiusControl(name);
-  const [borderRadiusValues, setBorderRadius] = useGlobalStyle(`${prefix}border.radius`, name);
-
-  const hasBorderRadius = () => {
-    const borderValues = userBorderStyles === null || userBorderStyles === void 0 ? void 0 : userBorderStyles.radius;
-
-    if (typeof borderValues === 'object') {
-      return Object.entries(borderValues).some(Boolean);
-    }
-
-    return !!borderValues;
-  };
-
-  const resetBorder = () => {
-    if (hasBorderRadius()) {
-      return setBorder({
-        radius: userBorderStyles.radius
-      });
-    }
-
-    setBorder(undefined);
-  };
-
-  const resetAll = (0, _element.useCallback)(() => setBorder(undefined), [setBorder]);
-  const onBorderChange = (0, _element.useCallback)(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
-    }; // As radius is maintained separately to color, style, and width
-    // maintain its value. Undefined values here will be cleaned when
-    // global styles are saved.
+  if (variation) {
+    prefixParts = ['variations', variation].concat(prefixParts);
+  }
 
-    setBorder({
-      radius: border === null || border === void 0 ? void 0 : border.radius,
-      ...updatedBorder
-    });
-  }, [setBorder]);
-  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Border'),
-    resetAll: resetAll
-  }, (showBorderWidth || showBorderColor) && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: () => (0, _components.__experimentalIsDefinedBorder)(userBorderStyles),
-    label: (0, _i18n.__)('Border'),
-    onDeselect: () => resetBorder(),
-    isShownByDefault: true
-  }, (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: true
-  }, (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
-    values: borderRadiusValues,
-    onChange: value => {
-      setBorderRadius(value || undefined);
-    }
-  })));
+  const prefix = prefixParts.join('.');
+  const [style] = useGlobalStyle(prefix, name, 'user', false);
+  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+    shouldDecodeEncode: false
+  });
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  return (0, _element.createElement)(StylesBorderPanel, {
+    inheritedValue: inheritedStyle,
+    value: style,
+    onChange: setStyle,
+    settings: settings
+  });
 }
 //# sourceMappingURL=border-panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","applyFallbackStyle","border","style","color","width","applyAllFallbackStyles","top","right","bottom","left","BorderPanel","variation","prefix","userBorderStyles","setBorder","colors","showBorderColor","showBorderStyle","showBorderWidth","showBorderRadius","borderRadiusValues","setBorderRadius","hasBorderRadius","borderValues","radius","Object","entries","resetBorder","undefined","resetAll","onBorderChange","newBorder","newBorderWithStyle","updatedBorder","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\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 } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSupportedStyles, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport function useHasBorderPanel( name ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( name ),\n\t\tuseHasBorderRadiusControl( name ),\n\t\tuseHasBorderStyleControl( name ),\n\t\tuseHasBorderWidthControl( name ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tuseGlobalSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tuseGlobalSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tuseGlobalSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tuseGlobalSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\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\nexport default function BorderPanel( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\t// To better reflect if the user has customized a value we need to\n\t// ensure the style value being checked is from the `user` origin.\n\tconst [ userBorderStyles ] = useGlobalStyle(\n\t\t`${ prefix }border`,\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );\n\tconst colors = useColorsPerOrigin( name );\n\n\tconst showBorderColor = useHasBorderColorControl( name );\n\tconst showBorderStyle = useHasBorderStyleControl( name );\n\tconst showBorderWidth = useHasBorderWidthControl( name );\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(\n\t\t`${ prefix }border.radius`,\n\t\tname\n\t);\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = userBorderStyles?.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: userBorderStyles.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );\n\tconst onBorderChange = useCallback(\n\t\t( newBorder ) => {\n\t\t\t// Ensure we have a visible border style when a border width or\n\t\t\t// color is being selected.\n\t\t\tconst newBorderWithStyle = applyAllFallbackStyles( newBorder );\n\n\t\t\t// As we can't conditionally generate styles based on if other\n\t\t\t// style properties have been set we need to force split border\n\t\t\t// definitions for user set border styles. Border radius is derived\n\t\t\t// from the same property i.e. `border.radius` if it is a string\n\t\t\t// that is used. The longhand border radii styles are only generated\n\t\t\t// if that property is an object.\n\t\t\t//\n\t\t\t// For borders (color, style, and width) those are all properties on\n\t\t\t// the `border` style property. This means if the theme.json defined\n\t\t\t// split borders and the user condenses them into a flat border or\n\t\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\t\tconst updatedBorder = ! hasSplitBorders( newBorderWithStyle )\n\t\t\t\t? {\n\t\t\t\t\t\ttop: newBorderWithStyle,\n\t\t\t\t\t\tright: newBorderWithStyle,\n\t\t\t\t\t\tbottom: newBorderWithStyle,\n\t\t\t\t\t\tleft: newBorderWithStyle,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\tcolor: null,\n\t\t\t\t\t\tstyle: null,\n\t\t\t\t\t\twidth: null,\n\t\t\t\t\t\t...newBorderWithStyle,\n\t\t\t\t  };\n\n\t\t\t// As radius is maintained separately to color, style, and width\n\t\t\t// maintain its value. Undefined values here will be cleaned when\n\t\t\t// global styles are saved.\n\t\t\tsetBorder( { radius: border?.radius, ...updatedBorder } );\n\t\t},\n\t\t[ setBorder ]\n\t);\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => isDefinedBorder( userBorderStyles ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ true }\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={ true }\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={ ( value ) => {\n\t\t\t\t\t\t\tsetBorderRadius( value || 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</ToolsPanel>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","BorderPanel","StylesBorderPanel","blockEditorPrivateApis","name","variation","prefixParts","concat","prefix","join","style","inheritedStyle","setStyle","shouldDecodeEncode","rawSettings","settings"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAM;AACLA,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,WAAW,EAAEC;AAJR,IAKF,yBAAQC,wBAAR,CALJ;;AAOe,SAASF,WAAT,OAAiD;AAAA,MAA3B;AAAEG,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AAC/D,MAAIC,WAAW,GAAG,EAAlB;;AACA,MAAKD,SAAL,EAAiB;AAChBC,IAAAA,WAAW,GAAG,CAAE,YAAF,EAAgBD,SAAhB,EAA4BE,MAA5B,CAAoCD,WAApC,CAAd;AACA;;AACD,QAAME,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYZ,cAAc,CAAEU,MAAF,EAAUJ,IAAV,EAAgB,MAAhB,EAAwB,KAAxB,CAAhC;AACA,QAAM,CAAEO,cAAF,EAAkBC,QAAlB,IAA+Bd,cAAc,CAAEU,MAAF,EAAUJ,IAAV,EAAgB,KAAhB,EAAuB;AACzES,IAAAA,kBAAkB,EAAE;AADqD,GAAvB,CAAnD;AAGA,QAAM,CAAEC,WAAF,IAAkBf,gBAAgB,CAAE,EAAF,EAAMK,IAAN,CAAxC;AACA,QAAMW,QAAQ,GAAGf,0BAA0B,CAAEc,WAAF,EAAeV,IAAf,CAA3C;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,cAAc,EAAGO,cADlB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGE,QAHZ;AAIC,IAAA,QAAQ,EAAGG;AAJZ,IADD;AAQA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tBorderPanel: StylesBorderPanel,\n} = unlock( blockEditorPrivateApis );\n\nexport default function BorderPanel( { name, variation = '' } ) {\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\n\treturn (\n\t\t<StylesBorderPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"]}

package/build/components/global-styles/context-menu.js

@@ -19,11 +19,9 @@ var _coreData = require("@wordpress/core-data");
 
 var _blockEditor = require("@wordpress/block-editor");
 
-var _borderPanel = require("./border-panel");
-
 var _colorUtils = require("./color-utils");
 
-var _dimensionsPanel = require("./dimensions-panel");
+var _filterUtils = require("./filter-utils");
 
 var _variationsPanel = require("./variations-panel");
 
@@ -37,8 +35,6 @@ var _shadowPanel = require("./shadow-panel");
 
 var _privateApis = require("../../private-apis");
 
-var _hooks = require("./hooks");
-
 /**
  * WordPress dependencies
  */
@@ -47,9 +43,11 @@ var _hooks = require("./hooks");
  * Internal dependencies
  */
 const {
+  useHasDimensionsPanel,
   useHasTypographyPanel,
+  useHasBorderPanel,
   useGlobalSetting,
-  overrideSettingsWithSupports
+  useSettingsForBlockElement
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
 
 function ContextMenu(_ref) {
@@ -58,13 +56,13 @@ function ContextMenu(_ref) {
     parentMenu = ''
   } = _ref;
   const [rawSettings] = useGlobalSetting('', name);
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  const settings = (0, _element.useMemo)(() => overrideSettingsWithSupports(rawSettings, supports), [rawSettings, supports]);
+  const settings = useSettingsForBlockElement(rawSettings, name);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = (0, _colorUtils.useHasColorPanel)(name);
-  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
+  const hasBorderPanel = useHasBorderPanel(settings);
   const hasEffectsPanel = (0, _shadowPanel.useHasShadowControl)(name);
-  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(name);
+  const hasFilterPanel = (0, _filterUtils.useHasFilterPanel)(name);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasDimensionsPanel;
   const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(name, parentMenu);
   const {
@@ -101,7 +99,11 @@ function ContextMenu(_ref) {
     icon: _icons.shadow,
     path: parentMenu + '/effects',
     "aria-label": (0, _i18n.__)('Shadow')
-  }, (0, _i18n.__)('Shadow')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+  }, (0, _i18n.__)('Shadow')), hasFilterPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.filter,
+    path: parentMenu + '/filters',
+    "aria-label": (0, _i18n.__)('Filters styles')
+  }, (0, _i18n.__)('Filters')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.layout,
     path: parentMenu + '/layout',
     "aria-label": (0, _i18n.__)('Layout styles')

package/build/components/global-styles/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["useHasTypographyPanel","useGlobalSetting","overrideSettingsWithSupports","blockEditorPrivateApis","ContextMenu","name","parentMenu","rawSettings","supports","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes","typography","color","border","shadow","layout","chevronLeft","chevronRight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tFlexItem,\n\tCardBody,\n\tCardDivider,\n} from '@wordpress/components';\nimport {\n\ttypography,\n\tborder,\n\tshadow,\n\tcolor,\n\tlayout,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\nimport { useSupportedStyles } from './hooks';\n\nconst {\n\tuseHasTypographyPanel,\n\tuseGlobalSetting,\n\toverrideSettingsWithSupports,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst supports = useSupportedStyles( name );\n\tconst settings = useMemo(\n\t\t() => overrideSettingsWithSupports( rawSettings, supports ),\n\t\t[ rawSettings, supports ]\n\t);\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\tconst isBlocksPanel =\n\t\tparentMenu.includes( 'blocks' ) &&\n\t\t! parentMenu.includes( 'variations' );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBorderPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ border }\n\t\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\t\taria-label={ __( 'Border' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasVariationsPanel && (\n\t\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t\t) }\n\t\t\t\t{ isBlocksPanel && canEditCSS && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<Spacer as=\"p\" paddingTop={ 2 } marginBottom={ 4 }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Add your own CSS to customize the block appearance.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\t\tpath={ parentMenu + '/css' }\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default ContextMenu;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ContextMenu","name","parentMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasFilterPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes","typography","color","border","shadow","filter","layout","chevronLeft","chevronRight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tFlexItem,\n\tCardBody,\n\tCardDivider,\n} from '@wordpress/components';\nimport {\n\ttypography,\n\tborder,\n\tfilter,\n\tshadow,\n\tcolor,\n\tlayout,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasColorPanel } from './color-utils';\nimport { useHasFilterPanel } from './filter-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasFilterPanel = useHasFilterPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\tconst isBlocksPanel =\n\t\tparentMenu.includes( 'blocks' ) &&\n\t\t! parentMenu.includes( 'variations' );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBorderPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ border }\n\t\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\t\taria-label={ __( 'Border' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasFilterPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ filter }\n\t\t\t\t\t\tpath={ parentMenu + '/filters' }\n\t\t\t\t\t\taria-label={ __( 'Filters styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Filters' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasVariationsPanel && (\n\t\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t\t) }\n\t\t\t\t{ isBlocksPanel && canEditCSS && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<Spacer as=\"p\" paddingTop={ 2 } marginBottom={ 4 }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Add your own CSS to customize the block appearance.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\t\tpath={ parentMenu + '/css' }\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default ContextMenu;\n"]}