@wordpress/edit-site 5.34.0 → 6.0.0

package/build/components/global-styles/font-library-modal/font-demo.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","useRef","style","getFamilyPreviewStyle","name","customPreviewUrl","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","fontSize","lineHeight","opacity","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","_react","createElement","loading","alt","className","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction getDisplayFontFace( font ) {\n\t// if this IS a font face return it\n\tif ( font.fontStyle || font.fontWeight ) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) || font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text } ) {\n\tconst ref = useRef( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || font.name;\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_context","_previewStyles","_jsxRuntime","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","useRef","style","getFamilyPreviewStyle","name","customPreviewUrl","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","fontSize","lineHeight","opacity","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","jsx","children","loading","alt","className","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction getDisplayFontFace( font ) {\n\t// if this IS a font face return it\n\tif ( font.fontStyle || font.fontWeight ) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) || font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text } ) {\n\tconst ref = useRef( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || font.name;\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],"mappings":"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","ignoreList":[]}

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -17,25 +17,34 @@ function GoogleFontsConfirmDialog() {
     window.localStorage.setItem('wp-font-library-google-fonts-permission', 'true');
     window.dispatchEvent(new Event('storage'));
   };
-  return (0, _react.createElement)("div", {
-    className: "font-library__google-fonts-confirm"
-  }, (0, _react.createElement)(_components.Card, null, (0, _react.createElement)(_components.CardBody, null, (0, _react.createElement)(_components.__experimentalHeading, {
-    level: 2
-  }, (0, _i18n.__)('Connect to Google Fonts')), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 6
-  }), (0, _react.createElement)(_components.__experimentalText, {
-    as: "p"
-  }, (0, _i18n.__)('To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.')), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 3
-  }), (0, _react.createElement)(_components.__experimentalText, {
-    as: "p"
-  }, (0, _i18n.__)('You can alternatively upload files directly on the Upload tab.')), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 6
-  }), (0, _react.createElement)(_components.Button, {
-    __next40pxDefaultSize: true,
-    variant: "primary",
-    onClick: handleConfirm
-  }, (0, _i18n.__)('Allow access to Google Fonts')))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "font-library__google-fonts-confirm",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardBody, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
+          level: 2,
+          children: (0, _i18n.__)('Connect to Google Fonts')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          margin: 6
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          as: "p",
+          children: (0, _i18n.__)('To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          margin: 3
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          as: "p",
+          children: (0, _i18n.__)('You can alternatively upload files directly on the Upload tab.')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          margin: 6
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          __next40pxDefaultSize: true,
+          variant: "primary",
+          onClick: handleConfirm,
+          children: (0, _i18n.__)('Allow access to Google Fonts')
+        })]
+      })
+    })
+  });
 }
 var _default = exports.default = GoogleFontsConfirmDialog;
 //# sourceMappingURL=google-fonts-confirm-dialog.js.map

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_react","createElement","className","Card","CardBody","__experimentalHeading","level","__","__experimentalSpacer","margin","__experimentalText","as","Button","__next40pxDefaultSize","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,yCAAyC,EACzC,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,qBAAO;IAACC,KAAK,EAAG;EAAG,GACjB,IAAAC,QAAE,EAAE,yBAA0B,CACxB,CAAC,EACV,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAJ,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAJ,QAAE,EACH,gEACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAoB,MAAM;IACNC,qBAAqB;IACrBC,OAAO,EAAC,SAAS;IACjBC,OAAO,EAAGrB;EAAe,GAEvB,IAAAa,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEczB,wBAAwB","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_components","_jsxRuntime","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","jsx","className","children","Card","jsxs","CardBody","__experimentalHeading","level","__","__experimentalSpacer","margin","__experimentalText","as","Button","__next40pxDefaultSize","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAO+B,IAAAE,WAAA,GAAAF,OAAA;AAX/B;AACA;AACA;;AAWA,SAASG,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,yCAAyC,EACzC,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,oBACC,IAAAP,WAAA,CAAAQ,GAAA;IAAKC,SAAS,EAAC,oCAAoC;IAAAC,QAAA,eAClD,IAAAV,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAY,IAAI;MAAAD,QAAA,eACJ,IAAAV,WAAA,CAAAY,IAAA,EAACb,WAAA,CAAAc,QAAQ;QAAAH,QAAA,gBACR,IAAAV,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAe,qBAAO;UAACC,KAAK,EAAG,CAAG;UAAAL,QAAA,EACjB,IAAAM,QAAE,EAAE,yBAA0B;QAAC,CACzB,CAAC,eACV,IAAAhB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAkB,oBAAM;UAACC,MAAM,EAAG;QAAG,CAAE,CAAC,eACvB,IAAAlB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAoB,kBAAI;UAACC,EAAE,EAAC,GAAG;UAAAV,QAAA,EACT,IAAAM,QAAE,EACH,gOACD;QAAC,CACI,CAAC,eACP,IAAAhB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAkB,oBAAM;UAACC,MAAM,EAAG;QAAG,CAAE,CAAC,eACvB,IAAAlB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAoB,kBAAI;UAACC,EAAE,EAAC,GAAG;UAAAV,QAAA,EACT,IAAAM,QAAE,EACH,gEACD;QAAC,CACI,CAAC,eACP,IAAAhB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAkB,oBAAM;UAACC,MAAM,EAAG;QAAG,CAAE,CAAC,eACvB,IAAAlB,WAAA,CAAAQ,GAAA,EAACT,WAAA,CAAAsB,MAAM;UACNC,qBAAqB;UACrBC,OAAO,EAAC,SAAS;UACjBC,OAAO,EAAGtB,aAAe;UAAAQ,QAAA,EAEvB,IAAAM,QAAE,EAAE,8BAA+B;QAAC,CAC/B,CAAC;MAAA,CACA;IAAC,CACN;EAAC,CACH,CAAC;AAER;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1B,wBAAwB","ignoreList":[]}

