@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -1 +1 @@
-{"version":3,"names":["__","Button","DropZone","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","FormFileUpload","FlexItem","privateApis","componentsPrivateApis","useContext","useState","ALLOWED_FILE_EXTENSIONS","FontLibraryContext","Font","makeFamiliesFromFaces","loadFontFaceInBrowser","TabPanelLayout","unlock","ProgressBar","UploadFonts","installFont","notice","setNotice","isUploading","setIsUploading","handleDropZone","files","handleFilesUpload","onFilesUpload","event","target","uniqueFilenames","Set","selectedFiles","allowedFiles","filter","file","has","name","fileExtension","split","pop","toLowerCase","includes","add","length","loadFiles","type","message","fontFacesLoaded","Promise","all","map","fontFile","fontFaceData","getFontFaceMetadata","handleInstall","readFileAsArrayBuffer","resolve","reject","reader","window","FileReader","readAsArrayBuffer","onload","result","onerror","buffer","fontObj","fromDataBuffer","onloadEvent","font","detail","opentype","tables","fontName","get","isItalic","fontWeight","usWeightClass","isVariable","fvar","weightAxis","axes","find","tag","weightRange","minValue","maxValue","fontFamily","fontStyle","fontFaces","fontFamilies","error","createElement","onFilesDrop","className","accept","ext","join","multiple","onChange","render","openFileDialog","onClick","margin"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropZone,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFormFileUpload,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useContext, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from '../../../../lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\nimport TabPanelLayout from './tab-panel-layout';\nimport { unlock } from '../../../lock-unlock';\n\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction UploadFonts() {\n\tconst { installFont, notice, setNotice } = useContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\n\tconst handleDropZone = ( files ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = ( files ) => {\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tconst allowedFiles = selectedFiles.filter( ( file ) => {\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn false; // Discard duplicates\n\t\t\t}\n\t\t\t// Eliminates files that are not allowed\n\t\t\tconst fileExtension = file.name.split( '.' ).pop().toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn true; // Keep file if the extension is allowed\n\t\t\t}\n\t\t\treturn false; // Discard file extension not allowed\n\t\t} );\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t} else {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __( 'No fonts found to install.' ),\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\thandleInstall( fontFacesLoaded );\n\t};\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\tif ( fontFamilies.length > 1 ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Variants from only one font family can be uploaded at a time.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamilies[ 0 ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<TabPanelLayout notice={ notice }>\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library-modal__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple={ true }\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Upload font' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t<Text className=\"font-library-modal__upload-area__text\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</TabPanelLayout>\n\t);\n}\n\nexport default UploadFonts;\n"],"mappings":"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"}
+{"version":3,"names":["__","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","Button","DropZone","Notice","FormFileUpload","FlexItem","privateApis","componentsPrivateApis","useContext","useState","ALLOWED_FILE_EXTENSIONS","FontLibraryContext","Font","makeFamiliesFromFaces","loadFontFaceInBrowser","unlock","ProgressBar","UploadFonts","installFonts","notice","setNotice","isUploading","setIsUploading","handleDropZone","files","handleFilesUpload","onFilesUpload","event","target","uniqueFilenames","Set","selectedFiles","hasInvalidFiles","checkFilesPromises","map","file","isFont","isFontFile","has","name","fileExtension","split","pop","toLowerCase","includes","add","allowedFiles","Promise","all","filter","length","loadFiles","message","type","fontFacesLoaded","fontFile","fontFaceData","getFontFaceMetadata","handleInstall","font","buffer","readFileAsArrayBuffer","fromDataBuffer","error","resolve","reject","reader","window","FileReader","readAsArrayBuffer","onload","result","onerror","fontObj","onloadEvent","detail","opentype","tables","fontName","get","isItalic","fontWeight","usWeightClass","isVariable","fvar","weightAxis","axes","find","tag","weightRange","minValue","maxValue","fontFamily","fontStyle","fontFaces","fontFamilies","errors","installationErrors","createElement","className","onFilesDrop","status","__unstableHTML","onRemove","index","key","accept","ext","join","multiple","onChange","render","openFileDialog","onClick","margin"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tButton,\n\tDropZone,\n\tNotice,\n\tFormFileUpload,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useContext, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from '../../../../lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\nimport { unlock } from '../../../lock-unlock';\n\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction UploadFonts() {\n\tconst { installFonts, notice, setNotice } =\n\t\tuseContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\n\tconst handleDropZone = ( files ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = async ( files ) => {\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tlet hasInvalidFiles = false;\n\n\t\t// Use map to create a promise for each file check, then filter with Promise.all.\n\t\tconst checkFilesPromises = selectedFiles.map( async ( file ) => {\n\t\t\tconst isFont = await isFontFile( file );\n\t\t\tif ( ! isFont ) {\n\t\t\t\thasInvalidFiles = true;\n\t\t\t\treturn null; // Return null for invalid files.\n\t\t\t}\n\t\t\t// Check for duplicates\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn null; // Return null for duplicates.\n\t\t\t}\n\t\t\t// Check if the file extension is allowed.\n\t\t\tconst fileExtension = file.name.split( '.' ).pop().toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn file; // Return the file if it passes all checks.\n\t\t\t}\n\t\t\treturn null; // Return null for disallowed file extensions.\n\t\t} );\n\n\t\t// Filter out the nulls after all promises have resolved.\n\t\tconst allowedFiles = ( await Promise.all( checkFilesPromises ) ).filter(\n\t\t\t( file ) => null !== file\n\t\t);\n\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t} else {\n\t\t\tconst message = hasInvalidFiles\n\t\t\t\t? __( 'Sorry, you are not allowed to upload this file type.' )\n\t\t\t\t: __( 'No fonts found to install.' );\n\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage,\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\thandleInstall( fontFacesLoaded );\n\t};\n\n\t/**\n\t * Checks if a file is a valid Font file.\n\t *\n\t * @param {File} file The file to be checked.\n\t * @return {boolean} Whether the file is a valid font file.\n\t */\n\tasync function isFontFile( file ) {\n\t\tconst font = new Font( 'Uploaded Font' );\n\t\ttry {\n\t\t\tconst buffer = await readFileAsArrayBuffer( file );\n\t\t\tawait font.fromDataBuffer( buffer, 'font' );\n\t\t\treturn true;\n\t\t} catch ( error ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\ttry {\n\t\t\tawait installFonts( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t\terrors: error?.installationErrors,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t{ notice && (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t__unstableHTML\n\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t{ notice.errors && (\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{ notice.errors.map( ( error, index ) => (\n\t\t\t\t\t\t\t\t\t<li key={ index }>{ error }</li>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Notice>\n\t\t\t\t) }\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library-modal__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Upload font' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t<Text className=\"font-library-modal__upload-area__text\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default UploadFonts;\n"],"mappings":"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"}

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

