@wordpress/edit-site 4.1.1 → 4.3.1

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","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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","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","handleOnChangeWithStyle","showBorderColor","borderColor","setBorderColor","disableCustomColors","disableCustomGradients","borderColorSettings","label","colors","colorValue","onColorChange","clearable","showBorderRadius","borderRadiusValues","setBorderRadius","hasBorderRadius","borderValues","radius","Object","entries","resetAll"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,\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 {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\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// 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\t// Border color.\n\tconst showBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\n\tconst borderColorSettings = [\n\t\t{\n\t\t\tlabel: __( 'Color' ),\n\t\t\tcolors: useColorsPerOrigin( name ),\n\t\t\tcolorValue: borderColor,\n\t\t\tonColorChange: handleOnChangeWithStyle( setBorderColor ),\n\t\t\tclearable: false,\n\t\t},\n\t];\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\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<ColorGradientSettingsDropdown\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\tsettings={ borderColorSettings }\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/color-indicator-wrapper.js

@@ -0,0 +1,37 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+function ColorIndicatorWrapper(_ref) {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return (0, _element.createElement)(_components.Flex, (0, _extends2.default)({
+    className: (0, _classnames.default)('edit-site-global-styles__color-indicator-wrapper', className)
+  }, props));
+}
+
+var _default = ColorIndicatorWrapper;
+exports.default = _default;
+//# sourceMappingURL=color-indicator-wrapper.js.map

