@wordpress/edit-site 5.28.5 → 5.30.0

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

@@ -1 +1 @@
-{"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","FontFamilies","ScreenHeader","ScreenTypography","fontLibraryEnabled","select","getEditorSettings","createElement","Fragment","title","description","className","spacing"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typogrphy-elements';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\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\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;AAEnC,SAASC,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAGL,SAAS,CACjCM,MAAM,IACPA,MAAM,CAAEP,WAAY,CAAC,CAACQ,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EAED,OACCG,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGf,EAAE,CAAE,YAAa,CAAG;IAC5BgB,WAAW,EAAGhB,EAAE,CACf,wDACD;EAAG,CACH,CAAC,EACFa,aAAA;IAAKI,SAAS,EAAC;EAA2C,GACzDJ,aAAA,CAACX,MAAM;IAACgB,OAAO,EAAG;EAAG,GAClBR,kBAAkB,IAAIG,aAAA,CAACN,YAAY,MAAE,CAAC,EACxCM,aAAA,CAACP,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeG,gBAAgB"}
+{"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","TypographyVariations","FontFamilies","ScreenHeader","useCurrentMergeThemeStyleVariationsWithUserConfig","ScreenTypography","fontLibraryEnabled","select","getEditorSettings","typographyVariations","property","filter","variation","settings","typography","fontFamilies","Object","keys","length","createElement","Fragment","title","description","className","spacing","window","__experimentalDisableFontLibrary"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t\tfilter: ( variation ) =>\n\t\t\t\tvariation?.settings?.typography?.fontFamilies &&\n\t\t\t\tObject.keys( variation?.settings?.typography?.fontFamilies )\n\t\t\t\t\t.length,\n\t\t} );\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\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t{ !! typographyVariations.length && (\n\t\t\t\t\t\t<TypographyVariations />\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary && (\n\t\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,iDAAiD,QAAQ,+EAA+E;AAEjJ,SAASC,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAGP,SAAS,CACjCQ,MAAM,IACPA,MAAM,CAAET,WAAY,CAAC,CAACU,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EACD,MAAMG,oBAAoB,GACzBL,iDAAiD,CAAE;IAClDM,QAAQ,EAAE,YAAY;IACtBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,IAC7CC,MAAM,CAACC,IAAI,CAAEL,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAa,CAAC,CAC1DG;EACJ,CAAE,CAAC;EAEJ,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAChB,YAAY;IACZkB,KAAK,EAAG3B,EAAE,CAAE,YAAa,CAAG;IAC5B4B,WAAW,EAAG5B,EAAE,CACf,wDACD;EAAG,CACH,CAAC,EACFyB,aAAA;IAAKI,SAAS,EAAC;EAA2C,GACzDJ,aAAA,CAACvB,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClB,CAAC,CAAEf,oBAAoB,CAACS,MAAM,IAC/BC,aAAA,CAAClB,oBAAoB,MAAE,CACvB,EACC,CAAEwB,MAAM,CAACC,gCAAgC,IAC1CP,aAAA,CAACvB,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClBlB,kBAAkB,IAAIa,aAAA,CAACjB,YAAY,MAAE,CAChC,CACR,EACDiB,aAAA,CAACnB,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeK,gBAAgB"}

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

@@ -1,95 +1,18 @@
 import { createElement } from "react";
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
+import { useMemo } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
-import { unlock } from '../../lock-unlock';
-const {
-  GlobalStylesContext,
-  areGlobalStyleConfigsEqual
-} = unlock(blockEditorPrivateApis);
-function Variation({
-  variation
-}) {
-  const [isFocused, setIsFocused] = useState(false);
-  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 areGlobalStyleConfigsEqual(user, variation);
-  }, [user, variation]);
-  let label = variation?.title;
-  if (variation?.description) {
-    label = sprintf( /* translators: %1$s: variation title. %2$s variation description. */
-    __('%1$s (%2$s)'), variation?.title, variation?.description);
-  }
-  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",
-    "aria-label": label,
-    "aria-current": isActive,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false)
-  }, createElement("div", {
-    className: "edit-site-global-styles-variations_item-preview"
-  }, createElement(StylesPreview, {
-    label: variation?.title,
-    isFocused: isFocused,
-    withHoverView: true
-  }))));
-}
+import PreviewStyles from './preview-styles';
+import Variation from './variations/variation';
 export default function StyleVariationsContainer() {
   const variations = useSelect(select => {
     return select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations();
@@ -100,11 +23,11 @@ export default function StyleVariationsContainer() {
       settings: {},
       styles: {}
     }, ...(variations !== null && variations !== void 0 ? variations : []).map(variation => {
-      var _variation$settings2, _variation$styles2;
+      var _variation$settings, _variation$styles;
       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 : {}
+        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
+        styles: (_variation$styles = variation.styles) !== null && _variation$styles !== void 0 ? _variation$styles : {}
       };
     })];
   }, [variations]);