@@ -107,7 +107,40 @@ export async function loadFontFaceInBrowser(fontFace, source, addTo = 'all') {
     iframeDocument.fonts.add(loadedFace);
   }
 }
-export function getDisplaySrcFromFontFace(input, urlPrefix) {
+
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser(fontFace, removeFrom = 'all') {
+  const unloadFontFace = fonts => {
+    fonts.forEach(f => {
+      if (f.family === formatFontFaceName(fontFace?.fontFamily) && f.weight === fontFace?.fontWeight && f.style === fontFace?.fontStyle) {
+        fonts.delete(f);
+      }
+    });
+  };
+  if (removeFrom === 'document' || removeFrom === 'all') {
+    unloadFontFace(document.fonts);
+  }
+  if (removeFrom === 'iframe' || removeFrom === 'all') {
+    const iframeDocument = document.querySelector('iframe[name="editor-canvas"]').contentDocument;
+    unloadFontFace(iframeDocument.fonts);
+  }
+}
+
+/**
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace(input) {
   if (!input) {
     return;
   }
@@ -117,9 +150,9 @@ export function getDisplaySrcFromFontFace(input, urlPrefix) {
   } else {
     src = input;
   }
-  // If it is a theme font, we need to make the url absolute
-  if (src.startsWith('file:.') && urlPrefix) {
-    src = src.replace('file:.', urlPrefix);
+  // It's expected theme fonts will already be loaded in the browser.
+  if (src.startsWith('file:.')) {
+    return;
   }
   if (!isUrlEncoded(src)) {
     src = encodeURI(src);
@@ -194,7 +227,7 @@ export async function batchInstallFontFaces(fontFamilyId, fontFacesData) {
       // Handle network errors or other fetch-related errors
       results.errors.push({
         data: fontFacesData[index],
-        message: `Fetch error: ${result.reason.message}`
+        message: result.reason.message
       });
     }
   });

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","componentsPrivateApis","FONT_WEIGHTS","FONT_STYLES","unlock","fetchInstallFontFace","formatFontFaceName","File","window","setUIValuesNeeded","font","extraValues","name","fontFamily","slug","isUrlEncoded","url","decodeURIComponent","getFontFaceVariantName","face","weightName","fontWeight","styleName","fontStyle","mergeFontFaces","existing","incoming","map","Map","set","Array","from","values","mergeFontFamilies","has","fontFace","incomingFontFaces","restIncoming","existingFont","get","mergedFontFaces","loadFontFaceInBrowser","source","addTo","dataSource","arrayBuffer","newFont","FontFace","style","weight","loadedFace","load","document","fonts","add","iframeDocument","querySelector","contentDocument","getDisplaySrcFromFontFace","input","urlPrefix","src","isArray","startsWith","replace","encodeURI","makeFontFamilyFormData","formData","FormData","kebabCase","category","familyWithValidParameters","fontFamilySettings","append","JSON","stringify","makeFontFacesFormData","fontFacesFormData","item","faceIndex","file","files","forEach","key","fileId","push","length","batchInstallFontFaces","fontFamilyId","fontFacesData","promises","faceData","responses","Promise","allSettled","results","errors","successes","result","index","status","response","value","id","data","message","reason","downloadFontFaceAssets","all","fetch","Request","then","ok","Error","blob","filename","split","pop","type","checkFontFaceInstalled","collection","findIndex","collectionFontFace"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { FONT_WEIGHTS, FONT_STYLES } from './constants';\nimport { unlock } from '../../../../lock-unlock';\nimport { fetchInstallFontFace } from '../resolvers';\nimport { formatFontFaceName } from './preview-styles';\n\n/**\n * Browser dependencies\n */\nconst { File } = window;\n\nexport function setUIValuesNeeded( font, extraValues = {} ) {\n\tif ( ! font.name && ( font.fontFamily || font.slug ) ) {\n\t\tfont.name = font.fontFamily || font.slug;\n\t}\n\treturn {\n\t\t...font,\n\t\t...extraValues,\n\t};\n}\n\nexport function isUrlEncoded( url ) {\n\tif ( typeof url !== 'string' ) {\n\t\treturn false;\n\t}\n\treturn url !== decodeURIComponent( url );\n}\n\nexport function getFontFaceVariantName( face ) {\n\tconst weightName = FONT_WEIGHTS[ face.fontWeight ] || face.fontWeight;\n\tconst styleName =\n\t\tface.fontStyle === 'normal'\n\t\t\t? ''\n\t\t\t: FONT_STYLES[ face.fontStyle ] || face.fontStyle;\n\treturn `${ weightName } ${ styleName }`;\n}\n\nexport function mergeFontFaces( existing = [], incoming = [] ) {\n\tconst map = new Map();\n\tfor ( const face of existing ) {\n\t\tmap.set( `${ face.fontWeight }${ face.fontStyle }`, face );\n\t}\n\tfor ( const face of incoming ) {\n\t\t// This will overwrite if the src already exists, keeping it unique.\n\t\tmap.set( `${ face.fontWeight }${ face.fontStyle }`, face );\n\t}\n\treturn Array.from( map.values() );\n}\n\nexport function mergeFontFamilies( existing = [], incoming = [] ) {\n\tconst map = new Map();\n\t// Add the existing array to the map.\n\tfor ( const font of existing ) {\n\t\tmap.set( font.slug, { ...font } );\n\t}\n\t// Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.\n\tfor ( const font of incoming ) {\n\t\tif ( map.has( font.slug ) ) {\n\t\t\tconst { fontFace: incomingFontFaces, ...restIncoming } = font;\n\t\t\tconst existingFont = map.get( font.slug );\n\t\t\t// Merge the fontFaces existing with the incoming fontFaces.\n\t\t\tconst mergedFontFaces = mergeFontFaces(\n\t\t\t\texistingFont.fontFace,\n\t\t\t\tincomingFontFaces\n\t\t\t);\n\t\t\t// Except for the fontFace key all the other keys are overwritten with the incoming values.\n\t\t\tmap.set( font.slug, {\n\t\t\t\t...restIncoming,\n\t\t\t\tfontFace: mergedFontFaces,\n\t\t\t} );\n\t\t} else {\n\t\t\tmap.set( font.slug, { ...font } );\n\t\t}\n\t}\n\treturn Array.from( map.values() );\n}\n\n/*\n * Loads the font face from a URL and adds it to the browser.\n * It also adds it to the iframe document.\n */\nexport async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {\n\tlet dataSource;\n\n\tif ( typeof source === 'string' ) {\n\t\tdataSource = `url(${ source })`;\n\t\t// eslint-disable-next-line no-undef\n\t} else if ( source instanceof File ) {\n\t\tdataSource = await source.arrayBuffer();\n\t} else {\n\t\treturn;\n\t}\n\n\tconst newFont = new window.FontFace(\n\t\tformatFontFaceName( fontFace.fontFamily ),\n\t\tdataSource,\n\t\t{\n\t\t\tstyle: fontFace.fontStyle,\n\t\t\tweight: fontFace.fontWeight,\n\t\t}\n\t);\n\n\tconst loadedFace = await newFont.load();\n\n\tif ( addTo === 'document' || addTo === 'all' ) {\n\t\tdocument.fonts.add( loadedFace );\n\t}\n\n\tif ( addTo === 'iframe' || addTo === 'all' ) {\n\t\tconst iframeDocument = document.querySelector(\n\t\t\t'iframe[name=\"editor-canvas\"]'\n\t\t).contentDocument;\n\t\tiframeDocument.fonts.add( loadedFace );\n\t}\n}\n\nexport function getDisplaySrcFromFontFace( input, urlPrefix ) {\n\tif ( ! input ) {\n\t\treturn;\n\t}\n\n\tlet src;\n\tif ( Array.isArray( input ) ) {\n\t\tsrc = input[ 0 ];\n\t} else {\n\t\tsrc = input;\n\t}\n\t// If it is a theme font, we need to make the url absolute\n\tif ( src.startsWith( 'file:.' ) && urlPrefix ) {\n\t\tsrc = src.replace( 'file:.', urlPrefix );\n\t}\n\tif ( ! isUrlEncoded( src ) ) {\n\t\tsrc = encodeURI( src );\n\t}\n\treturn src;\n}\n\nexport function makeFontFamilyFormData( fontFamily ) {\n\tconst formData = new FormData();\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\n\tconst { fontFace, category, ...familyWithValidParameters } = fontFamily;\n\tconst fontFamilySettings = {\n\t\t...familyWithValidParameters,\n\t\tslug: kebabCase( fontFamily.slug ),\n\t};\n\n\tformData.append(\n\t\t'font_family_settings',\n\t\tJSON.stringify( fontFamilySettings )\n\t);\n\treturn formData;\n}\n\nexport function makeFontFacesFormData( font ) {\n\tif ( font?.fontFace ) {\n\t\tconst fontFacesFormData = font.fontFace.map( ( item, faceIndex ) => {\n\t\t\tconst face = { ...item };\n\t\t\tconst formData = new FormData();\n\t\t\tif ( face.file ) {\n\t\t\t\t// Normalize to an array, since face.file may be a single file or an array of files.\n\t\t\t\tconst files = Array.isArray( face.file )\n\t\t\t\t\t? face.file\n\t\t\t\t\t: [ face.file ];\n\t\t\t\tconst src = [];\n\n\t\t\t\tfiles.forEach( ( file, key ) => {\n\t\t\t\t\t// Slugified file name because the it might contain spaces or characters treated differently on the server.\n\t\t\t\t\tconst fileId = `file-${ faceIndex }-${ key }`;\n\t\t\t\t\t// Add the files to the formData\n\t\t\t\t\tformData.append( fileId, file, file.name );\n\t\t\t\t\tsrc.push( fileId );\n\t\t\t\t} );\n\n\t\t\t\tface.src = src.length === 1 ? src[ 0 ] : src;\n\t\t\t\tdelete face.file;\n\n\t\t\t\tformData.append( 'font_face_settings', JSON.stringify( face ) );\n\t\t\t} else {\n\t\t\t\tformData.append( 'font_face_settings', JSON.stringify( face ) );\n\t\t\t}\n\t\t\treturn formData;\n\t\t} );\n\n\t\treturn fontFacesFormData;\n\t}\n}\n\nexport async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {\n\tconst promises = fontFacesData.map( ( faceData ) =>\n\t\tfetchInstallFontFace( fontFamilyId, faceData )\n\t);\n\tconst responses = await Promise.allSettled( promises );\n\n\tconst results = {\n\t\terrors: [],\n\t\tsuccesses: [],\n\t};\n\n\tresponses.forEach( ( result, index ) => {\n\t\tif ( result.status === 'fulfilled' ) {\n\t\t\tconst response = result.value;\n\t\t\tif ( response.id ) {\n\t\t\t\tresults.successes.push( response );\n\t\t\t} else {\n\t\t\t\tresults.errors.push( {\n\t\t\t\t\tdata: fontFacesData[ index ],\n\t\t\t\t\tmessage: `Error: ${ response.message }`,\n\t\t\t\t} );\n\t\t\t}\n\t\t} else {\n\t\t\t// Handle network errors or other fetch-related errors\n\t\t\tresults.errors.push( {\n\t\t\t\tdata: fontFacesData[ index ],\n\t\t\t\tmessage: `Fetch error: ${ result.reason.message }`,\n\t\t\t} );\n\t\t}\n\t} );\n\n\treturn results;\n}\n\n/*\n * Downloads a font face asset from a URL to the client and returns a File object.\n */\nexport async function downloadFontFaceAssets( src ) {\n\t// Normalize to an array, since `src` could be a string or array.\n\tsrc = Array.isArray( src ) ? src : [ src ];\n\n\tconst files = await Promise.all(\n\t\tsrc.map( async ( url ) => {\n\t\t\treturn fetch( new Request( url ) )\n\t\t\t\t.then( ( response ) => {\n\t\t\t\t\tif ( ! response.ok ) {\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn response.blob();\n\t\t\t\t} )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst filename = url.split( '/' ).pop();\n\t\t\t\t\tconst file = new File( [ blob ], filename, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\t\t\t\t\treturn file;\n\t\t\t\t} );\n\t\t} )\n\t);\n\n\t// If we only have one file return it (not the array).  Otherwise return all of them in the array.\n\treturn files.length === 1 ? files[ 0 ] : files;\n}\n\n/*\n * Determine if a given Font Face is present in a given collection.\n * We determine that a font face has been installed by comparing the fontWeight and fontStyle\n *\n * @param {Object} fontFace The Font Face to seek\n * @param {Array} collection The Collection to seek in\n * @returns True if the font face is found in the collection.  Otherwise False.\n */\nexport function checkFontFaceInstalled( fontFace, collection ) {\n\treturn (\n\t\t-1 !==\n\t\tcollection.findIndex( ( collectionFontFace ) => {\n\t\t\treturn (\n\t\t\t\tcollectionFontFace.fontWeight === fontFace.fontWeight &&\n\t\t\t\tcollectionFontFace.fontStyle === fontFace.fontStyle\n\t\t\t);\n\t\t} )\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["privateApis","componentsPrivateApis","FONT_WEIGHTS","FONT_STYLES","unlock","fetchInstallFontFace","formatFontFaceName","File","window","setUIValuesNeeded","font","extraValues","name","fontFamily","slug","isUrlEncoded","url","decodeURIComponent","getFontFaceVariantName","face","weightName","fontWeight","styleName","fontStyle","mergeFontFaces","existing","incoming","map","Map","set","Array","from","values","mergeFontFamilies","has","fontFace","incomingFontFaces","restIncoming","existingFont","get","mergedFontFaces","loadFontFaceInBrowser","source","addTo","dataSource","arrayBuffer","newFont","FontFace","style","weight","loadedFace","load","document","fonts","add","iframeDocument","querySelector","contentDocument","unloadFontFaceInBrowser","removeFrom","unloadFontFace","forEach","f","family","delete","getDisplaySrcFromFontFace","input","src","isArray","startsWith","encodeURI","makeFontFamilyFormData","formData","FormData","kebabCase","category","familyWithValidParameters","fontFamilySettings","append","JSON","stringify","makeFontFacesFormData","fontFacesFormData","item","faceIndex","file","files","key","fileId","push","length","batchInstallFontFaces","fontFamilyId","fontFacesData","promises","faceData","responses","Promise","allSettled","results","errors","successes","result","index","status","response","value","id","data","message","reason","downloadFontFaceAssets","all","fetch","Request","then","ok","Error","blob","filename","split","pop","type","checkFontFaceInstalled","collection","findIndex","collectionFontFace"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { FONT_WEIGHTS, FONT_STYLES } from './constants';\nimport { unlock } from '../../../../lock-unlock';\nimport { fetchInstallFontFace } from '../resolvers';\nimport { formatFontFaceName } from './preview-styles';\n\n/**\n * Browser dependencies\n */\nconst { File } = window;\n\nexport function setUIValuesNeeded( font, extraValues = {} ) {\n\tif ( ! font.name && ( font.fontFamily || font.slug ) ) {\n\t\tfont.name = font.fontFamily || font.slug;\n\t}\n\treturn {\n\t\t...font,\n\t\t...extraValues,\n\t};\n}\n\nexport function isUrlEncoded( url ) {\n\tif ( typeof url !== 'string' ) {\n\t\treturn false;\n\t}\n\treturn url !== decodeURIComponent( url );\n}\n\nexport function getFontFaceVariantName( face ) {\n\tconst weightName = FONT_WEIGHTS[ face.fontWeight ] || face.fontWeight;\n\tconst styleName =\n\t\tface.fontStyle === 'normal'\n\t\t\t? ''\n\t\t\t: FONT_STYLES[ face.fontStyle ] || face.fontStyle;\n\treturn `${ weightName } ${ styleName }`;\n}\n\nexport function mergeFontFaces( existing = [], incoming = [] ) {\n\tconst map = new Map();\n\tfor ( const face of existing ) {\n\t\tmap.set( `${ face.fontWeight }${ face.fontStyle }`, face );\n\t}\n\tfor ( const face of incoming ) {\n\t\t// This will overwrite if the src already exists, keeping it unique.\n\t\tmap.set( `${ face.fontWeight }${ face.fontStyle }`, face );\n\t}\n\treturn Array.from( map.values() );\n}\n\nexport function mergeFontFamilies( existing = [], incoming = [] ) {\n\tconst map = new Map();\n\t// Add the existing array to the map.\n\tfor ( const font of existing ) {\n\t\tmap.set( font.slug, { ...font } );\n\t}\n\t// Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.\n\tfor ( const font of incoming ) {\n\t\tif ( map.has( font.slug ) ) {\n\t\t\tconst { fontFace: incomingFontFaces, ...restIncoming } = font;\n\t\t\tconst existingFont = map.get( font.slug );\n\t\t\t// Merge the fontFaces existing with the incoming fontFaces.\n\t\t\tconst mergedFontFaces = mergeFontFaces(\n\t\t\t\texistingFont.fontFace,\n\t\t\t\tincomingFontFaces\n\t\t\t);\n\t\t\t// Except for the fontFace key all the other keys are overwritten with the incoming values.\n\t\t\tmap.set( font.slug, {\n\t\t\t\t...restIncoming,\n\t\t\t\tfontFace: mergedFontFaces,\n\t\t\t} );\n\t\t} else {\n\t\t\tmap.set( font.slug, { ...font } );\n\t\t}\n\t}\n\treturn Array.from( map.values() );\n}\n\n/*\n * Loads the font face from a URL and adds it to the browser.\n * It also adds it to the iframe document.\n */\nexport async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {\n\tlet dataSource;\n\n\tif ( typeof source === 'string' ) {\n\t\tdataSource = `url(${ source })`;\n\t\t// eslint-disable-next-line no-undef\n\t} else if ( source instanceof File ) {\n\t\tdataSource = await source.arrayBuffer();\n\t} else {\n\t\treturn;\n\t}\n\n\tconst newFont = new window.FontFace(\n\t\tformatFontFaceName( fontFace.fontFamily ),\n\t\tdataSource,\n\t\t{\n\t\t\tstyle: fontFace.fontStyle,\n\t\t\tweight: fontFace.fontWeight,\n\t\t}\n\t);\n\n\tconst loadedFace = await newFont.load();\n\n\tif ( addTo === 'document' || addTo === 'all' ) {\n\t\tdocument.fonts.add( loadedFace );\n\t}\n\n\tif ( addTo === 'iframe' || addTo === 'all' ) {\n\t\tconst iframeDocument = document.querySelector(\n\t\t\t'iframe[name=\"editor-canvas\"]'\n\t\t).contentDocument;\n\t\tiframeDocument.fonts.add( loadedFace );\n\t}\n}\n\n/*\n * Unloads the font face and remove it from the browser.\n * It also removes it from the iframe document.\n *\n * Note that Font faces that were added to the set using the CSS @font-face rule\n * remain connected to the corresponding CSS, and cannot be deleted.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.\n */\nexport function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {\n\tconst unloadFontFace = ( fonts ) => {\n\t\tfonts.forEach( ( f ) => {\n\t\t\tif (\n\t\t\t\tf.family === formatFontFaceName( fontFace?.fontFamily ) &&\n\t\t\t\tf.weight === fontFace?.fontWeight &&\n\t\t\t\tf.style === fontFace?.fontStyle\n\t\t\t) {\n\t\t\t\tfonts.delete( f );\n\t\t\t}\n\t\t} );\n\t};\n\n\tif ( removeFrom === 'document' || removeFrom === 'all' ) {\n\t\tunloadFontFace( document.fonts );\n\t}\n\n\tif ( removeFrom === 'iframe' || removeFrom === 'all' ) {\n\t\tconst iframeDocument = document.querySelector(\n\t\t\t'iframe[name=\"editor-canvas\"]'\n\t\t).contentDocument;\n\t\tunloadFontFace( iframeDocument.fonts );\n\t}\n}\n\n/**\n * Retrieves the display source from a font face src.\n *\n * @param {string|string[]} input - The font face src.\n * @return {string|undefined} The display source or undefined if the input is invalid.\n */\nexport function getDisplaySrcFromFontFace( input ) {\n\tif ( ! input ) {\n\t\treturn;\n\t}\n\n\tlet src;\n\tif ( Array.isArray( input ) ) {\n\t\tsrc = input[ 0 ];\n\t} else {\n\t\tsrc = input;\n\t}\n\t// It's expected theme fonts will already be loaded in the browser.\n\tif ( src.startsWith( 'file:.' ) ) {\n\t\treturn;\n\t}\n\tif ( ! isUrlEncoded( src ) ) {\n\t\tsrc = encodeURI( src );\n\t}\n\treturn src;\n}\n\nexport function makeFontFamilyFormData( fontFamily ) {\n\tconst formData = new FormData();\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\n\tconst { fontFace, category, ...familyWithValidParameters } = fontFamily;\n\tconst fontFamilySettings = {\n\t\t...familyWithValidParameters,\n\t\tslug: kebabCase( fontFamily.slug ),\n\t};\n\n\tformData.append(\n\t\t'font_family_settings',\n\t\tJSON.stringify( fontFamilySettings )\n\t);\n\treturn formData;\n}\n\nexport function makeFontFacesFormData( font ) {\n\tif ( font?.fontFace ) {\n\t\tconst fontFacesFormData = font.fontFace.map( ( item, faceIndex ) => {\n\t\t\tconst face = { ...item };\n\t\t\tconst formData = new FormData();\n\t\t\tif ( face.file ) {\n\t\t\t\t// Normalize to an array, since face.file may be a single file or an array of files.\n\t\t\t\tconst files = Array.isArray( face.file )\n\t\t\t\t\t? face.file\n\t\t\t\t\t: [ face.file ];\n\t\t\t\tconst src = [];\n\n\t\t\t\tfiles.forEach( ( file, key ) => {\n\t\t\t\t\t// Slugified file name because the it might contain spaces or characters treated differently on the server.\n\t\t\t\t\tconst fileId = `file-${ faceIndex }-${ key }`;\n\t\t\t\t\t// Add the files to the formData\n\t\t\t\t\tformData.append( fileId, file, file.name );\n\t\t\t\t\tsrc.push( fileId );\n\t\t\t\t} );\n\n\t\t\t\tface.src = src.length === 1 ? src[ 0 ] : src;\n\t\t\t\tdelete face.file;\n\n\t\t\t\tformData.append( 'font_face_settings', JSON.stringify( face ) );\n\t\t\t} else {\n\t\t\t\tformData.append( 'font_face_settings', JSON.stringify( face ) );\n\t\t\t}\n\t\t\treturn formData;\n\t\t} );\n\n\t\treturn fontFacesFormData;\n\t}\n}\n\nexport async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {\n\tconst promises = fontFacesData.map( ( faceData ) =>\n\t\tfetchInstallFontFace( fontFamilyId, faceData )\n\t);\n\tconst responses = await Promise.allSettled( promises );\n\n\tconst results = {\n\t\terrors: [],\n\t\tsuccesses: [],\n\t};\n\n\tresponses.forEach( ( result, index ) => {\n\t\tif ( result.status === 'fulfilled' ) {\n\t\t\tconst response = result.value;\n\t\t\tif ( response.id ) {\n\t\t\t\tresults.successes.push( response );\n\t\t\t} else {\n\t\t\t\tresults.errors.push( {\n\t\t\t\t\tdata: fontFacesData[ index ],\n\t\t\t\t\tmessage: `Error: ${ response.message }`,\n\t\t\t\t} );\n\t\t\t}\n\t\t} else {\n\t\t\t// Handle network errors or other fetch-related errors\n\t\t\tresults.errors.push( {\n\t\t\t\tdata: fontFacesData[ index ],\n\t\t\t\tmessage: result.reason.message,\n\t\t\t} );\n\t\t}\n\t} );\n\n\treturn results;\n}\n\n/*\n * Downloads a font face asset from a URL to the client and returns a File object.\n */\nexport async function downloadFontFaceAssets( src ) {\n\t// Normalize to an array, since `src` could be a string or array.\n\tsrc = Array.isArray( src ) ? src : [ src ];\n\n\tconst files = await Promise.all(\n\t\tsrc.map( async ( url ) => {\n\t\t\treturn fetch( new Request( url ) )\n\t\t\t\t.then( ( response ) => {\n\t\t\t\t\tif ( ! response.ok ) {\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn response.blob();\n\t\t\t\t} )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst filename = url.split( '/' ).pop();\n\t\t\t\t\tconst file = new File( [ blob ], filename, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\t\t\t\t\treturn file;\n\t\t\t\t} );\n\t\t} )\n\t);\n\n\t// If we only have one file return it (not the array).  Otherwise return all of them in the array.\n\treturn files.length === 1 ? files[ 0 ] : files;\n}\n\n/*\n * Determine if a given Font Face is present in a given collection.\n * We determine that a font face has been installed by comparing the fontWeight and fontStyle\n *\n * @param {Object} fontFace The Font Face to seek\n * @param {Array} collection The Collection to seek in\n * @returns True if the font face is found in the collection.  Otherwise False.\n */\nexport function checkFontFaceInstalled( fontFace, collection ) {\n\treturn (\n\t\t-1 !==\n\t\tcollection.findIndex( ( collectionFontFace ) => {\n\t\t\treturn (\n\t\t\t\tcollectionFontFace.fontWeight === fontFace.fontWeight &&\n\t\t\t\tcollectionFontFace.fontStyle === fontFace.fontStyle\n\t\t\t);\n\t\t} )\n\t);\n}\n"],"mappings":"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"}

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

@@ -75,6 +75,9 @@ export function formatFontFamily(input) {
  * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName(input) {
+  if (!input) {
+    return '';
+  }
   let output = input.trim();
   if (output.includes(',')) {
     output = output.split(',')
@@ -101,7 +104,7 @@ export function getFamilyPreviewStyle(family) {
   }
   if (family.fontFace) {
     //get all the font faces with normal style
-    const normalFaces = family.fontFace.filter(face => face.fontStyle.toLowerCase() === 'normal');
+    const normalFaces = family.fontFace.filter(face => face?.fontStyle && face.fontStyle.toLowerCase() === 'normal');
     if (normalFaces.length > 0) {
       style.fontStyle = 'normal';
       const normalWeights = extractFontWeights(normalFaces);

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

@@ -1 +1 @@
-{"version":3,"names":["findNearest","input","numbers","length","sort","a","b","Math","abs","extractFontWeights","fontFaces","result","forEach","face","weights","String","fontWeight","split","start","parseInt","end","i","push","formatFontFamily","regex","output","trim","formatItem","item","match","replace","includes","map","filter","join","formatFontFaceName","find","window","navigator","userAgent","toLowerCase","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","normalWeights","nearestWeight","getFacePreviewStyle"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js"],"sourcesContent":["function findNearest( input, numbers ) {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces ) {\n\tconst result = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param {string} input - The font family.\n * @return {string} The formatted font family.\n *\n * Example:\n * formatFontFamily( \"Open Sans, Font+Name, sans-serif\" ) => '\"Open Sans\", \"Font+Name\", sans-serif'\n * formatFontFamily( \"'Open Sans', generic(kai), sans-serif\" ) => '\"Open Sans\", sans-serif'\n * formatFontFamily( \"DotGothic16, Slabo 27px, serif\" ) => '\"DotGothic16\",\"Slabo 27px\",serif'\n * formatFontFamily( \"Mine's, Moe's Typography\" ) => `\"mine's\",\"Moe's Typography\"`\n */\nexport function formatFontFamily( input ) {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/*\n * Format the font face name to use in the font-family property of a font face.\n *\n * The input can be a string with the font face name or a string with multiple font face names separated by commas.\n * It removes the leading and trailing quotes from the font face name.\n *\n * @param {string} input - The font face name.\n * @return {string} The formatted font face name.\n *\n * Example:\n * formatFontFaceName(\"Open Sans\") => \"Open Sans\"\n * formatFontFaceName(\"'Open Sans', sans-serif\") => \"Open Sans\"\n * formatFontFaceName(\", 'Open Sans', 'Helvetica Neue', sans-serif\") => \"Open Sans\"\n */\nexport function formatFontFaceName( input ) {\n\tlet output = input.trim();\n\tif ( output.includes( ',' ) ) {\n\t\toutput = output\n\t\t\t.split( ',' )\n\t\t\t// finds the first item that is not an empty string.\n\t\t\t.find( ( item ) => item.trim() !== '' )\n\t\t\t.trim();\n\t}\n\t// removes leading and trailing quotes.\n\toutput = output.replace( /^[\"']|[\"']$/g, '' );\n\n\t// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.\n\tif ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {\n\t\toutput = `\"${ output }\"`;\n\t}\n\treturn output;\n}\n\nexport function getFamilyPreviewStyle( family ) {\n\tconst style = { fontFamily: formatFontFamily( family.fontFamily ) };\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face ) => face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\nexport function getFacePreviewStyle( face ) {\n\treturn {\n\t\tfontFamily: formatFontFamily( face.fontFamily ),\n\t\tfontStyle: face.fontStyle || 'normal',\n\t\tfontWeight: face.fontWeight || '400',\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["findNearest","input","numbers","length","sort","a","b","Math","abs","extractFontWeights","fontFaces","result","forEach","face","weights","String","fontWeight","split","start","parseInt","end","i","push","formatFontFamily","regex","output","trim","formatItem","item","match","replace","includes","map","filter","join","formatFontFaceName","find","window","navigator","userAgent","toLowerCase","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","normalWeights","nearestWeight","getFacePreviewStyle"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js"],"sourcesContent":["function findNearest( input, numbers ) {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces ) {\n\tconst result = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param {string} input - The font family.\n * @return {string} The formatted font family.\n *\n * Example:\n * formatFontFamily( \"Open Sans, Font+Name, sans-serif\" ) => '\"Open Sans\", \"Font+Name\", sans-serif'\n * formatFontFamily( \"'Open Sans', generic(kai), sans-serif\" ) => '\"Open Sans\", sans-serif'\n * formatFontFamily( \"DotGothic16, Slabo 27px, serif\" ) => '\"DotGothic16\",\"Slabo 27px\",serif'\n * formatFontFamily( \"Mine's, Moe's Typography\" ) => `\"mine's\",\"Moe's Typography\"`\n */\nexport function formatFontFamily( input ) {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/*\n * Format the font face name to use in the font-family property of a font face.\n *\n * The input can be a string with the font face name or a string with multiple font face names separated by commas.\n * It removes the leading and trailing quotes from the font face name.\n *\n * @param {string} input - The font face name.\n * @return {string} The formatted font face name.\n *\n * Example:\n * formatFontFaceName(\"Open Sans\") => \"Open Sans\"\n * formatFontFaceName(\"'Open Sans', sans-serif\") => \"Open Sans\"\n * formatFontFaceName(\", 'Open Sans', 'Helvetica Neue', sans-serif\") => \"Open Sans\"\n */\nexport function formatFontFaceName( input ) {\n\tif ( ! input ) {\n\t\treturn '';\n\t}\n\n\tlet output = input.trim();\n\tif ( output.includes( ',' ) ) {\n\t\toutput = output\n\t\t\t.split( ',' )\n\t\t\t// finds the first item that is not an empty string.\n\t\t\t.find( ( item ) => item.trim() !== '' )\n\t\t\t.trim();\n\t}\n\t// removes leading and trailing quotes.\n\toutput = output.replace( /^[\"']|[\"']$/g, '' );\n\n\t// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.\n\tif ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {\n\t\toutput = `\"${ output }\"`;\n\t}\n\treturn output;\n}\n\nexport function getFamilyPreviewStyle( family ) {\n\tconst style = { fontFamily: formatFontFamily( family.fontFamily ) };\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face ) =>\n\t\t\t\tface?.fontStyle && face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\nexport function getFacePreviewStyle( face ) {\n\treturn {\n\t\tfontFamily: formatFontFamily( face.fontFamily ),\n\t\tfontStyle: face.fontStyle || 'normal',\n\t\tfontWeight: face.fontWeight || '400',\n\t};\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","createElement","className","spacing","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","emptyMessage","slugPrefix","level","margin","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","createElement","className","spacing","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","emptyMessage","slugPrefix","level","margin","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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"}

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

@@ -27,8 +27,8 @@ function ScreenHeader({
       padding: 0
     },
     icon: isRTL() ? chevronRight : chevronLeft,
-    isSmall: true,
-    "aria-label": __('Navigate to the previous view'),
+    size: "small",
+    label: __('Back'),
     onClick: onBack
   }), createElement(Spacer, null, createElement(Heading, {
     className: "edit-site-global-styles-header",

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","ScreenHeader","title","description","onBack","createElement","spacing","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","isSmall","onClick","className","level","size"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\taria-label={ __( 'Navigate to the previous view' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAE5D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACCC,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI,QACJW,aAAA,CAACf,MAAM;IAACiB,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvDJ,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,uBAAuB;IACvBc,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAGhB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;IAC7Cc,OAAO;IACP,cAAahB,EAAE,CAAE,+BAAgC,CAAG;IACpDiB,OAAO,EAAGX;EAAQ,CAClB,CAAC,EACFC,aAAA,CAACf,MAAM,QACNe,aAAA,CAACb,OAAO;IACPwB,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXC,IAAI,EAAG;EAAI,GAEThB,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZE,aAAA;IAAGW,SAAS,EAAC;EAA6C,GACvDb,WACA,CAEG,CAAC;AAEX;AAEA,eAAeF,YAAY"}
+{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","ScreenHeader","title","description","onBack","createElement","spacing","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","size","label","onClick","className","level"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAE5D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACCC,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI,QACJW,aAAA,CAACf,MAAM;IAACiB,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvDJ,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,uBAAuB;IACvBc,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAGhB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;IAC7Cc,IAAI,EAAC,OAAO;IACZC,KAAK,EAAGjB,EAAE,CAAE,MAAO,CAAG;IACtBkB,OAAO,EAAGZ;EAAQ,CAClB,CAAC,EACFC,aAAA,CAACf,MAAM,QACNe,aAAA,CAACb,OAAO;IACPyB,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXJ,IAAI,EAAG;EAAI,GAETZ,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZE,aAAA;IAAGY,SAAS,EAAC;EAA6C,GACvDd,WACA,CAEG,CAAC;AAEX;AAEA,eAAeF,YAAY"}

package/build-module/components/global-styles/highlighted-colors.js

@@ -0,0 +1,43 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+export default function HighlightedColors({
+  normalizedColorSwatchSize,
+  ratio
+}) {
+  const {
+    highlightedColors
+  } = useStylesPreviewColors();
+  const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+  return highlightedColors.map(({
+    slug,
+    color
+  }, index) => createElement(motion.div, {
+    key: slug,
+    style: {
+      height: scaledSwatchSize,
+      width: scaledSwatchSize,
+      background: color,
+      borderRadius: scaledSwatchSize / 2
+    },
+    animate: {
+      scale: 1,
+      opacity: 1
+    },
+    initial: {
+      scale: 0.1,
+      opacity: 0
+    },
+    transition: {
+      delay: index === 1 ? 0.2 : 0.1
+    }
+  }));
+}
+//# sourceMappingURL=highlighted-colors.js.map

package/build-module/components/global-styles/highlighted-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__unstableMotion","motion","useStylesPreviewColors","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","scaledSwatchSize","map","slug","color","index","createElement","div","key","style","height","width","background","borderRadius","animate","scale","opacity","initial","transition","delay"],"sources":["@wordpress/edit-site/src/components/global-styles/highlighted-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n} ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ slug }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAEhD,eAAe,SAASC,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACtD,MAAMK,gBAAgB,GAAGH,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACE,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACrDC,aAAA,CAACX,MAAM,CAACY,GAAG;IACVC,GAAG,EAAGL,IAAM;IACZM,KAAK,EAAG;MACPC,MAAM,EAAET,gBAAgB;MACxBU,KAAK,EAAEV,gBAAgB;MACvBW,UAAU,EAAER,KAAK;MACjBS,YAAY,EAAEZ,gBAAgB,GAAG;IAClC,CAAG;IACHa,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAEd,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,CACH,CACA,CAAC;AACJ"}

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

@@ -9,15 +9,21 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 const {
   useGlobalSetting,
-  useGlobalStyle
+  useGlobalStyle,
+  GlobalStylesContext
 } = unlock(blockEditorPrivateApis);
 
 // Enable colord's a11y plugin.
@@ -71,4 +77,45 @@ export function useSupportedStyles(name, element) {
   }, [name, element]);
   return supportedPanels;
 }
+export function useColorVariations() {
+  const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
+    property: 'color'
+  });
+  /*
+   * Filter out variations with no settings or styles.
+   */
+  return colorVariations?.length ? colorVariations.filter(variation => {
+    const {
+      settings,
+      styles,
+      title
+    } = variation;
+    return title === __('Default') ||
+    // Always preseve the default variation.
+    Object.keys(settings).length > 0 || Object.keys(styles).length > 0;
+  }) : [];
+}
+export function useTypographyVariations() {
+  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
+    property: 'typography'
+  });
+  const {
+    base
+  } = useContext(GlobalStylesContext);
+  /*
+   * Filter duplicate variations based on whether the variaitons
+   * have different heading and body font families.
+   */
+  return typographyVariations?.length ? Object.values(typographyVariations.reduce((acc, variation) => {
+    const [bodyFontFamily, headingFontFamily] = getFontFamilies(mergeBaseAndUserConfigs(base, variation));
+
+    // Always preseve the default variation.
+    if (variation?.title === 'Default') {
+      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
+    } else if (headingFontFamily?.name && bodyFontFamily?.name && !acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`]) {
+      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
+    }
+    return acc;
+  }, {})) : [];
+}
 //# sourceMappingURL=hooks.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"],"mappings":"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"}
+{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","useContext","__","mergeBaseAndUserConfigs","useCurrentMergeThemeStyleVariationsWithUserConfig","getFontFamilies","unlock","useSelect","useGlobalSetting","useGlobalStyle","GlobalStylesContext","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations","base","values","reduce","acc","bodyFontFamily","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { getFontFamilies } from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\t/*\n\t * Filter duplicate variations based on whether the variaitons\n\t * have different heading and body font families.\n\t */\n\treturn typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t// Always preseve the default variation.\n\t\t\t\t\tif ( variation?.title === 'Default' ) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t} else if (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t  )\n\t\t: [];\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/preview-colors.js

@@ -0,0 +1,54 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import HighlightedColors from './highlighted-colors';
+import PreviewIframe from './preview-iframe';
+const firstFrameVariants = {
+  start: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 0,
+    opacity: 0
+  }
+};
+const StylesPreviewColors = ({
+  label,
+  isFocused,
+  withHoverView
+}) => {
+  return createElement(PreviewIframe, {
+    label: label,
+    isFocused: isFocused,
+    withHoverView: withHoverView
+  }, ({
+    ratio,
+    key
+  }) => createElement(motion.div, {
+    key: key,
+    variants: firstFrameVariants,
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, createElement(HStack, {
+    spacing: 10 * ratio,
+    justify: "center",
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, createElement(HighlightedColors, {
+    normalizedColorSwatchSize: 66,
+    ratio: ratio
+  }))));
+};
+export default StylesPreviewColors;
+//# sourceMappingURL=preview-colors.js.map

package/build-module/components/global-styles/preview-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalHStack","HStack","__unstableMotion","motion","HighlightedColors","PreviewIframe","firstFrameVariants","start","scale","opacity","hover","StylesPreviewColors","label","isFocused","withHoverView","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","normalizedColorSwatchSize"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 66 }\n\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,gBAAgB,IAAIC,MAAM,QACpB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,aAAa,MAAM,kBAAkB;AAE5C,MAAMC,kBAAkB,GAAG;EAC1BC,KAAK,EAAE;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACNF,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV;AACD,CAAC;AAED,MAAME,mBAAmB,GAAGA,CAAE;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EACtE,OACCC,aAAA,CAACV,aAAa;IACbO,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA;EAAe,GAE7B,CAAE;IAAEE,KAAK;IAAEC;EAAI,CAAC,KACjBF,aAAA,CAACZ,MAAM,CAACe,GAAG;IACVD,GAAG,EAAGA,GAAK;IACXE,QAAQ,EAAGb,kBAAoB;IAC/Bc,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAG,EAAE,GAAGP,KAAO;IACtBQ,OAAO,EAAC,QAAQ;IAChBJ,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACX,iBAAiB;IACjBqB,yBAAyB,EAAG,EAAI;IAChCT,KAAK,EAAGA;EAAO,CACf,CACM,CACG,CAEC,CAAC;AAElB,CAAC;AAED,eAAeL,mBAAmB"}