@wordpress/edit-site 5.6.0 → 5.8.0

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

@@ -11,7 +11,7 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
-var _duotonePanel = _interopRequireDefault(require("./duotone-panel"));
+var _filtersPanel = _interopRequireDefault(require("./filters-panel"));
 
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 
@@ -36,7 +36,7 @@ function ScreenFilters(_ref) {
     title: (0, _i18n.__)('Filters')
   }), (0, _element.createElement)(_blockPreviewPanel.default, {
     name: name
-  }), (0, _element.createElement)(_duotonePanel.default, {
+  }), (0, _element.createElement)(_filtersPanel.default, {
     name: name
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["ScreenFilters","name"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,SAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGA;AAA1B,IAFD,EAGC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;eAEcD,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DuotonePanel from './duotone-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\n\nfunction ScreenFilters( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Filters' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<DuotonePanel name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenFilters;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["ScreenFilters","name"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,SAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGA;AAA1B,IAFD,EAGC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;eAEcD,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport FiltersPanel from './filters-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\n\nfunction ScreenFilters( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Filters' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<FiltersPanel name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenFilters;\n"]}

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

@@ -9,33 +9,17 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
-
-var _coreData = require("@wordpress/core-data");
-
-var _data = require("@wordpress/data");
-
-var _keycodes = require("@wordpress/keycodes");
-
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
 var _blockEditor = require("@wordpress/block-editor");
 
-var _globalStylesProvider = require("./global-styles-provider");
-
-var _preview = _interopRequireDefault(require("./preview"));
+var _data = require("@wordpress/data");
 
 var _header = _interopRequireDefault(require("./header"));
 
-var _privateApis = require("../../private-apis");
-
-/**
- * External dependencies
- */
+var _styleVariationsContainer = _interopRequireDefault(require("./style-variations-container"));
 
 /**
  * WordPress dependencies
@@ -44,107 +28,14 @@ var _privateApis = require("../../private-apis");
 /**
  * Internal dependencies
  */
-const {
-  GlobalStylesContext
-} = (0, _privateApis.unlock)(_blockEditor.privateApis);
-
-function compareVariations(a, b) {
-  return (0, _es.default)(a.styles, b.styles) && (0, _es.default)(a.settings, b.settings);
-}
-
-function Variation(_ref) {
-  let {
-    variation
-  } = _ref;
-  const [isFocused, setIsFocused] = (0, _element.useState)(false);
-  const {
-    base,
-    user,
-    setUserConfig
-  } = (0, _element.useContext)(GlobalStylesContext);
-  const context = (0, _element.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: (0, _globalStylesProvider.mergeBaseAndUserConfigs)(base, variation),
-      setUserConfig: () => {}
-    };
-  }, [variation, base]);
-
-  const selectVariation = () => {
-    setUserConfig(() => {
-      return {
-        settings: variation.settings,
-        styles: variation.styles
-      };
-    });
-  };
-
-  const selectOnEnter = event => {
-    if (event.keyCode === _keycodes.ENTER) {
-      event.preventDefault();
-      selectVariation();
-    }
-  };
-
-  const isActive = (0, _element.useMemo)(() => {
-    return compareVariations(user, variation);
-  }, [user, variation]);
-  return (0, _element.createElement)(GlobalStylesContext.Provider, {
-    value: context
-  }, (0, _element.createElement)("div", {
-    className: (0, _classnames.default)('edit-site-global-styles-variations_item', {
-      'is-active': isActive
-    }),
-    role: "button",
-    onClick: selectVariation,
-    onKeyDown: selectOnEnter,
-    tabIndex: "0",
-    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
-    "aria-current": isActive,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false)
-  }, (0, _element.createElement)("div", {
-    className: "edit-site-global-styles-variations_item-preview"
-  }, (0, _element.createElement)(_preview.default, {
-    label: variation === null || variation === void 0 ? void 0 : variation.title,
-    isFocused: isFocused,
-    withHoverView: true
-  }))));
-}
-
 function ScreenStyleVariations() {
   const {
-    variations,
     mode
   } = (0, _data.useSelect)(select => {
     return {
-      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations(),
       mode: select(_blockEditor.store).__unstableGetEditorMode()
     };
   }, []);
-  const withEmptyVariation = (0, _element.useMemo)(() => {
-    return [{
-      title: (0, _i18n.__)('Default'),
-      settings: {},
-      styles: {}
-    }, ...variations.map(variation => {
-      var _variation$settings2, _variation$styles2;
-
-      return { ...variation,
-        settings: (_variation$settings2 = variation.settings) !== null && _variation$settings2 !== void 0 ? _variation$settings2 : {},
-        styles: (_variation$styles2 = variation.styles) !== null && _variation$styles2 !== void 0 ? _variation$styles2 : {}
-      };
-    })];
-  }, [variations]);
-  const {
-    __unstableSetEditorMode
-  } = (0, _data.useDispatch)(_blockEditor.store);
   const shouldRevertInitialMode = (0, _element.useRef)(null);
   (0, _element.useEffect)(() => {
     // ignore changes to zoom-out mode as we explictily change to it on mount.
@@ -166,8 +57,12 @@ function ScreenStyleVariations() {
           __unstableSetEditorMode(mode);
         }
       };
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
+  const {
+    __unstableSetEditorMode
+  } = (0, _data.useDispatch)(_blockEditor.store);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: "/",
     title: (0, _i18n.__)('Browse styles'),
@@ -176,12 +71,7 @@ function ScreenStyleVariations() {
     size: "small",
     isBorderless: true,
     className: "edit-site-global-styles-screen-style-variations"
-  }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalGrid, {
-    columns: 2
-  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => (0, _element.createElement)(Variation, {
-    key: index,
-    variation: variation
-  }))))));
+  }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_styleVariationsContainer.default, null))));
 }
 
 var _default = ScreenStyleVariations;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["GlobalStylesContext","blockEditorPrivateApis","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","blockEditorStore","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} 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';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\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\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["ScreenStyleVariations","mode","select","blockEditorStore","__unstableGetEditorMode","shouldRevertInitialMode","current","__unstableSetEditorMode"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AAbA;AACA;AACA;;AAOA;AACA;AACA;AAIA,SAASA,qBAAT,GAAiC;AAChC,QAAM;AAAEC,IAAAA;AAAF,MAAW,qBAAaC,MAAF,IAAc;AACzC,WAAO;AACND,MAAAA,IAAI,EAAEC,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,uBAA3B;AADA,KAAP;AAGA,GAJgB,EAId,EAJc,CAAjB;AAMA,QAAMC,uBAAuB,GAAG,qBAAQ,IAAR,CAAhC;AACA,0BAAW,MAAM;AAChB;AACA,QAAKJ,IAAI,KAAK,UAAd,EAA2B;AAC1BI,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,KAAlC;AACA;AACD,GALD,EAKG,CAAEL,IAAF,CALH,EARgC,CAehC;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,QAAKA,IAAI,KAAK,UAAd,EAA2B;AAC1BM,MAAAA,uBAAuB,CAAE,UAAF,CAAvB;;AACAF,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,IAAlC;AACA,aAAO,MAAM;AACZ;AACA,YAAKD,uBAAuB,CAACC,OAA7B,EAAuC;AACtCC,UAAAA,uBAAuB,CAAEN,IAAF,CAAvB;AACA;AACD,OALD;AAMA,KAVe,CAWhB;;AACA,GAZD,EAYG,EAZH;AAcA,QAAM;AAAEM,IAAAA;AAAF,MAA8B,uBAAaJ,kBAAb,CAApC;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,oDADa;AAHf,IADD,EASC,4BAAC,gBAAD;AACC,IAAA,IAAI,EAAC,OADN;AAEC,IAAA,YAAY,MAFb;AAGC,IAAA,SAAS,EAAC;AAHX,KAKC,4BAAC,oBAAD,QACC,4BAAC,iCAAD,OADD,CALD,CATD,CADD;AAqBA;;eAEcH,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\tconst { mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -39,6 +39,10 @@ const elements = {
     description: (0, _i18n.__)('Manage the fonts and typography used on headings.'),
     title: (0, _i18n.__)('Headings')
   },
