@wordpress/edit-site 5.26.0 → 5.27.0

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

@@ -3,17 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.batchInstallFontFaces = batchInstallFontFaces;
+exports.checkFontFaceInstalled = checkFontFaceInstalled;
+exports.downloadFontFaceAsset = downloadFontFaceAsset;
 exports.getDisplaySrcFromFontFace = getDisplaySrcFromFontFace;
 exports.getFontFaceVariantName = getFontFaceVariantName;
 exports.isUrlEncoded = isUrlEncoded;
 exports.loadFontFaceInBrowser = loadFontFaceInBrowser;
-exports.makeFormDataFromFontFamily = makeFormDataFromFontFamily;
+exports.makeFontFacesFormData = makeFontFacesFormData;
+exports.makeFontFamilyFormData = makeFontFamilyFormData;
 exports.mergeFontFaces = mergeFontFaces;
 exports.mergeFontFamilies = mergeFontFamilies;
 exports.setUIValuesNeeded = setUIValuesNeeded;
 var _components = require("@wordpress/components");
 var _constants = require("./constants");
 var _lockUnlock = require("../../../../lock-unlock");
+var _resolvers = require("../resolvers");
+var _previewStyles = require("./preview-styles");
 /**
  * WordPress dependencies
  */
@@ -22,6 +28,12 @@ var _lockUnlock = require("../../../../lock-unlock");
  * Internal dependencies
  */
 