package/build/components/global-styles/font-library-modal/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _coreData = require("@wordpress/core-data");
@@ -16,6 +15,7 @@ var _fontCollection = _interopRequireDefault(require("./font-collection"));
 var _uploadFonts = _interopRequireDefault(require("./upload-fonts"));
 var _context = require("./context");
 var _lockUnlock = require("../../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -66,44 +66,49 @@ function FontLibraryModal({
   const onSelect = () => {
     setNotice(null);
   };
-  return (0, _react.createElement)(_components.Modal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
     title: (0, _i18n.__)('Fonts'),
     onRequestClose: onRequestClose,
     isFullScreen: true,
-    className: "font-library-modal"
-  }, (0, _react.createElement)("div", {
-    className: "font-library-modal__tabs"
-  }, (0, _react.createElement)(Tabs, {
-    defaultTabId: defaultTabId,
-    onSelect: onSelect
-  }, (0, _react.createElement)(Tabs.TabList, null, tabs.map(({
-    id,
-    title
-  }) => (0, _react.createElement)(Tabs.Tab, {
-    key: id,
-    tabId: id
-  }, title))), tabs.map(({
-    id
-  }) => {
-    let contents;
-    switch (id) {
-      case 'upload-fonts':
-        contents = (0, _react.createElement)(_uploadFonts.default, null);
-        break;
-      case 'installed-fonts':
-        contents = (0, _react.createElement)(_installedFonts.default, null);
-        break;
-      default:
-        contents = (0, _react.createElement)(_fontCollection.default, {
-          slug: id
-        });
-    }
-    return (0, _react.createElement)(Tabs.TabPanel, {
-      key: id,
-      tabId: id,
-      focusable: false
-    }, contents);
-  }))));
+    className: "font-library-modal",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "font-library-modal__tabs",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
+        defaultTabId: defaultTabId,
+        onSelect: onSelect,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
+          children: tabs.map(({
+            id,
+            title
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
+            tabId: id,
+            children: title
+          }, id))
+        }), tabs.map(({
+          id
+        }) => {
+          let contents;
+          switch (id) {
+            case 'upload-fonts':
+              contents = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uploadFonts.default, {});
+              break;
+            case 'installed-fonts':
+              contents = /*#__PURE__*/(0, _jsxRuntime.jsx)(_installedFonts.default, {});
+              break;
+            default:
+              contents = /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontCollection.default, {
+                slug: id
+              });
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
+            tabId: id,
+            focusable: false,
+            children: contents
+          }, id);
+        })]
+      })
+    })
+  });
 }
 var _default = exports.default = FontLibraryModal;
 //# sourceMappingURL=index.js.map

