@wordpress/edit-site 3.0.2 → 3.0.3

package/build/components/{sidebar → global-styles}/color-palette-panel.js

@@ -66,7 +66,9 @@ function ColorPalettePanel({
       slug
     }) => slug);
   }, [contextName]);
-  return (0, _element.createElement)(_components.__experimentalColorEdit, {
+  return (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-color-palette-panel"
+  }, (0, _element.createElement)(_components.__experimentalColorEdit, {
     immutableColorSlugs: immutableColorSlugs,
     colors: colors,
     onChange: newColors => {
@@ -74,6 +76,6 @@ function ColorPalettePanel({
     },
     emptyUI: (0, _i18n.__)('Colors are empty! Add some colors to create your own color palette.'),
     canReset: colors === userColors
-  });
+  }));
 }
 //# sourceMappingURL=color-palette-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-palette-panel.js"],"names":["EMPTY_ARRAY","ColorPalettePanel","contextName","getSetting","setSetting","colors","userColors","immutableColorSlugs","select","baseStyles","editSiteStore","getSettings","__experimentalGlobalStylesBaseStyles","contextualBasePalette","globalPalette","basePalette","theme","core","map","slug","newColors"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,EAApB;;AAEe,SAASC,iBAAT,CAA4B;AAC1CC,EAAAA,WAD0C;AAE1CC,EAAAA,UAF0C;AAG1CC,EAAAA;AAH0C,CAA5B,EAIX;AACH,QAAMC,MAAM,GAAG,uBAAY,eAAZ,EAA6BH,WAA7B,CAAf;AACA,QAAMI,UAAU,GAAGH,UAAU,CAAED,WAAF,EAAe,eAAf,CAA7B;AACA,QAAMK,mBAAmB,GAAG,qBACzBC,MAAF,IAAc;AAAA;;AACb,UAAMC,UAAU,GAAGD,MAAM,CAAEE,YAAF,CAAN,CAAwBC,WAAxB,GACjBC,oCADF;;AAEA,UAAMC,qBAAqB,GAAG,iBAAKJ,UAAL,EAAiB,CAC9C,UAD8C,EAE9C,QAF8C,EAG9CP,WAH8C,EAI9C,OAJ8C,EAK9C,SAL8C,CAAjB,CAA9B;AAOA,UAAMY,aAAa,GAAG,iBAAKL,UAAL,EAAiB,CACtC,UADsC,EAEtC,OAFsC,EAGtC,SAHsC,CAAjB,CAAtB;AAKA,UAAMM,WAAW,6CAChBF,qBADgB,aAChBA,qBADgB,uBAChBA,qBAAqB,CAAEG,KADP,yEAEhBH,qBAFgB,aAEhBA,qBAFgB,uBAEhBA,qBAAqB,CAAEI,IAFP,yCAGhBH,aAHgB,aAGhBA,aAHgB,uBAGhBA,aAAa,CAAEE,KAHC,uCAIhBF,aAJgB,aAIhBA,aAJgB,uBAIhBA,aAAa,CAAEG,IAJhB;;AAKA,QAAK,CAAEF,WAAP,EAAqB;AACpB,aAAOf,WAAP;AACA;;AACD,WAAOe,WAAW,CAACG,GAAZ,CAAiB,CAAE;AAAEC,MAAAA;AAAF,KAAF,KAAgBA,IAAjC,CAAP;AACA,GAzB0B,EA0B3B,CAAEjB,WAAF,CA1B2B,CAA5B;AA4BA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,mCAAD;AACC,IAAA,mBAAmB,EAAGK,mBADvB;AAEC,IAAA,MAAM,EAAGF,MAFV;AAGC,IAAA,QAAQ,EAAKe,SAAF,IAAiB;AAC3BhB,MAAAA,UAAU,CAAEF,WAAF,EAAe,eAAf,EAAgCkB,SAAhC,CAAV;AACA,KALF;AAMC,IAAA,OAAO,EAAG,cACT,qEADS,CANX;AASC,IAAA,QAAQ,EAAGf,MAAM,KAAKC;AATvB,IADD,CADD;AAeA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalColorEdit as ColorEdit } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useSetting } from '../editor/utils';\nimport { store as editSiteStore } from '../../store';\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation, as in a connected or\n * other pure component which performs `shouldComponentUpdate` check on props.\n * This should be used as a last resort, since the normalized data should be\n * maintained by the reducer result in state.\n *\n * @type {Array}\n */\nconst EMPTY_ARRAY = [];\n\nexport default function ColorPalettePanel( {\n\tcontextName,\n\tgetSetting,\n\tsetSetting,\n} ) {\n\tconst colors = useSetting( 'color.palette', contextName );\n\tconst userColors = getSetting( contextName, 'color.palette' );\n\tconst immutableColorSlugs = useSelect(\n\t\t( select ) => {\n\t\t\tconst baseStyles = select( editSiteStore ).getSettings()\n\t\t\t\t.__experimentalGlobalStylesBaseStyles;\n\t\t\tconst contextualBasePalette = get( baseStyles, [\n\t\t\t\t'settings',\n\t\t\t\t'blocks',\n\t\t\t\tcontextName,\n\t\t\t\t'color',\n\t\t\t\t'palette',\n\t\t\t] );\n\t\t\tconst globalPalette = get( baseStyles, [\n\t\t\t\t'settings',\n\t\t\t\t'color',\n\t\t\t\t'palette',\n\t\t\t] );\n\t\t\tconst basePalette =\n\t\t\t\tcontextualBasePalette?.theme ??\n\t\t\t\tcontextualBasePalette?.core ??\n\t\t\t\tglobalPalette?.theme ??\n\t\t\t\tglobalPalette?.core;\n\t\t\tif ( ! basePalette ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\treturn basePalette.map( ( { slug } ) => slug );\n\t\t},\n\t\t[ contextName ]\n\t);\n\treturn (\n\t\t<div className=\"edit-site-global-styles-color-palette-panel\">\n\t\t\t<ColorEdit\n\t\t\t\timmutableColorSlugs={ immutableColorSlugs }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\tsetSetting( contextName, 'color.palette', newColors );\n\t\t\t\t} }\n\t\t\t\temptyUI={ __(\n\t\t\t\t\t'Colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t\t\tcanReset={ colors === userColors }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/{sidebar → global-styles}/color-panel.js