@@ -114,6 +37,11 @@ export default function StyleVariationsContainer() {
   }, withEmptyVariation.map((variation, index) => createElement(Variation, {
     key: index,
     variation: variation
-  })));
+  }, isFocused => createElement(PreviewStyles, {
+    label: variation?.title,
+    withHoverView: true,
+    isFocused: isFocused,
+    variation: variation
+  }))));
 }
 //# sourceMappingURL=style-variations-container.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","__","sprintf","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","StylesPreview","unlock","GlobalStylesContext","areGlobalStyleConfigsEqual","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","_variation$settings","_variation$styles","settings","styles","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","label","title","description","createElement","Provider","value","className","role","onClick","onKeyDown","tabIndex","onFocus","onBlur","withHoverView","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","_variation$settings2","_variation$styles2","columns","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/**\n * External dependencies\n */\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, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __, sprintf } 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 '../../lock-unlock';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\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 areGlobalStyleConfigsEqual( user, variation );\n\t}, [ user, variation ] );\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: %1$s: variation title. %2$s variation description. */\n\t\t\t__( '%1$s (%2$s)' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\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={ label }\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 select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\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<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["store","coreStore","useSelect","useMemo","__experimentalGrid","Grid","__","PreviewStyles","Variation","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","title","settings","styles","map","variation","_variation$settings","_variation$styles","createElement","columns","className","index","key","isFocused","label","withHoverView"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\n\nexport default function StyleVariationsContainer() {\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\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<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Variation>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,SAAS,MAAM,wBAAwB;AAE9C,eAAe,SAASC,wBAAwBA,CAAA,EAAG;EAClD,MAAMC,UAAU,GAAGR,SAAS,CAAIS,MAAM,IAAM;IAC3C,OAAOA,MAAM,CACZV,SACD,CAAC,CAACW,mDAAmD,CAAC,CAAC;EACxD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,kBAAkB,GAAGV,OAAO,CAAE,MAAM;IACzC,OAAO,CACN;MACCW,KAAK,EAAER,EAAE,CAAE,SAAU,CAAC;MACtBS,QAAQ,EAAE,CAAC,CAAC;MACZC,MAAM,EAAE,CAAC;IACV,CAAC,EACD,GAAG,CAAEN,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAGO,GAAG,CAAIC,SAAS;MAAA,IAAAC,mBAAA,EAAAC,iBAAA;MAAA,OAAQ;QAC/C,GAAGF,SAAS;QACZH,QAAQ,GAAAI,mBAAA,GAAED,SAAS,CAACH,QAAQ,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,CAAC,CAAC;QAClCH,MAAM,GAAAI,iBAAA,GAAEF,SAAS,CAACF,MAAM,cAAAI,iBAAA,cAAAA,iBAAA,GAAI,CAAC;MAC9B,CAAC;IAAA,CAAG,CAAC,CACL;EACF,CAAC,EAAE,CAAEV,UAAU,CAAG,CAAC;EAEnB,OACCW,aAAA,CAAChB,IAAI;IACJiB,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC;EAAoD,GAE5DV,kBAAkB,CAACI,GAAG,CAAE,CAAEC,SAAS,EAAEM,KAAK,KAC3CH,aAAA,CAACb,SAAS;IAACiB,GAAG,EAAGD,KAAO;IAACN,SAAS,EAAGA;EAAW,GAC3CQ,SAAS,IACZL,aAAA,CAACd,aAAa;IACboB,KAAK,EAAGT,SAAS,EAAEJ,KAAO;IAC1Bc,aAAa;IACbF,SAAS,EAAGA,SAAW;IACvBR,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACV,CACG,CAAC;AAET"}

package/build-module/components/global-styles/{typogrphy-elements.js → typography-elements.js}

@@ -84,4 +84,4 @@ function TypographyElements() {
   })));
 }
 export default TypographyElements;
-//# sourceMappingURL=typogrphy-elements.js.map
+//# sourceMappingURL=typography-elements.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","Subtitle","unlock","useGlobalStyle","ElementItem","parentMenu","element","label","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","createElement","path","justify","className","style","background","TypographyElements","spacing","level","isBordered","isSeparated"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-elements.js"],"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 { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\n\nimport { unlock } from '../../lock-unlock';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ElementItem( { parentMenu, element, label } ) {\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( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\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 TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],"mappings":"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"}

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

@@ -10,4 +10,25 @@ export function getVariationClassName(variation) {
   }
   return `is-style-${variation}`;
 }
