@wordpress/edit-site 3.0.27 → 4.0.1-next.f435e9e01b.0

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

@@ -57,51 +57,110 @@ function BorderPanel(_ref) {
   let {
     name
   } = _ref;
+  // 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] = (0, _hooks.useStyle)('border', name, 'user');
+
+  const createHasValueCallback = feature => () => !!(userBorderStyles !== null && userBorderStyles !== void 0 && userBorderStyles[feature]);
+
+  const createResetCallback = setStyle => () => setStyle(undefined);
+
+  const handleOnChange = setStyle => value => {
+    setStyle(value || undefined);
+  };
+
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _hooks.useSetting)('spacing.units')[0] || ['px', 'em', 'rem']
   }); // Border width.
 
-  const hasBorderWidth = useHasBorderWidthControl(name);
+  const showBorderWidth = useHasBorderWidthControl(name);
   const [borderWidthValue, setBorderWidth] = (0, _hooks.useStyle)('border.width', name); // Border style.
 
-  const hasBorderStyle = useHasBorderStyleControl(name);
+  const showBorderStyle = useHasBorderStyleControl(name);
   const [borderStyle, setBorderStyle] = (0, _hooks.useStyle)('border.style', name); // Border color.
 
+  const showBorderColor = useHasBorderColorControl(name);
+  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name);
   const [colors = EMPTY_ARRAY] = (0, _hooks.useSetting)('color.palette');
   const disableCustomColors = !(0, _hooks.useSetting)('color.custom')[0];
-  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0];
-  const hasBorderColor = useHasBorderColorControl(name);
-  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name); // Border radius.
+  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0]; // Border radius.
 
-  const hasBorderRadius = useHasBorderRadiusControl(name);
+  const showBorderRadius = useHasBorderRadiusControl(name);
   const [borderRadiusValues, setBorderRadius] = (0, _hooks.useStyle)('border.radius', name);
-  return (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Border'),
-    initialOpen: true
-  }, (hasBorderWidth || hasBorderStyle) && (0, _element.createElement)("div", {
-    className: "edit-site-global-styles-sidebar__border-controls-row"
-  }, hasBorderWidth && (0, _element.createElement)(_components.__experimentalUnitControl, {
+
+  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 resetAll = () => {
+    setBorderColor(undefined);
+    setBorderRadius(undefined);
+    setBorderStyle(undefined);
+    setBorderWidth(undefined);
+  }; // When we set a border color or width ensure we have a style so the user
+  // can see a visible border.
+
+
+  const handleOnChangeWithStyle = setStyle => value => {
+    if (!!value && !borderStyle) {
+      setBorderStyle('solid');
+    }
+
+    setStyle(value || undefined);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Border'),
+    resetAll: resetAll
+  }, showBorderWidth && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: createHasValueCallback('width'),
+    label: (0, _i18n.__)('Width'),
+    onDeselect: createResetCallback(setBorderWidth),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
     value: borderWidthValue,
     label: (0, _i18n.__)('Width'),
     min: MIN_BORDER_WIDTH,
-    onChange: value => {
-      setBorderWidth(value || undefined);
-    },
+    onChange: handleOnChangeWithStyle(setBorderWidth),
     units: units
-  }), hasBorderStyle && (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
+  })), showBorderStyle && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: createHasValueCallback('style'),
+    label: (0, _i18n.__)('Style'),
+    onDeselect: createResetCallback(setBorderStyle),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
     value: borderStyle,
-    onChange: setBorderStyle
-  })), hasBorderColor && (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    onChange: handleOnChange(setBorderStyle)
+  })), showBorderColor && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: createHasValueCallback('color'),
+    label: (0, _i18n.__)('Color'),
+    onDeselect: createResetCallback(setBorderColor),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
     label: (0, _i18n.__)('Color'),
     colorValue: borderColor,
     colors: colors,
     gradients: undefined,
     disableCustomColors: disableCustomColors,
     disableCustomGradients: disableCustomGradients,
-    onColorChange: setBorderColor
-  }), hasBorderRadius && (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
+    onColorChange: handleOnChangeWithStyle(setBorderColor),
+    clearable: false
+  })), showBorderRadius && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasBorderRadius,
+    label: (0, _i18n.__)('Radius'),
+    onDeselect: createResetCallback(setBorderRadius),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
     values: borderRadiusValues,