@@ -16,7 +16,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _utils = require("../editor/utils");
 
-var _colorPalettePanel = _interopRequireDefault(require("./color-palette-panel"));
+var _palette = _interopRequireDefault(require("./palette"));
 
 /**
  * WordPress dependencies
@@ -37,9 +37,7 @@ function ColorPanel({
     name
   },
   getStyle,
-  setStyle,
-  getSetting,
-  setSetting
+  setStyle
 }) {
   const solids = (0, _utils.useSetting)('color.palette', name);
   const gradients = (0, _utils.useSetting)('color.gradients', name);
@@ -113,18 +111,16 @@ function ColorPanel({
     });
   }
 
-  return (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_palette.default, {
+    contextName: name
+  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
     title: (0, _i18n.__)('Color'),
     settings: settings,
     colors: solids,
     gradients: gradients,
     disableCustomColors: !areCustomSolidsEnabled,
-    disableCustomGradients: !areCustomGradientsEnabled
-  }, (0, _element.createElement)(_colorPalettePanel.default, {
-    key: 'color-palette-panel-' + name,
-    contextName: name,
-    getSetting: getSetting,
-    setSetting: setSetting
+    disableCustomGradients: !areCustomGradientsEnabled,
+    showTitle: false
   }));
 }
 //# sourceMappingURL=color-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-panel.js"],"names":["useHasColorPanel","supports","includes","ColorPanel","context","name","getStyle","setStyle","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isLinkEnabled","isTextEnabled","isBackgroundEnabled","hasLinkColor","length","hasTextColor","hasBackgroundColor","hasGradientColor","settings","color","userColor","push","colorValue","onColorChange","value","label","clearable","backgroundSettings","backgroundColor","userBackgroundColor","gradientSettings","gradient","userGradient","gradientValue","onGradientChange"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport { useSetting } from '../editor/utils';\nimport Palette from './palette';\n\nexport function useHasColorPanel( { supports } ) {\n\treturn (\n\t\tsupports.includes( 'color' ) ||\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' ) ||\n\t\tsupports.includes( 'linkColor' )\n\t);\n}\n\nexport default function ColorPanel( {\n\tcontext: { supports, name },\n\tgetStyle,\n\tsetStyle,\n} ) {\n\tconst solids = useSetting( 'color.palette', name );\n\tconst gradients = useSetting( 'color.gradients', name );\n\tconst areCustomSolidsEnabled = useSetting( 'color.custom', name );\n\tconst areCustomGradientsEnabled = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst isLinkEnabled = useSetting( 'color.link', name );\n\tconst isTextEnabled = useSetting( 'color.text', name );\n\tconst isBackgroundEnabled = useSetting( 'color.background', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\n\tconst settings = [];\n\n\tif ( hasTextColor ) {\n\t\tconst color = getStyle( name, 'color' );\n\t\tconst userColor = getStyle( name, 'color', 'user' );\n\t\tsettings.push( {\n\t\t\tcolorValue: color,\n\t\t\tonColorChange: ( value ) => setStyle( name, 'color', value ),\n\t\t\tlabel: __( 'Text color' ),\n\t\t\tclearable: color === userColor,\n\t\t} );\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tconst backgroundColor = getStyle( name, 'backgroundColor' );\n\t\tconst userBackgroundColor = getStyle( name, 'backgroundColor', 'user' );\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: ( value ) =>\n\t\t\t\tsetStyle( name, 'backgroundColor', value ),\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tconst gradient = getStyle( name, 'background' );\n\t\tconst userGradient = getStyle( name, 'background', 'user' );\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: ( value ) =>\n\t\t\t\tsetStyle( name, 'background', value ),\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tif ( hasBackgroundColor || hasGradientColor ) {\n\t\tsettings.push( {\n\t\t\t...backgroundSettings,\n\t\t\t...gradientSettings,\n\t\t\tlabel: __( 'Background color' ),\n\t\t} );\n\t}\n\n\tif ( hasLinkColor ) {\n\t\tconst color = getStyle( name, 'linkColor' );\n\t\tconst userColor = getStyle( name, 'linkColor', 'user' );\n\t\tsettings.push( {\n\t\t\tcolorValue: color,\n\t\t\tonColorChange: ( value ) => setStyle( name, 'linkColor', value ),\n\t\t\tlabel: __( 'Link color' ),\n\t\t\tclearable: color === userColor,\n\t\t} );\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Palette contextName={ name } />\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ solids }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+var _borderPanel = require("./border-panel");
+
+var _colorPanel = require("./color-panel");
+
+var _dimensionsPanel = require("./dimensions-panel");
+
+var _typographyPanel = require("./typography-panel");
+
+var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ContextMenu({
+  context,
+  parentMenu = ''
+}) {
+  const hasTypographyPanel = (0, _typographyPanel.useHasTypographyPanel)(context);
+  const hasColorPanel = (0, _colorPanel.useHasColorPanel)(context);
+  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(context);
+  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(context);
+  const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+  return (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.default, {
+    icon: _icons.typography,
+    path: parentMenu + '/typography'
+  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.default, {
+    icon: _icons.color,
+    path: parentMenu + '/colors'
+  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.default, {
+    icon: _icons.layout,
+    path: parentMenu + '/layout'
+  }, (0, _i18n.__)('Layout')));
+}
+
+var _default = ContextMenu;
+exports.default = _default;
+//# sourceMappingURL=context-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["ContextMenu","context","parentMenu","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,WAAT,CAAsB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,UAAU,GAAG;AAAxB,CAAtB,EAAqD;AACpD,QAAMC,kBAAkB,GAAG,4CAAuBF,OAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,OAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,OAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,OAAvB,CAA3B;AACA,QAAMM,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AAEA,SACC,4BAAC,mCAAD,QACGH,kBAAkB,IACnB,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGK,iBADR;AAEC,IAAA,IAAI,EAAGN,UAAU,GAAG;AAFrB,KAIG,cAAI,YAAJ,CAJH,CAFF,EASGE,aAAa,IACd,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAEC,IAAA,IAAI,EAAGP,UAAU,GAAG;AAFrB,KAIG,cAAI,QAAJ,CAJH,CAVF,EAiBGK,cAAc,IACf,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAGR,UAAU,GAAG;AAFrB,KAIG,cAAI,QAAJ,CAJH,CAlBF,CADD;AA4BA;;eAEcF,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-panel';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport NavigationButton from './navigation-button';\n\nfunction ContextMenu( { context, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( context );\n\tconst hasColorPanel = useHasColorPanel( context );\n\tconst hasBorderPanel = useHasBorderPanel( context );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( context );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\n\treturn (\n\t\t<ItemGroup>\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<NavigationButton\n\t\t\t\t\ticon={ typography }\n\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t</NavigationButton>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<NavigationButton\n\t\t\t\t\ticon={ color }\n\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t</NavigationButton>\n\t\t\t) }\n\t\t\t{ hasLayoutPanel && (\n\t\t\t\t<NavigationButton\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</NavigationButton>\n\t\t\t) }\n\t\t</ItemGroup>\n\t);\n}\n\nexport default ContextMenu;\n"]}

package/build/components/{sidebar → global-styles}/dimensions-panel.js

@@ -120,7 +120,7 @@ function DimensionsPanel({
 
   const resetPaddingValue = () => setPaddingValues({});
 
-  const hasPaddingValue = () => paddingValues && Object.keys(paddingValues).length;
+  const hasPaddingValue = () => !!paddingValues && Object.keys(paddingValues).length;
 
   const marginValues = splitStyleValue(getStyle(name, 'margin'));
   const marginSides = (0, _blockEditor.__experimentalUseCustomSides)(name, 'margin');
@@ -133,7 +133,7 @@ function DimensionsPanel({
 
   const resetMarginValue = () => setMarginValues({});
 
-  const hasMarginValue = () => marginValues && Object.keys(marginValues).length;
+  const hasMarginValue = () => !!marginValues && Object.keys(marginValues).length;
 
   const gapValue = getStyle(name, '--wp--style--block-gap');
 
@@ -152,8 +152,7 @@ function DimensionsPanel({
   };
 
   return (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Dimensions options'),
-    header: (0, _i18n.__)('Dimensions'),
+    label: (0, _i18n.__)('Dimensions'),
     resetAll: resetAll
   }, showPaddingControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
     hasValue: hasPaddingValue,
@@ -182,13 +181,13 @@ function DimensionsPanel({
     allowReset: false,
     splitOnAxis: isAxialMargin
   })), showGapControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
     hasValue: hasGapValue,
-    label: (0, _i18n.__)('Block gap'),
+    label: (0, _i18n.__)('Block spacing'),
     onDeselect: resetGapValue,
     isShownByDefault: true
   }, (0, _element.createElement)(_components.__experimentalUnitControl, {
-    label: (0, _i18n.__)('Block gap'),
+    label: (0, _i18n.__)('Block spacing'),
+    __unstableInputWidth: "80px",
     min: 0,
     onChange: setGapValue,
     units: units,

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/dimensions-panel.js"],"names":["AXIAL_SIDES","useHasDimensionsPanel","context","hasPadding","useHasPadding","hasMargin","useHasMargin","hasGap","useHasGap","name","supports","settings","includes","filterValuesBySides","values","sides","filteredValues","forEach","side","top","bottom","left","right","splitStyleValue","value","DimensionsPanel","getStyle","setStyle","showPaddingControl","showMarginControl","showGapControl","units","availableUnits","paddingValues","paddingSides","isAxialPadding","some","setPaddingValues","newPaddingValues","padding","resetPaddingValue","hasPaddingValue","Object","keys","length","marginValues","marginSides","isAxialMargin","setMarginValues","newMarginValues","margin","resetMarginValue","hasMarginValue","gapValue","setGapValue","newGapValue","resetGapValue","undefined","hasGapValue","resetAll"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalBoxControl as BoxControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useSetting } from '../editor/utils';\n\nconst AXIAL_SIDES = [ 'horizontal', 'vertical' ];\n\nexport function useHasDimensionsPanel( context ) {\n\tconst hasPadding = useHasPadding( context );\n\tconst hasMargin = useHasMargin( context );\n\tconst hasGap = useHasGap( context );\n\n\treturn hasPadding || hasMargin || hasGap;\n}\n\nfunction useHasPadding( { name, supports } ) {\n\tconst settings = useSetting( 'spacing.customPadding', name );\n\n\treturn settings && supports.includes( 'padding' );\n}\n\nfunction useHasMargin( { name, supports } ) {\n\tconst settings = useSetting( 'spacing.customMargin', name );\n\n\treturn settings && supports.includes( 'margin' );\n}\n\nfunction useHasGap( { name, supports } ) {\n\tconst settings = useSetting( 'spacing.blockGap', name );\n\n\treturn settings && supports.includes( '--wp--style--block-gap' );\n}\n\nfunction filterValuesBySides( values, sides ) {\n\tif ( ! sides ) {\n\t\t// If no custom side configuration all sides are opted into by default.\n\t\treturn values;\n\t}\n\n\t// Only include sides opted into within filtered values.\n\tconst filteredValues = {};\n\tsides.forEach( ( side ) => {\n\t\tif ( side === 'vertical' ) {\n\t\t\tfilteredValues.top = values.top;\n\t\t\tfilteredValues.bottom = values.bottom;\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tfilteredValues.left = values.left;\n\t\t\tfilteredValues.right = values.right;\n\t\t}\n\t\tfilteredValues[ side ] = values[ side ];\n\t} );\n\n\treturn filteredValues;\n}\n\nfunction splitStyleValue( value ) {\n\t// Check for shorthand value ( a string value ).\n\tif ( value && typeof value === 'string' ) {\n\t\t// Convert to value for individual sides for BoxControl.\n\t\treturn {\n\t\t\ttop: value,\n\t\t\tright: value,\n\t\t\tbottom: value,\n\t\t\tleft: value,\n\t\t};\n\t}\n\n\treturn value;\n}\n\nexport default function DimensionsPanel( { context, getStyle, setStyle } ) {\n\tconst { name } = context;\n\tconst showPaddingControl = useHasPadding( context );\n\tconst showMarginControl = useHasMargin( context );\n\tconst showGapControl = useHasGap( context );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units', name ) || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst paddingValues = splitStyleValue( getStyle( name, 'padding' ) );\n\tconst paddingSides = useCustomSides( name, 'padding' );\n\tconst isAxialPadding =\n\t\tpaddingSides &&\n\t\tpaddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tconst setPaddingValues = ( newPaddingValues ) => {\n\t\tconst padding = filterValuesBySides( newPaddingValues, paddingSides );\n\t\tsetStyle( name, 'padding', padding );\n\t};\n\tconst resetPaddingValue = () => setPaddingValues( {} );\n\tconst hasPaddingValue = () =>\n\t\t!! paddingValues && Object.keys( paddingValues ).length;\n\n\tconst marginValues = splitStyleValue( getStyle( name, 'margin' ) );\n\tconst marginSides = useCustomSides( name, 'margin' );\n\tconst isAxialMargin =\n\t\tmarginSides &&\n\t\tmarginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tconst setMarginValues = ( newMarginValues ) => {\n\t\tconst margin = filterValuesBySides( newMarginValues, marginSides );\n\t\tsetStyle( name, 'margin', margin );\n\t};\n\tconst resetMarginValue = () => setMarginValues( {} );\n\tconst hasMarginValue = () =>\n\t\t!! marginValues && Object.keys( marginValues ).length;\n\n\tconst gapValue = getStyle( name, '--wp--style--block-gap' );\n\n\tconst setGapValue = ( newGapValue ) => {\n\t\tsetStyle( name, '--wp--style--block-gap', newGapValue );\n\t};\n\tconst resetGapValue = () => setGapValue( undefined );\n\tconst hasGapValue = () => !! gapValue;\n\n\tconst resetAll = () => {\n\t\tresetPaddingValue();\n\t\tresetMarginValue();\n\t\tresetGapValue();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>\n\t\t\t{ showPaddingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasPaddingValue }\n\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\tonDeselect={ resetPaddingValue }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BoxControl\n\t\t\t\t\t\tvalues={ paddingValues }\n\t\t\t\t\t\tonChange={ setPaddingValues }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tsides={ paddingSides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ isAxialPadding }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showMarginControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasMarginValue }\n\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\tonDeselect={ resetMarginValue }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BoxControl\n\t\t\t\t\t\tvalues={ marginValues }\n\t\t\t\t\t\tonChange={ setMarginValues }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tsides={ marginSides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ isAxialMargin }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showGapControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasGapValue }\n\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\tonDeselect={ resetGapValue }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ setGapValue }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tvalue={ gapValue }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}

package/build/components/global-styles/header.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenHeader({
+  back,
+  title,
+  description
+}) {
+  return (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 2
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    spacing: 2
+  }, (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_navigationButton.default, {
+    path: back,
+    icon: (0, _element.createElement)(_icons.Icon, {
+      icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
+      variant: "muted"
+    }),
+    size: "small",
+    isBack: true,
+    "aria-label": (0, _i18n.__)('Navigate to the previous view')
+  })), (0, _element.createElement)(_components.__experimentalSpacer, null, (0, _element.createElement)(_components.__experimentalHeading, {
+    level: 5
+  }, title))), description && (0, _element.createElement)("p", {
+    className: "edit-site-global-styles-header__description"
+  }, description));
+}
+
+var _default = ScreenHeader;
+exports.default = _default;
+//# sourceMappingURL=header.js.map

package/build/components/global-styles/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"names":["ScreenHeader","back","title","description","chevronRight","chevronLeft"],"mappings":";;;;;;;;;;;AAGA;;AAOA;;AACA;;AAKA;;AAhBA;AACA;AACA;;AAWA;AACA;AACA;AAGA,SAASA,YAAT,CAAuB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,KAAR;AAAeC,EAAAA;AAAf,CAAvB,EAAsD;AACrD,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,8BAAD,QACC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGF,IADR;AAEC,IAAA,IAAI,EACH,4BAAC,WAAD;AACC,MAAA,IAAI,EAAG,qBAAUG,mBAAV,GAAyBC,kBADjC;AAEC,MAAA,OAAO,EAAC;AAFT,MAHF;AAQC,IAAA,IAAI,EAAC,OARN;AASC,IAAA,MAAM,MATP;AAUC,kBAAa,cAAI,+BAAJ;AAVd,IADD,CADD,EAeC,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,IAAA,KAAK,EAAG;AAAjB,KAAuBH,KAAvB,CADD,CAfD,CADD,EAoBGC,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CArBF,CADD;AA4BA;;eAEcH,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport NavigationButton from './navigation-button';\n\nfunction ScreenHeader( { back, title, description } ) {\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t<View>\n\t\t\t\t\t<NavigationButton\n\t\t\t\t\t\tpath={ back }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tvariant=\"muted\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tisBack\n\t\t\t\t\t\taria-label={ __( 'Navigate to the previous view' ) }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t\t<Spacer>\n\t\t\t\t\t<Heading level={ 5 }>{ title }</Heading>\n\t\t\t\t</Spacer>\n\t\t\t</HStack>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"]}

package/build/components/global-styles/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _lodash = require("lodash");
+
+var _components = require("@wordpress/components");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _screenRoot = _interopRequireDefault(require("./screen-root"));
+
+var _screenBlockList = _interopRequireDefault(require("./screen-block-list"));
+
+var _screenBlock = _interopRequireDefault(require("./screen-block"));
+
+var _screenTypography = _interopRequireDefault(require("./screen-typography"));
+
+var _screenColors = _interopRequireDefault(require("./screen-colors"));
+
+var _screenColorPalette = _interopRequireDefault(require("./screen-color-palette"));
+
+var _screenLayout = _interopRequireDefault(require("./screen-layout"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ContextScreens({
+  name
+}) {
+  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: parentMenu + '/typography'
+  }, (0, _element.createElement)(_screenTypography.default, {
+    name: name
+  })), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: parentMenu + '/colors'
+  }, (0, _element.createElement)(_screenColors.default, {
+    name: name
+  })), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: parentMenu + '/colors/palette'
+  }, (0, _element.createElement)(_screenColorPalette.default, {
+    name: name
+  })), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: parentMenu + '/layout'
+  }, (0, _element.createElement)(_screenLayout.default, {
+    name: name
+  })));
+}
+
+function GlobalStyles() {
+  const {
+    blocks
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  return (0, _element.createElement)(_components.__experimentalNavigatorProvider, {
+    initialPath: "/"
+  }, (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/"
+  }, (0, _element.createElement)(_screenRoot.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/blocks"
+  }, (0, _element.createElement)(_screenBlockList.default, null)), (0, _lodash.map)(blocks, (block, name) => (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    key: 'menu-block-' + name,
+    path: '/blocks/' + name
+  }, (0, _element.createElement)(_screenBlock.default, {
+    name: name
+  }))), (0, _element.createElement)(ContextScreens, null), (0, _lodash.map)(blocks, (_, name) => (0, _element.createElement)(ContextScreens, {
+    key: 'screens-block-' + name,
+    name: name
+  })));
+}
+
+var _default = GlobalStyles;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"names":["ContextScreens","name","parentMenu","undefined","GlobalStyles","blocks","block","_"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAUA,SAASA,cAAT,CAAyB;AAAEC,EAAAA;AAAF,CAAzB,EAAoC;AACnC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AAEA,SACC,qDACC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAGC,UAAU,GAAG;AAArC,KACC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAGD;AAAzB,IADD,CADD,EAKC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAGC,UAAU,GAAG;AAArC,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CALD,EASC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAGC,UAAU,GAAG;AAArC,KACC,4BAAC,2BAAD;AAAoB,IAAA,IAAI,EAAGD;AAA3B,IADD,CATD,EAaC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAGC,UAAU,GAAG;AAArC,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CAbD,CADD;AAmBA;;AAED,SAASG,YAAT,GAAwB;AACvB,QAAM;AAAEC,IAAAA;AAAF,MAAa,mDAAnB;AAEA,SACC,4BAAC,2CAAD;AAAmB,IAAA,WAAW,EAAC;AAA/B,KACC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,mBAAD,OADD,CADD,EAKC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,wBAAD,OADD,CALD,EASG,iBAAKA,MAAL,EAAa,CAAEC,KAAF,EAASL,IAAT,KACd,4BAAC,yCAAD;AACC,IAAA,GAAG,EAAG,gBAAgBA,IADvB;AAEC,IAAA,IAAI,EAAG,aAAaA;AAFrB,KAIC,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGA;AAApB,IAJD,CADC,CATH,EAkBC,4BAAC,cAAD,OAlBD,EAoBG,iBAAKI,MAAL,EAAa,CAAEE,CAAF,EAAKN,IAAL,KACd,4BAAC,cAAD;AAAgB,IAAA,GAAG,EAAG,mBAAmBA,IAAzC;AAAgD,IAAA,IAAI,EAAGA;AAAvD,IADC,CApBH,CADD;AA0BA;;eAEcG,Y","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStylesContext } from '../editor/global-styles-provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenLayout from './screen-layout';\n\nfunction ContextScreens( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography name={ name } />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/colors/palette' }>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</NavigatorScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStyles() {\n\tconst { blocks } = useGlobalStylesContext();\n\n\treturn (\n\t\t<NavigatorProvider initialPath=\"/\">\n\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</NavigatorScreen>\n\n\t\t\t{ map( blocks, ( block, name ) => (\n\t\t\t\t<NavigatorScreen\n\t\t\t\t\tkey={ 'menu-block-' + name }\n\t\t\t\t\tpath={ '/blocks/' + name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ name } />\n\t\t\t\t</NavigatorScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ map( blocks, ( _, name ) => (\n\t\t\t\t<ContextScreens key={ 'screens-block-' + name } name={ name } />\n\t\t\t) ) }\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStyles;\n"]}

package/build/components/global-styles/navigation-button.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+/**
+ * WordPress dependencies
+ */
+function NavigationButton({
+  path,
+  icon,
+  children,
+  isBack = false,
+  ...props
+}) {
+  const navigator = (0, _components.__experimentalUseNavigator)();
+  return (0, _element.createElement)(_components.__experimentalItem, (0, _extends2.default)({
+    onClick: () => navigator.push(path, {
+      isBack
+    })
+  }, props), icon && (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start"
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
+    icon: icon,
+    size: 24
+  })), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
+}
+
+var _default = NavigationButton;
+exports.default = _default;
+//# sourceMappingURL=navigation-button.js.map

