@wordpress/edit-site 3.0.22 → 3.1.0

package/build-module/components/global-styles/screen-style-variations.js

@@ -0,0 +1,119 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __experimentalGrid as Grid, Card, CardBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { GlobalStylesContext } from './context';
+import StylesPreview from './preview';
+import ScreenHeader from './header';
+
+function compareVariations(a, b) {
+  return isEqual(a.styles, b.styles) && isEqual(a.settings, b.settings);
+}
+
+function Variation(_ref) {
+  let {
+    variation
+  } = _ref;
+  const {
+    base,
+    user,
+    setUserConfig
+  } = useContext(GlobalStylesContext);
+  const context = useMemo(() => {
+    var _variation$settings, _variation$styles;
+
+    return {
+      user: {
+        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
+        styles: (_variation$styles = variation.styles) !== null && _variation$styles !== void 0 ? _variation$styles : {}
+      },
+      base,
+      merged: mergeBaseAndUserConfigs(base, variation),
+      setUserConfig: () => {}
+    };
+  }, [variation, base]);
+
+  const selectVariation = () => {
+    setUserConfig(() => {
+      return {
+        settings: variation.settings,
+        styles: variation.styles
+      };
+    });
+  };
+
+  const selectOnEnter = event => {
+    if (event.keyCode === ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+
+  const isActive = useMemo(() => {
+    return compareVariations(user, variation);
+  }, [user, variation]);
+  return createElement(GlobalStylesContext.Provider, {
+    value: context
+  }, createElement("div", {
+    className: classnames('edit-site-global-styles-variations_item', {
+      'is-active': isActive
+    }),
+    role: "button",
+    onClick: selectVariation,
+    onKeyDown: selectOnEnter,
+    tabIndex: "0"
+  }, createElement(StylesPreview, {
+    height: 100
+  })));
+}
+
+function ScreenStyleVariations() {
+  const {
+    variations
+  } = useSelect(select => {
+    return {
+      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()
+    };
+  }, []);
+  const withEmptyVariation = useMemo(() => {
+    return [{
+      name: __('Default'),
+      settings: {},
+      styles: {}
+    }, ...variations];
+  }, [variations]);
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    back: "/",
+    title: __('Other styles'),
+    description: __('Choose a different style combination for the theme styles')
+  }), createElement(Card, {
+    size: "small",
+    isBorderless: true
+  }, createElement(CardBody, null, createElement(Grid, {
+    columns: 2
+  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => createElement(Variation, {
+    key: index,
+    variation: variation
+  }))))));
+}
+
+export default ScreenStyleVariations;
+//# sourceMappingURL=screen-style-variations.js.map

package/build-module/components/global-styles/screen-style-variations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useMemo","useContext","ENTER","__experimentalGrid","Grid","Card","CardBody","__","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","ScreenStyleVariations","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","name","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t>\n\t\t\t\t<StylesPreview height={ 100 } />\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Other styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

package/build-module/components/global-styles/screen-text-color.js

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -16,7 +16,6 @@ function ScreenTextColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = getSupportedGlobalStylesPanels(name);
   const [solids] = useSetting('color.palette', name);
   const [areCustomSolidsEnabled] = useSetting('color.custom', name);
@@ -30,25 +29,20 @@ function ScreenTextColor(_ref) {
     return null;
   }
 
-  const settings = [{
-    colorValue: color,
-    onColorChange: setColor,
-    label: __('Text color'),
-    clearable: color === userColor
-  }];
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu + '/colors',
     title: __('Text'),
     description: __('Set the default color used for text across the site.')