-    onChange: setBorderRadius
-  }));
+    onChange: handleOnChange(setBorderRadius)
+  })));
 }
 //# 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":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","units","availableUnits","hasBorderWidth","borderWidthValue","setBorderWidth","hasBorderStyle","borderStyle","setBorderStyle","colors","disableCustomColors","disableCustomGradients","hasBorderColor","borderColor","setBorderColor","hasBorderRadius","borderRadiusValues","setBorderRadius","value","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\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 = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst hasBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst hasBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\tconst hasBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\n\t// Border radius.\n\tconst hasBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'border.radius',\n\t\tname\n\t);\n\n\treturn (\n\t\t<PanelBody title={ __( 'Border' ) } initialOpen={ true }>\n\t\t\t{ ( hasBorderWidth || hasBorderStyle ) && (\n\t\t\t\t<div className=\"edit-site-global-styles-sidebar__border-controls-row\">\n\t\t\t\t\t{ hasBorderWidth && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tvalue={ borderWidthValue }\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetBorderWidth( value || undefined );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ hasBorderStyle && (\n\t\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\t\tonChange={ setBorderStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBorderColor && (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\tonColorChange={ setBorderColor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderRadius && (\n\t\t\t\t<BorderRadiusControl\n\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\tonChange={ setBorderRadius }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","userBorderStyles","createHasValueCallback","feature","createResetCallback","setStyle","undefined","handleOnChange","value","units","availableUnits","showBorderWidth","borderWidthValue","setBorderWidth","showBorderStyle","borderStyle","setBorderStyle","showBorderColor","borderColor","setBorderColor","colors","disableCustomColors","disableCustomGradients","showBorderRadius","borderRadiusValues","setBorderRadius","hasBorderRadius","borderValues","radius","Object","entries","resetAll","handleOnChangeWithStyle"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\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 = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\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 ] = useStyle( 'border', name, 'user' );\n\tconst createHasValueCallback = ( feature ) => () =>\n\t\t!! userBorderStyles?.[ feature ];\n\n\tconst createResetCallback = ( setStyle ) => () => setStyle( undefined );\n\n\tconst handleOnChange = ( setStyle ) => ( value ) => {\n\t\tsetStyle( value || undefined );\n\t};\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst showBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst showBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst showBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'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 resetAll = () => {\n\t\tsetBorderColor( undefined );\n\t\tsetBorderRadius( undefined );\n\t\tsetBorderStyle( undefined );\n\t\tsetBorderWidth( undefined );\n\t};\n\n\t// When we set a border color or width ensure we have a style so the user\n\t// can see a visible border.\n\tconst handleOnChangeWithStyle = ( setStyle ) => ( value ) => {\n\t\tif ( !! value && ! borderStyle ) {\n\t\t\tsetBorderStyle( 'solid' );\n\t\t}\n\n\t\tsetStyle( value || undefined );\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>\n\t\t\t{ showBorderWidth && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'width' ) }\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderWidth ) }\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\tvalue={ borderWidthValue }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\tonChange={ handleOnChangeWithStyle( setBorderWidth ) }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderStyle && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'style' ) }\n\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderStyle ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\tonChange={ handleOnChange( setBorderStyle ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderColor && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ createHasValueCallback( 'color' ) }\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderColor ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\t\tonColorChange={ handleOnChangeWithStyle(\n\t\t\t\t\t\t\tsetBorderColor\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tclearable={ false }\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={ createResetCallback( setBorderRadius ) }\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={ handleOnChange( setBorderRadius ) }\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/context-menu.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +21,7 @@ var _dimensionsPanel = require("./dimensions-panel");
 
 var _typographyPanel = require("./typography-panel");
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 /**
  * WordPress dependencies
@@ -42,13 +40,13 @@ function ContextMenu(_ref) {
   const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
   const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(name);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-  return (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.NavigationButton, {
     icon: _icons.typography,
     path: parentMenu + '/typography'
-  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.default, {
+  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.NavigationButton, {
     icon: _icons.color,
     path: parentMenu + '/colors'
-  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.default, {
+  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButton, {
     icon: _icons.layout,
     path: parentMenu + '/layout'
   }, (0, _i18n.__)('Layout')));

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":["ContextMenu","name","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,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;AACjD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,IAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,IAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,IAAvB,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-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport NavigationButton from './navigation-button';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["ContextMenu","name","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,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;AACjD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,IAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,IAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,IAAvB,CAA3B;AACA,QAAMM,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AAEA,SACC,4BAAC,mCAAD,QACGH,kBAAkB,IACnB,4BAAC,kCAAD;AACC,IAAA,IAAI,EAAGK,iBADR;AAEC,IAAA,IAAI,EAAGN,UAAU,GAAG;AAFrB,KAIG,cAAI,YAAJ,CAJH,CAFF,EASGE,aAAa,IACd,4BAAC,kCAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAEC,IAAA,IAAI,EAAGP,UAAU,GAAG;AAFrB,KAIG,cAAI,QAAJ,CAJH,CAVF,EAiBGK,cAAc,IACf,4BAAC,kCAAD;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-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport { NavigationButton } from './navigation-button';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\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/global-styles/global-styles-provider.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStylesProvider = GlobalStylesProvider;
+exports.mergeBaseAndUserConfigs = mergeBaseAndUserConfigs;
 
 var _element = require("@wordpress/element");
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/global-styles-provider.js"],"names":["mergeTreesCustomizer","_","srcValue","Array","isArray","mergeBaseAndUserConfigs","base","user","cleanEmptyObject","object","cleanedNestedObjects","identity","undefined","useGlobalStylesUserConfig","globalStylesId","settings","styles","select","_globalStylesId","coreStore","__experimentalGetCurrentGlobalStylesId","record","getEditedEntityRecord","editEntityRecord","config","setConfig","callback","currentConfig","updatedConfig","useGlobalStylesBaseConfig","baseConfig","__experimentalGetCurrentThemeBaseGlobalStyles","useGlobalStylesContext","isUserConfigReady","userConfig","setUserConfig","isBaseConfigReady","mergedConfig","context","isReady","merged","GlobalStylesProvider","children"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tmergeWith,\n\tpickBy,\n\tisEmpty,\n\tisObject,\n\tidentity,\n\tmapValues,\n} from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\nfunction mergeTreesCustomizer( _, srcValue ) {\n\t// We only pass as arrays the presets,\n\t// in which case we want the new array of values\n\t// to override the old array (no merging).\n\tif ( Array.isArray( srcValue ) ) {\n\t\treturn srcValue;\n\t}\n}\n\nfunction mergeBaseAndUserConfigs( base, user ) {\n\treturn mergeWith( {}, base, user, mergeTreesCustomizer );\n}\n\nconst cleanEmptyObject = ( object ) => {\n\tif ( ! isObject( object ) || Array.isArray( object ) ) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = pickBy(\n\t\tmapValues( object, cleanEmptyObject ),\n\t\tidentity\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, settings, styles } = useSelect( ( select ) => {\n\t\tconst _globalStylesId = select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentGlobalStylesId();\n\t\tconst record = _globalStylesId\n\t\t\t? select( coreStore ).getEditedEntityRecord(\n\t\t\t\t\t'root',\n\t\t\t\t\t'globalStyles',\n\t\t\t\t\t_globalStylesId\n\t\t\t  )\n\t\t\t: undefined;\n\t\treturn {\n\t\t\tglobalStylesId: _globalStylesId,\n\t\t\tsettings: record?.settings,\n\t\t\tstyles: record?.styles,\n\t\t};\n\t}, [] );\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t};\n\t}, [ settings, styles ] );\n\n\tconst setConfig = useCallback(\n\t\t( callback ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t};\n\t\t\tconst updatedConfig = callback( currentConfig );\n\t\t\teditEntityRecord( 'root', 'globalStyles', globalStylesId, {\n\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t} );\n\t\t},\n\t\t[ globalStylesId ]\n\t);\n\n\treturn [ !! settings || !! styles, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeBaseGlobalStyles();\n\t}, [] );\n\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nfunction useGlobalStylesContext() {\n\tconst [\n\t\tisUserConfigReady,\n\t\tuserConfig,\n\t\tsetUserConfig,\n\t] = useGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n\nexport function GlobalStylesProvider( { children } ) {\n\tconst context = useGlobalStylesContext();\n\tif ( ! context.isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/global-styles-provider.js"],"names":["mergeTreesCustomizer","_","srcValue","Array","isArray","mergeBaseAndUserConfigs","base","user","cleanEmptyObject","object","cleanedNestedObjects","identity","undefined","useGlobalStylesUserConfig","globalStylesId","settings","styles","select","_globalStylesId","coreStore","__experimentalGetCurrentGlobalStylesId","record","getEditedEntityRecord","editEntityRecord","config","setConfig","callback","currentConfig","updatedConfig","useGlobalStylesBaseConfig","baseConfig","__experimentalGetCurrentThemeBaseGlobalStyles","useGlobalStylesContext","isUserConfigReady","userConfig","setUserConfig","isBaseConfigReady","mergedConfig","context","isReady","merged","GlobalStylesProvider","children"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tmergeWith,\n\tpickBy,\n\tisEmpty,\n\tisObject,\n\tidentity,\n\tmapValues,\n} from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\nfunction mergeTreesCustomizer( _, srcValue ) {\n\t// We only pass as arrays the presets,\n\t// in which case we want the new array of values\n\t// to override the old array (no merging).\n\tif ( Array.isArray( srcValue ) ) {\n\t\treturn srcValue;\n\t}\n}\n\nexport function mergeBaseAndUserConfigs( base, user ) {\n\treturn mergeWith( {}, base, user, mergeTreesCustomizer );\n}\n\nconst cleanEmptyObject = ( object ) => {\n\tif ( ! isObject( object ) || Array.isArray( object ) ) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = pickBy(\n\t\tmapValues( object, cleanEmptyObject ),\n\t\tidentity\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, settings, styles } = useSelect( ( select ) => {\n\t\tconst _globalStylesId = select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentGlobalStylesId();\n\t\tconst record = _globalStylesId\n\t\t\t? select( coreStore ).getEditedEntityRecord(\n\t\t\t\t\t'root',\n\t\t\t\t\t'globalStyles',\n\t\t\t\t\t_globalStylesId\n\t\t\t  )\n\t\t\t: undefined;\n\t\treturn {\n\t\t\tglobalStylesId: _globalStylesId,\n\t\t\tsettings: record?.settings,\n\t\t\tstyles: record?.styles,\n\t\t};\n\t}, [] );\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t};\n\t}, [ settings, styles ] );\n\n\tconst setConfig = useCallback(\n\t\t( callback ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t};\n\t\t\tconst updatedConfig = callback( currentConfig );\n\t\t\teditEntityRecord( 'root', 'globalStyles', globalStylesId, {\n\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t} );\n\t\t},\n\t\t[ globalStylesId ]\n\t);\n\n\treturn [ !! settings || !! styles, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeBaseGlobalStyles();\n\t}, [] );\n\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nfunction useGlobalStylesContext() {\n\tconst [\n\t\tisUserConfigReady,\n\t\tuserConfig,\n\t\tsetUserConfig,\n\t] = useGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n\nexport function GlobalStylesProvider( { children } ) {\n\tconst context = useGlobalStylesContext();\n\tif ( ! context.isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"]}

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +13,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 /**
  * WordPress dependencies
@@ -26,7 +24,6 @@ var _navigationButton = _interopRequireDefault(require("./navigation-button"));
  */
 function ScreenHeader(_ref) {
   let {
-    back,
     title,
     description
   } = _ref;
@@ -34,14 +31,12 @@ function ScreenHeader(_ref) {
     spacing: 2
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     spacing: 2
-  }, (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_navigationButton.default, {
-    path: back,
+  }, (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_navigationButton.NavigationBackButton, {
     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

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

@@ -1 +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,OAAsD;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA;AAAf,GAA+B;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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"names":["ScreenHeader","title","description","chevronRight","chevronLeft"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAKA;;AAhBA;AACA;AACA;;AAWA;AACA;AACA;AAGA,SAASA,YAAT,OAAgD;AAAA,MAAzB;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAyB;AAC/C,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,8BAAD,QACC,4BAAC,sCAAD;AACC,IAAA,IAAI,EACH,4BAAC,WAAD;AACC,MAAA,IAAI,EAAG,qBAAUC,mBAAV,GAAyBC,kBADjC;AAEC,MAAA,OAAO,EAAC;AAFT,MAFF;AAOC,IAAA,IAAI,EAAC,OAPN;AAQC,kBAAa,cAAI,+BAAJ;AARd,IADD,CADD,EAaC,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,IAAA,KAAK,EAAG;AAAjB,KAAuBH,KAAvB,CADD,CAbD,CADD,EAkBGC,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CAnBF,CADD;AA0BA;;eAEcF,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 { NavigationBackButton } from './navigation-button';\n\nfunction ScreenHeader( { 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<NavigationBackButton\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\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/navigation-button.js

@@ -5,7 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NavigationBackButton = NavigationBackButton;
+exports.NavigationButton = NavigationButton;
 
 var _element = require("@wordpress/element");
 
@@ -18,20 +19,13 @@ var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
  */
-function NavigationButton(_ref) {
+function GenericNavigationButton(_ref) {
   let {
-    path,
     icon,
     children,
-    isBack = false,
     ...props
   } = _ref;
-  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, {
+  return (0, _element.createElement)(_components.__experimentalItem, props, icon && (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
     icon: icon,
@@ -39,6 +33,35 @@ function NavigationButton(_ref) {
   })), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
 }
 
-var _default = NavigationButton;
-exports.default = _default;
+function NavigationButton(_ref2) {
+  let {
+    path,
+    ...props
+  } = _ref2;
+  const {
+    goTo
+  } = (0, _components.__experimentalUseNavigator)();
+  const dataAttrName = 'data-navigator-focusable-id';
+  const dataAttrValue = path;
+  const dataAttrCssSelector = `[${dataAttrName}="${dataAttrValue}"]`;
+  const buttonProps = { ...props,
+    [dataAttrName]: dataAttrValue
+  };
+  return (0, _element.createElement)(GenericNavigationButton, (0, _extends2.default)({
+    onClick: () => goTo(path, {
+      focusTargetSelector: dataAttrCssSelector
+    })
+  }, buttonProps));
+}
+
+function NavigationBackButton(_ref3) {
+  let { ...props
+  } = _ref3;
+  const {
+    goBack
+  } = (0, _components.__experimentalUseNavigator)();
+  return (0, _element.createElement)(GenericNavigationButton, (0, _extends2.default)({
+    onClick: goBack
+  }, props));
+}
 //# sourceMappingURL=navigation-button.js.map

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

@@ -1 +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,OAMI;AAAA,MANuB;AAC1BC,IAAAA,IAD0B;AAE1BC,IAAAA,IAF0B;AAG1BC,IAAAA,QAH0B;AAI1BC,IAAAA,MAAM,GAAG,KAJiB;AAK1B,OAAGC;AALuB,GAMvB;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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["GenericNavigationButton","icon","children","props","NavigationButton","path","goTo","dataAttrName","dataAttrValue","dataAttrCssSelector","buttonProps","focusTargetSelector","NavigationBackButton","goBack"],"mappings":";;;;;;;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;AASA,SAASA,uBAAT,OAAiE;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkB,OAAGC;AAArB,GAA+B;AAChE,SACC,4BAAC,8BAAD,EAAWA,KAAX,EACGF,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;;AAED,SAASE,gBAAT,QAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQ,OAAGF;AAAX,GAAqB;AAC/C,QAAM;AAAEG,IAAAA;AAAF,MAAW,6CAAjB;AAEA,QAAMC,YAAY,GAAG,6BAArB;AACA,QAAMC,aAAa,GAAGH,IAAtB;AAEA,QAAMI,mBAAmB,GAAI,IAAIF,YAAc,KAAKC,aAAe,IAAnE;AAEA,QAAME,WAAW,GAAG,EACnB,GAAGP,KADgB;AAEnB,KAAEI,YAAF,GAAkBC;AAFC,GAApB;AAKA,SACC,4BAAC,uBAAD;AACC,IAAA,OAAO,EAAG,MACTF,IAAI,CAAED,IAAF,EAAQ;AAAEM,MAAAA,mBAAmB,EAAEF;AAAvB,KAAR;AAFN,KAIMC,WAJN,EADD;AAQA;;AAED,SAASE,oBAAT,QAA8C;AAAA,MAAf,EAAE,GAAGT;AAAL,GAAe;AAC7C,QAAM;AAAEU,IAAAA;AAAF,MAAa,6CAAnB;AACA,SAAO,4BAAC,uBAAD;AAAyB,IAAA,OAAO,EAAGA;AAAnC,KAAiDV,KAAjD,EAAP;AACA","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 GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...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\nfunction NavigationButton( { path, ...props } ) {\n\tconst { goTo } = useNavigator();\n\n\tconst dataAttrName = 'data-navigator-focusable-id';\n\tconst dataAttrValue = path;\n\n\tconst dataAttrCssSelector = `[${ dataAttrName }=\"${ dataAttrValue }\"]`;\n\n\tconst buttonProps = {\n\t\t...props,\n\t\t[ dataAttrName ]: dataAttrValue,\n\t};\n\n\treturn (\n\t\t<GenericNavigationButton\n\t\t\tonClick={ () =>\n\t\t\t\tgoTo( path, { focusTargetSelector: dataAttrCssSelector } )\n\t\t\t}\n\t\t\t{ ...buttonProps }\n\t\t/>\n\t);\n}\n\nfunction NavigationBackButton( { ...props } ) {\n\tconst { goBack } = useNavigator();\n\treturn <GenericNavigationButton onClick={ goBack } { ...props } />;\n}\n\nexport { NavigationButton, NavigationBackButton };\n"]}

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

@@ -15,7 +15,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _subtitle = _interopRequireDefault(require("./subtitle"));
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 var _hooks = require("./hooks");
 
@@ -45,10 +45,10 @@ function Palette(_ref) {
   }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Palette')), (0, _element.createElement)(_components.__experimentalItemGroup, {
     isBordered: true,
     isSeparated: true
-  }, (0, _element.createElement)(_navigationButton.default, {
+  }, (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: screenPath
   }, (0, _element.createElement)(_components.__experimentalHStack, {
-    isReversed: colors.length === 0
+    direction: colors.length === 0 ? 'row-reverse' : 'row'
   }, (0, _element.createElement)(_components.FlexBlock, null, (0, _element.createElement)(_components.__experimentalZStack, {
     isLayered: false,
     offset: -8

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;;;;;;;;AAaA;;AAVA;;AASA;;AAMA;;AACA;;AACA;;AApBA;AACA;AACA;;AAaA;AACA;AACA;AAKA,MAAMA,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmB,uBAAY,sBAAZ,CAAzB;AACA,QAAM,CAAEC,WAAF,IAAkB,uBAAY,qBAAZ,CAAxB;AACA,QAAM,CAAEC,aAAF,IAAoB,uBAAY,uBAAZ,CAA1B;AAEA,QAAM,CAAEC,qBAAF,IAA4B,uBACjC,sBADiC,EAEjCJ,IAFiC,CAAlC;AAIA,QAAMK,MAAM,GAAG,sBACd,MAAM,CACL,IAAKJ,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADQ,EAQd,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARc,CAAf;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACG,oBACA;AACA,gBAAI,UAAJ,EAAgB,WAAhB,EAA6BH,MAAM,CAACG,MAApC,CAFA,EAGAH,MAAM,CAACG,MAHP,CADH,GAMG,cAAI,mBAAJ,CAPJ;AASA,SACC,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,EAAGF;AAAzB,KACC,4BAAC,gCAAD;AAAQ,IAAA,UAAU,EAAGD,MAAM,CAACG,MAAP,KAAkB;AAAvC,KACC,4BAAC,qBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,4BAAC,0BAAD;AACC,MAAA,GAAG,EAAGA,KADP;AAEC,MAAA,UAAU,EAAGA;AAFd,MAD2B;AAAA,GAA1B,CADH,CADD,CADD,EAWC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAXD,CADD,CADD,CAFD,CADD;AAsBA;;eAEcR,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';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport NavigationButton from './navigation-button';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButton path={ screenPath }>\n\t\t\t\t\t<HStack isReversed={ colors.length === 0 }>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButton>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;;;;;;;;AAaA;;AAVA;;AASA;;AAMA;;AACA;;AACA;;AApBA;AACA;AACA;;AAaA;AACA;AACA;AAKA,MAAMA,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmB,uBAAY,sBAAZ,CAAzB;AACA,QAAM,CAAEC,WAAF,IAAkB,uBAAY,qBAAZ,CAAxB;AACA,QAAM,CAAEC,aAAF,IAAoB,uBAAY,uBAAZ,CAA1B;AAEA,QAAM,CAAEC,qBAAF,IAA4B,uBACjC,sBADiC,EAEjCJ,IAFiC,CAAlC;AAIA,QAAMK,MAAM,GAAG,sBACd,MAAM,CACL,IAAKJ,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADQ,EAQd,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARc,CAAf;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACG,oBACA;AACA,gBAAI,UAAJ,EAAgB,WAAhB,EAA6BH,MAAM,CAACG,MAApC,CAFA,EAGAH,MAAM,CAACG,MAHP,CADH,GAMG,cAAI,mBAAJ,CAPJ;AASA,SACC,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,kCAAD;AAAkB,IAAA,IAAI,EAAGF;AAAzB,KACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EACRD,MAAM,CAACG,MAAP,KAAkB,CAAlB,GAAsB,aAAtB,GAAsC;AAFxC,KAKC,4BAAC,qBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,4BAAC,0BAAD;AACC,MAAA,GAAG,EAAGA,KADP;AAEC,MAAA,UAAU,EAAGA;AAFd,MAD2B;AAAA,GAA1B,CADH,CADD,CALD,EAeC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAfD,CADD,CADD,CAFD,CADD;AA0BA;;eAEcR,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';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButton } from './navigation-button';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButton path={ screenPath }>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButton>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}

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

@@ -7,10 +7,12 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _components = require("@wordpress/components");
+var _blockEditor = require("@wordpress/block-editor");
 
 var _hooks = require("./hooks");
 
+var _useGlobalStylesOutput = require("./use-global-styles-output");
+
 /**
  * WordPress dependencies
  */
@@ -18,31 +20,60 @@ var _hooks = require("./hooks");
 /**
  * Internal dependencies
  */
-const StylesPreview = () => {
+const StylesPreview = _ref => {
+  let {
+    height = 150
+  } = _ref;
   const [fontFamily = 'serif'] = (0, _hooks.useStyle)('typography.fontFamily');
   const [textColor = 'black'] = (0, _hooks.useStyle)('color.text');
   const [linkColor = 'blue'] = (0, _hooks.useStyle)('elements.link.color.text');
   const [backgroundColor = 'white'] = (0, _hooks.useStyle)('color.background');
   const [gradientValue] = (0, _hooks.useStyle)('color.gradient');
-  return (0, _element.createElement)(_components.Card, {
-    className: "edit-site-global-styles-preview",
+  const [styles] = (0, _useGlobalStylesOutput.useGlobalStylesOutput)();
+  return (0, _element.createElement)(_blockEditor.__unstableIframe, {
+    className: "edit-site-global-styles-preview__iframe",
+    head: (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
+      styles: styles
+    }),
+    style: {
+      height
+    }
+  }, (0, _element.createElement)("div", {
     style: {
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
+      display: 'flex',
+      gap: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      transform: `scale(${height / 150})`,
+      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      cursor: 'pointer'
     }
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
-    spacing: 5
   }, (0, _element.createElement)("div", {
     style: {
       fontFamily,
-      fontSize: '80px',
-      color: textColor
+      fontSize: '80px'
+    }
+  }, "Aa"), (0, _element.createElement)("div", {
+    style: {
+      display: 'flex',
+      gap: 20,
+      flexDirection: 'column'
+    }
+  }, (0, _element.createElement)("div", {
+    style: {
+      height: 40,
+      width: 40,
+      background: textColor,
+      borderRadius: 20
+    }
+  }), ' ', (0, _element.createElement)("div", {
+    style: {
+      height: 40,
+      width: 40,
+      background: linkColor,
+      borderRadius: 20
     }
-  }, "Aa"), (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 2
-  }, (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: textColor
-  }), (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: linkColor
   }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["StylesPreview","fontFamily","textColor","linkColor","backgroundColor","gradientValue","background","fontSize","color"],"mappings":";;;;;;;;;AAGA;;AAUA;;AAbA;AACA;AACA;;AAQA;AACA;AACA;AAGA,MAAMA,aAAa,GAAG,MAAM;AAC3B,QAAM,CAAEC,UAAU,GAAG,OAAf,IAA2B,qBAAU,uBAAV,CAAjC;AACA,QAAM,CAAEC,SAAS,GAAG,OAAd,IAA0B,qBAAU,YAAV,CAAhC;AACA,QAAM,CAAEC,SAAS,GAAG,MAAd,IAAyB,qBAAU,0BAAV,CAA/B;AACA,QAAM,CAAEC,eAAe,GAAG,OAApB,IAAgC,qBAAU,kBAAV,CAAtC;AACA,QAAM,CAAEC,aAAF,IAAoB,qBAAU,gBAAV,CAA1B;AAEA,SACC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,KAAK,EAAG;AAAEC,MAAAA,UAAU,EAAED,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD;AAA/B;AAFT,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC;AACC,IAAA,KAAK,EAAG;AAAEH,MAAAA,UAAF;AAAcM,MAAAA,QAAQ,EAAE,MAAxB;AAAgCC,MAAAA,KAAK,EAAEN;AAAvC;AADT,UADD,EAMC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGA;AAA7B,IADD,EAEC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGC;AAA7B,IAFD,CAND,CAJD,CADD;AAkBA,CAzBD;;eA2BeH,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 */\nimport { useStyle } from './hooks';\n\nconst StylesPreview = () => {\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"edit-site-global-styles-preview\"\n\t\t\tstyle={ { background: gradientValue ?? backgroundColor } }\n\t\t>\n\t\t\t<HStack spacing={ 5 }>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ { fontFamily, fontSize: '80px', color: textColor } }\n\t\t\t\t>\n\t\t\t\t\tAa\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["StylesPreview","height","fontFamily","textColor","linkColor","backgroundColor","gradientValue","styles","display","gap","alignItems","justifyContent","transform","background","cursor","fontSize","flexDirection","width","borderRadius"],"mappings":";;;;;;;;;AAGA;;AAQA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIA,MAAMA,aAAa,GAAG,QAAwB;AAAA,MAAtB;AAAEC,IAAAA,MAAM,GAAG;AAAX,GAAsB;AAC7C,QAAM,CAAEC,UAAU,GAAG,OAAf,IAA2B,qBAAU,uBAAV,CAAjC;AACA,QAAM,CAAEC,SAAS,GAAG,OAAd,IAA0B,qBAAU,YAAV,CAAhC;AACA,QAAM,CAAEC,SAAS,GAAG,MAAd,IAAyB,qBAAU,0BAAV,CAA/B;AACA,QAAM,CAAEC,eAAe,GAAG,OAApB,IAAgC,qBAAU,kBAAV,CAAtC;AACA,QAAM,CAAEC,aAAF,IAAoB,qBAAU,gBAAV,CAA1B;AACA,QAAM,CAAEC,MAAF,IAAa,mDAAnB;AAEA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,IAAI,EAAG,4BAAC,mCAAD;AAAc,MAAA,MAAM,EAAGA;AAAvB,MAFR;AAGC,IAAA,KAAK,EAAG;AAAEN,MAAAA;AAAF;AAHT,KAKC;AACC,IAAA,KAAK,EAAG;AACPO,MAAAA,OAAO,EAAE,MADF;AAEPC,MAAAA,GAAG,EAAE,EAFE;AAGPC,MAAAA,UAAU,EAAE,QAHL;AAIPC,MAAAA,cAAc,EAAE,QAJT;AAKPV,MAAAA,MAAM,EAAE,MALD;AAMPW,MAAAA,SAAS,EAAG,SAASX,MAAM,GAAG,GAAK,GAN5B;AAOPY,MAAAA,UAAU,EAAEP,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAPtB;AAQPS,MAAAA,MAAM,EAAE;AARD;AADT,KAYC;AAAK,IAAA,KAAK,EAAG;AAAEZ,MAAAA,UAAF;AAAca,MAAAA,QAAQ,EAAE;AAAxB;AAAb,UAZD,EAaC;AACC,IAAA,KAAK,EAAG;AACPP,MAAAA,OAAO,EAAE,MADF;AAEPC,MAAAA,GAAG,EAAE,EAFE;AAGPO,MAAAA,aAAa,EAAE;AAHR;AADT,KAOC;AACC,IAAA,KAAK,EAAG;AACPf,MAAAA,MAAM,EAAE,EADD;AAEPgB,MAAAA,KAAK,EAAE,EAFA;AAGPJ,MAAAA,UAAU,EAAEV,SAHL;AAIPe,MAAAA,YAAY,EAAE;AAJP;AADT,IAPD,EAcK,GAdL,EAeC;AACC,IAAA,KAAK,EAAG;AACPjB,MAAAA,MAAM,EAAE,EADD;AAEPgB,MAAAA,KAAK,EAAE,EAFA;AAGPJ,MAAAA,UAAU,EAAET,SAHL;AAIPc,MAAAA,YAAY,EAAE;AAJP;AADT,IAfD,CAbD,CALD,CADD;AA8CA,CAtDD;;eAwDelB,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst StylesPreview = ( { height = 150 } ) => {\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\tstyle={ { height } }\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 20,\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\ttransform: `scale(${ height / 150 })`,\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tgap: 20,\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\t\tbackground: textColor,\n\t\t\t\t\t\t\tborderRadius: 20,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>{ ' ' }\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\t\tbackground: linkColor,\n\t\t\t\t\t\t\tborderRadius: 20,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}

package/build/components/global-styles/screen-background-color.js

@@ -30,7 +30,6 @@ function ScreenBackgroundColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const [solids] = (0, _hooks.useSetting)('color.palette', name);
   const [gradients] = (0, _hooks.useSetting)('color.gradients', name);
@@ -80,9 +79,8 @@ function ScreenBackgroundColor(_ref) {
     ...gradientSettings
   };
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu + '/colors',
     title: (0, _i18n.__)('Background'),
-    description: (0, _i18n.__)('Set a background color or gradient for the whole website.')
+    description: (0, _i18n.__)('Set a background color or gradient for the whole site.')
   }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, (0, _extends2.default)({
     className: "edit-site-screen-background-color__control",
     colors: colorsPerOrigin,