+function getFontFamilyFromSetting(fontFamilies, setting) {
+  if (!setting) {
+    return null;
+  }
+  const fontFamilyVariable = setting.replace('var(', '').replace(')', '');
+  const fontFamilySlug = fontFamilyVariable?.split('--').slice(-1)[0];
+  return fontFamilies.find(fontFamily => fontFamily.slug === fontFamilySlug);
+}
+export function getFontFamilies(themeJson) {
+  const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+  const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+  const bodyFontFamily = getFontFamilyFromSetting(fontFamilies, bodyFontFamilySetting);
+  const headingFontFamilySetting = themeJson?.styles?.elements?.heading?.typography?.fontFamily;
+  let headingFontFamily;
+  if (!headingFontFamilySetting) {
+    headingFontFamily = bodyFontFamily;
+  } else {
+    headingFontFamily = getFontFamilyFromSetting(fontFamilies, themeJson?.styles?.elements?.heading?.typography?.fontFamily);
+  }
+  return [bodyFontFamily, headingFontFamily];
+}
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["getVariationClassName","variation"],"sources":["@wordpress/edit-site/src/components/global-styles/utils.js"],"sourcesContent":["/**\n *\n * @param {string} variation The variation name.\n *\n * @return {string} The variation class name.\n */\nexport function getVariationClassName( variation ) {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qBAAqBA,CAAEC,SAAS,EAAG;EAClD,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EACA,OAAQ,YAAYA,SAAW,EAAC;AACjC"}
+{"version":3,"names":["getVariationClassName","variation","getFontFamilyFromSetting","fontFamilies","setting","fontFamilyVariable","replace","fontFamilySlug","split","slice","find","fontFamily","slug","getFontFamilies","themeJson","settings","typography","theme","bodyFontFamilySetting","styles","bodyFontFamily","headingFontFamilySetting","elements","heading","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/utils.js"],"sourcesContent":["/**\n *\n * @param {string} variation The variation name.\n *\n * @return {string} The variation class name.\n */\nexport function getVariationClassName( variation ) {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nfunction getFontFamilyFromSetting( fontFamilies, setting ) {\n\tif ( ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\nexport function getFontFamilies( themeJson ) {\n\tconst fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qBAAqBA,CAAEC,SAAS,EAAG;EAClD,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EACA,OAAQ,YAAYA,SAAW,EAAC;AACjC;AAEA,SAASC,wBAAwBA,CAAEC,YAAY,EAAEC,OAAO,EAAG;EAC1D,IAAK,CAAEA,OAAO,EAAG;IAChB,OAAO,IAAI;EACZ;EAEA,MAAMC,kBAAkB,GAAGD,OAAO,CAACE,OAAO,CAAE,MAAM,EAAE,EAAG,CAAC,CAACA,OAAO,CAAE,GAAG,EAAE,EAAG,CAAC;EAC3E,MAAMC,cAAc,GAAGF,kBAAkB,EAAEG,KAAK,CAAE,IAAK,CAAC,CAACC,KAAK,CAAE,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE;EAEzE,OAAON,YAAY,CAACO,IAAI,CACrBC,UAAU,IAAMA,UAAU,CAACC,IAAI,KAAKL,cACvC,CAAC;AACF;AAEA,OAAO,SAASM,eAAeA,CAAEC,SAAS,EAAG;EAC5C,MAAMX,YAAY,GAAGW,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEb,YAAY,EAAEc,KAAK,CAAC,CAAC;EAC3E,MAAMC,qBAAqB,GAAGJ,SAAS,EAAEK,MAAM,EAAEH,UAAU,EAAEL,UAAU;EACvE,MAAMS,cAAc,GAAGlB,wBAAwB,CAC9CC,YAAY,EACZe,qBACD,CAAC;EAED,MAAMG,wBAAwB,GAC7BP,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UAAU;EAE7D,IAAIa,iBAAiB;EACrB,IAAK,CAAEH,wBAAwB,EAAG;IACjCG,iBAAiB,GAAGJ,cAAc;EACnC,CAAC,MAAM;IACNI,iBAAiB,GAAGtB,wBAAwB,CAC3CC,YAAY,EACZW,SAAS,EAAEK,MAAM,EAAEG,QAAQ,EAAEC,OAAO,EAAEP,UAAU,EAAEL,UACnD,CAAC;EACF;EAEA,OAAO,CAAES,cAAc,EAAEI,iBAAiB,CAAE;AAC7C"}

package/build-module/components/global-styles/variations/variation.js

@@ -0,0 +1,82 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { unlock } from '../../../lock-unlock';
+const {
+  GlobalStylesContext,
+  areGlobalStyleConfigsEqual
+} = unlock(blockEditorPrivateApis);
+export default function Variation({
+  variation,
+  children
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  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(() => ({
+      settings: variation.settings,
+      styles: variation.styles
+    }));
+  };
+  const selectOnEnter = event => {
+    if (event.keyCode === ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+  const isActive = useMemo(() => areGlobalStyleConfigsEqual(user, variation), [user, variation]);
+  let label = variation?.title;
+  if (variation?.description) {
+    label = sprintf( /* translators: %1$s: variation title. %2$s variation description. */
+    __('%1$s (%2$s)'), variation?.title, variation?.description);
+  }
+  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",
+    "aria-label": label,
+    "aria-current": isActive,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  }, createElement("div", {
+    className: "edit-site-global-styles-variations_item-preview"
+  }, children(isFocused))));
+}
+//# sourceMappingURL=variation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["classnames","useMemo","useContext","useState","ENTER","__","sprintf","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","unlock","GlobalStylesContext","areGlobalStyleConfigsEqual","Variation","variation","children","isFocused","setIsFocused","base","user","setUserConfig","context","_variation$settings","_variation$styles","settings","styles","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","label","title","description","createElement","Provider","value","className","role","onClick","onKeyDown","tabIndex","onFocus","onBlur"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variation.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from '../global-styles-provider';\nimport { unlock } from '../../../lock-unlock';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nexport default function Variation( { variation, children } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo(\n\t\t() => ( {\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\t[ variation, base ]\n\t);\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => ( {\n\t\t\tsettings: variation.settings,\n\t\t\tstyles: variation.styles,\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\t() => areGlobalStyleConfigsEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: %1$s: variation title. %2$s variation description. */\n\t\t\t__( '%1$s (%2$s)' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\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={ label }\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{ children( isFocused ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/variations/variations-color.js

