@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","getFacePreviewStyle","getFamilyPreviewStyle","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","style","name","customPreviewUrl","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","previewUrl","isPreviewImage","match","faceStyles","textDemoStyle","fontSize","lineHeight","opacity","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","className"],"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":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","getFacePreviewStyle","getFamilyPreviewStyle","jsx","_jsx","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","style","name","customPreviewUrl","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","previewUrl","isPreviewImage","match","faceStyles","textDemoStyle","fontSize","lineHeight","opacity","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","children","loading","alt","className"],"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-module/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -1,34 +1,44 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Card, CardBody, __experimentalHeading as Heading, __experimentalText as Text, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function GoogleFontsConfirmDialog() {
   const handleConfirm = () => {
     // eslint-disable-next-line no-undef
     window.localStorage.setItem('wp-font-library-google-fonts-permission', 'true');
     window.dispatchEvent(new Event('storage'));
   };
-  return createElement("div", {
-    className: "font-library__google-fonts-confirm"
-  }, createElement(Card, null, createElement(CardBody, null, createElement(Heading, {
-    level: 2
-  }, __('Connect to Google Fonts')), createElement(Spacer, {
-    margin: 6
-  }), createElement(Text, {
-    as: "p"
-  }, __('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.')), createElement(Spacer, {
-    margin: 3
-  }), createElement(Text, {
-    as: "p"
-  }, __('You can alternatively upload files directly on the Upload tab.')), createElement(Spacer, {
-    margin: 6
-  }), createElement(Button, {
-    __next40pxDefaultSize: true,
-    variant: "primary",
-    onClick: handleConfirm
-  }, __('Allow access to Google Fonts')))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "font-library__google-fonts-confirm",
+    children: /*#__PURE__*/_jsx(Card, {
+      children: /*#__PURE__*/_jsxs(CardBody, {
+        children: [/*#__PURE__*/_jsx(Heading, {
+          level: 2,
+          children: __('Connect to Google Fonts')
+        }), /*#__PURE__*/_jsx(Spacer, {
+          margin: 6
+        }), /*#__PURE__*/_jsx(Text, {
+          as: "p",
+          children: __('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__*/_jsx(Spacer, {
+          margin: 3
+        }), /*#__PURE__*/_jsx(Text, {
+          as: "p",
+          children: __('You can alternatively upload files directly on the Upload tab.')
+        }), /*#__PURE__*/_jsx(Spacer, {
+          margin: 6
+        }), /*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
+          variant: "primary",
+          onClick: handleConfirm,
+          children: __('Allow access to Google Fonts')
+        })]
+      })
+    })
+  });
 }
 export default GoogleFontsConfirmDialog;
 //# sourceMappingURL=google-fonts-confirm-dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","Button","Card","CardBody","__experimentalHeading","Heading","__experimentalText","Text","__experimentalSpacer","Spacer","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","createElement","className","level","margin","as","__next40pxDefaultSize","variant","onClick"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAE9B,SAASC,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,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClDD,aAAA,CAACf,IAAI,QACJe,aAAA,CAACd,QAAQ,QACRc,aAAA,CAACZ,OAAO;IAACc,KAAK,EAAG;EAAG,GACjBnB,EAAE,CAAE,yBAA0B,CACxB,CAAC,EACViB,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACc,EAAE,EAAC;EAAG,GACTrB,EAAE,CACH,gOACD,CACK,CAAC,EACPiB,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACc,EAAE,EAAC;EAAG,GACTrB,EAAE,CACH,gEACD,CACK,CAAC,EACPiB,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAAChB,MAAM;IACNqB,qBAAqB;IACrBC,OAAO,EAAC,SAAS;IACjBC,OAAO,EAAGb;EAAe,GAEvBX,EAAE,CAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAEA,eAAeU,wBAAwB","ignoreList":[]}
+{"version":3,"names":["__","Button","Card","CardBody","__experimentalHeading","Heading","__experimentalText","Text","__experimentalSpacer","Spacer","jsx","_jsx","jsxs","_jsxs","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","className","children","level","margin","as","__next40pxDefaultSize","variant","onClick"],"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":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE/B,SAASC,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,oBACCT,IAAA;IAAKU,SAAS,EAAC,oCAAoC;IAAAC,QAAA,eAClDX,IAAA,CAACT,IAAI;MAAAoB,QAAA,eACJT,KAAA,CAACV,QAAQ;QAAAmB,QAAA,gBACRX,IAAA,CAACN,OAAO;UAACkB,KAAK,EAAG,CAAG;UAAAD,QAAA,EACjBtB,EAAE,CAAE,yBAA0B;QAAC,CACzB,CAAC,eACVW,IAAA,CAACF,MAAM;UAACe,MAAM,EAAG;QAAG,CAAE,CAAC,eACvBb,IAAA,CAACJ,IAAI;UAACkB,EAAE,EAAC,GAAG;UAAAH,QAAA,EACTtB,EAAE,CACH,gOACD;QAAC,CACI,CAAC,eACPW,IAAA,CAACF,MAAM;UAACe,MAAM,EAAG;QAAG,CAAE,CAAC,eACvBb,IAAA,CAACJ,IAAI;UAACkB,EAAE,EAAC,GAAG;UAAAH,QAAA,EACTtB,EAAE,CACH,gEACD;QAAC,CACI,CAAC,eACPW,IAAA,CAACF,MAAM;UAACe,MAAM,EAAG;QAAG,CAAE,CAAC,eACvBb,IAAA,CAACV,MAAM;UACNyB,qBAAqB;UACrBC,OAAO,EAAC,SAAS;UACjBC,OAAO,EAAGb,aAAe;UAAAO,QAAA,EAEvBtB,EAAE,CAAE,8BAA+B;QAAC,CAC/B,CAAC;MAAA,CACA;IAAC,CACN;EAAC,CACH,CAAC;AAER;AAEA,eAAec,wBAAwB","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -16,6 +15,8 @@ import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
 import { unlock } from '../../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Tabs
 } = unlock(componentsPrivateApis);
@@ -58,44 +59,49 @@ function FontLibraryModal({
   const onSelect = () => {
     setNotice(null);
   };
-  return createElement(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     title: __('Fonts'),
     onRequestClose: onRequestClose,
     isFullScreen: true,
-    className: "font-library-modal"
-  }, createElement("div", {
-    className: "font-library-modal__tabs"
-  }, createElement(Tabs, {
-    defaultTabId: defaultTabId,
-    onSelect: onSelect
-  }, createElement(Tabs.TabList, null, tabs.map(({
-    id,
-    title
-  }) => createElement(Tabs.Tab, {
-    key: id,
-    tabId: id
-  }, title))), tabs.map(({
-    id
-  }) => {
-    let contents;
-    switch (id) {
-      case 'upload-fonts':
-        contents = createElement(UploadFonts, null);
-        break;
-      case 'installed-fonts':
-        contents = createElement(InstalledFonts, null);
-        break;
-      default:
-        contents = createElement(FontCollection, {
-          slug: id
-        });
-    }
-    return createElement(Tabs.TabPanel, {
-      key: id,
-      tabId: id,
-      focusable: false
-    }, contents);
-  }))));
+    className: "font-library-modal",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "font-library-modal__tabs",
+      children: /*#__PURE__*/_jsxs(Tabs, {
+        defaultTabId: defaultTabId,
+        onSelect: onSelect,
+        children: [/*#__PURE__*/_jsx(Tabs.TabList, {
+          children: tabs.map(({
+            id,
+            title
+          }) => /*#__PURE__*/_jsx(Tabs.Tab, {
+            tabId: id,
+            children: title
+          }, id))
+        }), tabs.map(({
+          id
+        }) => {
+          let contents;
+          switch (id) {
+            case 'upload-fonts':
+              contents = /*#__PURE__*/_jsx(UploadFonts, {});
+              break;
+            case 'installed-fonts':
+              contents = /*#__PURE__*/_jsx(InstalledFonts, {});
+              break;
+            default:
+              contents = /*#__PURE__*/_jsx(FontCollection, {
+                slug: id
+              });
+          }
+          return /*#__PURE__*/_jsx(Tabs.TabPanel, {
+            tabId: id,
+            focusable: false,
+            children: contents
+          }, id);
+        })]
+      })
+    })
+  });
 }
 export default FontLibraryModal;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","_x","Modal","privateApis","componentsPrivateApis","store","coreStore","useSelect","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","Tabs","DEFAULT_TAB","id","title","UPLOAD_TAB","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","defaultTabId","setNotice","canUserCreate","select","canUser","tabs","push","onSelect","createElement","isFullScreen","className","TabList","Tab","key","tabId","contents","TabPanel","focusable"],"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":["__","_x","Modal","privateApis","componentsPrivateApis","store","coreStore","useSelect","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","DEFAULT_TAB","id","title","UPLOAD_TAB","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","defaultTabId","setNotice","canUserCreate","select","canUser","tabs","push","onSelect","isFullScreen","className","children","TabList","Tab","tabId","contents","TabPanel","focusable"],"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-module/components/global-styles/font-library-modal/installed-fonts.js

@@ -1,30 +1,33 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalConfirmDialog as ConfirmDialog, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalUseNavigator as useNavigator, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, Flex, Notice, privateApis as componentsPrivateApis } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { Button, __experimentalConfirmDialog as ConfirmDialog, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalUseNavigator as useNavigator, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, Flex, Notice, ProgressBar } from '@wordpress/components';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
+import { setUIValuesNeeded } from './utils';
+import { unlock } from '../../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
-  ProgressBar
-} = unlock(componentsPrivateApis);
+  useGlobalSetting
+} = unlock(blockEditorPrivateApis);
 function InstalledFonts() {
   const {
     baseCustomFonts,
     libraryFontSelected,
-    baseThemeFonts,
     handleSetLibraryFontSelected,
     refreshLibrary,
     uninstallFontFamily,
@@ -32,12 +35,27 @@ function InstalledFonts() {
     isInstalling,
     saveFontFamilies,
     getFontFacesActivated,
-    fontFamiliesHasChanges,
     notice,
     setNotice,
     fontFamilies
   } = useContext(FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [baseFontFamilies] = useGlobalSetting('typography.fontFamilies', undefined, 'base');
+  const globalStylesId = useSelect(select => {
+    const {
+      __experimentalGetCurrentGlobalStylesId
+    } = select(coreStore);
+    return __experimentalGetCurrentGlobalStylesId();
+  });
+  const globalStyles = useEntityRecord('root', 'globalStyles', globalStylesId);
+  const fontFamiliesHasChanges = !!globalStyles?.edits?.settings?.typography?.fontFamilies;
+  const themeFonts = fontFamilies?.theme ? fontFamilies.theme.map(f => 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 => setUIValuesNeeded(f, {
+    source: 'theme'
+  })).sort((a, b) => a.name.localeCompare(b.name))) : [];
   const customFontFamilyId = libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
   const canUserDelete = useSelect(select => {
     const {
@@ -72,105 +90,132 @@ function InstalledFonts() {
     handleSetLibraryFontSelected(libraryFontSelected);
     refreshLibrary();
   }, []);
-  return createElement("div", {
-    className: "font-library-modal__tabpanel-layout"
-  }, isResolvingLibrary && createElement("div", {
-    className: "font-library-modal__loading"
-  }, createElement(ProgressBar, null)), !isResolvingLibrary && createElement(Fragment, null, createElement(NavigatorProvider, {
-    initialPath: libraryFontSelected ? '/fontFamily' : '/'
-  }, createElement(NavigatorScreen, {
-    path: "/"
-  }, createElement(VStack, {
-    spacing: "8"
-  }, notice && createElement(Notice, {
-    status: notice.type,
-    onRemove: () => setNotice(null)
-  }, notice.message), baseCustomFonts.length > 0 && createElement(VStack, null, createElement("h2", {
-    className: "font-library-modal__fonts-title"
-  }, __('Installed Fonts')), createElement("ul", {
-    role: "list",
-    className: "font-library-modal__fonts-list"
-  }, baseCustomFonts.map(font => createElement("li", {
-    key: font.slug,
-    className: "font-library-modal__fonts-list-item"
-  }, createElement(FontCard, {
-    font: font,
-    navigatorPath: '/fontFamily',
-    variantsText: getFontCardVariantsText(font),
-    onClick: () => {
-      handleSetLibraryFontSelected(font);
-    }
-  }))))), baseThemeFonts.length > 0 && createElement(VStack, null, createElement("h2", {
-    className: "font-library-modal__fonts-title"
-  }, __('Theme Fonts')), createElement("ul", {
-    role: "list",
-    className: "font-library-modal__fonts-list"
-  }, baseThemeFonts.map(font => createElement("li", {
-    key: font.slug,
-    className: "font-library-modal__fonts-list-item"
-  }, createElement(FontCard, {
-    font: font,
-    navigatorPath: '/fontFamily',
-    variantsText: getFontCardVariantsText(font),
-    onClick: () => {
-      handleSetLibraryFontSelected(font);
-    }
-  }))))))), createElement(NavigatorScreen, {
-    path: "/fontFamily"
-  }, createElement(ConfirmDeleteDialog, {
-    font: libraryFontSelected,
-    isOpen: isConfirmDeleteOpen,
-    setIsOpen: setIsConfirmDeleteOpen,
-    setNotice: setNotice,
-    uninstallFontFamily: uninstallFontFamily,
-    handleSetLibraryFontSelected: handleSetLibraryFontSelected
-  }), createElement(Flex, {
-    justify: "flex-start"
-  }, createElement(NavigatorToParentButton, {
-    icon: chevronLeft,
-    size: "small",
-    onClick: () => {
-      handleSetLibraryFontSelected(null);
-    },
-    label: __('Back')
-  }), createElement(Heading, {
-    level: 2,
-    size: 13,
-    className: "edit-site-global-styles-header"
-  }, libraryFontSelected?.name)), notice && createElement(Fragment, null, createElement(Spacer, {
-    margin: 1
-  }), createElement(Notice, {
-    status: notice.type,
-    onRemove: () => setNotice(null)
-  }, notice.message), createElement(Spacer, {
-    margin: 1
-  })), createElement(Spacer, {
-    margin: 4
-  }), createElement(Text, null, __('Choose font variants. Keep in mind that too many variants could make your site slower.')), createElement(Spacer, {
-    margin: 4
-  }), createElement(VStack, {
-    spacing: 0
-  }, createElement(Spacer, {
-    margin: 8
-  }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => createElement(LibraryFontVariant, {
-    font: libraryFontSelected,
-    face: face,
-    key: `face${i}`
-  }))))), createElement(HStack, {
-    justify: "flex-end",
-    className: "font-library-modal__tabpanel-layout__footer"
-  }, isInstalling && createElement(ProgressBar, null), shouldDisplayDeleteButton && createElement(Button, {
-    isDestructive: true,
-    variant: "tertiary",
-    onClick: handleUninstallClick
-  }, __('Delete')), createElement(Button, {
-    variant: "primary",
-    onClick: () => {
-      saveFontFamilies(fontFamilies);
-    },
-    disabled: !fontFamiliesHasChanges,
-    __experimentalIsFocusable: true
-  }, __('Update')))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "font-library-modal__tabpanel-layout",
+    children: [isResolvingLibrary && /*#__PURE__*/_jsx("div", {
+      className: "font-library-modal__loading",
+      children: /*#__PURE__*/_jsx(ProgressBar, {})
+    }), !isResolvingLibrary && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(NavigatorProvider, {
+        initialPath: libraryFontSelected ? '/fontFamily' : '/',
+        children: [/*#__PURE__*/_jsx(NavigatorScreen, {
+          path: "/",
+          children: /*#__PURE__*/_jsxs(VStack, {
+            spacing: "8",
+            children: [notice && /*#__PURE__*/_jsx(Notice, {
+              status: notice.type,
+              onRemove: () => setNotice(null),
+              children: notice.message
+            }), baseCustomFonts.length > 0 && /*#__PURE__*/_jsxs(VStack, {
+              children: [/*#__PURE__*/_jsx("h2", {
+                className: "font-library-modal__fonts-title",
+                children: __('Installed Fonts')
+              }), /*#__PURE__*/_jsx("ul", {
+                role: "list",
+                className: "font-library-modal__fonts-list",
+                children: baseCustomFonts.map(font => /*#__PURE__*/_jsx("li", {
+                  className: "font-library-modal__fonts-list-item",
+                  children: /*#__PURE__*/_jsx(FontCard, {
+                    font: font,
+                    navigatorPath: "/fontFamily",
+                    variantsText: getFontCardVariantsText(font),
+                    onClick: () => {
+                      handleSetLibraryFontSelected(font);
+                    }
+                  })
+                }, font.slug))
+              })]
+            }), baseThemeFonts.length > 0 && /*#__PURE__*/_jsxs(VStack, {
+              children: [/*#__PURE__*/_jsx("h2", {
+                className: "font-library-modal__fonts-title",
+                children: __('Theme Fonts')
+              }), /*#__PURE__*/_jsx("ul", {
+                role: "list",
+                className: "font-library-modal__fonts-list",
+                children: baseThemeFonts.map(font => /*#__PURE__*/_jsx("li", {
+                  className: "font-library-modal__fonts-list-item",
+                  children: /*#__PURE__*/_jsx(FontCard, {
+                    font: font,
+                    navigatorPath: "/fontFamily",
+                    variantsText: getFontCardVariantsText(font),
+                    onClick: () => {
+                      handleSetLibraryFontSelected(font);
+                    }
+                  })
+                }, font.slug))
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(NavigatorScreen, {
+          path: "/fontFamily",
+          children: [/*#__PURE__*/_jsx(ConfirmDeleteDialog, {
+            font: libraryFontSelected,
+            isOpen: isConfirmDeleteOpen,
+            setIsOpen: setIsConfirmDeleteOpen,
+            setNotice: setNotice,
+            uninstallFontFamily: uninstallFontFamily,
+            handleSetLibraryFontSelected: handleSetLibraryFontSelected
+          }), /*#__PURE__*/_jsxs(Flex, {
+            justify: "flex-start",
+            children: [/*#__PURE__*/_jsx(NavigatorToParentButton, {
+              icon: chevronLeft,
+              size: "small",
+              onClick: () => {
+                handleSetLibraryFontSelected(null);
+              },
+              label: __('Back')
+            }), /*#__PURE__*/_jsx(Heading, {
+              level: 2,
+              size: 13,
+              className: "edit-site-global-styles-header",
+              children: libraryFontSelected?.name
+            })]
+          }), notice && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Spacer, {
+              margin: 1
+            }), /*#__PURE__*/_jsx(Notice, {
+              status: notice.type,
+              onRemove: () => setNotice(null),
+              children: notice.message
+            }), /*#__PURE__*/_jsx(Spacer, {
+              margin: 1
+            })]
+          }), /*#__PURE__*/_jsx(Spacer, {
+            margin: 4
+          }), /*#__PURE__*/_jsx(Text, {
+            children: __('Choose font variants. Keep in mind that too many variants could make your site slower.')
+          }), /*#__PURE__*/_jsx(Spacer, {
+            margin: 4
+          }), /*#__PURE__*/_jsxs(VStack, {
+            spacing: 0,
+            children: [/*#__PURE__*/_jsx(Spacer, {
+              margin: 8
+            }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => /*#__PURE__*/_jsx(LibraryFontVariant, {
+              font: libraryFontSelected,
+              face: face
+            }, `face${i}`))]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justify: "flex-end",
+        className: "font-library-modal__tabpanel-layout__footer",
+        children: [isInstalling && /*#__PURE__*/_jsx(ProgressBar, {}), shouldDisplayDeleteButton && /*#__PURE__*/_jsx(Button, {
+          isDestructive: true,
+          variant: "tertiary",
+          onClick: handleUninstallClick,
+          children: __('Delete')
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onClick: () => {
+            saveFontFamilies(fontFamilies);
+          },
+          disabled: !fontFamiliesHasChanges,
+          __experimentalIsFocusable: true,
+          children: __('Update')
+        })]
+      })]
+    })]
+  });
 }
 function ConfirmDeleteDialog({
   font,
@@ -202,14 +247,15 @@ function ConfirmDeleteDialog({
   const handleCancelUninstall = () => {
     setIsOpen(false);
   };
-  return createElement(ConfirmDialog, {
+  return /*#__PURE__*/_jsx(ConfirmDialog, {
     isOpen: isOpen,
     cancelButtonText: __('Cancel'),
     confirmButtonText: __('Delete'),
     onCancel: handleCancelUninstall,
-    onConfirm: handleConfirmUninstall
-  }, font && sprintf( /* translators: %s: Name of the font. */
-  __('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name));
+    onConfirm: handleConfirmUninstall,
+    children: font && sprintf( /* translators: %s: Name of the font. */
+    __('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name)
+  });
 }
 export default InstalledFonts;
 //# sourceMappingURL=installed-fonts.js.map