@wordpress/edit-site 3.0.26 → 3.1.0

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,27 @@ 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 {
+    push
+  } = (0, _components.__experimentalUseNavigator)();
+  return (0, _element.createElement)(GenericNavigationButton, (0, _extends2.default)({
+    onClick: () => push(path)
+  }, props));
+}
+
+function NavigationBackButton(_ref3) {
+  let { ...props
+  } = _ref3;
+  const {
+    pop
+  } = (0, _components.__experimentalUseNavigator)();
+  return (0, _element.createElement)(GenericNavigationButton, (0, _extends2.default)({
+    onClick: pop
+  }, 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","push","NavigationBackButton","pop"],"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;;AACD,SAASE,gBAAT,QAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQ,OAAGF;AAAX,GAAqB;AAC/C,QAAM;AAAEG,IAAAA;AAAF,MAAW,6CAAjB;AACA,SACC,4BAAC,uBAAD;AAAyB,IAAA,OAAO,EAAG,MAAMA,IAAI,CAAED,IAAF;AAA7C,KAA6DF,KAA7D,EADD;AAGA;;AAED,SAASI,oBAAT,QAA8C;AAAA,MAAf,EAAE,GAAGJ;AAAL,GAAe;AAC7C,QAAM;AAAEK,IAAAA;AAAF,MAAU,6CAAhB;AACA,SAAO,4BAAC,uBAAD;AAAyB,IAAA,OAAO,EAAGA;AAAnC,KAA8CL,KAA9C,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}\nfunction NavigationButton( { path, ...props } ) {\n\tconst { push } = useNavigator();\n\treturn (\n\t\t<GenericNavigationButton onClick={ () => push( path ) } { ...props } />\n\t);\n}\n\nfunction NavigationBackButton( { ...props } ) {\n\tconst { pop } = useNavigator();\n\treturn <GenericNavigationButton onClick={ pop } { ...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,7 +45,7 @@ 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

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;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"]}

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

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _blockEditor = require("@wordpress/block-editor");
@@ -28,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);
@@ -48,7 +49,6 @@ function ScreenBackgroundColor(_ref) {
     return null;
   }
 
-  const settings = [];
   let backgroundSettings = {};
 
   if (hasBackgroundColor) {
@@ -75,17 +75,14 @@ function ScreenBackgroundColor(_ref) {
     }
   }
 
-  settings.push({ ...backgroundSettings,
-    ...gradientSettings,
-    label: (0, _i18n.__)('Background color')
-  });
+  const controlProps = { ...backgroundSettings,
+    ...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.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
-    title: (0, _i18n.__)('Color'),
-    settings: settings,
+    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,
     gradients: gradientsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
@@ -94,7 +91,7 @@ function ScreenBackgroundColor(_ref) {
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true
-  }));
+  }, controlProps)));
 }
 
 var _default = ScreenBackgroundColor;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["ScreenBackgroundColor","name","parentMenu","undefined","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","settings","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","push","label"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAUA,SAASA,qBAAT,OAA2C;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC1C,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,SAAF,IAAgB,uBAAY,iBAAZ,EAA+BL,IAA/B,CAAtB;AACA,QAAM,CAAEM,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BN,IAA5B,CAAnC;AACA,QAAM,CAAEO,yBAAF,IAAgC,uBACrC,sBADqC,EAErCP,IAFqC,CAAtC;AAKA,QAAMQ,eAAe,GAAG,+BAAoBR,IAApB,CAAxB;AACA,QAAMS,kBAAkB,GAAG,kCAAuBT,IAAvB,CAA3B;AAEA,QAAM,CAAEU,mBAAF,IAA0B,uBAAY,kBAAZ,EAAgCV,IAAhC,CAAhC;AAEA,QAAMW,kBAAkB,GACvBR,QAAQ,CAACS,QAAT,CAAmB,iBAAnB,KACAF,mBADA,KAEEN,MAAM,CAACS,MAAP,GAAgB,CAAhB,IAAqBP,sBAFvB,CADD;AAIA,QAAMQ,gBAAgB,GACrBX,QAAQ,CAACS,QAAT,CAAmB,YAAnB,MACEP,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBN,yBAD1B,CADD;AAGA,QAAM,CAAEQ,eAAF,EAAmBC,kBAAnB,IAA0C,qBAC/C,kBAD+C,EAE/ChB,IAF+C,CAAhD;AAIA,QAAM,CAAEiB,mBAAF,IAA0B,qBAC/B,kBAD+B,EAE/BjB,IAF+B,EAG/B,MAH+B,CAAhC;AAKA,QAAM,CAAEkB,QAAF,EAAYC,WAAZ,IAA4B,qBAAU,gBAAV,EAA4BnB,IAA5B,CAAlC;AACA,QAAM,CAAEoB,YAAF,IAAmB,qBAAU,gBAAV,EAA4BpB,IAA5B,EAAkC,MAAlC,CAAzB;;AAEA,MAAK,CAAEW,kBAAF,IAAwB,CAAEG,gBAA/B,EAAkD;AACjD,WAAO,IAAP;AACA;;AAED,QAAMO,QAAQ,GAAG,EAAjB;AACA,MAAIC,kBAAkB,GAAG,EAAzB;;AACA,MAAKX,kBAAL,EAA0B;AACzBW,IAAAA,kBAAkB,GAAG;AACpBC,MAAAA,UAAU,EAAER,eADQ;AAEpBS,MAAAA,aAAa,EAAER;AAFK,KAArB;;AAIA,QAAKD,eAAL,EAAuB;AACtBO,MAAAA,kBAAkB,CAACG,SAAnB,GACCV,eAAe,KAAKE,mBADrB;AAEA;AACD;;AAED,MAAIS,gBAAgB,GAAG,EAAvB;;AACA,MAAKZ,gBAAL,EAAwB;AACvBY,IAAAA,gBAAgB,GAAG;AAClBC,MAAAA,aAAa,EAAET,QADG;AAElBU,MAAAA,gBAAgB,EAAET;AAFA,KAAnB;;AAIA,QAAKD,QAAL,EAAgB;AACfQ,MAAAA,gBAAgB,CAACD,SAAjB,GAA6BP,QAAQ,KAAKE,YAA1C;AACA;AACD;;AAEDC,EAAAA,QAAQ,CAACQ,IAAT,CAAe,EACd,GAAGP,kBADW;AAEd,OAAGI,gBAFW;AAGdI,IAAAA,KAAK,EAAE,cAAI,kBAAJ;AAHO,GAAf;AAMA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAG7B,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,2DADa;AAHf,IADD,EASC,4BAAC,qDAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,QAAQ,EAAGoB,QAFZ;AAGC,IAAA,MAAM,EAAGb,eAHV;AAIC,IAAA,SAAS,EAAGC,kBAJb;AAKC,IAAA,mBAAmB,EAAG,CAAEH,sBALzB;AAMC,IAAA,sBAAsB,EAAG,CAAEC,yBAN5B;AAOC,IAAA,gCAAgC,MAPjC;AAQC,IAAA,SAAS,EAAG,KARb;AASC,IAAA,WAAW,MATZ;AAUC,IAAA,iCAAiC;AAVlC,IATD,CADD;AAwBA;;eAEcR,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nfunction ScreenBackgroundColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [];\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tsettings.push( {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t\tlabel: __( 'Background color' ),\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole website.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["ScreenBackgroundColor","name","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nfunction ScreenBackgroundColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-background-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t{ ...controlProps }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}

package/build/components/global-styles/screen-block-list.js

@@ -27,7 +27,7 @@ var _typographyPanel = require("./typography-panel");
 
 var _header = _interopRequireDefault(require("./header"));
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ function BlockMenuItem(_ref) {
     return null;
   }
 
-  return (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: '/blocks/' + block.name
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -62,7 +62,6 @@ function BlockMenuItem(_ref) {
 
 function ScreenBlockList() {
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: "/",
     title: (0, _i18n.__)('Blocks'),
     description: (0, _i18n.__)('Customize the appearance of specific blocks and for the whole site.')
   }), (0, _blocks.getBlockTypes)().map(block => (0, _element.createElement)(BlockMenuItem, {

package/build/components/global-styles/screen-block-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["BlockMenuItem","block","hasTypographyPanel","name","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","map"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,aAAT,OAAoC;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AACnC,QAAMC,kBAAkB,GAAG,4CAAuBD,KAAK,CAACE,IAA7B,CAA3B;AACA,QAAMC,aAAa,GAAG,kCAAkBH,KAAK,CAACE,IAAxB,CAAtB;AACA,QAAME,cAAc,GAAG,oCAAmBJ,KAAK,CAACE,IAAzB,CAAvB;AACA,QAAMG,kBAAkB,GAAG,4CAAuBL,KAAK,CAACE,IAA7B,CAA3B;AACA,QAAMI,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBN,kBAAkB,IAAIE,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAG,aAAaP,KAAK,CAACE;AAA5C,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACC,4BAAC,sBAAD;AAAW,IAAA,IAAI,EAAGF,KAAK,CAACQ;AAAxB,IADD,CADD,EAIC,4BAAC,oBAAD,QAAYR,KAAK,CAACS,KAAlB,CAJD,CADD,CADD;AAUA;;AAED,SAASC,eAAT,GAA2B;AAC1B,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,qEADa;AAHf,IADD,EAQG,6BAAgBC,GAAhB,CAAuBX,KAAF,IACtB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACE;AAFjC,IADC,CARH,CADD;AAiBA;;eAEcQ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\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 ScreenHeader from './header';\nimport NavigationButton from './navigation-button';\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ getBlockTypes().map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["BlockMenuItem","block","hasTypographyPanel","name","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","map"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,aAAT,OAAoC;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AACnC,QAAMC,kBAAkB,GAAG,4CAAuBD,KAAK,CAACE,IAA7B,CAA3B;AACA,QAAMC,aAAa,GAAG,kCAAkBH,KAAK,CAACE,IAAxB,CAAtB;AACA,QAAME,cAAc,GAAG,oCAAmBJ,KAAK,CAACE,IAAzB,CAAvB;AACA,QAAMG,kBAAkB,GAAG,4CAAuBL,KAAK,CAACE,IAA7B,CAA3B;AACA,QAAMI,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBN,kBAAkB,IAAIE,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAG,aAAaP,KAAK,CAACE;AAA5C,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACC,4BAAC,sBAAD;AAAW,IAAA,IAAI,EAAGF,KAAK,CAACQ;AAAxB,IADD,CADD,EAIC,4BAAC,oBAAD,QAAYR,KAAK,CAACS,KAAlB,CAJD,CADD,CADD;AAUA;;AAED,SAASC,eAAT,GAA2B;AAC1B,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,qEADa;AAFf,IADD,EAOG,6BAAgBC,GAAhB,CAAuBX,KAAF,IACtB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACE;AAFjC,IADC,CAPH,CADD;AAgBA;;eAEcQ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\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 ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ getBlockTypes().map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

package/build/components/global-styles/screen-block.js

@@ -28,7 +28,6 @@ function ScreenBlock(_ref) {
   } = _ref;
   const blockType = (0, _blocks.getBlockType)(name);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: "/blocks",
     title: blockType.title
   }), (0, _element.createElement)(_contextMenu.default, {
     parentMenu: '/blocks/' + name,

package/build/components/global-styles/screen-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["ScreenBlock","name","blockType","title"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAGC,SAAS,CAACC;AAA/C,IADD,EAEC,4BAAC,oBAAD;AAAa,IAAA,UAAU,EAAG,aAAaF,IAAvC;AAA8C,IAAA,IAAI,EAAGA;AAArD,IAFD,CADD;AAMA;;eAEcD,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader back=\"/blocks\" title={ blockType.title } />\n\t\t\t<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["ScreenBlock","name","blockType","title"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAGC,SAAS,CAACC;AAAhC,IADD,EAEC,4BAAC,oBAAD;AAAa,IAAA,UAAU,EAAG,aAAaF,IAAvC;AAA8C,IAAA,IAAI,EAAGA;AAArD,IAFD,CADD;AAMA;;eAEcD,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ blockType.title } />\n\t\t\t<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}

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

@@ -31,9 +31,7 @@ function ScreenColorPalette(_ref) {
     name
   } = _ref;
   const [currentTab, setCurrentTab] = (0, _element.useState)('solid');
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu + '/colors',
     title: (0, _i18n.__)('Palette'),
     description: (0, _i18n.__)('Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.')
   }), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"names":["ScreenColorPalette","name","currentTab","setCurrentTab","parentMenu","undefined"],"mappings":";;;;;;;;;AAQA;;AALA;;AACA;;AASA;;AACA;;AACA;;AAfA;AACA;AACA;;AAQA;AACA;AACA;AAKA,SAASA,kBAAT,OAAwC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACvC,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,OAAV,CAAtC;AACA,QAAMC,UAAU,GAAGH,IAAI,KAAKI,SAAT,GAAqB,EAArB,GAA0B,aAAaJ,IAA1D;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGG,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,SAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,yIADa;AAHf,IADD,EAQC,4BAAC,4CAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGF,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,KAAK,EAAG,cAAI,qBAAJ,CAJT;AAKC,IAAA,mBAAmB,MALpB;AAMC,IAAA,OAAO;AANR,KAQC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,OADP;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAFT,IARD,EAYC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,UADP;AAEC,IAAA,KAAK,EAAG,cAAI,UAAJ;AAFT,IAZD,CARD,EAyBGD,UAAU,KAAK,OAAf,IAA0B,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAzB7B,EA0BGC,UAAU,KAAK,UAAf,IACD,4BAAC,8BAAD;AAAsB,IAAA,IAAI,EAAGD;AAA7B,IA3BF,CADD;AAgCA;;eAEcD,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\tconst [ currentTab, setCurrentTab ] = useState( 'solid' );\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tclassName=\"edit-site-screen-color-palette-toggle\"\n\t\t\t\tvalue={ currentTab }\n\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\tlabel={ __( 'Select palette type' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"solid\"\n\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }\n\t\t\t{ currentTab === 'gradient' && (\n\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"names":["ScreenColorPalette","name","currentTab","setCurrentTab"],"mappings":";;;;;;;;;AAQA;;AALA;;AACA;;AASA;;AACA;;AACA;;AAfA;AACA;AACA;;AAQA;AACA;AACA;AAKA,SAASA,kBAAT,OAAwC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACvC,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,OAAV,CAAtC;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,yIADa;AAFf,IADD,EAOC,4BAAC,4CAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGD,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,KAAK,EAAG,cAAI,qBAAJ,CAJT;AAKC,IAAA,mBAAmB,MALpB;AAMC,IAAA,OAAO;AANR,KAQC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,OADP;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAFT,IARD,EAYC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,UADP;AAEC,IAAA,KAAK,EAAG,cAAI,UAAJ;AAFT,IAZD,CAPD,EAwBGD,UAAU,KAAK,OAAf,IAA0B,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAxB7B,EAyBGC,UAAU,KAAK,UAAf,IACD,4BAAC,8BAAD;AAAsB,IAAA,IAAI,EAAGD;AAA7B,IA1BF,CADD;AA+BA;;eAEcD,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\tconst [ currentTab, setCurrentTab ] = useState( 'solid' );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tclassName=\"edit-site-screen-color-palette-toggle\"\n\t\t\t\tvalue={ currentTab }\n\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\tlabel={ __( 'Select palette type' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"solid\"\n\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }\n\t\t\t{ currentTab === 'gradient' && (\n\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"]}