package/build/components/global-styles/navigation-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["NavigationButton","path","icon","children","isBack","props","navigator","push"],"mappings":";;;;;;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;AASA,SAASA,gBAAT,CAA2B;AAC1BC,EAAAA,IAD0B;AAE1BC,EAAAA,IAF0B;AAG1BC,EAAAA,QAH0B;AAI1BC,EAAAA,MAAM,GAAG,KAJiB;AAK1B,KAAGC;AALuB,CAA3B,EAMI;AACH,QAAMC,SAAS,GAAG,6CAAlB;AACA,SACC,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAG,MAAMA,SAAS,CAACC,IAAV,CAAgBN,IAAhB,EAAsB;AAAEG,MAAAA;AAAF,KAAtB;AAAtB,KAAgEC,KAAhE,GACGH,IAAI,IACL,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGA,IAAb;AAAoB,IAAA,IAAI,EAAG;AAA3B,IADD,CADD,EAIC,4BAAC,oBAAD,QAAYC,QAAZ,CAJD,CAFF,EASG,CAAED,IAAF,IAAUC,QATb,CADD;AAaA;;eAEcH,gB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { Icon } from '@wordpress/icons';\n\nfunction NavigationButton( {\n\tpath,\n\ticon,\n\tchildren,\n\tisBack = false,\n\t...props\n} ) {\n\tconst navigator = useNavigator();\n\treturn (\n\t\t<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ icon } size={ 24 } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nexport default NavigationButton;\n"]}

