@wordpress/edit-site 5.27.1 → 5.28.0

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

@@ -41,18 +41,12 @@ function FontFaceDemo({
   const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
   const faceStyles = (0, _previewStyles.getFacePreviewStyle)(fontFace);
   const textDemoStyle = {
-    whiteSpace: 'nowrap',
-    flexShrink: 0,
     fontSize: '18px',
+    lineHeight: 1,
     opacity: isAssetLoaded ? '1' : '0',
-    transition: 'opacity 0.3s ease-in-out',
     ...faceStyles,
     ...style
   };
-  const imageDemoStyle = {
-    height: '23px',
-    width: 'auto'
-  };
   (0, _element.useEffect)(() => {
     const observer = new window.IntersectionObserver(([entry]) => {
       setIsIntersecting(entry.isIntersecting);
@@ -70,18 +64,18 @@ function FontFaceDemo({
       }
     };
     loadAsset();
-  }, [fontFace, isIntersecting, loadFontFaceAsset]);
+  }, [fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage]);
   return (0, _react.createElement)("div", {
     ref: ref
   }, isPreviewImage ? (0, _react.createElement)("img", {
     src: previewUrl,
     loading: "lazy",
     alt: text,
-    style: imageDemoStyle
+    className: "font-library-modal__font-variant_demo-image"
   }) : (0, _react.createElement)(_components.__experimentalText, {
-    style: textDemoStyle
+    style: textDemoStyle,
+    className: "font-library-modal__font-variant_demo-text"
   }, text));
 }
-var _default = FontFaceDemo;
-exports.default = _default;
+var _default = exports.default = FontFaceDemo;
 //# sourceMappingURL=font-demo.js.map

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","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","_react","createElement","loading","alt","__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 { getFacePreviewStyle } 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 FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\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\twhiteSpace: 'nowrap',\n\t\tflexShrink: 0,\n\t\tfontSize: '18px',\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\ttransition: 'opacity 0.3s ease-in-out',\n\t\t...faceStyles,\n\t\t...style,\n\t};\n\tconst imageDemoStyle = {\n\t\theight: '23px',\n\t\twidth: 'auto',\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 ] );\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\tstyle={ imageDemoStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text style={ textDemoStyle }>{ text }</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_element","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","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 { getFacePreviewStyle } 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 FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\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...faceStyles,\n\t\t...style,\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 FontFaceDemo;\n"],"mappings":"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"}

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

@@ -53,6 +53,5 @@ function FontsGrid({
     }, child);
   }))));
 }
-var _default = FontsGrid;
-exports.default = _default;
+var _default = exports.default = FontsGrid;
 //# sourceMappingURL=fonts-grid.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","_react","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","key","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={ child.key } ref={ setLastItem }>\n\t\t\t\t\t\t\t\t\t{ child }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn <div key={ child.key }>{ child }</div>;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAiB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAF,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBxB,KAAK,IACN,IAAAoB,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA8B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CtB,KACG,CAAC,EACP,IAAAoB,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA+B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAAR,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDb,KAAK,CAACoB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKvB,UAAU,GAAG,CAAC,EAAG;MAC3B,OACC,IAAAY,MAAA,CAAAC,aAAA;QAAKW,GAAG,EAAGF,KAAK,CAACE,GAAK;QAACC,GAAG,EAAG7B;MAAa,GACvC0B,KACE,CAAC;IAER;IACA,OAAO,IAAAV,MAAA,CAAAC,aAAA;MAAKW,GAAG,EAAGF,KAAK,CAACE;IAAK,GAAGF,KAAY,CAAC;EAC9C,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcnC,SAAS;AAAAoC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_components","require","_element","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","_react","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","key","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={ child.key } ref={ setLastItem }>\n\t\t\t\t\t\t\t\t\t{ child }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn <div key={ child.key }>{ child }</div>;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAiB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAF,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBxB,KAAK,IACN,IAAAoB,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA8B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CtB,KACG,CAAC,EACP,IAAAoB,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA+B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAAR,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDb,KAAK,CAACoB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKvB,UAAU,GAAG,CAAC,EAAG;MAC3B,OACC,IAAAY,MAAA,CAAAC,aAAA;QAAKW,GAAG,EAAGF,KAAK,CAACE,GAAK;QAACC,GAAG,EAAG7B;MAAa,GACvC0B,KACE,CAAC;IAER;IACA,OAAO,IAAAV,MAAA,CAAAC,aAAA;MAAKW,GAAG,EAAGF,KAAK,CAACE;IAAK,GAAGF,KAAY,CAAC;EAC9C,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrC,SAAS"}

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

@@ -14,7 +14,7 @@ var _components = require("@wordpress/components");
 function GoogleFontsConfirmDialog() {
   const handleConfirm = () => {
     // eslint-disable-next-line no-undef
-    window.localStorage.setItem('wp-font-library-default-font-collection-permission', 'true');
+    window.localStorage.setItem('wp-font-library-google-fonts-permission', 'true');
     window.dispatchEvent(new Event('storage'));
   };
   return (0, _react.createElement)("div", {
@@ -29,13 +29,12 @@ function GoogleFontsConfirmDialog() {
     margin: 3
   }), (0, _react.createElement)(_components.__experimentalText, {
     as: "p"
-  }, (0, _i18n.__)('You can alternatively upload files directly on the Library tab.')), (0, _react.createElement)(_components.__experimentalSpacer, {
+  }, (0, _i18n.__)('You can alternatively upload files directly on the Upload tab.')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
   }), (0, _react.createElement)(_components.Button, {
     variant: "primary",
     onClick: handleConfirm
   }, (0, _i18n.__)('Allow access to Google Fonts')))));
 }