@@ -0,0 +1,28 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Subtitle from '../subtitle';
+import Variation from './variation';
+import StylesPreviewColors from '../preview-colors';
+export default function ColorVariations({
+  variations
+}) {
+  return createElement(VStack, {
+    spacing: 3
+  }, createElement(Subtitle, {
+    level: 3
+  }, __('Presets')), createElement(Grid, {
+    columns: 3
+  }, variations.map((variation, index) => createElement(Variation, {
+    key: index,
+    variation: variation
+  }, () => createElement(StylesPreviewColors, null)))));
+}
+//# sourceMappingURL=variations-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","__","Subtitle","Variation","StylesPreviewColors","ColorVariations","variations","createElement","spacing","level","columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from '../subtitle';\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\n\nexport default function ColorVariations( { variations } ) {\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>\n\t\t\t<Grid columns={ 3 }>\n\t\t\t\t{ variations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,mBAAmB;AAEnD,eAAe,SAASC,eAAeA,CAAE;EAAEC;AAAW,CAAC,EAAG;EACzD,OACCC,aAAA,CAACP,MAAM;IAACQ,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACL,QAAQ;IAACO,KAAK,EAAG;EAAG,GAAGR,EAAE,CAAE,SAAU,CAAa,CAAC,EACpDM,aAAA,CAACT,IAAI;IAACY,OAAO,EAAG;EAAG,GAChBJ,UAAU,CAACK,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KACnCN,aAAA,CAACJ,SAAS;IAACW,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,MAAML,aAAA,CAACH,mBAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}

package/build-module/components/global-styles/{variations-panel.js → variations/variations-panel.js}

@@ -9,7 +9,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 
-import { NavigationButtonAsItem } from './navigation-button';
+import { NavigationButtonAsItem } from '../navigation-button';
 function getCoreBlockStyles(blockStyles) {
   return blockStyles?.filter(style => style.source === 'block');
 }

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