package/build/components/global-styles/palette.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _subtitle = _interopRequireDefault(require("./subtitle"));
+
+var _utils = require("../editor/utils");
+
+var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function Palette({
+  contextName
+}) {
+  const colors = (0, _utils.useSetting)('color.palette', contextName);
+  const screenPath = contextName === 'root' ? '/colors/palette' : '/blocks/' + contextName + '/colors/palette';
+  return (0, _element.createElement)("div", {
+    className: "edit-site-global-style-palette"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 1
+  }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Palette')), (0, _element.createElement)(_components.__experimentalItemGroup, {
+    isBordered: true,
+    isSeparated: true
+  }, (0, _element.createElement)(_navigationButton.default, {
+    path: screenPath
+  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, (0, _element.createElement)(_components.__experimentalZStack, {
+    isLayered: false,
+    offset: -8
+  }, colors.slice(0, 5).map(({
+    color
+  }) => (0, _element.createElement)(_components.ColorIndicator, {
+    key: color,
+    colorValue: color
+  })))), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.sprintf)( // Translators: %d: Number of palette colors.
+  (0, _i18n._n)('%d color', '%d colors', colors.length), colors.length)))))));
+}
+
+var _default = Palette;
+exports.default = _default;
+//# sourceMappingURL=palette.js.map