package/build/components/global-styles/font-library-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","_coreData","_data","_element","_installedFonts","_interopRequireDefault","_fontCollection","_uploadFonts","_context","_lockUnlock","Tabs","unlock","componentsPrivateApis","DEFAULT_TAB","id","title","_x","UPLOAD_TAB","__","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","defaultTabId","setNotice","useContext","FontLibraryContext","canUserCreate","useSelect","select","canUser","coreStore","tabs","push","onSelect","_react","createElement","Modal","isFullScreen","className","TabList","Tab","key","tabId","contents","default","TabPanel","focusable","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TAB = {\n\tid: 'installed-fonts',\n\ttitle: _x( 'Library', 'Font library' ),\n};\n\nconst UPLOAD_TAB = {\n\tid: 'upload-fonts',\n\ttitle: __( 'Upload' ),\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tdefaultTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\tconst canUserCreate = useSelect( ( select ) => {\n\t\tconst { canUser } = select( coreStore );\n\t\treturn canUser( 'create', 'font-families' );\n\t}, [] );\n\n\tconst tabs = [ DEFAULT_TAB ];\n\n\tif ( canUserCreate ) {\n\t\ttabs.push( UPLOAD_TAB );\n\t\ttabs.push( ...tabsFromCollections( collections || [] ) );\n\t}\n\n\t// Reset notice when new tab is selected.\n\tconst onSelect = () => {\n\t\tsetNotice( null );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_components","_coreData","_data","_element","_installedFonts","_interopRequireDefault","_fontCollection","_uploadFonts","_context","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","DEFAULT_TAB","id","title","_x","UPLOAD_TAB","__","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","defaultTabId","setNotice","useContext","FontLibraryContext","canUserCreate","useSelect","select","canUser","coreStore","tabs","push","onSelect","jsx","Modal","isFullScreen","className","children","jsxs","TabList","Tab","tabId","contents","default","TabPanel","focusable","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TAB = {\n\tid: 'installed-fonts',\n\ttitle: _x( 'Library', 'Font library' ),\n};\n\nconst UPLOAD_TAB = {\n\tid: 'upload-fonts',\n\ttitle: __( 'Upload' ),\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tdefaultTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\tconst canUserCreate = useSelect( ( select ) => {\n\t\tconst { canUser } = select( coreStore );\n\t\treturn canUser( 'create', 'font-families' );\n\t}, [] );\n\n\tconst tabs = [ DEFAULT_TAB ];\n\n\tif ( canUserCreate ) {\n\t\ttabs.push( UPLOAD_TAB );\n\t\ttabs.push( ...tabsFromCollections( collections || [] ) );\n\t}\n\n\t// Reset notice when new tab is selected.\n\tconst onSelect = () => {\n\t\tsetNotice( null );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":"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","ignoreList":[]}

package/build/components/global-styles/font-library-modal/installed-fonts.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _coreData = require("@wordpress/core-data");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
-var _lockUnlock = require("../../../lock-unlock");
+var _blockEditor = require("@wordpress/block-editor");
 var _context = require("./context");
 var _fontCard = _interopRequireDefault(require("./font-card"));
 var _libraryFontVariant = _interopRequireDefault(require("./library-font-variant"));
 var _sortFontFaces = require("./utils/sort-font-faces");
+var _utils = require("./utils");
+var _lockUnlock = require("../../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -26,13 +28,12 @@ var _sortFontFaces = require("./utils/sort-font-faces");
  */
 
 const {
-  ProgressBar
-} = (0, _lockUnlock.unlock)(_components.privateApis);
+  useGlobalSetting
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 function InstalledFonts() {
   const {
     baseCustomFonts,
     libraryFontSelected,
-    baseThemeFonts,
     handleSetLibraryFontSelected,
     refreshLibrary,
     uninstallFontFamily,
@@ -40,12 +41,27 @@ function InstalledFonts() {
     isInstalling,
     saveFontFamilies,
     getFontFacesActivated,
-    fontFamiliesHasChanges,
     notice,
     setNotice,
     fontFamilies
   } = (0, _element.useContext)(_context.FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = (0, _element.useState)(false);
+  const [baseFontFamilies] = useGlobalSetting('typography.fontFamilies', undefined, 'base');
+  const globalStylesId = (0, _data.useSelect)(select => {
+    const {
+      __experimentalGetCurrentGlobalStylesId
+    } = select(_coreData.store);
+    return __experimentalGetCurrentGlobalStylesId();
+  });
+  const globalStyles = (0, _coreData.useEntityRecord)('root', 'globalStyles', globalStylesId);
+  const fontFamiliesHasChanges = !!globalStyles?.edits?.settings?.typography?.fontFamilies;
+  const themeFonts = fontFamilies?.theme ? fontFamilies.theme.map(f => (0, _utils.setUIValuesNeeded)(f, {
+    source: 'theme'
+  })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  const themeFontsSlugs = new Set(themeFonts.map(f => f.slug));
+  const baseThemeFonts = baseFontFamilies?.theme ? themeFonts.concat(baseFontFamilies.theme.filter(f => !themeFontsSlugs.has(f.slug)).map(f => (0, _utils.setUIValuesNeeded)(f, {
+    source: 'theme'
+  })).sort((a, b) => a.name.localeCompare(b.name))) : [];
   const customFontFamilyId = libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
   const canUserDelete = (0, _data.useSelect)(select => {
     const {
@@ -80,105 +96,132 @@ function InstalledFonts() {
     handleSetLibraryFontSelected(libraryFontSelected);
     refreshLibrary();
   }, []);
-  return (0, _react.createElement)("div", {
-    className: "font-library-modal__tabpanel-layout"
-  }, isResolvingLibrary && (0, _react.createElement)("div", {
-    className: "font-library-modal__loading"
-  }, (0, _react.createElement)(ProgressBar, null)), !isResolvingLibrary && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalNavigatorProvider, {
-    initialPath: libraryFontSelected ? '/fontFamily' : '/'
-  }, (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
-    path: "/"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: "8"
-  }, notice && (0, _react.createElement)(_components.Notice, {
-    status: notice.type,
-    onRemove: () => setNotice(null)
-  }, notice.message), baseCustomFonts.length > 0 && (0, _react.createElement)(_components.__experimentalVStack, null, (0, _react.createElement)("h2", {
-    className: "font-library-modal__fonts-title"
-  }, (0, _i18n.__)('Installed Fonts')), (0, _react.createElement)("ul", {
-    role: "list",
-    className: "font-library-modal__fonts-list"
-  }, baseCustomFonts.map(font => (0, _react.createElement)("li", {
-    key: font.slug,
-    className: "font-library-modal__fonts-list-item"
-  }, (0, _react.createElement)(_fontCard.default, {
-    font: font,
-    navigatorPath: '/fontFamily',
-    variantsText: getFontCardVariantsText(font),
-    onClick: () => {
-      handleSetLibraryFontSelected(font);
-    }
-  }))))), baseThemeFonts.length > 0 && (0, _react.createElement)(_components.__experimentalVStack, null, (0, _react.createElement)("h2", {
-    className: "font-library-modal__fonts-title"
-  }, (0, _i18n.__)('Theme Fonts')), (0, _react.createElement)("ul", {
-    role: "list",
-    className: "font-library-modal__fonts-list"
-  }, baseThemeFonts.map(font => (0, _react.createElement)("li", {
-    key: font.slug,
-    className: "font-library-modal__fonts-list-item"
-  }, (0, _react.createElement)(_fontCard.default, {
-    font: font,
-    navigatorPath: '/fontFamily',
-    variantsText: getFontCardVariantsText(font),
-    onClick: () => {
-      handleSetLibraryFontSelected(font);
-    }
-  }))))))), (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
-    path: "/fontFamily"
-  }, (0, _react.createElement)(ConfirmDeleteDialog, {
-    font: libraryFontSelected,
-    isOpen: isConfirmDeleteOpen,
-    setIsOpen: setIsConfirmDeleteOpen,
-    setNotice: setNotice,
-    uninstallFontFamily: uninstallFontFamily,
-    handleSetLibraryFontSelected: handleSetLibraryFontSelected
-  }), (0, _react.createElement)(_components.Flex, {
-    justify: "flex-start"
-  }, (0, _react.createElement)(_components.__experimentalNavigatorToParentButton, {
-    icon: _icons.chevronLeft,
-    size: "small",
-    onClick: () => {
-      handleSetLibraryFontSelected(null);
-    },
-    label: (0, _i18n.__)('Back')
-  }), (0, _react.createElement)(_components.__experimentalHeading, {
-    level: 2,
-    size: 13,
-    className: "edit-site-global-styles-header"
-  }, libraryFontSelected?.name)), notice && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 1
-  }), (0, _react.createElement)(_components.Notice, {
-    status: notice.type,
-    onRemove: () => setNotice(null)
-  }, notice.message), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 1
-  })), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 4
-  }), (0, _react.createElement)(_components.__experimentalText, null, (0, _i18n.__)('Choose font variants. Keep in mind that too many variants could make your site slower.')), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 4
-  }), (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 0
-  }, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 8
-  }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => (0, _react.createElement)(_libraryFontVariant.default, {
-    font: libraryFontSelected,
-    face: face,
-    key: `face${i}`
-  }))))), (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "flex-end",
-    className: "font-library-modal__tabpanel-layout__footer"
-  }, isInstalling && (0, _react.createElement)(ProgressBar, null), shouldDisplayDeleteButton && (0, _react.createElement)(_components.Button, {
-    isDestructive: true,
-    variant: "tertiary",
-    onClick: handleUninstallClick
-  }, (0, _i18n.__)('Delete')), (0, _react.createElement)(_components.Button, {
-    variant: "primary",
-    onClick: () => {
-      saveFontFamilies(fontFamilies);
-    },
-    disabled: !fontFamiliesHasChanges,
-    __experimentalIsFocusable: true
-  }, (0, _i18n.__)('Update')))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "font-library-modal__tabpanel-layout",
+    children: [isResolvingLibrary && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "font-library-modal__loading",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ProgressBar, {})
+    }), !isResolvingLibrary && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorProvider, {
+        initialPath: libraryFontSelected ? '/fontFamily' : '/',
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
+          path: "/",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+            spacing: "8",
+            children: [notice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+              status: notice.type,
+              onRemove: () => setNotice(null),
+              children: notice.message
+            }), baseCustomFonts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                className: "font-library-modal__fonts-title",
+                children: (0, _i18n.__)('Installed Fonts')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+                role: "list",
+                className: "font-library-modal__fonts-list",
+                children: baseCustomFonts.map(font => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  className: "font-library-modal__fonts-list-item",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontCard.default, {
+                    font: font,
+                    navigatorPath: "/fontFamily",
+                    variantsText: getFontCardVariantsText(font),
+                    onClick: () => {
+                      handleSetLibraryFontSelected(font);
+                    }
+                  })
+                }, font.slug))
+              })]
+            }), baseThemeFonts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                className: "font-library-modal__fonts-title",
+                children: (0, _i18n.__)('Theme Fonts')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+                role: "list",
+                className: "font-library-modal__fonts-list",
+                children: baseThemeFonts.map(font => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  className: "font-library-modal__fonts-list-item",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontCard.default, {
+                    font: font,
+                    navigatorPath: "/fontFamily",
+                    variantsText: getFontCardVariantsText(font),
+                    onClick: () => {
+                      handleSetLibraryFontSelected(font);
+                    }
+                  })
+                }, font.slug))
+              })]
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorScreen, {
+          path: "/fontFamily",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmDeleteDialog, {
+            font: libraryFontSelected,
+            isOpen: isConfirmDeleteOpen,
+            setIsOpen: setIsConfirmDeleteOpen,
+            setNotice: setNotice,
+            uninstallFontFamily: uninstallFontFamily,
+            handleSetLibraryFontSelected: handleSetLibraryFontSelected
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
+            justify: "flex-start",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorToParentButton, {
+              icon: _icons.chevronLeft,
+              size: "small",
+              onClick: () => {
+                handleSetLibraryFontSelected(null);
+              },
+              label: (0, _i18n.__)('Back')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
+              level: 2,
+              size: 13,
+              className: "edit-site-global-styles-header",
+              children: libraryFontSelected?.name
+            })]
+          }), notice && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+              margin: 1
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+              status: notice.type,
+              onRemove: () => setNotice(null),
+              children: notice.message
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+              margin: 1
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+            margin: 4
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            children: (0, _i18n.__)('Choose font variants. Keep in mind that too many variants could make your site slower.')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+            margin: 4
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+            spacing: 0,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+              margin: 8
+            }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_libraryFontVariant.default, {
+              font: libraryFontSelected,
+              face: face
+            }, `face${i}`))]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "flex-end",
+        className: "font-library-modal__tabpanel-layout__footer",
+        children: [isInstalling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ProgressBar, {}), shouldDisplayDeleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          isDestructive: true,
+          variant: "tertiary",
+          onClick: handleUninstallClick,
+          children: (0, _i18n.__)('Delete')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          variant: "primary",
+          onClick: () => {
+            saveFontFamilies(fontFamilies);
+          },
+          disabled: !fontFamiliesHasChanges,
+          __experimentalIsFocusable: true,
+          children: (0, _i18n.__)('Update')
+        })]
+      })]
+    })]
+  });
 }
 function ConfirmDeleteDialog({
   font,
@@ -210,14 +253,15 @@ function ConfirmDeleteDialog({
   const handleCancelUninstall = () => {
     setIsOpen(false);
   };
-  return (0, _react.createElement)(_components.__experimentalConfirmDialog, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
     isOpen: isOpen,
     cancelButtonText: (0, _i18n.__)('Cancel'),
     confirmButtonText: (0, _i18n.__)('Delete'),
     onCancel: handleCancelUninstall,
-    onConfirm: handleConfirmUninstall
-  }, font && (0, _i18n.sprintf)( /* translators: %s: Name of the font. */
-  (0, _i18n.__)('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name));
+    onConfirm: handleConfirmUninstall,
+    children: font && (0, _i18n.sprintf)( /* translators: %s: Name of the font. */
+    (0, _i18n.__)('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name)
+  });
 }
 var _default = exports.default = InstalledFonts;
 //# sourceMappingURL=installed-fonts.js.map