@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+"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 _blocks = require("@wordpress/blocks");
+
+var _i18n = require("@wordpress/i18n");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _borderPanel = require("./border-panel");
+
+var _colorPanel = require("./color-panel");
+
+var _dimensionsPanel = require("./dimensions-panel");
+
+var _typographyPanel = require("./typography-panel");
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function BlockMenuItem({
+  block
+}) {
+  const {
+    blocks
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const context = blocks[block.name];
+  const hasTypographyPanel = (0, _typographyPanel.useHasTypographyPanel)(context);
+  const hasColorPanel = (0, _colorPanel.useHasColorPanel)(context);
+  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(context);
+  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(context);
+  const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+  const hasBlockMenuItem = hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+
+  if (!hasBlockMenuItem) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_navigationButton.default, {
+    path: '/blocks/' + block.name
+  }, block.title);
+}
+
+function ScreenBlockList() {
+  const {
+    blocks
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const visibleBlocks = Object.keys(blocks).map(name => (0, _blocks.getBlockType)(name)).filter(blockType => !!blockType);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    back: "/",
+    title: (0, _i18n.__)('Blocks')
+  }), visibleBlocks.map(block => (0, _element.createElement)(BlockMenuItem, {
+    block: block,
+    key: 'menu-itemblock-' + block.name
+  })));
+}
+
+var _default = ScreenBlockList;
+exports.default = _default;
+//# sourceMappingURL=screen-block-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["BlockMenuItem","block","blocks","context","name","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","title","ScreenBlockList","visibleBlocks","Object","keys","map","filter","blockType"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,aAAT,CAAwB;AAAEC,EAAAA;AAAF,CAAxB,EAAoC;AACnC,QAAM;AAAEC,IAAAA;AAAF,MAAa,mDAAnB;AACA,QAAMC,OAAO,GAAGD,MAAM,CAAED,KAAK,CAACG,IAAR,CAAtB;AACA,QAAMC,kBAAkB,GAAG,4CAAuBF,OAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,OAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,OAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,OAAvB,CAA3B;AACA,QAAMM,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBL,kBAAkB,IAAIC,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAG,aAAaT,KAAK,CAACG;AAA5C,KACGH,KAAK,CAACU,KADT,CADD;AAKA;;AAED,SAASC,eAAT,GAA2B;AAC1B,QAAM;AAAEV,IAAAA;AAAF,MAAa,mDAAnB;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAab,MAAb,EACpBc,GADoB,CACbZ,IAAF,IAAY,0BAAcA,IAAd,CADG,EAEpBa,MAFoB,CAEVC,SAAF,IAAiB,CAAC,CAAEA,SAFR,CAAtB;AAIA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,IAAI,EAAC,GAAnB;AAAuB,IAAA,KAAK,EAAG,cAAI,QAAJ;AAA/B,IADD,EAEGL,aAAa,CAACG,GAAd,CAAqBf,KAAF,IACpB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACG;AAFjC,IADC,CAFH,CADD;AAWA;;eAEcQ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStylesContext } from '../editor/global-styles-provider';\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-panel';\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 { blocks } = useGlobalStylesContext();\n\tconst context = blocks[ block.name ];\n\tconst hasTypographyPanel = useHasTypographyPanel( context );\n\tconst hasColorPanel = useHasColorPanel( context );\n\tconst hasBorderPanel = useHasBorderPanel( context );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( context );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\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{ block.title }\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst { blocks } = useGlobalStylesContext();\n\tconst visibleBlocks = Object.keys( blocks )\n\t\t.map( ( name ) => getBlockType( name ) )\n\t\t.filter( ( blockType ) => !! blockType );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader back=\"/\" title={ __( 'Blocks' ) } />\n\t\t\t{ visibleBlocks.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

@@ -0,0 +1,45 @@
+"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 _blocks = require("@wordpress/blocks");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _contextMenu = _interopRequireDefault(require("./context-menu"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenBlock({
+  name
+}) {
+  const blockType = (0, _blocks.getBlockType)(name);
+  const {
+    blocks
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  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,
+    context: blocks[name]
+  }));
+}
+
+var _default = ScreenBlock;
+exports.default = _default;
+//# sourceMappingURL=screen-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["ScreenBlock","name","blockType","blocks","title"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,CAAsB;AAAEC,EAAAA;AAAF,CAAtB,EAAiC;AAChC,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAa,mDAAnB;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAGD,SAAS,CAACE;AAA/C,IADD,EAEC,4BAAC,oBAAD;AACC,IAAA,UAAU,EAAG,aAAaH,IAD3B;AAEC,IAAA,OAAO,EAAGE,MAAM,CAAEF,IAAF;AAFjB,IAFD,CADD;AASA;;eAEcD,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStylesContext } from '../editor/global-styles-provider';\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\tconst { blocks } = useGlobalStylesContext();\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader back=\"/blocks\" title={ blockType.title } />\n\t\t\t<ContextMenu\n\t\t\t\tparentMenu={ '/blocks/' + name }\n\t\t\t\tcontext={ blocks[ name ] }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}

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