package/build/components/global-styles/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["Palette","contextName","colors","screenPath","slice","map","color","length"],"mappings":";;;;;;;;;;;AAGA;;AASA;;AAKA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAYA;AACA;AACA;AAKA,SAASA,OAAT,CAAkB;AAAEC,EAAAA;AAAF,CAAlB,EAAoC;AACnC,QAAMC,MAAM,GAAG,uBAAY,eAAZ,EAA6BD,WAA7B,CAAf;AACA,QAAME,UAAU,GACfF,WAAW,KAAK,MAAhB,GACG,iBADH,GAEG,aAAaA,WAAb,GAA2B,iBAH/B;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,SAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAGE;AAAzB,KACC,4BAAC,gCAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGD,MAAM,CACNE,KADA,CACO,CADP,EACU,CADV,EAEAC,GAFA,CAEK,CAAE;AAAEC,IAAAA;AAAF,GAAF,KACL,4BAAC,0BAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,UAAU,EAAGA;AAFd,IAHA,CADH,CADD,CADD,EAaC,4BAAC,oBAAD,QACG,oBACD;AACA,gBACC,UADD,EAEC,WAFD,EAGCJ,MAAM,CAACK,MAHR,CAFC,EAODL,MAAM,CAACK,MAPN,CADH,CAbD,CADD,CADD,CAFD,CADD,CADD;AAoCA;;eAEcP,O","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tFlexBlock,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { useSetting } from '../editor/utils';\nimport NavigationButton from './navigation-button';\n\nfunction Palette( { contextName } ) {\n\tconst colors = useSetting( 'color.palette', contextName );\n\tconst screenPath =\n\t\tcontextName === 'root'\n\t\t\t? '/colors/palette'\n\t\t\t: '/blocks/' + contextName + '/colors/palette';\n\n\treturn (\n\t\t<div className=\"edit-site-global-style-palette\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t<NavigationButton path={ screenPath }>\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color } ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\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</ZStack>\n\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d color',\n\t\t\t\t\t\t\t\t\t\t'%d colors',\n\t\t\t\t\t\t\t\t\t\tcolors.length\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tcolors.length\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default Palette;\n"]}