package/build/components/global-styles/color-indicator-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-indicator-wrapper.js"],"names":["ColorIndicatorWrapper","className","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,qBAAT,OAA0D;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AACzD,SACC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAG,yBACX,kDADW,EAEXD,SAFW;AADb,KAKMC,KALN,EADD;AASA;;eAEcF,qB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Flex } from '@wordpress/components';\n\nfunction ColorIndicatorWrapper( { className, ...props } ) {\n\treturn (\n\t\t<Flex\n\t\t\tclassName={ classnames(\n\t\t\t\t'edit-site-global-styles__color-indicator-wrapper',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorIndicatorWrapper;\n"]}

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

@@ -46,8 +46,12 @@ function useHasMargin(name) {
 
 function useHasGap(name) {
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = (0, _hooks.useSetting)('spacing.blockGap', name);
-  return settings && supports.includes('--wp--style--block-gap');
+  const [settings] = (0, _hooks.useSetting)('spacing.blockGap', name); // Do not show the gap control panel for block-level global styles
+  // as they do not work on the frontend.
+  // See: https://github.com/WordPress/gutenberg/pull/39845.
+  // We can revert this condition when they're working again.
+
+  return !!name ? false : settings && supports.includes('--wp--style--block-gap');
 }
 
 function filterValuesBySides(values, sides) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/dimensions-panel.js"],"names":["AXIAL_SIDES","useHasDimensionsPanel","name","hasPadding","useHasPadding","hasMargin","useHasMargin","hasGap","useHasGap","supports","settings","includes","filterValuesBySides","values","sides","filteredValues","forEach","side","top","bottom","left","right","splitStyleValue","value","DimensionsPanel","showPaddingControl","showMarginControl","showGapControl","units","availableUnits","rawPadding","setRawPadding","paddingValues","paddingSides","isAxialPadding","some","setPaddingValues","newPaddingValues","padding","resetPaddingValue","hasPaddingValue","Object","keys","length","rawMargin","setRawMargin","marginValues","marginSides","isAxialMargin","setMarginValues","newMarginValues","margin","resetMarginValue","hasMarginValue","gapValue","setGapValue","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 { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst AXIAL_SIDES = [ 'horizontal', 'vertical' ];\n\nexport function useHasDimensionsPanel( name ) {\n\tconst hasPadding = useHasPadding( name );\n\tconst hasMargin = useHasMargin( name );\n\tconst hasGap = useHasGap( name );\n\n\treturn hasPadding || hasMargin || hasGap;\n}\n\nfunction useHasPadding( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ settings ] = useSetting( 'spacing.padding', name );\n\n\treturn settings && supports.includes( 'padding' );\n}\n\nfunction useHasMargin( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ settings ] = useSetting( 'spacing.margin', name );\n\n\treturn settings && supports.includes( 'margin' );\n}\n\nfunction useHasGap( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\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( { name } ) {\n\tconst showPaddingControl = useHasPadding( name );\n\tconst showMarginControl = useHasMargin( name );\n\tconst showGapControl = useHasGap( name );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units', name )[ 0 ] || [\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 [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );\n\tconst paddingValues = splitStyleValue( rawPadding );\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\tsetRawPadding( padding );\n\t};\n\tconst resetPaddingValue = () => setPaddingValues( {} );\n\tconst hasPaddingValue = () =>\n\t\t!! paddingValues && Object.keys( paddingValues ).length;\n\n\tconst [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );\n\tconst marginValues = splitStyleValue( rawMargin );\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\tsetRawMargin( margin );\n\t};\n\tconst resetMarginValue = () => setMarginValues( {} );\n\tconst hasMarginValue = () =>\n\t\t!! marginValues && Object.keys( marginValues ).length;\n\n\tconst [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/dimensions-panel.js"],"names":["AXIAL_SIDES","useHasDimensionsPanel","name","hasPadding","useHasPadding","hasMargin","useHasMargin","hasGap","useHasGap","supports","settings","includes","filterValuesBySides","values","sides","filteredValues","forEach","side","top","bottom","left","right","splitStyleValue","value","DimensionsPanel","showPaddingControl","showMarginControl","showGapControl","units","availableUnits","rawPadding","setRawPadding","paddingValues","paddingSides","isAxialPadding","some","setPaddingValues","newPaddingValues","padding","resetPaddingValue","hasPaddingValue","Object","keys","length","rawMargin","setRawMargin","marginValues","marginSides","isAxialMargin","setMarginValues","newMarginValues","margin","resetMarginValue","hasMarginValue","gapValue","setGapValue","resetGapValue","undefined","hasGapValue","resetAll"],"mappings":";;;;;;;;;;AAGA;;AACA;;AAOA;;AAKA;;AAhBA;AACA;AACA;;AAWA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,CAAE,YAAF,EAAgB,UAAhB,CAApB;;AAEO,SAASC,qBAAT,CAAgCC,IAAhC,EAAuC;AAC7C,QAAMC,UAAU,GAAGC,aAAa,CAAEF,IAAF,CAAhC;AACA,QAAMG,SAAS,GAAGC,YAAY,CAAEJ,IAAF,CAA9B;AACA,QAAMK,MAAM,GAAGC,SAAS,CAAEN,IAAF,CAAxB;AAEA,SAAOC,UAAU,IAAIE,SAAd,IAA2BE,MAAlC;AACA;;AAED,SAASH,aAAT,CAAwBF,IAAxB,EAA+B;AAC9B,QAAMO,QAAQ,GAAG,2CAAgCP,IAAhC,CAAjB;AACA,QAAM,CAAEQ,QAAF,IAAe,uBAAY,iBAAZ,EAA+BR,IAA/B,CAArB;AAEA,SAAOQ,QAAQ,IAAID,QAAQ,CAACE,QAAT,CAAmB,SAAnB,CAAnB;AACA;;AAED,SAASL,YAAT,CAAuBJ,IAAvB,EAA8B;AAC7B,QAAMO,QAAQ,GAAG,2CAAgCP,IAAhC,CAAjB;AACA,QAAM,CAAEQ,QAAF,IAAe,uBAAY,gBAAZ,EAA8BR,IAA9B,CAArB;AAEA,SAAOQ,QAAQ,IAAID,QAAQ,CAACE,QAAT,CAAmB,QAAnB,CAAnB;AACA;;AAED,SAASH,SAAT,CAAoBN,IAApB,EAA2B;AAC1B,QAAMO,QAAQ,GAAG,2CAAgCP,IAAhC,CAAjB;AACA,QAAM,CAAEQ,QAAF,IAAe,uBAAY,kBAAZ,EAAgCR,IAAhC,CAArB,CAF0B,CAG1B;AACA;AACA;AACA;;AACA,SAAO,CAAC,CAAEA,IAAH,GACJ,KADI,GAEJQ,QAAQ,IAAID,QAAQ,CAACE,QAAT,CAAmB,wBAAnB,CAFf;AAGA;;AAED,SAASC,mBAAT,CAA8BC,MAA9B,EAAsCC,KAAtC,EAA8C;AAC7C,MAAK,CAAEA,KAAP,EAAe;AACd;AACA,WAAOD,MAAP;AACA,GAJ4C,CAM7C;;;AACA,QAAME,cAAc,GAAG,EAAvB;AACAD,EAAAA,KAAK,CAACE,OAAN,CAAiBC,IAAF,IAAY;AAC1B,QAAKA,IAAI,KAAK,UAAd,EAA2B;AAC1BF,MAAAA,cAAc,CAACG,GAAf,GAAqBL,MAAM,CAACK,GAA5B;AACAH,MAAAA,cAAc,CAACI,MAAf,GAAwBN,MAAM,CAACM,MAA/B;AACA;;AACD,QAAKF,IAAI,KAAK,YAAd,EAA6B;AAC5BF,MAAAA,cAAc,CAACK,IAAf,GAAsBP,MAAM,CAACO,IAA7B;AACAL,MAAAA,cAAc,CAACM,KAAf,GAAuBR,MAAM,CAACQ,KAA9B;AACA;;AACDN,IAAAA,cAAc,CAAEE,IAAF,CAAd,GAAyBJ,MAAM,CAAEI,IAAF,CAA/B;AACA,GAVD;AAYA,SAAOF,cAAP;AACA;;AAED,SAASO,eAAT,CAA0BC,KAA1B,EAAkC;AACjC;AACA,MAAKA,KAAK,IAAI,OAAOA,KAAP,KAAiB,QAA/B,EAA0C;AACzC;AACA,WAAO;AACNL,MAAAA,GAAG,EAAEK,KADC;AAENF,MAAAA,KAAK,EAAEE,KAFD;AAGNJ,MAAAA,MAAM,EAAEI,KAHF;AAINH,MAAAA,IAAI,EAAEG;AAJA,KAAP;AAMA;;AAED,SAAOA,KAAP;AACA;;AAEc,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEtB,IAAAA;AAAF,GAAW;AACnD,QAAMuB,kBAAkB,GAAGrB,aAAa,CAAEF,IAAF,CAAxC;AACA,QAAMwB,iBAAiB,GAAGpB,YAAY,CAAEJ,IAAF,CAAtC;AACA,QAAMyB,cAAc,GAAGnB,SAAS,CAAEN,IAAF,CAAhC;AACA,QAAM0B,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,uBAAY,eAAZ,EAA6B3B,IAA7B,EAAqC,CAArC,KAA4C,CAC3D,GAD2D,EAE3D,IAF2D,EAG3D,IAH2D,EAI3D,KAJ2D,EAK3D,IAL2D;AAD/B,GAAhB,CAAd;AAUA,QAAM,CAAE4B,UAAF,EAAcC,aAAd,IAAgC,qBAAU,iBAAV,EAA6B7B,IAA7B,CAAtC;AACA,QAAM8B,aAAa,GAAGV,eAAe,CAAEQ,UAAF,CAArC;AACA,QAAMG,YAAY,GAAG,+CAAgB/B,IAAhB,EAAsB,SAAtB,CAArB;AACA,QAAMgC,cAAc,GACnBD,YAAY,IACZA,YAAY,CAACE,IAAb,CAAqBlB,IAAF,IAAYjB,WAAW,CAACW,QAAZ,CAAsBM,IAAtB,CAA/B,CAFD;;AAIA,QAAMmB,gBAAgB,GAAKC,gBAAF,IAAwB;AAChD,UAAMC,OAAO,GAAG1B,mBAAmB,CAAEyB,gBAAF,EAAoBJ,YAApB,CAAnC;AACAF,IAAAA,aAAa,CAAEO,OAAF,CAAb;AACA,GAHD;;AAIA,QAAMC,iBAAiB,GAAG,MAAMH,gBAAgB,CAAE,EAAF,CAAhD;;AACA,QAAMI,eAAe,GAAG,MACvB,CAAC,CAAER,aAAH,IAAoBS,MAAM,CAACC,IAAP,CAAaV,aAAb,EAA6BW,MADlD;;AAGA,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,qBAAU,gBAAV,EAA4B3C,IAA5B,CAApC;AACA,QAAM4C,YAAY,GAAGxB,eAAe,CAAEsB,SAAF,CAApC;AACA,QAAMG,WAAW,GAAG,+CAAgB7C,IAAhB,EAAsB,QAAtB,CAApB;AACA,QAAM8C,aAAa,GAClBD,WAAW,IACXA,WAAW,CAACZ,IAAZ,CAAoBlB,IAAF,IAAYjB,WAAW,CAACW,QAAZ,CAAsBM,IAAtB,CAA9B,CAFD;;AAIA,QAAMgC,eAAe,GAAKC,eAAF,IAAuB;AAC9C,UAAMC,MAAM,GAAGvC,mBAAmB,CAAEsC,eAAF,EAAmBH,WAAnB,CAAlC;AACAF,IAAAA,YAAY,CAAEM,MAAF,CAAZ;AACA,GAHD;;AAIA,QAAMC,gBAAgB,GAAG,MAAMH,eAAe,CAAE,EAAF,CAA9C;;AACA,QAAMI,cAAc,GAAG,MACtB,CAAC,CAAEP,YAAH,IAAmBL,MAAM,CAACC,IAAP,CAAaI,YAAb,EAA4BH,MADhD;;AAGA,QAAM,CAAEW,QAAF,EAAYC,WAAZ,IAA4B,qBAAU,kBAAV,EAA8BrD,IAA9B,CAAlC;;AACA,QAAMsD,aAAa,GAAG,MAAMD,WAAW,CAAEE,SAAF,CAAvC;;AACA,QAAMC,WAAW,GAAG,MAAM,CAAC,CAAEJ,QAA7B;;AAEA,QAAMK,QAAQ,GAAG,MAAM;AACtBpB,IAAAA,iBAAiB;AACjBa,IAAAA,gBAAgB;AAChBI,IAAAA,aAAa;AACb,GAJD;;AAMA,SACC,4BAAC,oCAAD;AAAY,IAAA,KAAK,EAAG,cAAI,YAAJ,CAApB;AAAyC,IAAA,QAAQ,EAAGG;AAApD,KACGlC,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAGe,eADZ;AAEC,IAAA,KAAK,EAAG,cAAI,SAAJ,CAFT;AAGC,IAAA,UAAU,EAAGD,iBAHd;AAIC,IAAA,gBAAgB,EAAG;AAJpB,KAMC,4BAAC,oCAAD;AACC,IAAA,MAAM,EAAGP,aADV;AAEC,IAAA,QAAQ,EAAGI,gBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,SAAJ,CAHT;AAIC,IAAA,KAAK,EAAGH,YAJT;AAKC,IAAA,KAAK,EAAGL,KALT;AAMC,IAAA,UAAU,EAAG,KANd;AAOC,IAAA,WAAW,EAAGM;AAPf,IAND,CAFF,EAmBGR,iBAAiB,IAClB,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG2B,cADZ;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,UAAU,EAAGD,gBAHd;AAIC,IAAA,gBAAgB,EAAG;AAJpB,KAMC,4BAAC,oCAAD;AACC,IAAA,MAAM,EAAGN,YADV;AAEC,IAAA,QAAQ,EAAGG,eAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,KAAK,EAAGF,WAJT;AAKC,IAAA,KAAK,EAAGnB,KALT;AAMC,IAAA,UAAU,EAAG,KANd;AAOC,IAAA,WAAW,EAAGoB;AAPf,IAND,CApBF,EAqCGrB,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG+B,WADZ;AAEC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAFT;AAGC,IAAA,UAAU,EAAGF,aAHd;AAIC,IAAA,gBAAgB,EAAG;AAJpB,KAMC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,cAAI,eAAJ,CADT;AAEC,IAAA,oBAAoB,EAAC,MAFtB;AAGC,IAAA,GAAG,EAAG,CAHP;AAIC,IAAA,QAAQ,EAAGD,WAJZ;AAKC,IAAA,KAAK,EAAG3B,KALT;AAMC,IAAA,KAAK,EAAG0B;AANT,IAND,CAtCF,CADD;AAyDA","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 { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst AXIAL_SIDES = [ 'horizontal', 'vertical' ];\n\nexport function useHasDimensionsPanel( name ) {\n\tconst hasPadding = useHasPadding( name );\n\tconst hasMargin = useHasMargin( name );\n\tconst hasGap = useHasGap( name );\n\n\treturn hasPadding || hasMargin || hasGap;\n}\n\nfunction useHasPadding( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ settings ] = useSetting( 'spacing.padding', name );\n\n\treturn settings && supports.includes( 'padding' );\n}\n\nfunction useHasMargin( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ settings ] = useSetting( 'spacing.margin', name );\n\n\treturn settings && supports.includes( 'margin' );\n}\n\nfunction useHasGap( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ settings ] = useSetting( 'spacing.blockGap', name );\n\t// Do not show the gap control panel for block-level global styles\n\t// as they do not work on the frontend.\n\t// See: https://github.com/WordPress/gutenberg/pull/39845.\n\t// We can revert this condition when they're working again.\n\treturn !! name\n\t\t? false\n\t\t: 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( { name } ) {\n\tconst showPaddingControl = useHasPadding( name );\n\tconst showMarginControl = useHasMargin( name );\n\tconst showGapControl = useHasGap( name );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units', name )[ 0 ] || [\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 [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );\n\tconst paddingValues = splitStyleValue( rawPadding );\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\tsetRawPadding( padding );\n\t};\n\tconst resetPaddingValue = () => setPaddingValues( {} );\n\tconst hasPaddingValue = () =>\n\t\t!! paddingValues && Object.keys( paddingValues ).length;\n\n\tconst [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );\n\tconst marginValues = splitStyleValue( rawMargin );\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\tsetRawMargin( margin );\n\t};\n\tconst resetMarginValue = () => setMarginValues( {} );\n\tconst hasMarginValue = () =>\n\t\t!! marginValues && Object.keys( marginValues ).length;\n\n\tconst [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );\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

@@ -32,10 +32,7 @@ function ScreenHeader(_ref) {
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     spacing: 2
   }, (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"
-    }),
+    icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
     size: "small",
     "aria-label": (0, _i18n.__)('Navigate to the previous view')
   })), (0, _element.createElement)(_components.__experimentalSpacer, null, (0, _element.createElement)(_components.__experimentalHeading, {

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

@@ -1 +1 @@
-{"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"]}
+{"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,EAAG,qBAAUC,mBAAV,GAAyBC,kBADjC;AAEC,IAAA,IAAI,EAAC,OAFN;AAGC,kBAAa,cAAI,+BAAJ;AAHd,IADD,CADD,EAQC,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,IAAA,KAAK,EAAG;AAAjB,KAAuBH,KAAvB,CADD,CARD,CADD,EAaGC,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CAdF,CADD;AAqBA;;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 } 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={ isRTL() ? chevronRight : chevronLeft }\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/icon-with-current-color.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconWithCurrentColor = IconWithCurrentColor;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+function IconWithCurrentColor(_ref) {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
+    className: (0, _classnames.default)(className, 'edit-site-global-styles-icon-with-current-color')
+  }, props));
+}
+//# sourceMappingURL=icon-with-current-color.js.map

package/build/components/global-styles/icon-with-current-color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"names":["IconWithCurrentColor","className","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,SAASA,oBAAT,OAAyD;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AAC/D,SACC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAG,yBACXD,SADW,EAEX,iDAFW;AADb,KAKMC,KALN,EADD;AASA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}

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

@@ -14,11 +14,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _components = require("@wordpress/components");
 
-var _icons = require("@wordpress/icons");
+var _iconWithCurrentColor = require("./icon-with-current-color");
 
 /**
  * WordPress dependencies
  */
+
+/**
+ * Internal dependencies
+ */
 function GenericNavigationButton(_ref) {
   let {
     icon,
@@ -27,10 +31,10 @@ function GenericNavigationButton(_ref) {
   } = _ref;
   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, {
+  }, (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: icon,
     size: 24
-  })), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
+  }), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
 }
 
 function NavigationButton(props) {

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":["GenericNavigationButton","icon","children","props","NavigationButton","NavigationBackButton"],"mappings":";;;;;;;;;;;;;;AAGA;;AAOA;;AAVA;AACA;AACA;AAUA,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,CAA2BD,KAA3B,EAAmC;AAClC,SAAO,4BAAC,yCAAD;AAAiB,IAAA,EAAE,EAAGH;AAAtB,KAAqDG,KAArD,EAAP;AACA;;AAED,SAASE,oBAAT,CAA+BF,KAA/B,EAAuC;AACtC,SAAO,4BAAC,6CAAD;AAAqB,IAAA,EAAE,EAAGH;AAA1B,KAAyDG,KAAzD,EAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\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( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButton( props ) {\n\treturn <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;\n}\n\nexport { NavigationButton, NavigationBackButton };\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["GenericNavigationButton","icon","children","props","NavigationButton","NavigationBackButton"],"mappings":";;;;;;;;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGA,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,0CAAD;AAAsB,IAAA,IAAI,EAAGA,IAA7B;AAAoC,IAAA,IAAI,EAAG;AAA3C,IADD,EAEC,4BAAC,oBAAD,QAAYC,QAAZ,CAFD,CAFF,EAOG,CAAED,IAAF,IAAUC,QAPb,CADD;AAWA;;AAED,SAASE,gBAAT,CAA2BD,KAA3B,EAAmC;AAClC,SAAO,4BAAC,yCAAD;AAAiB,IAAA,EAAE,EAAGH;AAAtB,KAAqDG,KAArD,EAAP;AACA;;AAED,SAASE,oBAAT,CAA+BF,KAA/B,EAAuC;AACtC,SAAO,4BAAC,6CAAD;AAAqB,IAAA,EAAE,EAAGH;AAA1B,KAAyDG,KAAzD,EAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\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<IconWithCurrentColor icon={ icon } size={ 24 } />\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( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButton( props ) {\n\treturn <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;\n}\n\nexport { NavigationButton, NavigationBackButton };\n"]}

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