-  }), createElement(PanelColorGradientSettings, {
-    title: __('Color'),
-    settings: settings,
+  }), createElement(ColorGradientControl, {
+    className: "edit-site-screen-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: color,
+    onColorChange: setColor,
+    clearable: color === userColor
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["__","__experimentalPanelColorGradientSettings","PanelColorGradientSettings","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenTextColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,wCAAwC,IAAIC,0BAArD,QAAuF,yBAAvF;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAGR,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEI,MAAF,IAAaR,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEK,sBAAF,IAA6BT,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AACA,QAAM,CAAEM,aAAF,IAAoBV,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMO,eAAe,GAAGT,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsBf,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,CAApC;AACA,QAAM,CAAEa,SAAF,IAAgBhB,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,EAAsB,MAAtB,CAA9B;;AAEA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,QAAMM,QAAQ,GAAG,CAChB;AACCC,IAAAA,UAAU,EAAEJ,KADb;AAECK,IAAAA,aAAa,EAAEJ,QAFhB;AAGCK,IAAAA,KAAK,EAAE1B,EAAE,CAAE,YAAF,CAHV;AAIC2B,IAAAA,SAAS,EAAEP,KAAK,KAAKE;AAJtB,GADgB,CAAjB;AASA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAGV,EAAE,CAAE,MAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,sDADe;AAHjB,IADD,EASC,cAAC,0BAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,QAAQ,EAAGuB,QAFZ;AAGC,IAAA,MAAM,EAAGP,eAHV;AAIC,IAAA,mBAAmB,EAAG,CAAEF,sBAJzB;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC;AARlC,IATD,CADD;AAsBA;;AAED,eAAeN,eAAf","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\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [\n\t\t{\n\t\t\tcolorValue: color,\n\t\t\tonColorChange: setColor,\n\t\t\tlabel: __( 'Text color' ),\n\t\t\tclearable: color === userColor,\n\t\t},\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={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\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\tdisableCustomColors={ ! areCustomSolidsEnabled }\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 ScreenTextColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenTextColor","name","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AACA,QAAM,CAAEI,aAAF,IAAoBR,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMK,eAAe,GAAGP,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsBb,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,CAApC;AACA,QAAM,CAAEW,SAAF,IAAgBd,QAAQ,CAAE,YAAF,EAAgBG,IAAhB,EAAsB,MAAtB,CAA9B;;AAEA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,sDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGc,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,KARd;AASC,IAAA,aAAa,EAAGC,QATjB;AAUC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AAVvB,IAPD,CADD;AAsBA;;AAED,eAAeZ,eAAf","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\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\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\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}

package/build-module/components/global-styles/screen-typography-element.js

@@ -26,9 +26,7 @@ function ScreenTypographyElement(_ref) {
     name,
     element
   } = _ref;
-  const parentMenu = name === undefined ? '/typography' : '/blocks/' + name + '/typography';
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu,
     title: elements[element].title,
     description: elements[element].description
   }), createElement(TypographyPanel, {

package/build-module/components/global-styles/screen-typography-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","ScreenTypographyElement","name","element","parentMenu","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ;AALU,CAAjB;;AAWA,SAASQ,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,QAAMC,UAAU,GACfF,IAAI,KAAKG,SAAT,GAAqB,aAArB,GAAqC,aAAaH,IAAb,GAAoB,aAD1D;AAGA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGE,UADR;AAEC,IAAA,KAAK,EAAGR,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAF7B;AAGC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAHnC,IADD,EAMC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IAND,CADD;AAUA;;AAED,eAAeF,uBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '/typography' : '/blocks/' + name + '/typography';\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu }\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ;AALU,CAAjB;;AAWA,SAASQ,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGP,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

package/build-module/components/global-styles/screen-typography.js

@@ -10,7 +10,7 @@ import { __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, _
  */
 
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -63,7 +63,6 @@ function ScreenTypography(_ref2) {
   } = _ref2;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu ? parentMenu : '/',
     title: __('Typography'),
     description: __('Manage the typography settings for different elements.')
   }), !name && createElement("div", {

package/build-module/components/global-styles/screen-typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","ScreenHeader","NavigationButton","useStyle","Subtitle","TypographyPanel","Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport NavigationButton from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenTypography( { 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={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ /* no typogrpahy elements support yet for blocks */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","ScreenHeader","NavigationButton","useStyle","Subtitle","TypographyPanel","Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenTypography( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ /* no typography elements support yet for blocks */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}

package/build-module/components/global-styles/ui.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
@@ -20,47 +21,58 @@ import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
+import ScreenStyleVariations from './screen-style-variations';
 
-function ContextScreens(_ref) {
+function GlobalStylesNavigationScreen(_ref) {
   let {
-    name
+    className,
+    ...props
   } = _ref;
+  return createElement(NavigatorScreen, _extends({
+    className: ['edit-site-global-styles-sidebar__navigator-screen', className].filter(Boolean).join(' ')
+  }, props));
+}
+
+function ContextScreens(_ref2) {
+  let {
+    name
+  } = _ref2;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
-  return createElement(Fragment, null, createElement(NavigatorScreen, {
+  return createElement(Fragment, null, createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography'
   }, createElement(ScreenTypography, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/text'
   }, createElement(ScreenTypographyElement, {
     name: name,
     element: "text"
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/link'
   }, createElement(ScreenTypographyElement, {
     name: name,
     element: "link"
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, createElement(ScreenColors, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/palette'
   }, createElement(ScreenColorPalette, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/background'
   }, createElement(ScreenBackgroundColor, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/text'
   }, createElement(ScreenTextColor, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/link'
   }, createElement(ScreenLinkColor, {
     name: name
-  })), createElement(NavigatorScreen, {
+  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, createElement(ScreenLayout, {
     name: name
@@ -70,12 +82,15 @@ function ContextScreens(_ref) {
 function GlobalStylesUI() {
   const blocks = getBlockTypes();
   return createElement(NavigatorProvider, {
+    className: "edit-site-global-styles-sidebar__navigator-provider",
     initialPath: "/"
-  }, createElement(NavigatorScreen, {
+  }, createElement(GlobalStylesNavigationScreen, {
     path: "/"
-  }, createElement(ScreenRoot, null)), createElement(NavigatorScreen, {
+  }, createElement(ScreenRoot, null)), createElement(GlobalStylesNavigationScreen, {
+    path: "/variations"
+  }, createElement(ScreenStyleVariations, null)), createElement(GlobalStylesNavigationScreen, {
     path: "/blocks"
-  }, createElement(ScreenBlockList, null)), blocks.map(block => createElement(NavigatorScreen, {
+  }, createElement(ScreenBlockList, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
     key: 'menu-block-' + block.name,
     path: '/blocks/' + block.name
   }, createElement(ScreenBlock, {

package/build-module/components/global-styles/ui.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenLayout","ContextScreens","name","parentMenu","undefined","GlobalStylesUI","blocks","map","block"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\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 + '/typography/text' }>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/typography/link' }>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\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 + '/colors/background' }>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</NavigatorScreen>\n\n\t\t\t<NavigatorScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor 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 GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\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{ blocks.map( ( block ) => (\n\t\t\t\t<NavigatorScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + block.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</NavigatorScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenLayout","ScreenStyleVariations","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","ContextScreens","name","parentMenu","undefined","GlobalStylesUI","blocks","map","block"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ContextScreens( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/text' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/link' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + block.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}

package/build-module/components/header/index.js

@@ -10,7 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -44,14 +44,16 @@ export default function Header(_ref) {
     isInserterOpen,
     isListViewOpen,
     listViewShortcut,
-    isLoaded
+    isLoaded,
+    isVisualMode
   } = useSelect(select => {
     const {
       __experimentalGetPreviewDeviceType,
       getEditedPostType,
       getEditedPostId,
       isInserterOpened,
-      isListViewOpened
+      isListViewOpened,
+      getEditorMode
     } = select(editSiteStore);
     const {
       getEditedEntityRecord
@@ -76,7 +78,8 @@ export default function Header(_ref) {
       templateType: postType,
       isInserterOpen: isInserterOpened(),
       isListViewOpen: isListViewOpened(),
-      listViewShortcut: getShortcutRepresentation('core/edit-site/toggle-list-view')
+      listViewShortcut: getShortcutRepresentation('core/edit-site/toggle-list-view'),
+      isVisualMode: getEditorMode() === 'visual'
     };
   }, []);
   const {
@@ -106,12 +109,17 @@ export default function Header(_ref) {
     variant: "primary",
     isPressed: isInserterOpen,
     className: "edit-site-header-toolbar__inserter-toggle",
+    disabled: !isVisualMode,
     onMouseDown: preventDefault,
     onClick: openInserter,
     icon: plus,
     label: _x('Toggle block inserter', 'Generic label for block inserter button')
-  }), isLargeViewport && createElement(Fragment, null, createElement(ToolSelector, null), createElement(UndoButton, null), createElement(RedoButton, null), createElement(Button, {
+  }), isLargeViewport && createElement(Fragment, null, createElement(ToolbarItem, {
+    as: ToolSelector,
+    disabled: !isVisualMode
+  }), createElement(UndoButton, null), createElement(RedoButton, null), createElement(Button, {
     className: "edit-site-header-toolbar__list-view-toggle",
+    disabled: !isVisualMode,
     icon: listView,
     isPressed: isListViewOpen
     /* translators: button label text should, if possible, be under 16 characters. */

package/build-module/components/header/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/index.js"],"names":["useCallback","useRef","useViewportMatch","ToolSelector","__experimentalPreviewOptions","PreviewOptions","useSelect","useDispatch","PinnedItems","_x","__","listView","plus","Button","store","keyboardShortcutsStore","editorStore","coreStore","MoreMenu","SaveButton","UndoButton","RedoButton","DocumentActions","TemplateDetails","editSiteStore","preventDefault","event","Header","openEntitiesSavedStates","isEntitiesSavedStatesOpen","inserterButton","deviceType","entityTitle","template","templateType","isInserterOpen","isListViewOpen","listViewShortcut","isLoaded","select","__experimentalGetPreviewDeviceType","getEditedPostType","getEditedPostId","isInserterOpened","isListViewOpened","getEditedEntityRecord","__experimentalGetTemplateInfo","getTemplateInfo","getShortcutRepresentation","postType","postId","record","_isLoaded","title","__experimentalSetPreviewDeviceType","setPreviewDeviceType","setIsInserterOpened","setIsListViewOpened","isLargeViewport","openInserter","current","focus","toggleListView","isFocusMode","onClose"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tToolSelector,\n\t__experimentalPreviewOptions as PreviewOptions,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { PinnedItems } from '@wordpress/interface';\nimport { _x, __ } from '@wordpress/i18n';\nimport { listView, plus } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MoreMenu from './more-menu';\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport DocumentActions from './document-actions';\nimport TemplateDetails from '../template-details';\nimport { store as editSiteStore } from '../../store';\n\nconst preventDefault = ( event ) => {\n\tevent.preventDefault();\n};\n\nexport default function Header( {\n\topenEntitiesSavedStates,\n\tisEntitiesSavedStatesOpen,\n} ) {\n\tconst inserterButton = useRef();\n\tconst {\n\t\tdeviceType,\n\t\tentityTitle,\n\t\ttemplate,\n\t\ttemplateType,\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tlistViewShortcut,\n\t\tisLoaded,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t} = select( editSiteStore );\n\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } = select(\n\t\t\teditorStore\n\t\t);\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEditedEntityRecord( 'postType', postType, postId );\n\t\tconst _isLoaded = !! postId;\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tentityTitle: getTemplateInfo( record ).title,\n\t\t\tisLoaded: _isLoaded,\n\t\t\ttemplate: record,\n\t\t\ttemplateType: postType,\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tlistViewShortcut: getShortcutRepresentation(\n\t\t\t\t'core/edit-site/toggle-list-view'\n\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\t__experimentalSetPreviewDeviceType: setPreviewDeviceType,\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t} = useDispatch( editSiteStore );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst openInserter = useCallback( () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover\n\t\t\tinserterButton.current.focus();\n\t\t} else {\n\t\t\tsetIsInserterOpened( true );\n\t\t}\n\t}, [ isInserterOpen, setIsInserterOpened ] );\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst isFocusMode = templateType === 'wp_template_part';\n\n\treturn (\n\t\t<div className=\"edit-site-header\">\n\t\t\t<div className=\"edit-site-header_start\">\n\t\t\t\t<div className=\"edit-site-header__toolbar\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tonMouseDown={ preventDefault }\n\t\t\t\t\t\tonClick={ openInserter }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isLargeViewport && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolSelector />\n\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\tshortcut={ listViewShortcut }\n\t\t\t\t\t\t\t/>\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\n\t\t\t<div className=\"edit-site-header_center\">\n\t\t\t\t<DocumentActions\n\t\t\t\t\tentityTitle={ entityTitle }\n\t\t\t\t\tentityLabel={\n\t\t\t\t\t\ttemplateType === 'wp_template_part'\n\t\t\t\t\t\t\t? 'template part'\n\t\t\t\t\t\t\t: 'template'\n\t\t\t\t\t}\n\t\t\t\t\tisLoaded={ isLoaded }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DocumentActions>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_end\">\n\t\t\t\t<div className=\"edit-site-header__actions\">\n\t\t\t\t\t{ ! isFocusMode && (\n\t\t\t\t\t\t<PreviewOptions\n\t\t\t\t\t\t\tdeviceType={ deviceType }\n\t\t\t\t\t\t\tsetDeviceType={ setPreviewDeviceType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<SaveButton\n\t\t\t\t\t\topenEntitiesSavedStates={ openEntitiesSavedStates }\n\t\t\t\t\t\tisEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }\n\t\t\t\t\t/>\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header/index.js"],"names":["useCallback","useRef","useViewportMatch","ToolSelector","__experimentalPreviewOptions","PreviewOptions","useSelect","useDispatch","PinnedItems","_x","__","listView","plus","Button","ToolbarItem","store","keyboardShortcutsStore","editorStore","coreStore","MoreMenu","SaveButton","UndoButton","RedoButton","DocumentActions","TemplateDetails","editSiteStore","preventDefault","event","Header","openEntitiesSavedStates","isEntitiesSavedStatesOpen","inserterButton","deviceType","entityTitle","template","templateType","isInserterOpen","isListViewOpen","listViewShortcut","isLoaded","isVisualMode","select","__experimentalGetPreviewDeviceType","getEditedPostType","getEditedPostId","isInserterOpened","isListViewOpened","getEditorMode","getEditedEntityRecord","__experimentalGetTemplateInfo","getTemplateInfo","getShortcutRepresentation","postType","postId","record","_isLoaded","title","__experimentalSetPreviewDeviceType","setPreviewDeviceType","setIsInserterOpened","setIsListViewOpened","isLargeViewport","openInserter","current","focus","toggleListView","isFocusMode","onClose"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tToolSelector,\n\t__experimentalPreviewOptions as PreviewOptions,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { PinnedItems } from '@wordpress/interface';\nimport { _x, __ } from '@wordpress/i18n';\nimport { listView, plus } from '@wordpress/icons';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MoreMenu from './more-menu';\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport DocumentActions from './document-actions';\nimport TemplateDetails from '../template-details';\nimport { store as editSiteStore } from '../../store';\n\nconst preventDefault = ( event ) => {\n\tevent.preventDefault();\n};\n\nexport default function Header( {\n\topenEntitiesSavedStates,\n\tisEntitiesSavedStatesOpen,\n} ) {\n\tconst inserterButton = useRef();\n\tconst {\n\t\tdeviceType,\n\t\tentityTitle,\n\t\ttemplate,\n\t\ttemplateType,\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tlistViewShortcut,\n\t\tisLoaded,\n\t\tisVisualMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t\tgetEditorMode,\n\t\t} = select( editSiteStore );\n\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } = select(\n\t\t\teditorStore\n\t\t);\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEditedEntityRecord( 'postType', postType, postId );\n\t\tconst _isLoaded = !! postId;\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tentityTitle: getTemplateInfo( record ).title,\n\t\t\tisLoaded: _isLoaded,\n\t\t\ttemplate: record,\n\t\t\ttemplateType: postType,\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tlistViewShortcut: getShortcutRepresentation(\n\t\t\t\t'core/edit-site/toggle-list-view'\n\t\t\t),\n\t\t\tisVisualMode: getEditorMode() === 'visual',\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\t__experimentalSetPreviewDeviceType: setPreviewDeviceType,\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t} = useDispatch( editSiteStore );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst openInserter = useCallback( () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover\n\t\t\tinserterButton.current.focus();\n\t\t} else {\n\t\t\tsetIsInserterOpened( true );\n\t\t}\n\t}, [ isInserterOpen, setIsInserterOpened ] );\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst isFocusMode = templateType === 'wp_template_part';\n\n\treturn (\n\t\t<div className=\"edit-site-header\">\n\t\t\t<div className=\"edit-site-header_start\">\n\t\t\t\t<div className=\"edit-site-header__toolbar\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\tonMouseDown={ preventDefault }\n\t\t\t\t\t\tonClick={ openInserter }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isLargeViewport && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\tas={ ToolSelector }\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\tshortcut={ listViewShortcut }\n\t\t\t\t\t\t\t/>\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\n\t\t\t<div className=\"edit-site-header_center\">\n\t\t\t\t<DocumentActions\n\t\t\t\t\tentityTitle={ entityTitle }\n\t\t\t\t\tentityLabel={\n\t\t\t\t\t\ttemplateType === 'wp_template_part'\n\t\t\t\t\t\t\t? 'template part'\n\t\t\t\t\t\t\t: 'template'\n\t\t\t\t\t}\n\t\t\t\t\tisLoaded={ isLoaded }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DocumentActions>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_end\">\n\t\t\t\t<div className=\"edit-site-header__actions\">\n\t\t\t\t\t{ ! isFocusMode && (\n\t\t\t\t\t\t<PreviewOptions\n\t\t\t\t\t\t\tdeviceType={ deviceType }\n\t\t\t\t\t\t\tsetDeviceType={ setPreviewDeviceType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<SaveButton\n\t\t\t\t\t\topenEntitiesSavedStates={ openEntitiesSavedStates }\n\t\t\t\t\t\tisEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }\n\t\t\t\t\t/>\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/header/mode-switcher/index.js

@@ -0,0 +1,65 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+import { store as editSiteStore } from '../../../store';
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+
+const MODES = [{
+  value: 'visual',
+  label: __('Visual editor')
+}, {
+  value: 'text',
+  label: __('Code editor')
+}];
+
+function ModeSwitcher() {
+  const {
+    shortcut,
+    mode
+  } = useSelect(select => ({
+    shortcut: select(keyboardShortcutsStore).getShortcutRepresentation('core/edit-site/toggle-mode'),
+    isRichEditingEnabled: select(editSiteStore).getSettings().richEditingEnabled,
+    isCodeEditingEnabled: select(editSiteStore).getSettings().codeEditingEnabled,
+    mode: select(editSiteStore).getEditorMode()
+  }), []);
+  const {
+    switchEditorMode
+  } = useDispatch(editSiteStore);
+  const choices = MODES.map(choice => {
+    if (choice.value !== mode) {
+      return { ...choice,
+        shortcut
+      };
+    }
+
+    return choice;
+  });
+  return createElement(MenuGroup, {
+    label: __('Editor')
+  }, createElement(MenuItemsChoice, {
+    choices: choices,
+    value: mode,
+    onSelect: switchEditorMode
+  }));
+}
+
+export default ModeSwitcher;
+//# sourceMappingURL=index.js.map

package/build-module/components/header/mode-switcher/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/header/mode-switcher/index.js"],"names":["__","MenuItemsChoice","MenuGroup","useSelect","useDispatch","store","keyboardShortcutsStore","editSiteStore","MODES","value","label","ModeSwitcher","shortcut","mode","select","getShortcutRepresentation","isRichEditingEnabled","getSettings","richEditingEnabled","isCodeEditingEnabled","codeEditingEnabled","getEditorMode","switchEditorMode","choices","map","choice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,uBAA3C;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,KAAK,IAAIC,sBAAlB,QAAgD,+BAAhD;AAEA;AACA;AACA;;AACA;AACA;AACA;;AACA,SAASD,KAAK,IAAIE,aAAlB,QAAuC,gBAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,KAAK,GAAG,CACb;AACCC,EAAAA,KAAK,EAAE,QADR;AAECC,EAAAA,KAAK,EAAEV,EAAE,CAAE,eAAF;AAFV,CADa,EAKb;AACCS,EAAAA,KAAK,EAAE,MADR;AAECC,EAAAA,KAAK,EAAEV,EAAE,CAAE,aAAF;AAFV,CALa,CAAd;;AAWA,SAASW,YAAT,GAAwB;AACvB,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAqBV,SAAS,CACjCW,MAAF,KAAgB;AACfF,IAAAA,QAAQ,EAAEE,MAAM,CACfR,sBADe,CAAN,CAERS,yBAFQ,CAEmB,4BAFnB,CADK;AAIfC,IAAAA,oBAAoB,EAAEF,MAAM,CAAEP,aAAF,CAAN,CAAwBU,WAAxB,GACpBC,kBALa;AAMfC,IAAAA,oBAAoB,EAAEL,MAAM,CAAEP,aAAF,CAAN,CAAwBU,WAAxB,GACpBG,kBAPa;AAQfP,IAAAA,IAAI,EAAEC,MAAM,CAAEP,aAAF,CAAN,CAAwBc,aAAxB;AARS,GAAhB,CADmC,EAWnC,EAXmC,CAApC;AAaA,QAAM;AAAEC,IAAAA;AAAF,MAAuBlB,WAAW,CAAEG,aAAF,CAAxC;AAEA,QAAMgB,OAAO,GAAGf,KAAK,CAACgB,GAAN,CAAaC,MAAF,IAAc;AACxC,QAAKA,MAAM,CAAChB,KAAP,KAAiBI,IAAtB,EAA6B;AAC5B,aAAO,EAAE,GAAGY,MAAL;AAAab,QAAAA;AAAb,OAAP;AACA;;AACD,WAAOa,MAAP;AACA,GALe,CAAhB;AAOA,SACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGzB,EAAE,CAAE,QAAF;AAArB,KACC,cAAC,eAAD;AACC,IAAA,OAAO,EAAGuB,OADX;AAEC,IAAA,KAAK,EAAGV,IAFT;AAGC,IAAA,QAAQ,EAAGS;AAHZ,IADD,CADD;AASA;;AAED,eAAeX,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuItemsChoice, MenuGroup } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\n/**\n * Set of available mode options.\n *\n * @type {Array}\n */\nconst MODES = [\n\t{\n\t\tvalue: 'visual',\n\t\tlabel: __( 'Visual editor' ),\n\t},\n\t{\n\t\tvalue: 'text',\n\t\tlabel: __( 'Code editor' ),\n\t},\n];\n\nfunction ModeSwitcher() {\n\tconst { shortcut, mode } = useSelect(\n\t\t( select ) => ( {\n\t\t\tshortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),\n\t\t\tisRichEditingEnabled: select( editSiteStore ).getSettings()\n\t\t\t\t.richEditingEnabled,\n\t\t\tisCodeEditingEnabled: select( editSiteStore ).getSettings()\n\t\t\t\t.codeEditingEnabled,\n\t\t\tmode: select( editSiteStore ).getEditorMode(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { switchEditorMode } = useDispatch( editSiteStore );\n\n\tconst choices = MODES.map( ( choice ) => {\n\t\tif ( choice.value !== mode ) {\n\t\t\treturn { ...choice, shortcut };\n\t\t}\n\t\treturn choice;\n\t} );\n\n\treturn (\n\t\t<MenuGroup label={ __( 'Editor' ) }>\n\t\t\t<MenuItemsChoice\n\t\t\t\tchoices={ choices }\n\t\t\t\tvalue={ mode }\n\t\t\t\tonSelect={ switchEditorMode }\n\t\t\t/>\n\t\t</MenuGroup>\n\t);\n}\n\nexport default ModeSwitcher;\n"]}