package/build/components/global-styles/preview.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const StylesPreview = () => {
+  var _getStyle, _getStyle2, _getStyle3, _getStyle4;
+
+  const {
+    getStyle
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const fontFamily = (_getStyle = getStyle('root', 'fontFamily')) !== null && _getStyle !== void 0 ? _getStyle : 'serif';
+  const textColor = (_getStyle2 = getStyle('root', 'color')) !== null && _getStyle2 !== void 0 ? _getStyle2 : 'black';
+  const linkColor = (_getStyle3 = getStyle('root', 'linkColor')) !== null && _getStyle3 !== void 0 ? _getStyle3 : 'blue';
+  const backgroundColor = (_getStyle4 = getStyle('root', 'backgroundColor')) !== null && _getStyle4 !== void 0 ? _getStyle4 : 'white';
+  return (0, _element.createElement)(_components.Card, {
+    className: "edit-site-global-styles-preview",
+    style: {
+      background: backgroundColor
+    }
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    spacing: 5
+  }, (0, _element.createElement)("div", null, (0, _element.createElement)("span", {
+    style: {
+      fontFamily,
+      fontSize: '80px'
+    }
+  }, "A"), (0, _element.createElement)("span", {
+    style: {
+      fontFamily,
+      fontSize: '80px'
+    }
+  }, "a")), (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 2
+  }, (0, _element.createElement)(_components.ColorIndicator, {
+    colorValue: textColor
+  }), (0, _element.createElement)(_components.ColorIndicator, {
+    colorValue: linkColor
+  }))));
+};
+
+var _default = StylesPreview;
+exports.default = _default;
+//# sourceMappingURL=preview.js.map