+  caption: {
+    description: (0, _i18n.__)('Manage the fonts and typography used on captions.'),
+    title: (0, _i18n.__)('Captions')
+  },
   button: {
     description: (0, _i18n.__)('Manage the fonts and typography used on buttons.'),
     title: (0, _i18n.__)('Buttons')

package/build/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":["elements","text","description","title","link","heading","button","ScreenTypographyElement","name","element","headingLevel","setHeadingLevel"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAUA;;AACA;;AACA;;AAhBA;AACA;AACA;;AASA;AACA;AACA;AAKA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF,GALU;AAShBE,EAAAA,OAAO,EAAE;AACRH,IAAAA,WAAW,EAAE,cAAI,mDAAJ,CADL;AAERC,IAAAA,KAAK,EAAE,cAAI,UAAJ;AAFC,GATO;AAahBG,EAAAA,MAAM,EAAE;AACPJ,IAAAA,WAAW,EAAE,cAAI,kDAAJ,CADN;AAEPC,IAAAA,KAAK,EAAE,cAAI,SAAJ;AAFA;AAbQ,CAAjB;;AAmBA,SAASI,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,SAAV,CAA1C;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGX,QAAQ,CAAES,OAAF,CAAR,CAAoBN,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAES,OAAF,CAAR,CAAoBP;AAFnC,IADD,EAKC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,0BAAD;AACC,IAAA,IAAI,EAAGM,IADR;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,YAAY,EAAGC;AAHhB,IADD,CALD,EAYGD,OAAO,KAAK,SAAZ,IACD,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,YAAY,EAAC;AAAnC,KACC,4BAAC,4CAAD;AACC,IAAA,KAAK,EAAG,cAAI,sBAAJ,CADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,KAAK,EAAGC,YAHT;AAIC,IAAA,QAAQ,EAAGC,eAJZ;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,uBAAuB;AAPxB,KASC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC;AACN;AACP;AAHM;AAIC,IAAA,KAAK,EAAG,cAAI,KAAJ;AAJT,IATD,EAeC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IAfD,EAmBC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IAnBD,EAuBC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IAvBD,EA2BC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IA3BD,EA+BC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IA/BD,EAmCC,4BAAC,kDAAD;AACC,IAAA,KAAK,EAAC,IADP;AAEC,IAAA,KAAK,EAAG,cAAI,IAAJ;AAFT,IAnCD,CADD,CAbF,EAwDC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAGH,IADR;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,YAAY,EAAGC;AAHhB,IAxDD,CADD;AAgEA;;eAEcH,uB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\nimport TypographyPreview from './typography-preview';\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\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\tconst [ headingLevel, setHeadingLevel ] = useState( 'heading' );\n\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<Spacer marginX={ 4 }>\n\t\t\t\t<TypographyPreview\n\t\t\t\t\tname={ name }\n\t\t\t\t\telement={ element }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t\t{ element === 'heading' && (\n\t\t\t\t<Spacer marginX={ 4 } marginBottom=\"1em\">\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ headingLevel }\n\t\t\t\t\t\tonChange={ setHeadingLevel }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h1\"\n\t\t\t\t\t\t\tlabel={ __( 'H1' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h2\"\n\t\t\t\t\t\t\tlabel={ __( 'H2' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h3\"\n\t\t\t\t\t\t\tlabel={ __( 'H3' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h4\"\n\t\t\t\t\t\t\tlabel={ __( 'H4' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h5\"\n\t\t\t\t\t\t\tlabel={ __( 'H5' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h6\"\n\t\t\t\t\t\t\tlabel={ __( 'H6' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</Spacer>\n\t\t\t) }\n\t\t\t<TypographyPanel\n\t\t\t\tname={ name }\n\t\t\t\telement={ element }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\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":["elements","text","description","title","link","heading","caption","button","ScreenTypographyElement","name","element","headingLevel","setHeadingLevel"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\nimport TypographyPreview from './typography-preview';\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\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\n\t},\n\tcaption: {\n\t\tdescription: __( 'Manage the fonts and typography used on captions.' ),\n\t\ttitle: __( 'Captions' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\tconst [ headingLevel, setHeadingLevel ] = useState( 'heading' );\n\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<Spacer marginX={ 4 }>\n\t\t\t\t<TypographyPreview\n\t\t\t\t\tname={ name }\n\t\t\t\t\telement={ element }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t\t{ element === 'heading' && (\n\t\t\t\t<Spacer marginX={ 4 } marginBottom=\"1em\">\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ headingLevel }\n\t\t\t\t\t\tonChange={ setHeadingLevel }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h1\"\n\t\t\t\t\t\t\tlabel={ __( 'H1' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h2\"\n\t\t\t\t\t\t\tlabel={ __( 'H2' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h3\"\n\t\t\t\t\t\t\tlabel={ __( 'H3' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h4\"\n\t\t\t\t\t\t\tlabel={ __( 'H4' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h5\"\n\t\t\t\t\t\t\tlabel={ __( 'H5' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h6\"\n\t\t\t\t\t\t\tlabel={ __( 'H6' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</Spacer>\n\t\t\t) }\n\t\t\t<TypographyPanel\n\t\t\t\tname={ name }\n\t\t\t\telement={ element }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

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

@@ -122,6 +122,11 @@ function ScreenTypography(_ref2) {
     parentMenu: parentMenu,
     element: "heading",
     label: (0, _i18n.__)('Headings')
+  }), (0, _element.createElement)(Item, {
+    name: name,
+    parentMenu: parentMenu,
+    element: "caption",
+    label: (0, _i18n.__)('Captions')
   }), (0, _element.createElement)(Item, {
     name: name,
     parentMenu: parentMenu,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["useGlobalStyle","blockEditorPrivateApis","Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","variation","undefined","variationClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } 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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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 ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name, variation = '' } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst variationClassName = getVariationClassName( variation );\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<BlockPreviewPanel name={ name } variation={ variationClassName } />\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 level={ 3 }>{ __( '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\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=\"heading\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\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=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\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\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && (\n\t\t\t\t<TypographyPanel\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariation={ variation }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t/>\n\t\t\t) }\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":["useGlobalStyle","blockEditorPrivateApis","Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","variation","undefined","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAMA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAUA;AACA;AACA;AASA,MAAM;AAAEA,EAAAA;AAAF,IAAqB,yBAAQC,wBAAR,CAA3B;;AAEA,SAASC,IAAT,OAAsD;AAAA,MAAvC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAR;AAAoBC,IAAAA,OAApB;AAA6BC,IAAAA;AAA7B,GAAuC;AACrD,QAAMC,UAAU,GAAG,CAAEJ,IAArB;AACA,QAAMK,MAAM,GACXH,OAAO,KAAK,MAAZ,IAAsB,CAAEA,OAAxB,GAAkC,EAAlC,GAAwC,YAAYA,OAAS,GAD9D;AAEA,QAAMI,WAAW,GAChBJ,OAAO,KAAK,MAAZ,GACG;AACAK,IAAAA,cAAc,EAAE;AADhB,GADH,GAIG,EALJ;AAMA,QAAM,CAAEC,UAAF,IAAiBX,cAAc,CACpCQ,MAAM,GAAG,uBAD2B,EAEpCL,IAFoC,CAArC;AAIA,QAAM,CAAES,SAAF,IAAgBZ,cAAc,CACnCQ,MAAM,GAAG,sBAD0B,EAEnCL,IAFmC,CAApC;AAIA,QAAM,CAAEU,UAAF,IAAiBb,cAAc,CACpCQ,MAAM,GAAG,uBAD2B,EAEpCL,IAFoC,CAArC;AAIA,QAAM,CAAEW,aAAF,IAAoBd,cAAc,CACvCQ,MAAM,GAAG,0BAD8B,EAEvCL,IAFuC,CAAxC;AAIA,QAAM,CAAEY,eAAF,IAAsBf,cAAc,CACzCQ,MAAM,GAAG,kBADgC,EAEzCL,IAFyC,CAA1C;AAIA,QAAM,CAAEa,aAAF,IAAoBhB,cAAc,CAAEQ,MAAM,GAAG,gBAAX,EAA6BL,IAA7B,CAAxC;AACA,QAAM,CAAEc,KAAF,IAAYjB,cAAc,CAAEQ,MAAM,GAAG,YAAX,EAAyBL,IAAzB,CAAhC;;AAEA,MAAK,CAAEI,UAAP,EAAoB;AACnB,WAAO,IAAP;AACA;;AAED,QAAMW,qBAAqB,GAAG,oBAC7B;AACA,gBAAI,sBAAJ,CAF6B,EAG7BZ,KAH6B,CAA9B;AAMA,SACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGF,UAAU,GAAG,cAAb,GAA8BC,OADtC;AAEC,kBAAaa;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sDADX;AAEC,IAAA,KAAK,EAAG;AACPP,MAAAA,UAAU,EAAEA,UAAF,aAAEA,UAAF,cAAEA,UAAF,GAAgB,OADnB;AAEPQ,MAAAA,UAAU,EAAEH,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAFtB;AAGPE,MAAAA,KAHO;AAIPL,MAAAA,SAJO;AAKPC,MAAAA,UALO;AAMPC,MAAAA,aANO;AAOP,SAAGL;AAPI;AAFT,KAYG,cAAI,IAAJ,CAZH,CADD,EAeC,4BAAC,oBAAD,QAAYH,KAAZ,CAfD,CAJD,CADD;AAwBA;;AAED,SAASc,gBAAT,QAAsD;AAAA,MAA3B;AAAEjB,IAAAA,IAAF;AAAQkB,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACrD,QAAMjB,UAAU,GAAGD,IAAI,KAAKmB,SAAT,GAAqB,EAArB,GAA0B,aAAanB,IAA1D;AACA,QAAMoB,kBAAkB,GAAG,kCAAuBF,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,YAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,wDADa;AAFf,IADD,EAQC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGlB,IAA1B;AAAiC,IAAA,SAAS,EAAGoB;AAA7C,IARD,EAUG,CAAEpB,IAAF,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KAAwB,cAAI,UAAJ,CAAxB,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,MAHT;AAIC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAJT,IADD,EAOC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,MAHT;AAIC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAJT,IAPD,EAaC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,SAHT;AAIC,IAAA,KAAK,EAAG,cAAI,UAAJ;AAJT,IAbD,EAmBC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,SAHT;AAIC,IAAA,KAAK,EAAG,cAAI,UAAJ;AAJT,IAnBD,EAyBC,4BAAC,IAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,OAAO,EAAC,QAHT;AAIC,IAAA,KAAK,EAAG,cAAI,SAAJ;AAJT,IAzBD,CAFD,CADD,CAXF,EAkDG,CAAC,CAAED,IAAH,IACD,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,SAAS,EAAGkB,SAFb;AAGC,IAAA,OAAO,EAAC;AAHT,IAnDF,CADD;AA4DA;;eAEcD,gB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } 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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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 ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name, variation = '' } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst variationClassName = getVariationClassName( variation );\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<BlockPreviewPanel name={ name } variation={ variationClassName } />\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 level={ 3 }>{ __( '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\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=\"heading\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\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=\"caption\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Captions' ) }\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=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\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\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && (\n\t\t\t\t<TypographyPanel\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariation={ variation }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}

package/build/components/global-styles/style-variations-container.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StyleVariationsContainer;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _keycodes = require("@wordpress/keycodes");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _globalStylesProvider = require("./global-styles-provider");
+
+var _preview = _interopRequireDefault(require("./preview"));
+
+var _privateApis = require("../../private-apis");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  GlobalStylesContext
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
+function compareVariations(a, b) {
+  return (0, _es.default)(a.styles, b.styles) && (0, _es.default)(a.settings, b.settings);
+}
+
+function Variation(_ref) {
+  let {
+    variation
+  } = _ref;
+  const [isFocused, setIsFocused] = (0, _element.useState)(false);
+  const {
+    base,
+    user,
+    setUserConfig
+  } = (0, _element.useContext)(GlobalStylesContext);
+  const context = (0, _element.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: (0, _globalStylesProvider.mergeBaseAndUserConfigs)(base, variation),
+      setUserConfig: () => {}
+    };
+  }, [variation, base]);
+
+  const selectVariation = () => {
+    setUserConfig(() => {
+      return {
+        settings: variation.settings,
+        styles: variation.styles
+      };
+    });
+  };
+
+  const selectOnEnter = event => {
+    if (event.keyCode === _keycodes.ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+
+  const isActive = (0, _element.useMemo)(() => {
+    return compareVariations(user, variation);
+  }, [user, variation]);
+  return (0, _element.createElement)(GlobalStylesContext.Provider, {
+    value: context
+  }, (0, _element.createElement)("div", {
+    className: (0, _classnames.default)('edit-site-global-styles-variations_item', {
+      'is-active': isActive
+    }),
+    role: "button",
+    onClick: selectVariation,
+    onKeyDown: selectOnEnter,
+    tabIndex: "0",
+    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
+    "aria-current": isActive,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  }, (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-variations_item-preview"
+  }, (0, _element.createElement)(_preview.default, {
+    label: variation === null || variation === void 0 ? void 0 : variation.title,
+    isFocused: isFocused,
+    withHoverView: true
+  }))));
+}
+
+function StyleVariationsContainer() {
+  const {
+    variations
+  } = (0, _data.useSelect)(select => {
+    return {
+      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations() || []
+    };
+  }, []);
+  const withEmptyVariation = (0, _element.useMemo)(() => {
+    return [{
+      title: (0, _i18n.__)('Default'),
+      settings: {},
+      styles: {}
+    }, ...variations.map(variation => {
+      var _variation$settings2, _variation$styles2;
+
+      return { ...variation,
+        settings: (_variation$settings2 = variation.settings) !== null && _variation$settings2 !== void 0 ? _variation$settings2 : {},
+        styles: (_variation$styles2 = variation.styles) !== null && _variation$styles2 !== void 0 ? _variation$styles2 : {}
+      };
+    })];
+  }, [variations]);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalGrid, {
+    columns: 2,
+    className: "edit-site-global-styles-style-variations-container"
+  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => (0, _element.createElement)(Variation, {
+    key: index,
+    variation: variation
+  }))));
+}
+//# sourceMappingURL=style-variations-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"names":["GlobalStylesContext","blockEditorPrivateApis","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","StyleVariationsContainer","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\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\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nexport default function StyleVariationsContainer() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\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\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 2 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n"]}

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

@@ -29,7 +29,7 @@ var _coreData = require("@wordpress/core-data");
 
 var _screenRoot = _interopRequireDefault(require("./screen-root"));
 
-var _screenBlockList = _interopRequireDefault(require("./screen-block-list"));
+var _screenBlockList = _interopRequireWildcard(require("./screen-block-list"));
 
 var _screenBlock = _interopRequireDefault(require("./screen-block"));
 
@@ -43,16 +43,6 @@ var _screenColors = _interopRequireDefault(require("./screen-colors"));
 
 var _screenColorPalette = _interopRequireDefault(require("./screen-color-palette"));
 
-var _screenBackgroundColor = _interopRequireDefault(require("./screen-background-color"));
-
-var _screenTextColor = _interopRequireDefault(require("./screen-text-color"));
-
-var _screenLinkColor = _interopRequireDefault(require("./screen-link-color"));
-
-var _screenHeadingColor = _interopRequireDefault(require("./screen-heading-color"));
-
-var _screenButtonColor = _interopRequireDefault(require("./screen-button-color"));
-
 var _screenLayout = _interopRequireDefault(require("./screen-layout"));
 
 var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
@@ -69,6 +59,10 @@ var _privateApis = require("../../private-apis");
 
 var _screenEffects = _interopRequireDefault(require("./screen-effects"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * WordPress dependencies
  */
@@ -211,6 +205,11 @@ function ContextScreens(_ref4) {
   }, (0, _element.createElement)(_screenTypographyElement.default, {
     name: name,
     element: "heading"
+  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/typography/caption'
+  }, (0, _element.createElement)(_screenTypographyElement.default, {
+    name: name,
+    element: "caption"
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/button'
   }, (0, _element.createElement)(_screenTypographyElement.default, {
@@ -225,35 +224,10 @@ function ContextScreens(_ref4) {
     path: parentMenu + '/colors/palette'
   }, (0, _element.createElement)(_screenColorPalette.default, {
     name: name
-  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors/background'
-  }, (0, _element.createElement)(_screenBackgroundColor.default, {
-    name: name,
-    variation: variation
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/filters'
   }, (0, _element.createElement)(_screenFilters.default, {
     name: name
-  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors/text'
-  }, (0, _element.createElement)(_screenTextColor.default, {
-    name: name,
-    variation: variation
-  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors/link'
-  }, (0, _element.createElement)(_screenLinkColor.default, {
-    name: name,
-    variation: variation
-  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors/heading'
-  }, (0, _element.createElement)(_screenHeadingColor.default, {
-    name: name,
-    variation: variation
-  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors/button'
-  }, (0, _element.createElement)(_screenButtonColor.default, {
-    name: name,
-    variation: variation
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/border'
   }, (0, _element.createElement)(_screenBorder.default, {
@@ -301,6 +275,46 @@ function GlobalStylesStyleBook(_ref5) {
   });
 }
 
+function GlobalStylesBlockLink() {
+  const navigator = (0, _components.__experimentalUseNavigator)();
+  const isMounted = (0, _element.useRef)();
+  const {
+    selectedBlockName,
+    selectedBlockClientId
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSelectedBlockClientId,
+      getBlockName
+    } = select(_blockEditor.store);
+    const clientId = getSelectedBlockClientId();
+    return {
+      selectedBlockName: getBlockName(clientId),
+      selectedBlockClientId: clientId
+    };
+  }, []);
+  const blockHasGlobalStyles = (0, _screenBlockList.useBlockHasGlobalStyles)(selectedBlockName);
+  (0, _element.useEffect)(() => {
+    // Avoid navigating to the block screen on mount.
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+
+    if (!selectedBlockClientId || !blockHasGlobalStyles) {
+      return;
+    }
+
+    const path = '/blocks/' + encodeURIComponent(selectedBlockName); // Avoid navigating to the same path. This can happen when selecting
+    // a new block of the same type.
+
+    if (path !== navigator.location.path) {
+      navigator.goTo(path, {
+        skipFocus: true
+      });
+    }
+  }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
+}
+
 function GlobalStylesUI(_ref6) {
   let {
     isStyleBookOpened,
@@ -332,7 +346,7 @@ function GlobalStylesUI(_ref6) {
     });
   }), isStyleBookOpened && (0, _element.createElement)(GlobalStylesStyleBook, {
     onClose: onCloseStyleBook
-  }), (0, _element.createElement)(GlobalStylesActionMenu, null));
+  }), (0, _element.createElement)(GlobalStylesActionMenu, null), (0, _element.createElement)(GlobalStylesBlockLink, null));
 }
 
 var _default = GlobalStylesUI;