@@ -19,6 +19,8 @@ var _navigationButton = require("./navigation-button");
 
 var _hooks = require("./hooks");
 
+var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
+
 /**
  * WordPress dependencies
  */
@@ -49,18 +51,19 @@ function Palette(_ref) {
     path: screenPath
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     direction: colors.length === 0 ? 'row-reverse' : 'row'
-  }, (0, _element.createElement)(_components.FlexBlock, null, (0, _element.createElement)(_components.__experimentalZStack, {
+  }, (0, _element.createElement)(_components.__experimentalZStack, {
     isLayered: false,
     offset: -8
   }, colors.slice(0, 5).map(_ref2 => {
     let {
       color
     } = _ref2;
-    return (0, _element.createElement)(_components.ColorIndicator, {
-      key: color,
+    return (0, _element.createElement)(_colorIndicatorWrapper.default, {
+      key: color
+    }, (0, _element.createElement)(_components.ColorIndicator, {
       colorValue: color
-    });
-  }))), (0, _element.createElement)(_components.FlexItem, null, paletteButtonText)))));
+    }));
+  })), (0, _element.createElement)(_components.FlexItem, null, paletteButtonText)))));
 }
 
 var _default = Palette;

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,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"]}
+{"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":";;;;;;;;;AAYA;;AATA;;AAQA;;AAMA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAYA;AACA;AACA;AAMA,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,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,8BAAD;AAAuB,MAAA,GAAG,EAAGA;AAA7B,OACC,4BAAC,0BAAD;AAAgB,MAAA,UAAU,EAAGA;AAA7B,MADD,CAD2B;AAAA,GAA1B,CADH,CALD,EAYC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAZD,CADD,CADD,CAFD,CADD;AAuBA;;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\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';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\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<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t<ColorIndicatorWrapper key={ color }>\n\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\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

@@ -9,6 +9,10 @@ var _element = require("@wordpress/element");
 
 var _blockEditor = require("@wordpress/block-editor");
 
+var _components = require("@wordpress/components");
+
+var _compose = require("@wordpress/compose");
+
 var _hooks = require("./hooks");
 
 var _useGlobalStylesOutput = require("./use-global-styles-output");
@@ -20,61 +24,173 @@ var _useGlobalStylesOutput = require("./use-global-styles-output");
 /**
  * Internal dependencies
  */
+const firstFrame = {
+  start: {
+    opacity: 1,
+    display: 'block'
+  },
+  hover: {
+    opacity: 0,
+    display: 'none'
+  }
+};
+const secondFrame = {
+  hover: {
+    opacity: 1,
+    display: 'block'
+  },
+  start: {
+    opacity: 0,
+    display: 'none'
+  }
+};
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+const normalizedColorSwatchSize = 32;
+
 const StylesPreview = _ref => {
   let {
-    height = 150
+    label,
+    isFocused
   } = _ref;
+  const [fontWeight] = (0, _hooks.useStyle)('typography.fontWeight');
   const [fontFamily = 'serif'] = (0, _hooks.useStyle)('typography.fontFamily');
+  const [headingFontFamily = fontFamily] = (0, _hooks.useStyle)('elements.h1.typography.fontFamily');
+  const [headingFontWeight = fontWeight] = (0, _hooks.useStyle)('elements.h1.typography.fontWeight');
   const [textColor = 'black'] = (0, _hooks.useStyle)('color.text');
+  const [headingColor = textColor] = (0, _hooks.useStyle)('elements.h1.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');
   const [styles] = (0, _useGlobalStylesOutput.useGlobalStylesOutput)();
+  const disableMotion = (0, _compose.useReducedMotion)();
+  const [coreColors] = (0, _hooks.useSetting)('color.palette.core');
+  const [themeColors] = (0, _hooks.useSetting)('color.palette.theme');
+  const [customColors] = (0, _hooks.useSetting)('color.palette.custom');
+  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const [containerResizeListener, {
+    width
+  }] = (0, _compose.useResizeObserver)();
+  const ratio = width ? width / normalizedWidth : 1;
+  const paletteColors = (themeColors !== null && themeColors !== void 0 ? themeColors : []).concat(customColors !== null && customColors !== void 0 ? customColors : []).concat(coreColors !== null && coreColors !== void 0 ? coreColors : []);
+  const highlightedColors = paletteColors.filter( // we exclude these two colors because they are already visible in the preview.
+  _ref2 => {
+    let {
+      color
+    } = _ref2;
+    return color !== backgroundColor && color !== headingColor;
+  }).slice(0, 2);
   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", {
+      height: normalizedHeight * ratio,
+      visibility: !width ? 'hidden' : 'visible'
+    },
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    tabIndex: -1
+  }, containerResizeListener, (0, _element.createElement)(_components.__unstableMotion.div, {
     style: {
-      display: 'flex',
-      gap: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      transform: `scale(${height / 150})`,
+      height: normalizedHeight * ratio,
+      width: '100%',
       background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
       cursor: 'pointer'
+    },
+    initial: "start",
+    animate: (isHovered || isFocused) && !disableMotion ? 'hover' : 'start'
+  }, (0, _element.createElement)(_components.__unstableMotion.div, {
+    variants: firstFrame,
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    spacing: 10 * ratio,
+    justify: "center",
+    style: {
+      height: '100%',
+      overflow: 'hidden'
     }
   }, (0, _element.createElement)("div", {
     style: {
-      fontFamily,
-      fontSize: '80px'
+      fontFamily: headingFontFamily,
+      fontSize: 65 * ratio,
+      color: headingColor,
+      fontWeight: headingFontWeight
     }
-  }, "Aa"), (0, _element.createElement)("div", {
+  }, "Aa"), (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 4 * ratio
+  }, highlightedColors.map(_ref3 => {
+    let {
+      slug,
+      color
+    } = _ref3;
+    return (0, _element.createElement)("div", {
+      key: slug,
+      style: {
+        height: normalizedColorSwatchSize * ratio,
+        width: normalizedColorSwatchSize * ratio,
+        background: color,
+        borderRadius: normalizedColorSwatchSize * ratio / 2
+      }
+    });
+  })))), (0, _element.createElement)(_components.__unstableMotion.div, {
+    variants: secondFrame,
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 3 * ratio,
+    justify: "center",
     style: {
-      display: 'flex',
-      gap: 20,
-      flexDirection: 'column'
+      height: '100%',
+      overflow: 'hidden',
+      padding: 10 * ratio,
+      boxSizing: 'border-box'
+    }
+  }, label && (0, _element.createElement)("div", {
+    style: {
+      fontSize: 35 * ratio,
+      fontFamily: headingFontFamily,
+      color: headingColor,
+      fontWeight: headingFontWeight,
+      lineHeight: '1em'
     }
+  }, label), (0, _element.createElement)(_components.__experimentalHStack, {
+    spacing: 2 * ratio,
+    justify: "flex-start"
   }, (0, _element.createElement)("div", {
     style: {
-      height: 40,
-      width: 40,
-      background: textColor,
-      borderRadius: 20
+      fontFamily,
+      fontSize: 24 * ratio,
+      color: textColor
     }
-  }), ' ', (0, _element.createElement)("div", {
+  }, "Aa"), (0, _element.createElement)("div", {
     style: {
-      height: 40,
-      width: 40,
-      background: linkColor,
-      borderRadius: 20
+      fontFamily,
+      fontSize: 24 * ratio,
+      color: linkColor
     }
-  }))));
+  }, "Aa")), paletteColors && (0, _element.createElement)(_components.__experimentalHStack, {
+    spacing: 0
+  }, paletteColors.slice(0, 4).map((_ref4, index) => {
+    let {
+      color
+    } = _ref4;
+    return (0, _element.createElement)("div", {
+      key: index,
+      style: {
+        height: 10 * ratio,
+        width: 30 * ratio,
+        background: color,
+        flexGrow: 1
+      }
+    });
+  }))))));
 };
 
 var _default = StylesPreview;

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["firstFrame","start","opacity","display","hover","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","linkColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","height","visibility","background","cursor","overflow","fontSize","map","slug","borderRadius","padding","boxSizing","lineHeight","index","flexGrow"],"mappings":";;;;;;;AAaA;;AAVA;;AAIA;;AAKA;;AAMA;;AACA;;AAnBA;AACA;AACA;;AAaA;AACA;AACA;AAIA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,KAAK,EAAE;AACNC,IAAAA,OAAO,EAAE,CADH;AAENC,IAAAA,OAAO,EAAE;AAFH,GADW;AAKlBC,EAAAA,KAAK,EAAE;AACNF,IAAAA,OAAO,EAAE,CADH;AAENC,IAAAA,OAAO,EAAE;AAFH;AALW,CAAnB;AAWA,MAAME,WAAW,GAAG;AACnBD,EAAAA,KAAK,EAAE;AACNF,IAAAA,OAAO,EAAE,CADH;AAENC,IAAAA,OAAO,EAAE;AAFH,GADY;AAKnBF,EAAAA,KAAK,EAAE;AACNC,IAAAA,OAAO,EAAE,CADH;AAENC,IAAAA,OAAO,EAAE;AAFH;AALY,CAApB;AAWA,MAAMG,eAAe,GAAG,GAAxB;AACA,MAAMC,gBAAgB,GAAG,GAAzB;AAEA,MAAMC,yBAAyB,GAAG,EAAlC;;AAEA,MAAMC,aAAa,GAAG,QAA4B;AAAA,MAA1B;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAA0B;AACjD,QAAM,CAAEC,UAAF,IAAiB,qBAAU,uBAAV,CAAvB;AACA,QAAM,CAAEC,UAAU,GAAG,OAAf,IAA2B,qBAAU,uBAAV,CAAjC;AACA,QAAM,CAAEC,iBAAiB,GAAGD,UAAtB,IAAqC,qBAC1C,mCAD0C,CAA3C;AAGA,QAAM,CAAEE,iBAAiB,GAAGH,UAAtB,IAAqC,qBAC1C,mCAD0C,CAA3C;AAGA,QAAM,CAAEI,SAAS,GAAG,OAAd,IAA0B,qBAAU,YAAV,CAAhC;AACA,QAAM,CAAEC,YAAY,GAAGD,SAAjB,IAA+B,qBAAU,wBAAV,CAArC;AACA,QAAM,CAAEE,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;AACA,QAAMC,aAAa,GAAG,gCAAtB;AACA,QAAM,CAAEC,UAAF,IAAiB,uBAAY,oBAAZ,CAAvB;AACA,QAAM,CAAEC,WAAF,IAAkB,uBAAY,qBAAZ,CAAxB;AACA,QAAM,CAAEC,YAAF,IAAmB,uBAAY,sBAAZ,CAAzB;AACA,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AACA,QAAM,CAAEC,uBAAF,EAA2B;AAAEC,IAAAA;AAAF,GAA3B,IAAyC,iCAA/C;AACA,QAAMC,KAAK,GAAGD,KAAK,GAAGA,KAAK,GAAGvB,eAAX,GAA6B,CAAhD;AAEA,QAAMyB,aAAa,GAAG,CAAEP,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiB,EAAjB,EACpBQ,MADoB,CACZP,YADY,aACZA,YADY,cACZA,YADY,GACI,EADJ,EAEpBO,MAFoB,CAEZT,UAFY,aAEZA,UAFY,cAEZA,UAFY,GAEE,EAFF,CAAtB;AAGA,QAAMU,iBAAiB,GAAGF,aAAa,CACrCG,MADwB,EAExB;AACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAK,KAAKhB,eAAV,IAA6BgB,KAAK,KAAKlB,YAAxD;AAAA,GAHwB,EAKxBmB,KALwB,CAKjB,CALiB,EAKd,CALc,CAA1B;AAOA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,IAAI,EAAG,4BAAC,mCAAD;AAAc,MAAA,MAAM,EAAGf;AAAvB,MAFR;AAGC,IAAA,KAAK,EAAG;AACPgB,MAAAA,MAAM,EAAE9B,gBAAgB,GAAGuB,KADpB;AAEPQ,MAAAA,UAAU,EAAE,CAAET,KAAF,GAAU,QAAV,GAAqB;AAF1B,KAHT;AAOC,IAAA,YAAY,EAAG,MAAMF,YAAY,CAAE,IAAF,CAPlC;AAQC,IAAA,YAAY,EAAG,MAAMA,YAAY,CAAE,KAAF,CARlC;AASC,IAAA,QAAQ,EAAG,CAAC;AATb,KAWGC,uBAXH,EAYC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,KAAK,EAAG;AACPS,MAAAA,MAAM,EAAE9B,gBAAgB,GAAGuB,KADpB;AAEPD,MAAAA,KAAK,EAAE,MAFA;AAGPU,MAAAA,UAAU,EAAEnB,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAHtB;AAIPqB,MAAAA,MAAM,EAAE;AAJD,KADT;AAOC,IAAA,OAAO,EAAC,OAPT;AAQC,IAAA,OAAO,EACN,CAAEd,SAAS,IAAIf,SAAf,KAA8B,CAAEW,aAAhC,GACG,OADH,GAEG;AAXL,KAcC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,QAAQ,EAAGtB,UADZ;AAEC,IAAA,KAAK,EAAG;AACPqC,MAAAA,MAAM,EAAE,MADD;AAEPI,MAAAA,QAAQ,EAAE;AAFH;AAFT,KAOC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAG,KAAKX,KADhB;AAEC,IAAA,OAAO,EAAC,QAFT;AAGC,IAAA,KAAK,EAAG;AACPO,MAAAA,MAAM,EAAE,MADD;AAEPI,MAAAA,QAAQ,EAAE;AAFH;AAHT,KAQC;AACC,IAAA,KAAK,EAAG;AACP5B,MAAAA,UAAU,EAAEC,iBADL;AAEP4B,MAAAA,QAAQ,EAAE,KAAKZ,KAFR;AAGPK,MAAAA,KAAK,EAAElB,YAHA;AAIPL,MAAAA,UAAU,EAAEG;AAJL;AADT,UARD,EAkBC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG,IAAIe;AAAtB,KACGG,iBAAiB,CAACU,GAAlB,CAAuB;AAAA,QAAE;AAAEC,MAAAA,IAAF;AAAQT,MAAAA;AAAR,KAAF;AAAA,WACxB;AACC,MAAA,GAAG,EAAGS,IADP;AAEC,MAAA,KAAK,EAAG;AACPP,QAAAA,MAAM,EACL7B,yBAAyB,GAAGsB,KAFtB;AAGPD,QAAAA,KAAK,EACJrB,yBAAyB,GAAGsB,KAJtB;AAKPS,QAAAA,UAAU,EAAEJ,KALL;AAMPU,QAAAA,YAAY,EACTrC,yBAAyB,GAC1BsB,KADD,GAEA;AATM;AAFT,MADwB;AAAA,GAAvB,CADH,CAlBD,CAPD,CAdD,EA2DC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,QAAQ,EAAGzB,WADZ;AAEC,IAAA,KAAK,EAAG;AACPgC,MAAAA,MAAM,EAAE,MADD;AAEPI,MAAAA,QAAQ,EAAE;AAFH;AAFT,KAOC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAG,IAAIX,KADf;AAEC,IAAA,OAAO,EAAC,QAFT;AAGC,IAAA,KAAK,EAAG;AACPO,MAAAA,MAAM,EAAE,MADD;AAEPI,MAAAA,QAAQ,EAAE,QAFH;AAGPK,MAAAA,OAAO,EAAE,KAAKhB,KAHP;AAIPiB,MAAAA,SAAS,EAAE;AAJJ;AAHT,KAUGrC,KAAK,IACN;AACC,IAAA,KAAK,EAAG;AACPgC,MAAAA,QAAQ,EAAE,KAAKZ,KADR;AAEPjB,MAAAA,UAAU,EAAEC,iBAFL;AAGPqB,MAAAA,KAAK,EAAElB,YAHA;AAIPL,MAAAA,UAAU,EAAEG,iBAJL;AAKPiC,MAAAA,UAAU,EAAE;AALL;AADT,KASGtC,KATH,CAXF,EAuBC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG,IAAIoB,KAAtB;AAA8B,IAAA,OAAO,EAAC;AAAtC,KACC;AACC,IAAA,KAAK,EAAG;AACPjB,MAAAA,UADO;AAEP6B,MAAAA,QAAQ,EAAE,KAAKZ,KAFR;AAGPK,MAAAA,KAAK,EAAEnB;AAHA;AADT,UADD,EAUC;AACC,IAAA,KAAK,EAAG;AACPH,MAAAA,UADO;AAEP6B,MAAAA,QAAQ,EAAE,KAAKZ,KAFR;AAGPK,MAAAA,KAAK,EAAEjB;AAHA;AADT,UAVD,CAvBD,EA2CGa,aAAa,IACd,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACGA,aAAa,CACbK,KADA,CACO,CADP,EACU,CADV,EAEAO,GAFA,CAEK,QAAaM,KAAb;AAAA,QAAE;AAAEd,MAAAA;AAAF,KAAF;AAAA,WACL;AACC,MAAA,GAAG,EAAGc,KADP;AAEC,MAAA,KAAK,EAAG;AACPZ,QAAAA,MAAM,EAAE,KAAKP,KADN;AAEPD,QAAAA,KAAK,EAAE,KAAKC,KAFL;AAGPS,QAAAA,UAAU,EAAEJ,KAHL;AAIPe,QAAAA,QAAQ,EAAE;AAJH;AAFT,MADK;AAAA,GAFL,CADH,CA5CF,CAPD,CA3DD,CAZD,CADD;AAgJA,CAjLD;;eAmLezC,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\thover: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\tstart: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.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\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\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={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map( ( { slug, color } ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t2,\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) ) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 35 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<HStack spacing={ 2 * ratio } justify=\"flex-start\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: linkColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ paletteColors && (\n\t\t\t\t\t\t\t<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 10 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 30 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}