package/build/components/global-styles/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["StylesPreview","getStyle","fontFamily","textColor","linkColor","backgroundColor","background","fontSize"],"mappings":";;;;;;;;;AAGA;;AASI;;AAZJ;AACA;AACA;;AAQA;AACA;AACA;AAEA,MAAMA,aAAa,GAAG,MAAM;AAAA;;AAC3B,QAAM;AAAEC,IAAAA;AAAF,MAAe,mDAArB;AACA,QAAMC,UAAU,gBAAGD,QAAQ,CAAE,MAAF,EAAU,YAAV,CAAX,iDAAuC,OAAvD;AACA,QAAME,SAAS,iBAAGF,QAAQ,CAAE,MAAF,EAAU,OAAV,CAAX,mDAAkC,OAAjD;AACA,QAAMG,SAAS,iBAAGH,QAAQ,CAAE,MAAF,EAAU,WAAV,CAAX,mDAAsC,MAArD;AACA,QAAMI,eAAe,iBAAGJ,QAAQ,CAAE,MAAF,EAAU,iBAAV,CAAX,mDAA4C,OAAjE;AAEA,SACC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,KAAK,EAAG;AAAEK,MAAAA,UAAU,EAAED;AAAd;AAFT,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,yCACC;AAAM,IAAA,KAAK,EAAG;AAAEH,MAAAA,UAAF;AAAcK,MAAAA,QAAQ,EAAE;AAAxB;AAAd,SADD,EAEC;AAAM,IAAA,KAAK,EAAG;AAAEL,MAAAA,UAAF;AAAcK,MAAAA,QAAQ,EAAE;AAAxB;AAAd,SAFD,CADD,EAKC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGJ;AAA7B,IADD,EAEC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGC;AAA7B,IAFD,CALD,CAJD,CADD;AAiBA,CAxBD;;eA0BeJ,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tCard,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */ import { useGlobalStylesContext } from '../editor/global-styles-provider';\n\nconst StylesPreview = () => {\n\tconst { getStyle } = useGlobalStylesContext();\n\tconst fontFamily = getStyle( 'root', 'fontFamily' ) ?? 'serif';\n\tconst textColor = getStyle( 'root', 'color' ) ?? 'black';\n\tconst linkColor = getStyle( 'root', 'linkColor' ) ?? 'blue';\n\tconst backgroundColor = getStyle( 'root', 'backgroundColor' ) ?? 'white';\n\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"edit-site-global-styles-preview\"\n\t\t\tstyle={ { background: backgroundColor } }\n\t\t>\n\t\t\t<HStack spacing={ 5 }>\n\t\t\t\t<div>\n\t\t\t\t\t<span style={ { fontFamily, fontSize: '80px' } }>A</span>\n\t\t\t\t\t<span style={ { fontFamily, fontSize: '80px' } }>a</span>\n\t\t\t\t</div>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<ColorIndicator colorValue={ textColor } />\n\t\t\t\t\t<ColorIndicator colorValue={ linkColor } />\n\t\t\t\t</VStack>\n\t\t\t</HStack>\n\t\t</Card>\n\t);\n};\n\nexport default StylesPreview;\n"]}