@@ -0,0 +1,48 @@
+"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 _i18n = require("@wordpress/i18n");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _colorPalettePanel = _interopRequireDefault(require("./color-palette-panel"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenColorPalette({
+  name
+}) {
+  const {
+    getSetting,
+    setSetting
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    back: parentMenu + '/colors',
+    title: (0, _i18n.__)('Color Palette'),
+    description: (0, _i18n.__)('Edit the color palette.')
+  }), (0, _element.createElement)(_colorPalettePanel.default, {
+    contextName: name,
+    getSetting: getSetting,
+    setSetting: setSetting
+  }));
+}
+
+var _default = ScreenColorPalette;
+exports.default = _default;
+//# sourceMappingURL=screen-color-palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"names":["ScreenColorPalette","name","getSetting","setSetting","parentMenu","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,kBAAT,CAA6B;AAAEC,EAAAA;AAAF,CAA7B,EAAwC;AACvC,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,mDAAnC;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,eAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cAAI,yBAAJ;AAHf,IADD,EAMC,4BAAC,0BAAD;AACC,IAAA,WAAW,EAAGH,IADf;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,UAAU,EAAGC;AAHd,IAND,CADD;AAcA;;eAEcH,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStylesContext } from '../editor/global-styles-provider';\nimport ColorPalettePanel from './color-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\tconst { getSetting, setSetting } = useGlobalStylesContext();\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={ __( 'Color Palette' ) }\n\t\t\t\tdescription={ __( 'Edit the color palette.' ) }\n\t\t\t/>\n\t\t\t<ColorPalettePanel\n\t\t\t\tcontextName={ name }\n\t\t\t\tgetSetting={ getSetting }\n\t\t\t\tsetSetting={ setSetting }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"]}

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

@@ -0,0 +1,51 @@
+"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 _i18n = require("@wordpress/i18n");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _colorPanel = _interopRequireDefault(require("./color-panel"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenColors({
+  name
+}) {
+  const {
+    root,
+    blocks,
+    getStyle,
+    setStyle
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const context = name === undefined ? root : blocks[name];
+  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    back: parentMenu ? parentMenu : '/',
+    title: (0, _i18n.__)('Colors'),
+    description: (0, _i18n.__)('Manage color palettes and how they affect the different elements of the site.')
+  }), (0, _element.createElement)(_colorPanel.default, {
+    context: context,
+    getStyle: getStyle,
+    setStyle: setStyle
+  }));
+}
+
+var _default = ScreenColors;
+exports.default = _default;
+//# sourceMappingURL=screen-colors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["ScreenColors","name","root","blocks","getStyle","setStyle","context","undefined","parentMenu"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,YAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAkC;AACjC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,MAAR;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,MAAuC,mDAA7C;AACA,QAAMC,OAAO,GAAGL,IAAI,KAAKM,SAAT,GAAqBL,IAArB,GAA4BC,MAAM,CAAEF,IAAF,CAAlD;AACA,QAAMO,UAAU,GAAGP,IAAI,KAAKM,SAAT,GAAqB,EAArB,GAA0B,aAAaN,IAA1D;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGO,UAAU,GAAGA,UAAH,GAAgB,GADlC;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,+EADa;AAHf,IADD,EAQC,4BAAC,mBAAD;AACC,IAAA,OAAO,EAAGF,OADX;AAEC,IAAA,QAAQ,EAAGF,QAFZ;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IARD,CADD;AAgBA;;eAEcL,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStylesContext } from '../editor/global-styles-provider';\nimport ColorPanel from './color-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColors( { name } ) {\n\tconst { root, blocks, getStyle, setStyle } = useGlobalStylesContext();\n\tconst context = name === undefined ? root : blocks[ name ];\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu ? parentMenu : '/' }\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage color palettes and how they affect the different elements of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorPanel\n\t\t\t\tcontext={ context }\n\t\t\t\tgetStyle={ getStyle }\n\t\t\t\tsetStyle={ setStyle }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _globalStylesProvider = require("../editor/global-styles-provider");
+
+var _borderPanel = _interopRequireWildcard(require("./border-panel"));
+
+var _dimensionsPanel = _interopRequireWildcard(require("./dimensions-panel"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenLayout({
+  name
+}) {
+  const {
+    root,
+    blocks,
+    getStyle,
+    setStyle
+  } = (0, _globalStylesProvider.useGlobalStylesContext)();
+  const context = name === undefined ? root : blocks[name];
+  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(context);
+  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(context);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    back: parentMenu ? parentMenu : '/',
+    title: (0, _i18n.__)('Layout')
+  }), hasDimensionsPanel && (0, _element.createElement)(_dimensionsPanel.default, {
+    context: context,
+    getStyle: getStyle,
+    setStyle: setStyle
+  }), hasBorderPanel && (0, _element.createElement)(_borderPanel.default, {
+    context: context,
+    getStyle: getStyle,
+    setStyle: setStyle
+  }));
+}
+
+var _default = ScreenLayout;
+exports.default = _default;
+//# sourceMappingURL=screen-layout.js.map