@@ -0,0 +1 @@
+{"version":3,"names":["store","blocksStore","useSelect","__experimentalItemGroup","ItemGroup","NavigationButtonAsItem","getCoreBlockStyles","blockStyles","filter","style","source","useBlockVariations","name","select","getBlockStyles","coreBlockStyles","VariationsPanel","createElement","isBordered","isSeparated","map","index","isDefault","key","path","encodeURIComponent","label"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n/**\n * Internal dependencies\n */\n\nimport { NavigationButtonAsItem } from '../navigation-button';\n\nfunction getCoreBlockStyles( blockStyles ) {\n\treturn blockStyles?.filter( ( style ) => style.source === 'block' );\n}\n\nexport function useBlockVariations( name ) {\n\tconst blockStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\tconst coreBlockStyles = getCoreBlockStyles( blockStyles );\n\treturn coreBlockStyles;\n}\n\nexport function VariationsPanel( { name } ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ style.label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E;AACA;AACA;;AAEA,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,SAASC,kBAAkBA,CAAEC,WAAW,EAAG;EAC1C,OAAOA,WAAW,EAAEC,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,KAAK,OAAQ,CAAC;AACpE;AAEA,OAAO,SAASC,kBAAkBA,CAAEC,IAAI,EAAG;EAC1C,MAAML,WAAW,GAAGL,SAAS,CAC1BW,MAAM,IAAM;IACb,MAAM;MAAEC;IAAe,CAAC,GAAGD,MAAM,CAAEZ,WAAY,CAAC;IAChD,OAAOa,cAAc,CAAEF,IAAK,CAAC;EAC9B,CAAC,EACD,CAAEA,IAAI,CACP,CAAC;EACD,MAAMG,eAAe,GAAGT,kBAAkB,CAAEC,WAAY,CAAC;EACzD,OAAOQ,eAAe;AACvB;AAEA,OAAO,SAASC,eAAeA,CAAE;EAAEJ;AAAK,CAAC,EAAG;EAC3C,MAAMG,eAAe,GAAGJ,kBAAkB,CAAEC,IAAK,CAAC;EAElD,OACCK,aAAA,CAACb,SAAS;IAACc,UAAU;IAACC,WAAW;EAAA,GAC9BJ,eAAe,CAACK,GAAG,CAAE,CAAEX,KAAK,EAAEY,KAAK,KAAM;IAC1C,IAAKZ,KAAK,EAAEa,SAAS,EAAG;MACvB,OAAO,IAAI;IACZ;IACA,OACCL,aAAA,CAACZ,sBAAsB;MACtBkB,GAAG,EAAGF,KAAO;MACbG,IAAI,EACH,UAAU,GACVC,kBAAkB,CAAEb,IAAK,CAAC,GAC1B,cAAc,GACda,kBAAkB,CAAEhB,KAAK,CAACG,IAAK,CAC/B;MACD,cAAaH,KAAK,CAACiB;IAAO,GAExBjB,KAAK,CAACiB,KACe,CAAC;EAE3B,CAAE,CACQ,CAAC;AAEd"}

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

@@ -0,0 +1,56 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { unlock } from '../../../lock-unlock';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import PreviewTypography from '../preview-typography';
+import Subtitle from '../subtitle';
+import { getFontFamilies } from '../utils';
+import Variation from './variation';
+const {
+  GlobalStylesContext
+} = unlock(blockEditorPrivateApis);
+export default function TypographyVariations() {
+  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
+    property: 'typography',
+    filter: variation => variation?.settings?.typography?.fontFamilies && Object.keys(variation?.settings?.typography?.fontFamilies).length
+  });
+  const {
+    base
+  } = useContext(GlobalStylesContext);
+
+  /*
+   * Filter duplicate variations based on the font families used in the variation.
+   */
+  const uniqueTypographyVariations = typographyVariations?.length ? Object.values(typographyVariations.reduce((acc, variation) => {
+    const [bodyFontFamily, headingFontFamily] = getFontFamilies(mergeBaseAndUserConfigs(base, variation));
+    if (headingFontFamily?.name && bodyFontFamily?.name && !acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`]) {
+      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
+    }
+    return acc;
+  }, {})) : [];
+  return createElement(VStack, {
+    spacing: 3
+  }, createElement(Subtitle, {
+    level: 3
+  }, __('Presets')), createElement(Grid, {
+    columns: 3,
+    className: "edit-site-global-styles-style-variations-container"
+  }, typographyVariations && typographyVariations.length ? uniqueTypographyVariations.map((variation, index) => createElement(Variation, {
+    key: index,
+    variation: variation
+  }, () => createElement(PreviewTypography, {
+    variation: variation
+  }))) : null));
+}
+//# sourceMappingURL=variations-typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","__experimentalGrid","Grid","__experimentalVStack","VStack","__","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","unlock","useCurrentMergeThemeStyleVariationsWithUserConfig","PreviewTypography","Subtitle","getFontFamilies","Variation","GlobalStylesContext","TypographyVariations","typographyVariations","property","filter","variation","settings","typography","fontFamilies","Object","keys","length","base","uniqueTypographyVariations","values","reduce","acc","bodyFontFamily","headingFontFamily","name","createElement","spacing","level","columns","className","map","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} 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 { unlock } from '../../../lock-unlock';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport PreviewTypography from '../preview-typography';\nimport Subtitle from '../subtitle';\nimport { getFontFamilies } from '../utils';\nimport Variation from './variation';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nexport default function TypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t\tfilter: ( variation ) =>\n\t\t\t\tvariation?.settings?.typography?.fontFamilies &&\n\t\t\t\tObject.keys( variation?.settings?.typography?.fontFamilies )\n\t\t\t\t\t.length,\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\n\t/*\n\t * Filter duplicate variations based on the font families used in the variation.\n\t */\n\tconst uniqueTypographyVariations = typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\t\t\t\t\tif (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t  )\n\t\t: [];\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations && typographyVariations.length\n\t\t\t\t\t? uniqueTypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t\t<PreviewTypography\n\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Variation>\n\t\t\t\t\t  ) )\n\t\t\t\t\t: null }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SACCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,2BAA2B;AACnE,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,iDAAiD,QAAQ,kFAAkF;AACpJ,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,eAAe,QAAQ,UAAU;AAC1C,OAAOC,SAAS,MAAM,aAAa;AAEnC,MAAM;EAAEC;AAAoB,CAAC,GAAGN,MAAM,CAAEF,sBAAuB,CAAC;AAEhE,eAAe,SAASS,oBAAoBA,CAAA,EAAG;EAC9C,MAAMC,oBAAoB,GACzBP,iDAAiD,CAAE;IAClDQ,QAAQ,EAAE,YAAY;IACtBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,IAC7CC,MAAM,CAACC,IAAI,CAAEL,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAa,CAAC,CAC1DG;EACJ,CAAE,CAAC;EAEJ,MAAM;IAAEC;EAAK,CAAC,GAAG3B,UAAU,CAAEe,mBAAoB,CAAC;;EAElD;AACD;AACA;EACC,MAAMa,0BAA0B,GAAGX,oBAAoB,EAAES,MAAM,GAC5DF,MAAM,CAACK,MAAM,CACbZ,oBAAoB,CAACa,MAAM,CAAE,CAAEC,GAAG,EAAEX,SAAS,KAAM;IAClD,MAAM,CAAEY,cAAc,EAAEC,iBAAiB,CAAE,GAC1CpB,eAAe,CACdL,uBAAuB,CAAEmB,IAAI,EAAEP,SAAU,CAC1C,CAAC;IACF,IACCa,iBAAiB,EAAEC,IAAI,IACvBF,cAAc,EAAEE,IAAI,IACpB,CAAEH,GAAG,CACH,GAAGE,iBAAiB,EAAEC,IAAM,IAAIF,cAAc,EAAEE,IAAM,EAAC,CACxD,EACA;MACDH,GAAG,CACD,GAAGE,iBAAiB,EAAEC,IAAM,IAAIF,cAAc,EAAEE,IAAM,EAAC,CACxD,GAAGd,SAAS;IACd;IAEA,OAAOW,GAAG;EACX,CAAC,EAAE,CAAC,CAAE,CACN,CAAC,GACD,EAAE;EAEL,OACCI,aAAA,CAAC/B,MAAM;IAACgC,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACvB,QAAQ;IAACyB,KAAK,EAAG;EAAG,GAAGhC,EAAE,CAAE,SAAU,CAAa,CAAC,EACpD8B,aAAA,CAACjC,IAAI;IACJoC,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC;EAAoD,GAE5DtB,oBAAoB,IAAIA,oBAAoB,CAACS,MAAM,GAClDE,0BAA0B,CAACY,GAAG,CAAE,CAAEpB,SAAS,EAAEqB,KAAK,KAClDN,aAAA,CAACrB,SAAS;IAAC4B,GAAG,EAAGD,KAAO;IAACrB,SAAS,EAAGA;EAAW,GAC7C,MACDe,aAAA,CAACxB,iBAAiB;IACjBS,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACT,CAAC,GACH,IACE,CACC,CAAC;AAEX"}

package/build-module/components/header-edit-mode/document-tools/index.js

@@ -13,7 +13,6 @@ import { store as editorStore, privateApis as editorPrivateApis } from '@wordpre
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 const {
   DocumentTools: EditorDocumentTools
@@ -28,7 +27,7 @@ export default function DocumentTools({
   } = useSelect(select => {
     const {
       getEditorMode
-    } = select(editSiteStore);
+    } = select(editorStore);
     return {
       isVisualMode: getEditorMode() === 'visual'
     };

package/build-module/components/header-edit-mode/document-tools/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useViewportMatch","store","blockEditorStore","useSelect","useDispatch","__","chevronUpDown","Button","ToolbarItem","editorStore","privateApis","editorPrivateApis","editSiteStore","unlock","DocumentTools","EditorDocumentTools","blockEditorMode","hasFixedToolbar","isDistractionFree","isVisualMode","select","getEditorMode","__unstableSetEditorMode","setDeviceType","isLargeViewport","isZoomedOutViewExperimentEnabled","window","__experimentalEnableZoomedOutView","isZoomedOutView","createElement","disableBlockTools","listViewLabel","as","className","icon","isPressed","label","onClick","size"],"sources":["@wordpress/edit-site/src/components/header-edit-mode/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { chevronUpDown } from '@wordpress/icons';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tstore as editorStore,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nconst { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );\n\nexport default function DocumentTools( {\n\tblockEditorMode,\n\thasFixedToolbar,\n\tisDistractionFree,\n} ) {\n\tconst { isVisualMode } = useSelect( ( select ) => {\n\t\tconst { getEditorMode } = select( editSiteStore );\n\n\t\treturn {\n\t\t\tisVisualMode: getEditorMode() === 'visual',\n\t\t};\n\t}, [] );\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst { setDeviceType } = useDispatch( editorStore );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isZoomedOutViewExperimentEnabled =\n\t\twindow?.__experimentalEnableZoomedOutView && isVisualMode;\n\tconst isZoomedOutView = blockEditorMode === 'zoom-out';\n\n\treturn (\n\t\t<EditorDocumentTools\n\t\t\tdisableBlockTools={ ! isVisualMode }\n\t\t\tlistViewLabel={ __( 'List View' ) }\n\t\t>\n\t\t\t{ isZoomedOutViewExperimentEnabled &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! hasFixedToolbar && (\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-site-header-edit-mode__zoom-out-view-toggle\"\n\t\t\t\t\t\ticon={ chevronUpDown }\n\t\t\t\t\t\tisPressed={ isZoomedOutView }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'Zoom-out View' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetDeviceType( 'Desktop' );\n\t\t\t\t\t\t\t__unstableSetEditorMode(\n\t\t\t\t\t\t\t\tisZoomedOutView ? 'edit' : 'zoom-out'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t</EditorDocumentTools>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,MAAM,EAAEC,WAAW,QAAQ,uBAAuB;AAC3D,SACCP,KAAK,IAAIQ,WAAW,EACpBC,WAAW,IAAIC,iBAAiB,QAC1B,mBAAmB;;AAE1B;AACA;AACA;AACA,SAASV,KAAK,IAAIW,aAAa,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC,aAAa,EAAEC;AAAoB,CAAC,GAAGF,MAAM,CAAEF,iBAAkB,CAAC;AAE1E,eAAe,SAASG,aAAaA,CAAE;EACtCE,eAAe;EACfC,eAAe;EACfC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAa,CAAC,GAAGhB,SAAS,CAAIiB,MAAM,IAAM;IACjD,MAAM;MAAEC;IAAc,CAAC,GAAGD,MAAM,CAAER,aAAc,CAAC;IAEjD,OAAO;MACNO,YAAY,EAAEE,aAAa,CAAC,CAAC,KAAK;IACnC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC;EAAwB,CAAC,GAAGlB,WAAW,CAAEF,gBAAiB,CAAC;EACnE,MAAM;IAAEqB;EAAc,CAAC,GAAGnB,WAAW,CAAEK,WAAY,CAAC;EACpD,MAAMe,eAAe,GAAGxB,gBAAgB,CAAE,QAAS,CAAC;EACpD,MAAMyB,gCAAgC,GACrCC,MAAM,EAAEC,iCAAiC,IAAIR,YAAY;EAC1D,MAAMS,eAAe,GAAGZ,eAAe,KAAK,UAAU;EAEtD,OACCa,aAAA,CAACd,mBAAmB;IACnBe,iBAAiB,EAAG,CAAEX,YAAc;IACpCY,aAAa,EAAG1B,EAAE,CAAE,WAAY;EAAG,GAEjCoB,gCAAgC,IACjCD,eAAe,IACf,CAAEN,iBAAiB,IACnB,CAAED,eAAe,IAChBY,aAAA,CAACrB,WAAW;IACXwB,EAAE,EAAGzB,MAAQ;IACb0B,SAAS,EAAC,kDAAkD;IAC5DC,IAAI,EAAG5B,aAAe;IACtB6B,SAAS,EAAGP;IACZ;IACAQ,KAAK,EAAG/B,EAAE,CAAE,eAAgB,CAAG;IAC/BgC,OAAO,EAAGA,CAAA,KAAM;MACfd,aAAa,CAAE,SAAU,CAAC;MAC1BD,uBAAuB,CACtBM,eAAe,GAAG,MAAM,GAAG,UAC5B,CAAC;IACF,CAAG;IACHU,IAAI,EAAC;EAAS,CACd,CAEiB,CAAC;AAExB"}
+{"version":3,"names":["useViewportMatch","store","blockEditorStore","useSelect","useDispatch","__","chevronUpDown","Button","ToolbarItem","editorStore","privateApis","editorPrivateApis","unlock","DocumentTools","EditorDocumentTools","blockEditorMode","hasFixedToolbar","isDistractionFree","isVisualMode","select","getEditorMode","__unstableSetEditorMode","setDeviceType","isLargeViewport","isZoomedOutViewExperimentEnabled","window","__experimentalEnableZoomedOutView","isZoomedOutView","createElement","disableBlockTools","listViewLabel","as","className","icon","isPressed","label","onClick","size"],"sources":["@wordpress/edit-site/src/components/header-edit-mode/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { chevronUpDown } from '@wordpress/icons';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tstore as editorStore,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );\n\nexport default function DocumentTools( {\n\tblockEditorMode,\n\thasFixedToolbar,\n\tisDistractionFree,\n} ) {\n\tconst { isVisualMode } = useSelect( ( select ) => {\n\t\tconst { getEditorMode } = select( editorStore );\n\n\t\treturn {\n\t\t\tisVisualMode: getEditorMode() === 'visual',\n\t\t};\n\t}, [] );\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst { setDeviceType } = useDispatch( editorStore );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isZoomedOutViewExperimentEnabled =\n\t\twindow?.__experimentalEnableZoomedOutView && isVisualMode;\n\tconst isZoomedOutView = blockEditorMode === 'zoom-out';\n\n\treturn (\n\t\t<EditorDocumentTools\n\t\t\tdisableBlockTools={ ! isVisualMode }\n\t\t\tlistViewLabel={ __( 'List View' ) }\n\t\t>\n\t\t\t{ isZoomedOutViewExperimentEnabled &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! hasFixedToolbar && (\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-site-header-edit-mode__zoom-out-view-toggle\"\n\t\t\t\t\t\ticon={ chevronUpDown }\n\t\t\t\t\t\tisPressed={ isZoomedOutView }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'Zoom-out View' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetDeviceType( 'Desktop' );\n\t\t\t\t\t\t\t__unstableSetEditorMode(\n\t\t\t\t\t\t\t\tisZoomedOutView ? 'edit' : 'zoom-out'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t</EditorDocumentTools>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,MAAM,EAAEC,WAAW,QAAQ,uBAAuB;AAC3D,SACCP,KAAK,IAAIQ,WAAW,EACpBC,WAAW,IAAIC,iBAAiB,QAC1B,mBAAmB;;AAE1B;AACA;AACA;AACA,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC,aAAa,EAAEC;AAAoB,CAAC,GAAGF,MAAM,CAAED,iBAAkB,CAAC;AAE1E,eAAe,SAASE,aAAaA,CAAE;EACtCE,eAAe;EACfC,eAAe;EACfC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAa,CAAC,GAAGf,SAAS,CAAIgB,MAAM,IAAM;IACjD,MAAM;MAAEC;IAAc,CAAC,GAAGD,MAAM,CAAEV,WAAY,CAAC;IAE/C,OAAO;MACNS,YAAY,EAAEE,aAAa,CAAC,CAAC,KAAK;IACnC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC;EAAwB,CAAC,GAAGjB,WAAW,CAAEF,gBAAiB,CAAC;EACnE,MAAM;IAAEoB;EAAc,CAAC,GAAGlB,WAAW,CAAEK,WAAY,CAAC;EACpD,MAAMc,eAAe,GAAGvB,gBAAgB,CAAE,QAAS,CAAC;EACpD,MAAMwB,gCAAgC,GACrCC,MAAM,EAAEC,iCAAiC,IAAIR,YAAY;EAC1D,MAAMS,eAAe,GAAGZ,eAAe,KAAK,UAAU;EAEtD,OACCa,aAAA,CAACd,mBAAmB;IACnBe,iBAAiB,EAAG,CAAEX,YAAc;IACpCY,aAAa,EAAGzB,EAAE,CAAE,WAAY;EAAG,GAEjCmB,gCAAgC,IACjCD,eAAe,IACf,CAAEN,iBAAiB,IACnB,CAAED,eAAe,IAChBY,aAAA,CAACpB,WAAW;IACXuB,EAAE,EAAGxB,MAAQ;IACbyB,SAAS,EAAC,kDAAkD;IAC5DC,IAAI,EAAG3B,aAAe;IACtB4B,SAAS,EAAGP;IACZ;IACAQ,KAAK,EAAG9B,EAAE,CAAE,eAAgB,CAAG;IAC/B+B,OAAO,EAAGA,CAAA,KAAM;MACfd,aAAa,CAAE,SAAU,CAAC;MAC1BD,uBAAuB,CACtBM,eAAe,GAAG,MAAM,GAAG,UAC5B,CAAC;IACF,CAAG;IACHU,IAAI,EAAC;EAAS,CACd,CAEiB,CAAC;AAExB"}

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

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { BlockToolbar, store as blockEditorStore } from '@wordpress/block-editor';
+import { BlockToolbar, privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
@@ -28,6 +28,9 @@ import { store as editSiteStore } from '../../store';
 import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+const {
+  useShowBlockTools
+} = unlock(blockEditorPrivateApis);
 const {
   PostViewLink,
   PreviewDropdown
@@ -39,9 +42,7 @@ export default function HeaderEditMode() {
     blockEditorMode,
     blockSelectionStart,
     showIconLabels,
-    editorCanvasView,
-    hasFixedToolbar,
-    isZoomOutMode
+    editorCanvasView
   } = useSelect(select => {
     const {
       getEditedPostType
@@ -63,20 +64,20 @@ export default function HeaderEditMode() {
       blockSelectionStart: getBlockSelectionStart(),
       showIconLabels: getPreference('core', 'showIconLabels'),
       editorCanvasView: unlock(select(editSiteStore)).getEditorCanvasContainerView(),
-      hasFixedToolbar: getPreference('core', 'fixedToolbar'),
-      isDistractionFree: getPreference('core', 'distractionFree'),
-      isZoomOutMode: __unstableGetEditorMode() === 'zoom-out'
+      isDistractionFree: getPreference('core', 'distractionFree')
     };
   }, []);
   const isLargeViewport = useViewportMatch('medium');
-  const isTopToolbar = !isZoomOutMode && hasFixedToolbar && isLargeViewport;
+  const {
+    showFixedToolbar
+  } = useShowBlockTools();
+  const showTopToolbar = isLargeViewport && showFixedToolbar;
   const blockToolbarRef = useRef();
   const disableMotion = useReducedMotion();
   const hasDefaultEditorCanvasView = !useHasEditorCanvasContainer();
   const isFocusMode = FOCUSABLE_ENTITIES.includes(templateType);
   const isZoomedOutView = blockEditorMode === 'zoom-out';
   const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = useState(true);
-  const hasBlockSelected = !!blockSelectionStart;
   useEffect(() => {
     // If we have a new block selection, show the block tools
     if (blockSelectionStart) {
@@ -113,16 +114,16 @@ export default function HeaderEditMode() {
   }, createElement(DocumentTools, {
     blockEditorMode: blockEditorMode,
     isDistractionFree: isDistractionFree
-  }), isTopToolbar && createElement(Fragment, null, createElement("div", {
+  }), showTopToolbar && createElement(Fragment, null, createElement("div", {
     className: classnames('selected-block-tools-wrapper', {
-      'is-collapsed': isBlockToolsCollapsed || !hasBlockSelected
+      'is-collapsed': isBlockToolsCollapsed
     })
   }, createElement(BlockToolbar, {
     hideDragHandle: true
   })), createElement(Popover.Slot, {
     ref: blockToolbarRef,
     name: "block-toolbar"
-  }), hasBlockSelected && createElement(Button, {
+  }), createElement(Button, {
     className: "edit-site-header-edit-mode__block-tools-toggle",
     icon: isBlockToolsCollapsed ? next : previous,
     onClick: () => {
@@ -131,7 +132,7 @@ export default function HeaderEditMode() {
     label: isBlockToolsCollapsed ? __('Show block tools') : __('Hide block tools')
   }))), !isDistractionFree && createElement("div", {
     className: classnames('edit-site-header-edit-mode__center', {
-      'is-collapsed': !isBlockToolsCollapsed && isLargeViewport
+      'is-collapsed': !isBlockToolsCollapsed && showTopToolbar
     })
   }, !hasDefaultEditorCanvasView ? getEditorCanvasContainerTitle(editorCanvasView) : createElement(DocumentBar, null)), createElement("div", {
     className: "edit-site-header-edit-mode__end"
@@ -145,7 +146,9 @@ export default function HeaderEditMode() {
     })
   }, createElement(PreviewDropdown, {
     disabled: isFocusMode || !hasDefaultEditorCanvasView
-  })), createElement(PostViewLink, null), createElement(SaveButton, null), !isDistractionFree && createElement(PinnedItems.Slot, {
+  })), createElement(PostViewLink, null), createElement(SaveButton, {
+    size: "compact"
+  }), !isDistractionFree && createElement(PinnedItems.Slot, {
     scope: "core/edit-site"
   }), createElement(MoreMenu, {
     showIconLabels: showIconLabels