+/**
+ * Browser dependencies
+ */
+const {
+  File
+} = window;
 function setUIValuesNeeded(font, extraValues = {}) {
   if (!font.name && (font.fontFamily || font.slug)) {
     font.name = font.fontFamily || font.slug;
@@ -96,10 +108,10 @@ async function loadFontFaceInBrowser(fontFace, source, addTo = 'all') {
     // eslint-disable-next-line no-undef
   } else if (source instanceof File) {
     dataSource = await source.arrayBuffer();
+  } else {
+    return;
   }
-
-  // eslint-disable-next-line no-undef
-  const newFont = new FontFace(fontFace.fontFamily, dataSource, {
+  const newFont = new window.FontFace((0, _previewStyles.formatFontFamily)(fontFace.fontFamily), dataSource, {
     style: fontFace.fontStyle,
     weight: fontFace.fontWeight
   });
@@ -131,38 +143,112 @@ function getDisplaySrcFromFontFace(input, urlPrefix) {
   }
   return src;
 }
-function makeFormDataFromFontFamily(fontFamily) {
+function makeFontFamilyFormData(fontFamily) {
   const formData = new FormData();
   const {
     kebabCase
   } = (0, _lockUnlock.unlock)(_components.privateApis);
-  const newFontFamily = {
-    ...fontFamily,
+  const {
+    fontFace,
+    category,
+    ...familyWithValidParameters
+  } = fontFamily;
+  const fontFamilySettings = {
+    ...familyWithValidParameters,
     slug: kebabCase(fontFamily.slug)
   };
-  if (newFontFamily?.fontFace) {
-    const newFontFaces = newFontFamily.fontFace.map((face, faceIndex) => {
+  formData.append('font_family_settings', JSON.stringify(fontFamilySettings));
+  return formData;
+}
+function makeFontFacesFormData(font) {
+  if (font?.fontFace) {
+    const fontFacesFormData = font.fontFace.map((face, faceIndex) => {
+      const formData = new FormData();
       if (face.file) {
         // Slugified file name because the it might contain spaces or characters treated differently on the server.
         const fileId = `file-${faceIndex}`;
         // Add the files to the formData
         formData.append(fileId, face.file, face.file.name);
-        // remove the file object from the face object the file is referenced by the uploadedFile key
+        // remove the file object from the face object the file is referenced in src
         const {
           file,
           ...faceWithoutFileProperty
         } = face;
-        const newFace = {
+        const fontFaceSettings = {
           ...faceWithoutFileProperty,
-          uploadedFile: fileId
+          src: fileId
         };
-        return newFace;
+        formData.append('font_face_settings', JSON.stringify(fontFaceSettings));
+      } else {
+        formData.append('font_face_settings', JSON.stringify(face));
       }
-      return face;
+      return formData;
     });
-    newFontFamily.fontFace = newFontFaces;
+    return fontFacesFormData;
   }
-  formData.append('font_family_settings', JSON.stringify(newFontFamily));
-  return formData;
+}
+async function batchInstallFontFaces(fontFamilyId, fontFacesData) {
+  const promises = fontFacesData.map(faceData => (0, _resolvers.fetchInstallFontFace)(fontFamilyId, faceData));
+  const responses = await Promise.allSettled(promises);
+  const results = {
+    errors: [],
+    successes: []
+  };
+  responses.forEach((result, index) => {
+    if (result.status === 'fulfilled') {
+      const response = result.value;
+      if (response.id) {
+        results.successes.push(response);
+      } else {
+        results.errors.push({
+          data: fontFacesData[index],
+          message: `Error: ${response.message}`
+        });
+      }
+    } else {
+      // Handle network errors or other fetch-related errors
+      results.errors.push({
+        data: fontFacesData[index],
+        message: `Fetch error: ${result.reason.message}`
+      });
+    }
+  });
+  return results;
+}
+
+/*
+ * Downloads a font face asset from a URL to the client and returns a File object.
+ */
+async function downloadFontFaceAsset(url) {
+  return fetch(new Request(url)).then(response => {
+    if (!response.ok) {
+      throw new Error(`Error downloading font face asset from ${url}. Server responded with status: ${response.status}`);
+    }
+    return response.blob();
+  }).then(blob => {
+    const filename = url.split('/').pop();
+    const file = new File([blob], filename, {
+      type: blob.type
+    });
+    return file;
+  }).catch(error => {
+    // eslint-disable-next-line no-console
+    console.error(`Error downloading font face asset from ${url}:`, error);
+    throw error;
+  });
+}
+
+/*
+ * Determine if a given Font Face is present in a given collection.
+ * We determine that a font face has been installed by comparing the fontWeight and fontStyle
+ *
+ * @param {Object} fontFace The Font Face to seek
+ * @param {Array} collection The Collection to seek in
+ * @returns True if the font face is found in the collection.  Otherwise False.
+ */
+function checkFontFaceInstalled(fontFace, collection) {
+  return -1 !== collection.findIndex(collectionFontFace => {
+    return collectionFontFace.fontWeight === fontFace.fontWeight && collectionFontFace.fontStyle === fontFace.fontStyle;
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_constants","_lockUnlock","setUIValuesNeeded","font","extraValues","name","fontFamily","slug","isUrlEncoded","url","decodeURIComponent","getFontFaceVariantName","face","weightName","FONT_WEIGHTS","fontWeight","styleName","fontStyle","FONT_STYLES","mergeFontFaces","existing","incoming","map","Map","set","Array","from","values","mergeFontFamilies","has","fontFace","incomingFontFaces","restIncoming","existingFont","get","mergedFontFaces","loadFontFaceInBrowser","source","addTo","dataSource","File","arrayBuffer","newFont","FontFace","style","weight","loadedFace","load","document","fonts","add","iframeDocument","querySelector","contentDocument","getDisplaySrcFromFontFace","input","urlPrefix","src","isArray","startsWith","replace","encodeURI","makeFormDataFromFontFamily","formData","FormData","kebabCase","unlock","componentsPrivateApis","newFontFamily","newFontFaces","faceIndex","file","fileId","append","faceWithoutFileProperty","newFace","uploadedFile","JSON","stringify"],"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';\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}\n\n\t// eslint-disable-next-line no-undef\n\tconst newFont = new FontFace( fontFace.fontFamily, dataSource, {\n\t\tstyle: fontFace.fontStyle,\n\t\tweight: fontFace.fontWeight,\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 makeFormDataFromFontFamily( fontFamily ) {\n\tconst formData = new FormData();\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\n\tconst newFontFamily = {\n\t\t...fontFamily,\n\t\tslug: kebabCase( fontFamily.slug ),\n\t};\n\n\tif ( newFontFamily?.fontFace ) {\n\t\tconst newFontFaces = newFontFamily.fontFace.map(\n\t\t\t( face, faceIndex ) => {\n\t\t\t\tif ( face.file ) {\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 }`;\n\t\t\t\t\t// Add the files to the formData\n\t\t\t\t\tformData.append( fileId, face.file, face.file.name );\n\t\t\t\t\t// remove the file object from the face object the file is referenced by the uploadedFile key\n\t\t\t\t\tconst { file, ...faceWithoutFileProperty } = face;\n\t\t\t\t\tconst newFace = {\n\t\t\t\t\t\t...faceWithoutFileProperty,\n\t\t\t\t\t\tuploadedFile: fileId,\n\t\t\t\t\t};\n\t\t\t\t\treturn newFace;\n\t\t\t\t}\n\t\t\t\treturn face;\n\t\t\t}\n\t\t);\n\t\tnewFontFamily.fontFace = newFontFaces;\n\t}\n\n\tformData.append( 'font_family_settings', JSON.stringify( newFontFamily ) );\n\treturn formData;\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_constants","_lockUnlock","_resolvers","_previewStyles","File","window","setUIValuesNeeded","font","extraValues","name","fontFamily","slug","isUrlEncoded","url","decodeURIComponent","getFontFaceVariantName","face","weightName","FONT_WEIGHTS","fontWeight","styleName","fontStyle","FONT_STYLES","mergeFontFaces","existing","incoming","map","Map","set","Array","from","values","mergeFontFamilies","has","fontFace","incomingFontFaces","restIncoming","existingFont","get","mergedFontFaces","loadFontFaceInBrowser","source","addTo","dataSource","arrayBuffer","newFont","FontFace","formatFontFamily","style","weight","loadedFace","load","document","fonts","add","iframeDocument","querySelector","contentDocument","getDisplaySrcFromFontFace","input","urlPrefix","src","isArray","startsWith","replace","encodeURI","makeFontFamilyFormData","formData","FormData","kebabCase","unlock","componentsPrivateApis","category","familyWithValidParameters","fontFamilySettings","append","JSON","stringify","makeFontFacesFormData","fontFacesFormData","faceIndex","file","fileId","faceWithoutFileProperty","fontFaceSettings","batchInstallFontFaces","fontFamilyId","fontFacesData","promises","faceData","fetchInstallFontFace","responses","Promise","allSettled","results","errors","successes","forEach","result","index","status","response","value","id","push","data","message","reason","downloadFontFaceAsset","fetch","Request","then","ok","Error","blob","filename","split","pop","type","catch","error","console","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 { formatFontFamily } 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\tformatFontFamily( 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( ( face, faceIndex ) => {\n\t\t\tconst formData = new FormData();\n\t\t\tif ( face.file ) {\n\t\t\t\t// Slugified file name because the it might contain spaces or characters treated differently on the server.\n\t\t\t\tconst fileId = `file-${ faceIndex }`;\n\t\t\t\t// Add the files to the formData\n\t\t\t\tformData.append( fileId, face.file, face.file.name );\n\t\t\t\t// remove the file object from the face object the file is referenced in src\n\t\t\t\tconst { file, ...faceWithoutFileProperty } = face;\n\t\t\t\tconst fontFaceSettings = {\n\t\t\t\t\t...faceWithoutFileProperty,\n\t\t\t\t\tsrc: fileId,\n\t\t\t\t};\n\t\t\t\tformData.append(\n\t\t\t\t\t'font_face_settings',\n\t\t\t\t\tJSON.stringify( fontFaceSettings )\n\t\t\t\t);\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 downloadFontFaceAsset( url ) {\n\treturn fetch( new Request( url ) )\n\t\t.then( ( response ) => {\n\t\t\tif ( ! response.ok ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn response.blob();\n\t\t} )\n\t\t.then( ( blob ) => {\n\t\t\tconst filename = url.split( '/' ).pop();\n\t\t\tconst file = new File( [ blob ], filename, {\n\t\t\t\ttype: blob.type,\n\t\t\t} );\n\t\t\treturn file;\n\t\t} )\n\t\t.catch( ( error ) => {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t`Error downloading font face asset from ${ url }:`,\n\t\t\t\terror\n\t\t\t);\n\t\t\tthrow error;\n\t\t} );\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/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -35,9 +35,10 @@ function extractFontWeights(fontFaces) {
 function formatFontFamily(input) {
   return input.split(',').map(font => {
     font = font.trim(); // Remove any leading or trailing white spaces
-    // If the font doesn't have single quotes and contains a space, then add single quotes around it
-    if (!font.startsWith("'") && font.indexOf(' ') !== -1) {
-      return `'${font}'`;
+    // If the font doesn't start with quotes and contains a space, then wrap in quotes.
+    // Check that string starts with a single or double quote and not a space
+    if (!(font.startsWith('"') || font.startsWith("'")) && font.indexOf(' ') !== -1) {
+      return `"${font}"`;
     }
     return font; // Return font as is if no transformation is needed
   }).join(', ');

package/build/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","map","font","trim","startsWith","indexOf","join","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","filter","toLowerCase","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\nexport function formatFontFamily( input ) {\n\treturn input\n\t\t.split( ',' )\n\t\t.map( ( font ) => {\n\t\t\tfont = font.trim(); // Remove any leading or trailing white spaces\n\t\t\t// If the font doesn't have single quotes and contains a space, then add single quotes around it\n\t\t\tif ( ! font.startsWith( \"'\" ) && font.indexOf( ' ' ) !== -1 ) {\n\t\t\t\treturn `'${ font }'`;\n\t\t\t}\n\t\t\treturn font; // Return font as is if no transformation is needed\n\t\t} )\n\t\t.join( ', ' );\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","map","font","trim","startsWith","indexOf","join","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","filter","toLowerCase","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\nexport function formatFontFamily( input ) {\n\treturn input\n\t\t.split( ',' )\n\t\t.map( ( font ) => {\n\t\t\tfont = font.trim(); // Remove any leading or trailing white spaces\n\t\t\t// If the font doesn't start with quotes and contains a space, then wrap in quotes.\n\t\t\t// Check that string starts with a single or double quote and not a space\n\t\t\tif (\n\t\t\t\t! ( font.startsWith( '\"' ) || font.startsWith( \"'\" ) ) &&\n\t\t\t\tfont.indexOf( ' ' ) !== -1\n\t\t\t) {\n\t\t\t\treturn `\"${ font }\"`;\n\t\t\t}\n\t\t\treturn font; // Return font as is if no transformation is needed\n\t\t} )\n\t\t.join( ', ' );\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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"}

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

@@ -8,6 +8,8 @@ exports.default = void 0;
 var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _editor = require("@wordpress/editor");
+var _data = require("@wordpress/data");
 var _typogrphyElements = _interopRequireDefault(require("./typogrphy-elements"));
 var _fontFamilies = _interopRequireDefault(require("./font-families"));
 var _header = _interopRequireDefault(require("./header"));
@@ -20,6 +22,7 @@ var _header = _interopRequireDefault(require("./header"));
  */
 
 function ScreenTypography() {
+  const fontLibraryEnabled = (0, _data.useSelect)(select => select(_editor.store).getEditorSettings().fontLibraryEnabled, []);
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_header.default, {
     title: (0, _i18n.__)('Typography'),
     description: (0, _i18n.__)('Manage the typography settings for different elements.')
@@ -27,7 +30,7 @@ function ScreenTypography() {
     className: "edit-site-global-styles-screen-typography"
   }, (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 6
-  }, !window.__experimentalDisableFontLibrary && (0, _react.createElement)(_fontFamilies.default, null), (0, _react.createElement)(_typogrphyElements.default, null))));
+  }, fontLibraryEnabled && (0, _react.createElement)(_fontFamilies.default, null), (0, _react.createElement)(_typogrphyElements.default, null))));
 }
 var _default = ScreenTypography;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","_typogrphyElements","_interopRequireDefault","_fontFamilies","_header","ScreenTypography","_react","createElement","Fragment","default","title","__","description","className","__experimentalVStack","spacing","window","__experimentalDisableFontLibrary","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typogrphy-elements';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary && (\n\t\t\t\t\t\t<FontFamilies />\n\t\t\t\t\t) }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,OAAA,GAAAF,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASM,gBAAgBA,CAAA,EAAG;EAC3B,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACH,OAAA,CAAAK,OAAY;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;IAC5BC,WAAW,EAAG,IAAAD,QAAE,EACf,wDACD;EAAG,CACH,CAAC,EACF,IAAAL,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC;EAA2C,GACzD,IAAAP,MAAA,CAAAC,aAAA,EAACP,WAAA,CAAAc,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClB,CAAEC,MAAM,CAACC,gCAAgC,IAC1C,IAAAX,MAAA,CAAAC,aAAA,EAACJ,aAAA,CAAAM,OAAY,MAAE,CACf,EACD,IAAAH,MAAA,CAAAC,aAAA,EAACN,kBAAA,CAAAQ,OAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAAC,IAAAS,QAAA,GAEcb,gBAAgB;AAAAc,OAAA,CAAAV,OAAA,GAAAS,QAAA"}
+{"version":3,"names":["_i18n","require","_components","_editor","_data","_typogrphyElements","_interopRequireDefault","_fontFamilies","_header","ScreenTypography","fontLibraryEnabled","useSelect","select","editorStore","getEditorSettings","_react","createElement","Fragment","default","title","__","description","className","__experimentalVStack","spacing","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typogrphy-elements';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,kBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,aAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,OAAA,GAAAF,sBAAA,CAAAL,OAAA;AAbA;AACA;AACA;;AAMA;AACA;AACA;;AAKA,SAASQ,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAG,IAAAC,eAAS,EACjCC,MAAM,IACPA,MAAM,CAAEC,aAAY,CAAC,CAACC,iBAAiB,CAAC,CAAC,CAACJ,kBAAkB,EAC7D,EACD,CAAC;EAED,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAU,OAAY;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;IAC5BC,WAAW,EAAG,IAAAD,QAAE,EACf,wDACD;EAAG,CACH,CAAC,EACF,IAAAL,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC;EAA2C,GACzD,IAAAP,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAqB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBd,kBAAkB,IAAI,IAAAK,MAAA,CAAAC,aAAA,EAACT,aAAA,CAAAW,OAAY,MAAE,CAAC,EACxC,IAAAH,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAa,OAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAAC,IAAAO,QAAA,GAEchB,gBAAgB;AAAAiB,OAAA,CAAAR,OAAA,GAAAO,QAAA"}

package/build/components/layout/hooks.js

@@ -48,16 +48,17 @@ function useIsSiteEditorLoading() {
   (0, _element.useEffect)(() => {
     if (inLoadingPause) {
       /*
-       * We're using an arbitrary 1s timeout here to catch brief moments
-       * without any resolving selectors that would result in displaying
-       * brief flickers of loading state and loaded state.
+       * We're using an arbitrary 100ms timeout here to catch brief
+       * moments without any resolving selectors that would result in
+       * displaying brief flickers of loading state and loaded state.
        *
        * It's worth experimenting with different values, since this also
-       * adds 1s of artificial delay after loading has finished.
+       * adds 100ms of artificial delay after loading has finished.
        */
+      const ARTIFICIAL_DELAY = 100;
       const timeout = setTimeout(() => {
         setLoaded(true);
-      }, 1000);
+      }, ARTIFICIAL_DELAY);
       return () => {
         clearTimeout(timeout);
       };

package/build/components/layout/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_coreData","_useEditedEntityRecord","_interopRequireDefault","MAX_LOADING_TIME","useIsSiteEditorLoading","isLoaded","hasLoadedPost","useEditedEntityRecord","loaded","setLoaded","useState","inLoadingPause","useSelect","select","hasResolvingSelectors","coreStore","useEffect","timeout","setTimeout","clearTimeout"],"sources":["@wordpress/edit-site/src/components/layout/hooks.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport useEditedEntityRecord from '../use-edited-entity-record';\n\nconst MAX_LOADING_TIME = 10000; // 10 seconds\n\nexport function useIsSiteEditorLoading() {\n\tconst { isLoaded: hasLoadedPost } = useEditedEntityRecord();\n\tconst [ loaded, setLoaded ] = useState( false );\n\tconst inLoadingPause = useSelect(\n\t\t( select ) => {\n\t\t\tconst hasResolvingSelectors =\n\t\t\t\tselect( coreStore ).hasResolvingSelectors();\n\t\t\treturn ! loaded && ! hasResolvingSelectors;\n\t\t},\n\t\t[ loaded ]\n\t);\n\n\t/*\n\t * If the maximum expected loading time has passed, we're marking the\n\t * editor as loaded, in order to prevent any failed requests from blocking\n\t * the editor canvas from appearing.\n\t */\n\tuseEffect( () => {\n\t\tlet timeout;\n\n\t\tif ( ! loaded ) {\n\t\t\ttimeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, MAX_LOADING_TIME );\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout( timeout );\n\t\t};\n\t}, [ loaded ] );\n\n\tuseEffect( () => {\n\t\tif ( inLoadingPause ) {\n\t\t\t/*\n\t\t\t * We're using an arbitrary 1s timeout here to catch brief moments\n\t\t\t * without any resolving selectors that would result in displaying\n\t\t\t * brief flickers of loading state and loaded state.\n\t\t\t *\n\t\t\t * It's worth experimenting with different values, since this also\n\t\t\t * adds 1s of artificial delay after loading has finished.\n\t\t\t */\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, 1000 );\n\n\t\t\treturn () => {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t};\n\t\t}\n\t}, [ inLoadingPause ] );\n\n\treturn ! loaded || ! hasLoadedPost;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAKA,IAAAG,sBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMK,gBAAgB,GAAG,KAAK,CAAC,CAAC;;AAEzB,SAASC,sBAAsBA,CAAA,EAAG;EACxC,MAAM;IAAEC,QAAQ,EAAEC;EAAc,CAAC,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EAC3D,MAAM,CAAEC,MAAM,EAAEC,SAAS,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAC,eAAS,EAC7BC,MAAM,IAAM;IACb,MAAMC,qBAAqB,GAC1BD,MAAM,CAAEE,eAAU,CAAC,CAACD,qBAAqB,CAAC,CAAC;IAC5C,OAAO,CAAEN,MAAM,IAAI,CAAEM,qBAAqB;EAC3C,CAAC,EACD,CAAEN,MAAM,CACT,CAAC;;EAED;AACD;AACA;AACA;AACA;EACC,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAIC,OAAO;IAEX,IAAK,CAAET,MAAM,EAAG;MACfS,OAAO,GAAGC,UAAU,CAAE,MAAM;QAC3BT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAEN,gBAAiB,CAAC;IACtB;IAEA,OAAO,MAAM;MACZgB,YAAY,CAAEF,OAAQ,CAAC;IACxB,CAAC;EACF,CAAC,EAAE,CAAET,MAAM,CAAG,CAAC;EAEf,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAKL,cAAc,EAAG;MACrB;AACH;AACA;AACA;AACA;AACA;AACA;AACA;MACG,MAAMM,OAAO,GAAGC,UAAU,CAAE,MAAM;QACjCT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAE,IAAK,CAAC;MAET,OAAO,MAAM;QACZU,YAAY,CAAEF,OAAQ,CAAC;MACxB,CAAC;IACF;EACD,CAAC,EAAE,CAAEN,cAAc,CAAG,CAAC;EAEvB,OAAO,CAAEH,MAAM,IAAI,CAAEF,aAAa;AACnC"}
+{"version":3,"names":["_element","require","_data","_coreData","_useEditedEntityRecord","_interopRequireDefault","MAX_LOADING_TIME","useIsSiteEditorLoading","isLoaded","hasLoadedPost","useEditedEntityRecord","loaded","setLoaded","useState","inLoadingPause","useSelect","select","hasResolvingSelectors","coreStore","useEffect","timeout","setTimeout","clearTimeout","ARTIFICIAL_DELAY"],"sources":["@wordpress/edit-site/src/components/layout/hooks.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport useEditedEntityRecord from '../use-edited-entity-record';\n\nconst MAX_LOADING_TIME = 10000; // 10 seconds\n\nexport function useIsSiteEditorLoading() {\n\tconst { isLoaded: hasLoadedPost } = useEditedEntityRecord();\n\tconst [ loaded, setLoaded ] = useState( false );\n\tconst inLoadingPause = useSelect(\n\t\t( select ) => {\n\t\t\tconst hasResolvingSelectors =\n\t\t\t\tselect( coreStore ).hasResolvingSelectors();\n\t\t\treturn ! loaded && ! hasResolvingSelectors;\n\t\t},\n\t\t[ loaded ]\n\t);\n\n\t/*\n\t * If the maximum expected loading time has passed, we're marking the\n\t * editor as loaded, in order to prevent any failed requests from blocking\n\t * the editor canvas from appearing.\n\t */\n\tuseEffect( () => {\n\t\tlet timeout;\n\n\t\tif ( ! loaded ) {\n\t\t\ttimeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, MAX_LOADING_TIME );\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout( timeout );\n\t\t};\n\t}, [ loaded ] );\n\n\tuseEffect( () => {\n\t\tif ( inLoadingPause ) {\n\t\t\t/*\n\t\t\t * We're using an arbitrary 100ms timeout here to catch brief\n\t\t\t * moments without any resolving selectors that would result in\n\t\t\t * displaying brief flickers of loading state and loaded state.\n\t\t\t *\n\t\t\t * It's worth experimenting with different values, since this also\n\t\t\t * adds 100ms of artificial delay after loading has finished.\n\t\t\t */\n\t\t\tconst ARTIFICIAL_DELAY = 100;\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, ARTIFICIAL_DELAY );\n\n\t\t\treturn () => {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t};\n\t\t}\n\t}, [ inLoadingPause ] );\n\n\treturn ! loaded || ! hasLoadedPost;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAKA,IAAAG,sBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMK,gBAAgB,GAAG,KAAK,CAAC,CAAC;;AAEzB,SAASC,sBAAsBA,CAAA,EAAG;EACxC,MAAM;IAAEC,QAAQ,EAAEC;EAAc,CAAC,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EAC3D,MAAM,CAAEC,MAAM,EAAEC,SAAS,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAC,eAAS,EAC7BC,MAAM,IAAM;IACb,MAAMC,qBAAqB,GAC1BD,MAAM,CAAEE,eAAU,CAAC,CAACD,qBAAqB,CAAC,CAAC;IAC5C,OAAO,CAAEN,MAAM,IAAI,CAAEM,qBAAqB;EAC3C,CAAC,EACD,CAAEN,MAAM,CACT,CAAC;;EAED;AACD;AACA;AACA;AACA;EACC,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAIC,OAAO;IAEX,IAAK,CAAET,MAAM,EAAG;MACfS,OAAO,GAAGC,UAAU,CAAE,MAAM;QAC3BT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAEN,gBAAiB,CAAC;IACtB;IAEA,OAAO,MAAM;MACZgB,YAAY,CAAEF,OAAQ,CAAC;IACxB,CAAC;EACF,CAAC,EAAE,CAAET,MAAM,CAAG,CAAC;EAEf,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAKL,cAAc,EAAG;MACrB;AACH;AACA;AACA;AACA;AACA;AACA;AACA;MACG,MAAMS,gBAAgB,GAAG,GAAG;MAC5B,MAAMH,OAAO,GAAGC,UAAU,CAAE,MAAM;QACjCT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAEW,gBAAiB,CAAC;MAErB,OAAO,MAAM;QACZD,YAAY,CAAEF,OAAQ,CAAC;MACxB,CAAC;IACF;EACD,CAAC,EAAE,CAAEN,cAAc,CAAG,CAAC;EAEvB,OAAO,CAAEH,MAAM,IAAI,CAAEF,aAAa;AACnC"}

package/build/components/layout/index.js

@@ -17,13 +17,10 @@ var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
 var _commands = require("@wordpress/commands");
 var _preferences = require("@wordpress/preferences");
 var _blockEditor = require("@wordpress/block-editor");
-var _router = require("@wordpress/router");
 var _coreCommands = require("@wordpress/core-commands");
 var _sidebar = _interopRequireDefault(require("../sidebar"));
-var _editor = _interopRequireDefault(require("../editor"));
 var _errorBoundary = _interopRequireDefault(require("../error-boundary"));
 var _store = require("../../store");
-var _getIsListPage = _interopRequireDefault(require("../../utils/get-is-list-page"));
 var _headerEditMode = _interopRequireDefault(require("../header-edit-mode"));
 var _useInitEditedEntityFromUrl = _interopRequireDefault(require("../sync-state-with-url/use-init-edited-entity-from-url"));
 var _siteHub = _interopRequireDefault(require("../site-hub"));
@@ -35,8 +32,8 @@ var _register = _interopRequireDefault(require("../keyboard-shortcuts/register")
 var _global = _interopRequireDefault(require("../keyboard-shortcuts/global"));
 var _useCommonCommands = require("../../hooks/commands/use-common-commands");
 var _useEditModeCommands = require("../../hooks/commands/use-edit-mode-commands");
-var _pageMain = _interopRequireDefault(require("../page-main"));
 var _hooks = require("./hooks");
+var _router = _interopRequireDefault(require("./router"));
 /**
  * External dependencies
  */
@@ -55,9 +52,6 @@ const {
 const {
   useCommandContext
 } = (0, _lockUnlock.unlock)(_commands.privateApis);
-const {
-  useLocation
-} = (0, _lockUnlock.unlock)(_router.privateApis);
 const {
   useGlobalStyle
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
@@ -70,12 +64,7 @@ function Layout() {
   (0, _useEditModeCommands.useEditModeCommands)();
   (0, _useCommonCommands.useCommonCommands)();
   (0, _blockEditor.useBlockCommands)();
-  const {
-    params
-  } = useLocation();
   const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
-  const isListPage = (0, _getIsListPage.default)(params, isMobileViewport);
-  const isEditorPage = !isListPage;
   const {
     isDistractionFree,
     hasFixedToolbar,
@@ -99,19 +88,19 @@ function Layout() {
       hasBlockSelected: select(_blockEditor.store).getBlockSelectionStart()
     };
   }, []);
-  const isEditing = canvasMode === 'edit';
   const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)({
     previous: previousShortcut,
     next: nextShortcut
   });
   const disableMotion = (0, _compose.useReducedMotion)();
-  const showSidebar = isMobileViewport && canvasMode === 'view' && !isListPage || !isMobileViewport && (canvasMode === 'view' || !isEditorPage);
-  const showCanvas = isMobileViewport && isEditorPage && isEditing || !isMobileViewport || !isEditorPage;
-  const isFullCanvas = isMobileViewport && isListPage || isEditorPage && isEditing;
   const [canvasResizer, canvasSize] = (0, _compose.useResizeObserver)();
   const [fullResizer] = (0, _compose.useResizeObserver)();
   const isEditorLoading = (0, _hooks.useIsSiteEditorLoading)();
   const [isResizableFrameOversized, setIsResizableFrameOversized] = (0, _element.useState)(false);
+  const {
+    areas,
+    widths
+  } = (0, _router.default)();
 
   // This determines which animation variant should apply to the header.
   // There is also a `isDistractionFreeHovering` state that gets priority
@@ -135,7 +124,7 @@ function Layout() {
 
   // Sets the right context for the command palette
   let commandContext = 'site-editor';
-  if (canvasMode === 'edit' && isEditorPage) {
+  if (canvasMode === 'edit') {
     commandContext = 'site-editor-edit';
   }
   if (hasBlockSelected) {
@@ -155,9 +144,8 @@ function Layout() {
     ...navigateRegionsProps,
     ref: navigateRegionsProps.ref,
     className: (0, _classnames.default)('edit-site-layout', navigateRegionsProps.className, {
-      'is-distraction-free': isDistractionFree && isEditing,
-      'is-full-canvas': isFullCanvas,
-      'is-edit-mode': isEditing,
+      'is-distraction-free': isDistractionFree && canvasMode === 'edit',
+      'is-full-canvas': canvasMode === 'edit',
       'has-fixed-toolbar': hasFixedToolbar,
       'is-block-toolbar-visible': hasBlockSelected
     })
@@ -196,7 +184,7 @@ function Layout() {
     className: "edit-site-layout__hub"
   }), (0, _react.createElement)(_components.__unstableAnimatePresence, {
     initial: false
-  }, isEditorPage && isEditing && (0, _react.createElement)(_interface.NavigableRegion, {
+  }, canvasMode === 'edit' && (0, _react.createElement)(_interface.NavigableRegion, {
     key: "header",
     className: "edit-site-layout__header",
     ariaLabel: (0, _i18n.__)('Editor top bar'),
@@ -236,7 +224,7 @@ function Layout() {
   }, (0, _react.createElement)(_interface.NavigableRegion, {
     ariaLabel: (0, _i18n.__)('Navigation'),
     className: "edit-site-layout__sidebar-region"
-  }, (0, _react.createElement)(_components.__unstableAnimatePresence, null, showSidebar && (0, _react.createElement)(_components.__unstableMotion.div, {
+  }, (0, _react.createElement)(_components.__unstableAnimatePresence, null, canvasMode === 'view' && (0, _react.createElement)(_components.__unstableMotion.div, {
     initial: {
       opacity: 0
     },
@@ -254,10 +242,15 @@ function Layout() {
       ease: 'easeOut'
     },
     className: "edit-site-layout__sidebar"
-  }, (0, _react.createElement)(_sidebar.default, null)))), (0, _react.createElement)(_savePanel.default, null), showCanvas && (0, _react.createElement)(_react.Fragment, null, isListPage && (0, _react.createElement)(_pageMain.default, null), isEditorPage && (0, _react.createElement)("div", {
+  }, (0, _react.createElement)(_sidebar.default, null)))), (0, _react.createElement)(_savePanel.default, null), areas.content && canvasMode !== 'edit' && (0, _react.createElement)("div", {
+    className: "edit-site-layout__area",
+    style: {
+      maxWidth: widths?.content
+    }
+  }, areas.content), areas.preview && (0, _react.createElement)("div", {
     className: "edit-site-layout__canvas-container"
   }, canvasResizer, !!canvasSize.width && (0, _react.createElement)(_components.__unstableMotion.div, {
-    whileHover: isEditorPage && canvasMode === 'view' ? {
+    whileHover: canvasMode === 'view' ? {
       scale: 1.005,
       transition: {
         duration: disableMotion ? 0 : 0.5,
@@ -276,7 +269,7 @@ function Layout() {
     }
   }, (0, _react.createElement)(_errorBoundary.default, null, (0, _react.createElement)(_resizableFrame.default, {
     isReady: !isEditorLoading,
-    isFullWidth: isEditing,
+    isFullWidth: canvasMode === 'edit',
     defaultSize: {
       width: canvasSize.width - 24 /* $canvas-padding */,
       height: canvasSize.height
@@ -286,8 +279,6 @@ function Layout() {
     innerContentStyle: {
       background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
     }
-  }, (0, _react.createElement)(_editor.default, {
-    isLoading: isEditorLoading
-  })))))))));
+  }, areas.preview)))))));
 }
 //# sourceMappingURL=index.js.map