-var _default = GoogleFontsConfirmDialog;
-exports.default = _default;
+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","__experimentalText","as","__experimentalSpacer","margin","__","Button","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__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-default-font-collection-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<Text as=\"h3\">Connect to Google Fonts</Text>\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 Library 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 variant=\"primary\" onClick={ handleConfirm }>\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;;AAUA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDAAoD,EACpD,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,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,iEACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcpB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_react","createElement","className","Card","CardBody","__experimentalText","as","__experimentalSpacer","margin","__","Button","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__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<Text as=\"h3\">Connect to Google Fonts</Text>\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 variant=\"primary\" onClick={ handleConfirm }>\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;;AAUA,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,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gEACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,wBAAwB"}

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

@@ -37,16 +37,22 @@ const tabsFromCollections = collections => collections.map(({
   name
 }) => ({
   id: slug,
-  title: collections.length === 1 && slug === 'default-font-collection' ? (0, _i18n.__)('Install Fonts') : name
+  title: collections.length === 1 && slug === 'google-fonts' ? (0, _i18n.__)('Install Fonts') : name
 }));
 function FontLibraryModal({
   onRequestClose,
   initialTabId = 'installed-fonts'
 }) {
   const {
-    collections
+    collections,
+    setNotice
   } = (0, _element.useContext)(_context.FontLibraryContext);
   const tabs = [...DEFAULT_TABS, ...tabsFromCollections(collections || [])];
+
+  // Reset notice when new tab is selected.
+  const onSelect = () => {
+    setNotice(null);
+  };
   return (0, _react.createElement)(_components.Modal, {
     title: (0, _i18n.__)('Fonts'),
     onRequestClose: onRequestClose,
@@ -55,7 +61,8 @@ function FontLibraryModal({
   }, (0, _react.createElement)("div", {
     className: "font-library-modal__tabs"
   }, (0, _react.createElement)(Tabs, {
-    initialTabId: initialTabId
+    initialTabId: initialTabId,
+    onSelect: onSelect
   }, (0, _react.createElement)(Tabs.TabList, null, tabs.map(({
     id,
     title
@@ -85,6 +92,5 @@ function FontLibraryModal({
     }, contents);
   }))));
 }
-var _default = FontLibraryModal;
-exports.default = _default;
+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","_element","_installedFonts","_interopRequireDefault","_fontCollection","_uploadFonts","_context","_lockUnlock","Tabs","unlock","componentsPrivateApis","DEFAULT_TABS","id","title","__","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","initialTabId","useContext","FontLibraryContext","tabs","_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 { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\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_TABS = [\n\t{\n\t\tid: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t},\n\t{\n\t\tid: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabId = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...tabsFromCollections( collections || [] ),\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 initialTabId={ initialTabId }>\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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"}
+{"version":3,"names":["_i18n","require","_components","_element","_installedFonts","_interopRequireDefault","_fontCollection","_uploadFonts","_context","_lockUnlock","Tabs","unlock","componentsPrivateApis","DEFAULT_TABS","id","title","__","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","initialTabId","setNotice","useContext","FontLibraryContext","tabs","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 { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\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_TABS = [\n\t{\n\t\tid: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t},\n\t{\n\t\tid: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t},\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\tinitialTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...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 initialTabId={ initialTabId } 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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAIA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,YAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAjBA;AACA;AACA;;AAQA;AACA;AACA;;AAOA,MAAM;EAAES;AAAK,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAEhD,MAAMC,YAAY,GAAG,CACpB;EACCC,EAAE,EAAE,iBAAiB;EACrBC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;AACtB,CAAC,EACD;EACCF,EAAE,EAAE,cAAc;EAClBC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AACrB,CAAC,CACD;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,MAAQ;EACxCP,EAAE,EAAEM,IAAI;EACRL,KAAK,EACJG,WAAW,CAACI,MAAM,KAAK,CAAC,IAAIF,IAAI,KAAK,cAAc,GAChD,IAAAJ,QAAE,EAAE,eAAgB,CAAC,GACrBK;AACL,CAAC,CAAG,CAAC;AAEN,SAASE,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,YAAY,GAAG;AAChB,CAAC,EAAG;EACH,MAAM;IAAEP,WAAW;IAAEQ;EAAU,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAEnE,MAAMC,IAAI,GAAG,CACZ,GAAGhB,YAAY,EACf,GAAGI,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;;EAED;EACA,MAAMY,QAAQ,GAAGA,CAAA,KAAM;IACtBJ,SAAS,CAAE,IAAK,CAAC;EAClB,CAAC;EAED,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAC9B,WAAA,CAAA+B,KAAK;IACLlB,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBQ,cAAc,EAAGA,cAAgB;IACjCU,YAAY;IACZC,SAAS,EAAC;EAAoB,GAE9B,IAAAJ,MAAA,CAAAC,aAAA;IAAKG,SAAS,EAAC;EAA0B,GACxC,IAAAJ,MAAA,CAAAC,aAAA,EAACtB,IAAI;IAACe,YAAY,EAAGA,YAAc;IAACK,QAAQ,EAAGA;EAAU,GACxD,IAAAC,MAAA,CAAAC,aAAA,EAACtB,IAAI,CAAC0B,OAAO,QACVP,IAAI,CAACV,GAAG,CAAE,CAAE;IAAEL,EAAE;IAAEC;EAAM,CAAC,KAC1B,IAAAgB,MAAA,CAAAC,aAAA,EAACtB,IAAI,CAAC2B,GAAG;IAACC,GAAG,EAAGxB,EAAI;IAACyB,KAAK,EAAGzB;EAAI,GAC9BC,KACO,CACT,CACW,CAAC,EACbc,IAAI,CAACV,GAAG,CAAE,CAAE;IAAEL;EAAG,CAAC,KAAM;IACzB,IAAI0B,QAAQ;IACZ,QAAS1B,EAAE;MACV,KAAK,cAAc;QAClB0B,QAAQ,GAAG,IAAAT,MAAA,CAAAC,aAAA,EAACzB,YAAA,CAAAkC,OAAW,MAAE,CAAC;QAC1B;MACD,KAAK,iBAAiB;QACrBD,QAAQ,GAAG,IAAAT,MAAA,CAAAC,aAAA,EAAC5B,eAAA,CAAAqC,OAAc,MAAE,CAAC;QAC7B;MACD;QACCD,QAAQ,GAAG,IAAAT,MAAA,CAAAC,aAAA,EAAC1B,eAAA,CAAAmC,OAAc;UAACrB,IAAI,EAAGN;QAAI,CAAE,CAAC;IAC3C;IACA,OACC,IAAAiB,MAAA,CAAAC,aAAA,EAACtB,IAAI,CAACgC,QAAQ;MACbJ,GAAG,EAAGxB,EAAI;MACVyB,KAAK,EAAGzB,EAAI;MACZ6B,SAAS,EAAG;IAAO,GAEjBH,QACY,CAAC;EAElB,CAAE,CACG,CACF,CACC,CAAC;AAEV;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEclB,gBAAgB"}

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

@@ -35,7 +35,9 @@ function InstalledFonts() {
     handleSetLibraryFontSelected,
     refreshLibrary,
     uninstallFontFamily,
-    isResolvingLibrary
+    isResolvingLibrary,
+    notice,
+    setNotice
   } = (0, _element.useContext)(_context.FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = (0, _element.useState)(false);
   const handleUnselectFont = () => {
@@ -44,8 +46,8 @@ function InstalledFonts() {
   const handleSelectFont = font => {
     handleSetLibraryFontSelected(font);
   };
-  const [notice, setNotice] = (0, _element.useState)(null);
   const handleConfirmUninstall = async () => {
+    setNotice(null);
     try {
       await uninstallFontFamily(libraryFontSelected);
       setNotice({
@@ -76,19 +78,10 @@ function InstalledFonts() {
     refreshLibrary();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // Reset notice after 5 seconds
-  (0, _element.useEffect)(() => {
-    if (notice) {
-      const timeout = setTimeout(() => {
-        setNotice(null);
-      }, 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [notice]);
   return (0, _react.createElement)(_tabPanelLayout.default, {
     title: libraryFontSelected?.name || '',
     description: tabDescription,
+    notice: notice,
     handleBack: !!libraryFontSelected && handleUnselectFont,
     footer: (0, _react.createElement)(Footer, {
       shouldDisplayDeleteButton: shouldDisplayDeleteButton,
@@ -99,17 +92,11 @@ function InstalledFonts() {
     isConfirmDeleteOpen: isConfirmDeleteOpen,
     handleConfirmUninstall: handleConfirmUninstall,
     handleCancelUninstall: handleCancelUninstall
-  }), notice && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalSpacer, {
+  }), !libraryFontSelected && (0, _react.createElement)(_react.Fragment, null, isResolvingLibrary && (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 2
-  }), (0, _react.createElement)(_components.Notice, {
-    isDismissible: false,
-    status: notice.type,
-    className: "font-library-modal__font-collection__notice"
-  }, notice.message)), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 4
-  })), !libraryFontSelected && (0, _react.createElement)(_react.Fragment, null, isResolvingLibrary && (0, _react.createElement)(_components.Spinner, null), baseCustomFonts.length > 0 && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
+  }), (0, _react.createElement)(_components.Spinner, null), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 2
-  }), (0, _react.createElement)(_fontsGrid.default, null, baseCustomFonts.map(font => (0, _react.createElement)(_libraryFontCard.default, {
+  })), baseCustomFonts.length > 0 && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_fontsGrid.default, null, baseCustomFonts.map(font => (0, _react.createElement)(_libraryFontCard.default, {
     font: font,
     key: font.slug,
     onClick: () => {
@@ -142,16 +129,17 @@ function Footer({
     isInstalling
   } = (0, _element.useContext)(_context.FontLibraryContext);
   return (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "space-between"
+    justify: "flex-end"
   }, isInstalling && (0, _react.createElement)(ProgressBar, null), (0, _react.createElement)("div", null, shouldDisplayDeleteButton && (0, _react.createElement)(_components.Button, {
+    isDestructive: true,
     variant: "tertiary",
     onClick: handleUninstallClick
   }, (0, _i18n.__)('Delete'))), (0, _react.createElement)(_components.Button, {
-    disabled: !fontFamiliesHasChanges,
     variant: "primary",
-    onClick: saveFontFamilies
+    onClick: saveFontFamilies,
+    disabled: !fontFamiliesHasChanges,
+    __experimentalIsFocusable: true
   }, (0, _i18n.__)('Update')));
 }
-var _default = InstalledFonts;
-exports.default = _default;
+var _default = exports.default = InstalledFonts;
 //# sourceMappingURL=installed-fonts.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_components","_tabPanelLayout","_interopRequireDefault","_context","_fontsGrid","_libraryFontDetails","_libraryFontCard","_confirmDeleteDialog","_lockUnlock","ProgressBar","unlock","componentsPrivateApis","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","useContext","FontLibraryContext","isConfirmDeleteOpen","setIsConfirmDeleteOpen","useState","handleUnselectFont","handleSelectFont","font","notice","setNotice","handleConfirmUninstall","type","message","__","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","useEffect","timeout","setTimeout","clearTimeout","_react","createElement","default","title","name","description","handleBack","footer","Footer","Fragment","FlexItem","__experimentalSpacer","margin","Notice","isDismissible","status","className","Spinner","length","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","__experimentalHStack","justify","Button","variant","disabled","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n\tNotice,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst [ notice, setNotice ] = useState( null );\n\n\tconst handleConfirmUninstall = async () => {\n\t\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ notice && (\n\t\t\t\t<>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__font-collection__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && <Spinner /> }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<FontsGrid>\n\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\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</FontsGrid>\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<FontsGrid title={ __( 'Theme Fonts' ) }>\n\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\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</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"space-between\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ handleUninstallClick }>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}
+{"version":3,"names":["_i18n","require","_element","_components","_tabPanelLayout","_interopRequireDefault","_context","_fontsGrid","_libraryFontDetails","_libraryFontCard","_confirmDeleteDialog","_lockUnlock","ProgressBar","unlock","componentsPrivateApis","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","notice","setNotice","useContext","FontLibraryContext","isConfirmDeleteOpen","setIsConfirmDeleteOpen","useState","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","type","message","__","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","useEffect","_react","createElement","default","title","name","description","handleBack","footer","Footer","Fragment","FlexItem","__experimentalSpacer","margin","Spinner","length","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","__experimentalHStack","justify","Button","isDestructive","variant","disabled","__experimentalIsFocusable","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\n\t\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\tnotice={ notice }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<FontsGrid>\n\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\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</FontsGrid>\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<FontsGrid title={ __( 'Theme Fonts' ) }>\n\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\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</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"flex-end\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}

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

@@ -27,7 +27,7 @@ function LibraryFontCard({
   } = (0, _element.useContext)(_context.FontLibraryContext);
   const variantsInstalled = font?.fontFace?.length > 0 ? font.fontFace.length : 1;
   const variantsActive = getFontFacesActivated(font.slug, font.source).length;
-  const variantsText = (0, _i18n.sprintf)( /* translators: %1$d: Active font variants, %2$d: Total font variants */
+  const variantsText = (0, _i18n.sprintf)( /* translators: 1: Active font variants, 2: Total font variants. */
   (0, _i18n.__)('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
   return (0, _react.createElement)(_fontCard.default, {
     font: font,
@@ -35,6 +35,5 @@ function LibraryFontCard({
     ...props
   });
 }
-var _default = LibraryFontCard;
-exports.default = _default;
+var _default = exports.default = LibraryFontCard;
 //# sourceMappingURL=library-font-card.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_fontCard","_interopRequireDefault","_context","LibraryFontCard","font","props","getFontFacesActivated","useContext","FontLibraryContext","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","sprintf","__","_react","createElement","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontCard from './font-card';\nimport { FontLibraryContext } from './context';\n\nfunction LibraryFontCard( { font, ...props } ) {\n\tconst { getFontFacesActivated } = useContext( FontLibraryContext );\n\n\tconst variantsInstalled =\n\t\tfont?.fontFace?.length > 0 ? font.fontFace.length : 1;\n\tconst variantsActive = getFontFacesActivated(\n\t\tfont.slug,\n\t\tfont.source\n\t).length;\n\tconst variantsText = sprintf(\n\t\t/* translators: %1$d: Active font variants, %2$d: Total font variants */\n\t\t__( '%1$s/%2$s variants active' ),\n\t\tvariantsActive,\n\t\tvariantsInstalled\n\t);\n\n\treturn (\n\t\t<FontCard font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAElE,MAAMC,iBAAiB,GACtBL,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,GAAGP,IAAI,CAACM,QAAQ,CAACC,MAAM,GAAG,CAAC;EACtD,MAAMC,cAAc,GAAGN,qBAAqB,CAC3CF,IAAI,CAACS,IAAI,EACTT,IAAI,CAACU,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAG,IAAAC,aAAO,GAC3B;EACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjCL,cAAc,EACdH,iBACD,CAAC;EAED,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACnB,SAAA,CAAAoB,OAAQ;IAAChB,IAAI,EAAGA,IAAM;IAACW,YAAY,EAAGA,YAAc;IAAA,GAAMV;EAAK,CAAI,CAAC;AAEvE;AAAC,IAAAgB,QAAA,GAEclB,eAAe;AAAAmB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_i18n","require","_element","_fontCard","_interopRequireDefault","_context","LibraryFontCard","font","props","getFontFacesActivated","useContext","FontLibraryContext","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","sprintf","__","_react","createElement","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontCard from './font-card';\nimport { FontLibraryContext } from './context';\n\nfunction LibraryFontCard( { font, ...props } ) {\n\tconst { getFontFacesActivated } = useContext( FontLibraryContext );\n\n\tconst variantsInstalled =\n\t\tfont?.fontFace?.length > 0 ? font.fontFace.length : 1;\n\tconst variantsActive = getFontFacesActivated(\n\t\tfont.slug,\n\t\tfont.source\n\t).length;\n\tconst variantsText = sprintf(\n\t\t/* translators: 1: Active font variants, 2: Total font variants. */\n\t\t__( '%1$s/%2$s variants active' ),\n\t\tvariantsActive,\n\t\tvariantsInstalled\n\t);\n\n\treturn (\n\t\t<FontCard font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAElE,MAAMC,iBAAiB,GACtBL,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,GAAGP,IAAI,CAACM,QAAQ,CAACC,MAAM,GAAG,CAAC;EACtD,MAAMC,cAAc,GAAGN,qBAAqB,CAC3CF,IAAI,CAACS,IAAI,EACTT,IAAI,CAACU,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAG,IAAAC,aAAO,GAC3B;EACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjCL,cAAc,EACdH,iBACD,CAAC;EAED,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACnB,SAAA,CAAAoB,OAAQ;IAAChB,IAAI,EAAGA,IAAM;IAACW,YAAY,EAAGA,YAAc;IAAA,GAAMV;EAAK,CAAI,CAAC;AAEvE;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcjB,eAAe"}

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

@@ -39,6 +39,5 @@ function LibraryFontDetails({
     margin: 8
   }));
 }
-var _default = LibraryFontDetails;
-exports.default = _default;
+var _default = exports.default = LibraryFontDetails;
 //# sourceMappingURL=library-font-details.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_libraryFontVariant","_interopRequireDefault","_sortFontFaces","LibraryFontDetails","font","fontFaces","fontFace","length","sortFontFaces","fontFamily","fontStyle","fontWeight","_react","createElement","Fragment","__experimentalSpacer","margin","__experimentalVStack","spacing","map","face","i","default","key","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-details.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\n\nfunction LibraryFontDetails( { font } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? sortFontFaces( font.fontFace )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 8 } />\n\t\t</>\n\t);\n}\n\nexport default LibraryFontDetails;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,SAASI,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClC,IAAAC,4BAAa,EAAEJ,IAAI,CAACE,QAAS,CAAC,GAC9B,CACA;IACCG,UAAU,EAAEL,IAAI,CAACK,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACc,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzB,IAAAT,MAAA,CAAAC,aAAA,EAACb,mBAAA,CAAAsB,OAAkB;IAClBlB,IAAI,EAAGA,IAAM;IACbgB,IAAI,EAAGA,IAAM;IACbG,GAAG,EAAI,OAAOF,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACT,IAAAT,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAAC,IAAAQ,QAAA,GAEcrB,kBAAkB;AAAAsB,OAAA,CAAAH,OAAA,GAAAE,QAAA"}
+{"version":3,"names":["_components","require","_libraryFontVariant","_interopRequireDefault","_sortFontFaces","LibraryFontDetails","font","fontFaces","fontFace","length","sortFontFaces","fontFamily","fontStyle","fontWeight","_react","createElement","Fragment","__experimentalSpacer","margin","__experimentalVStack","spacing","map","face","i","default","key","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-details.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\n\nfunction LibraryFontDetails( { font } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? sortFontFaces( font.fontFace )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 8 } />\n\t\t</>\n\t);\n}\n\nexport default LibraryFontDetails;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,SAASI,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClC,IAAAC,4BAAa,EAAEJ,IAAI,CAACE,QAAS,CAAC,GAC9B,CACA;IACCG,UAAU,EAAEL,IAAI,CAACK,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACc,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzB,IAAAT,MAAA,CAAAC,aAAA,EAACb,mBAAA,CAAAsB,OAAkB;IAClBlB,IAAI,EAAGA,IAAM;IACbgB,IAAI,EAAGA,IAAM;IACbG,GAAG,EAAI,OAAOF,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACT,IAAAT,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAH,OAAA,GAEcnB,kBAAkB"}

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

@@ -28,7 +28,7 @@ function LibraryFontVariant({
     isFontActivated,
     toggleActivateFont
   } = (0, _element.useContext)(_context.FontLibraryContext);
-  const isIstalled = font?.fontFace?.length > 0 ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
+  const isInstalled = font?.fontFace?.length > 0 ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
   const handleToggleActivation = () => {
     if (font?.fontFace?.length > 0) {
       toggleActivateFont(font, face);
@@ -41,24 +41,24 @@ function LibraryFontVariant({
     kebabCase
   } = (0, _lockUnlock.unlock)(_components.privateApis);
   const checkboxId = kebabCase(`${font.slug}-${(0, _utils.getFontFaceVariantName)(face)}`);
-  return (0, _react.createElement)("label", {
-    className: "font-library-modal__library-font-variant",
-    htmlFor: checkboxId
+  return (0, _react.createElement)("div", {
+    className: "font-library-modal__library-font-variant"
   }, (0, _react.createElement)(_components.Flex, {
-    justify: "space-between",
+    justify: "flex-start",
     align: "center",
     gap: "1rem"
-  }, (0, _react.createElement)(_fontDemo.default, {
-    fontFace: face,
-    text: displayName
-  }), (0, _react.createElement)(_components.CheckboxControl, {
-    checked: isIstalled,
+  }, (0, _react.createElement)(_components.CheckboxControl, {
+    checked: isInstalled,
     onChange: handleToggleActivation,
     __nextHasNoMarginBottom: true,
-    id: checkboxId,
-    label: false
-  })));
+    id: checkboxId
+  }), (0, _react.createElement)("label", {
+    htmlFor: checkboxId
+  }, (0, _react.createElement)(_fontDemo.default, {
+    fontFace: face,
+    text: displayName,
+    onClick: handleToggleActivation
+  }))));
 }
-var _default = LibraryFontVariant;
-exports.default = _default;
+var _default = exports.default = LibraryFontVariant;
 //# sourceMappingURL=library-font-variant.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_utils","_context","_fontDemo","_interopRequireDefault","_lockUnlock","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","useContext","FontLibraryContext","isIstalled","fontFace","length","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","getFontFaceVariantName","kebabCase","unlock","componentsPrivateApis","checkboxId","_react","createElement","className","htmlFor","Flex","justify","align","gap","default","text","CheckboxControl","checked","onChange","__nextHasNoMarginBottom","id","label","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport { FontLibraryContext } from './context';\nimport FontFaceDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isIstalled =\n\t\tfont?.fontFace?.length > 0\n\t\t\t? isFontActivated(\n\t\t\t\t\tfont.slug,\n\t\t\t\t\tface.fontStyle,\n\t\t\t\t\tface.fontWeight,\n\t\t\t\t\tfont.source\n\t\t\t  )\n\t\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace?.length > 0 ) {\n\t\t\ttoggleActivateFont( font, face );\n\t\t\treturn;\n\t\t}\n\t\ttoggleActivateFont( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<label\n\t\t\tclassName=\"font-library-modal__library-font-variant\"\n\t\t\thtmlFor={ checkboxId }\n\t\t>\n\t\t\t<Flex justify=\"space-between\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<FontFaceDemo fontFace={ face } text={ displayName } />\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isIstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t\tlabel={ false }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</label>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AASA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAhBA;AACA;AACA;;AAQA;AACA;AACA;;AAMA,SAASO,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5C,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAEjC,MAAMC,UAAU,GACfL,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,GACvBN,eAAe,CACfD,IAAI,CAACQ,IAAI,EACTT,IAAI,CAACU,SAAS,EACdV,IAAI,CAACW,UAAU,EACfV,IAAI,CAACW,MACL,CAAC,GACDV,eAAe,CAAED,IAAI,CAACQ,IAAI,EAAE,IAAI,EAAE,IAAI,EAAER,IAAI,CAACW,MAAO,CAAC;EAEzD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKZ,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,EAAG;MACjCL,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMa,WAAW,GAAGb,IAAI,CAACc,IAAI,GAAG,GAAG,GAAG,IAAAC,6BAAsB,EAAEhB,IAAK,CAAC;EACpE,MAAM;IAAEiB;EAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;EACrD,MAAMC,UAAU,GAAGH,SAAS,CAC1B,GAAGhB,IAAI,CAACQ,IAAM,IAAI,IAAAO,6BAAsB,EAAEhB,IAAK,CAAG,EACpD,CAAC;EAED,OACC,IAAAqB,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,0CAA0C;IACpDC,OAAO,EAAGJ;EAAY,GAEtB,IAAAC,MAAA,CAAAC,aAAA,EAAC7B,WAAA,CAAAgC,IAAI;IAACC,OAAO,EAAC,eAAe;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACtD,IAAAP,MAAA,CAAAC,aAAA,EAAC1B,SAAA,CAAAiC,OAAY;IAACtB,QAAQ,EAAGP,IAAM;IAAC8B,IAAI,EAAGhB;EAAa,CAAE,CAAC,EACvD,IAAAO,MAAA,CAAAC,aAAA,EAAC7B,WAAA,CAAAsC,eAAe;IACfC,OAAO,EAAG1B,UAAY;IACtB2B,QAAQ,EAAGpB,sBAAwB;IACnCqB,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGf,UAAY;IACjBgB,KAAK,EAAG;EAAO,CACf,CACI,CACA,CAAC;AAEV;AAAC,IAAAC,QAAA,GAEctC,kBAAkB;AAAAuC,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}
+{"version":3,"names":["_element","require","_components","_utils","_context","_fontDemo","_interopRequireDefault","_lockUnlock","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","useContext","FontLibraryContext","isInstalled","fontFace","length","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","getFontFaceVariantName","kebabCase","unlock","componentsPrivateApis","checkboxId","_react","createElement","className","Flex","justify","align","gap","CheckboxControl","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","default","text","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport { FontLibraryContext } from './context';\nimport FontFaceDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isInstalled =\n\t\tfont?.fontFace?.length > 0\n\t\t\t? isFontActivated(\n\t\t\t\t\tfont.slug,\n\t\t\t\t\tface.fontStyle,\n\t\t\t\t\tface.fontWeight,\n\t\t\t\t\tfont.source\n\t\t\t  )\n\t\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace?.length > 0 ) {\n\t\t\ttoggleActivateFont( font, face );\n\t\t\treturn;\n\t\t}\n\t\ttoggleActivateFont( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__library-font-variant\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isInstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontFaceDemo\n\t\t\t\t\t\tfontFace={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AASA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAhBA;AACA;AACA;;AAQA;AACA;AACA;;AAMA,SAASO,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5C,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAEjC,MAAMC,WAAW,GAChBL,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,GACvBN,eAAe,CACfD,IAAI,CAACQ,IAAI,EACTT,IAAI,CAACU,SAAS,EACdV,IAAI,CAACW,UAAU,EACfV,IAAI,CAACW,MACL,CAAC,GACDV,eAAe,CAAED,IAAI,CAACQ,IAAI,EAAE,IAAI,EAAE,IAAI,EAAER,IAAI,CAACW,MAAO,CAAC;EAEzD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKZ,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,EAAG;MACjCL,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMa,WAAW,GAAGb,IAAI,CAACc,IAAI,GAAG,GAAG,GAAG,IAAAC,6BAAsB,EAAEhB,IAAK,CAAC;EACpE,MAAM;IAAEiB;EAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;EACrD,MAAMC,UAAU,GAAGH,SAAS,CAC1B,GAAGhB,IAAI,CAACQ,IAAM,IAAI,IAAAO,6BAAsB,EAAEhB,IAAK,CAAG,EACpD,CAAC;EAED,OACC,IAAAqB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0C,GACxD,IAAAF,MAAA,CAAAC,aAAA,EAAC7B,WAAA,CAAA+B,IAAI;IAACC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnD,IAAAN,MAAA,CAAAC,aAAA,EAAC7B,WAAA,CAAAmC,eAAe;IACfC,OAAO,EAAGvB,WAAa;IACvBwB,QAAQ,EAAGjB,sBAAwB;IACnCkB,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGZ;EAAY,CACjB,CAAC,EACF,IAAAC,MAAA,CAAAC,aAAA;IAAOW,OAAO,EAAGb;EAAY,GAC5B,IAAAC,MAAA,CAAAC,aAAA,EAAC1B,SAAA,CAAAsC,OAAY;IACZ3B,QAAQ,EAAGP,IAAM;IACjBmC,IAAI,EAAGrB,WAAa;IACpBsB,OAAO,EAAGvB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAAC,IAAAwB,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEcnC,kBAAkB"}

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

@@ -67,7 +67,7 @@ async function fetchUninstallFontFamily(fontFamilyId) {
 }
 async function fetchFontCollections() {
   const config = {
-    path: FONT_COLLECTIONS_URL,
+    path: `${FONT_COLLECTIONS_URL}?_fields=slug,name,description`,
     method: 'GET'
   };
   return await (0, _apiFetch.default)(config);

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

@@ -1 +1 @@
-{"version":3,"names":["_apiFetch","_interopRequireDefault","require","FONT_FAMILIES_URL","FONT_COLLECTIONS_URL","fetchInstallFontFamily","data","config","path","method","body","response","apiFetch","id","font_family_settings","fontFace","fetchInstallFontFace","fontFamilyId","font_face_settings","fetchGetFontFamilyBySlug","slug","length","fontFamilyPost","_embedded","font_faces","map","face","fetchUninstallFontFamily","fetchFontCollections","fetchFontCollection"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nconst FONT_FAMILIES_URL = '/wp/v2/font-families';\nconst FONT_COLLECTIONS_URL = '/wp/v2/font-collections';\n\nexport async function fetchInstallFontFamily( data ) {\n\tconst config = {\n\t\tpath: FONT_FAMILIES_URL,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_family_settings,\n\t\tfontFace: [],\n\t};\n}\n\nexport async function fetchInstallFontFace( fontFamilyId, data ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_face_settings,\n\t};\n}\n\nexport async function fetchGetFontFamilyBySlug( slug ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,\n\t\tmethod: 'GET',\n\t};\n\tconst response = await apiFetch( config );\n\tif ( ! response || response.length === 0 ) {\n\t\treturn null;\n\t}\n\tconst fontFamilyPost = response[ 0 ];\n\treturn {\n\t\tid: fontFamilyPost.id,\n\t\t...fontFamilyPost.font_family_settings,\n\t\tfontFace:\n\t\t\tfontFamilyPost?._embedded?.font_faces.map(\n\t\t\t\t( face ) => face.font_face_settings\n\t\t\t) || [],\n\t};\n}\n\nexport async function fetchUninstallFontFamily( fontFamilyId ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,\n\t\tmethod: 'DELETE',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollections() {\n\tconst config = {\n\t\tpath: FONT_COLLECTIONS_URL,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollection( id ) {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n"],"mappings":";;;;;;;;;;;;AAGA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,iBAAiB,GAAG,sBAAsB;AAChD,MAAMC,oBAAoB,GAAG,yBAAyB;AAE/C,eAAeC,sBAAsBA,CAAEC,IAAI,EAAG;EACpD,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAEL,iBAAiB;IACvBM,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,OAAO;IACNM,EAAE,EAAEF,QAAQ,CAACE,EAAE;IACf,GAAGF,QAAQ,CAACG,oBAAoB;IAChCC,QAAQ,EAAE;EACX,CAAC;AACF;AAEO,eAAeC,oBAAoBA,CAAEC,YAAY,EAAEX,IAAI,EAAG;EAChE,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIc,YAAc,aAAY;IAC3DR,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,OAAO;IACNM,EAAE,EAAEF,QAAQ,CAACE,EAAE;IACf,GAAGF,QAAQ,CAACO;EACb,CAAC;AACF;AAEO,eAAeC,wBAAwBA,CAAEC,IAAI,EAAG;EACtD,MAAMb,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,SAASiB,IAAM,cAAa;IACzDX,MAAM,EAAE;EACT,CAAC;EACD,MAAME,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,IAAK,CAAEI,QAAQ,IAAIA,QAAQ,CAACU,MAAM,KAAK,CAAC,EAAG;IAC1C,OAAO,IAAI;EACZ;EACA,MAAMC,cAAc,GAAGX,QAAQ,CAAE,CAAC,CAAE;EACpC,OAAO;IACNE,EAAE,EAAES,cAAc,CAACT,EAAE;IACrB,GAAGS,cAAc,CAACR,oBAAoB;IACtCC,QAAQ,EACPO,cAAc,EAAEC,SAAS,EAAEC,UAAU,CAACC,GAAG,CACtCC,IAAI,IAAMA,IAAI,CAACR,kBAClB,CAAC,IAAI;EACP,CAAC;AACF;AAEO,eAAeS,wBAAwBA,CAAEV,YAAY,EAAG;EAC9D,MAAMV,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIc,YAAc,aAAY;IAC3DR,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC;AAEO,eAAeqB,oBAAoBA,CAAA,EAAG;EAC5C,MAAMrB,MAAM,GAAG;IACdC,IAAI,EAAEJ,oBAAoB;IAC1BK,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC;AAEO,eAAesB,mBAAmBA,CAAEhB,EAAE,EAAG;EAC/C,MAAMN,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,IAAIS,EAAI,EAAC;IACzCJ,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC"}
+{"version":3,"names":["_apiFetch","_interopRequireDefault","require","FONT_FAMILIES_URL","FONT_COLLECTIONS_URL","fetchInstallFontFamily","data","config","path","method","body","response","apiFetch","id","font_family_settings","fontFace","fetchInstallFontFace","fontFamilyId","font_face_settings","fetchGetFontFamilyBySlug","slug","length","fontFamilyPost","_embedded","font_faces","map","face","fetchUninstallFontFamily","fetchFontCollections","fetchFontCollection"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nconst FONT_FAMILIES_URL = '/wp/v2/font-families';\nconst FONT_COLLECTIONS_URL = '/wp/v2/font-collections';\n\nexport async function fetchInstallFontFamily( data ) {\n\tconst config = {\n\t\tpath: FONT_FAMILIES_URL,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_family_settings,\n\t\tfontFace: [],\n\t};\n}\n\nexport async function fetchInstallFontFace( fontFamilyId, data ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_face_settings,\n\t};\n}\n\nexport async function fetchGetFontFamilyBySlug( slug ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,\n\t\tmethod: 'GET',\n\t};\n\tconst response = await apiFetch( config );\n\tif ( ! response || response.length === 0 ) {\n\t\treturn null;\n\t}\n\tconst fontFamilyPost = response[ 0 ];\n\treturn {\n\t\tid: fontFamilyPost.id,\n\t\t...fontFamilyPost.font_family_settings,\n\t\tfontFace:\n\t\t\tfontFamilyPost?._embedded?.font_faces.map(\n\t\t\t\t( face ) => face.font_face_settings\n\t\t\t) || [],\n\t};\n}\n\nexport async function fetchUninstallFontFamily( fontFamilyId ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,\n\t\tmethod: 'DELETE',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollections() {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollection( id ) {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n"],"mappings":";;;;;;;;;;;;AAGA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,iBAAiB,GAAG,sBAAsB;AAChD,MAAMC,oBAAoB,GAAG,yBAAyB;AAE/C,eAAeC,sBAAsBA,CAAEC,IAAI,EAAG;EACpD,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAEL,iBAAiB;IACvBM,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,OAAO;IACNM,EAAE,EAAEF,QAAQ,CAACE,EAAE;IACf,GAAGF,QAAQ,CAACG,oBAAoB;IAChCC,QAAQ,EAAE;EACX,CAAC;AACF;AAEO,eAAeC,oBAAoBA,CAAEC,YAAY,EAAEX,IAAI,EAAG;EAChE,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIc,YAAc,aAAY;IAC3DR,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,OAAO;IACNM,EAAE,EAAEF,QAAQ,CAACE,EAAE;IACf,GAAGF,QAAQ,CAACO;EACb,CAAC;AACF;AAEO,eAAeC,wBAAwBA,CAAEC,IAAI,EAAG;EACtD,MAAMb,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,SAASiB,IAAM,cAAa;IACzDX,MAAM,EAAE;EACT,CAAC;EACD,MAAME,QAAQ,GAAG,MAAM,IAAAC,iBAAQ,EAAEL,MAAO,CAAC;EACzC,IAAK,CAAEI,QAAQ,IAAIA,QAAQ,CAACU,MAAM,KAAK,CAAC,EAAG;IAC1C,OAAO,IAAI;EACZ;EACA,MAAMC,cAAc,GAAGX,QAAQ,CAAE,CAAC,CAAE;EACpC,OAAO;IACNE,EAAE,EAAES,cAAc,CAACT,EAAE;IACrB,GAAGS,cAAc,CAACR,oBAAoB;IACtCC,QAAQ,EACPO,cAAc,EAAEC,SAAS,EAAEC,UAAU,CAACC,GAAG,CACtCC,IAAI,IAAMA,IAAI,CAACR,kBAClB,CAAC,IAAI;EACP,CAAC;AACF;AAEO,eAAeS,wBAAwBA,CAAEV,YAAY,EAAG;EAC9D,MAAMV,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIc,YAAc,aAAY;IAC3DR,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC;AAEO,eAAeqB,oBAAoBA,CAAA,EAAG;EAC5C,MAAMrB,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,gCAA+B;IAC/DK,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC;AAEO,eAAesB,mBAAmBA,CAAEhB,EAAE,EAAG;EAC/C,MAAMN,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,IAAIS,EAAI,EAAC;IACzCJ,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAM,IAAAG,iBAAQ,EAAEL,MAAO,CAAC;AAChC"}

package/build/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
  */
@@ -14,6 +15,7 @@ var _icons = require("@wordpress/icons");
 function TabPanelLayout({
   title,
   description,
+  notice,
   handleBack,
   children,
   footer
@@ -33,17 +35,24 @@ function TabPanelLayout({
     variant: "tertiary",
     onClick: handleBack,
     icon: _icons.chevronLeft,
-    size: "small"
+    size: "small",
+    label: (0, _i18n.__)('Back')
   }), title && (0, _react.createElement)(_components.__experimentalHeading, {
     level: 2,
     size: 13,
     className: "edit-site-global-styles-header"
-  }, title)), description && (0, _react.createElement)(_components.__experimentalText, null, description)), (0, _react.createElement)("div", {
+  }, title)), description && (0, _react.createElement)(_components.__experimentalText, null, description), notice && (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 1
+  }), (0, _react.createElement)(_components.Notice, {
+    status: notice.type,
+    onRemove: notice.onRemove
+  }, notice.message), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 1
+  }))), (0, _react.createElement)("div", {
     className: "font-library-modal__tabpanel-layout__main"
   }, children), footer && (0, _react.createElement)("div", {
     className: "font-library-modal__tabpanel-layout__footer"
   }, footer)));
 }
-var _default = TabPanelLayout;
-exports.default = _default;
+var _default = exports.default = TabPanelLayout;
 //# sourceMappingURL=tab-panel-layout.js.map