@wordpress/edit-site 5.25.0 → 5.26.0

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

@@ -1,12 +1,13 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { paramCase as kebabCase } from 'change-case';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { unlock } from '../../../../lock-unlock';
 export function setUIValuesNeeded(font, extraValues = {}) {
   if (!font.name && (font.fontFamily || font.slug)) {
     font.name = font.fontFamily || font.slug;
@@ -116,41 +117,38 @@ export function getDisplaySrcFromFontFace(input, urlPrefix) {
   }
   return src;
 }
-
-// This function replicates one behavior of _wp_to_kebab_case().
-// Additional context: https://github.com/WordPress/gutenberg/issues/53695
-export function wpKebabCase(str) {
-  // If a string contains a digit followed by a number, insert a dash between them.
-  return kebabCase(str).replace(/([a-zA-Z])(\d)|(\d)([a-zA-Z])/g, '$1$3-$2$4');
-}
-export function makeFormDataFromFontFamilies(fontFamilies) {
+export function makeFormDataFromFontFamily(fontFamily) {
   const formData = new FormData();
-  const newFontFamilies = fontFamilies.map((family, familyIndex) => {
-    family.slug = wpKebabCase(family.slug);
-    if (family?.fontFace) {
-      family.fontFace = family.fontFace.map((face, faceIndex) => {
-        if (face.file) {
-          // Slugified file name because the it might contain spaces or characters treated differently on the server.
-          const fileId = `file-${familyIndex}-${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
-          const {
-            file,
-            ...faceWithoutFileProperty
-          } = face;
-          const newFace = {
-            ...faceWithoutFileProperty,
-            uploadedFile: fileId
-          };
-          return newFace;
-        }
-        return face;
-      });
-    }
-    return family;
-  });
-  formData.append('font_families', JSON.stringify(newFontFamilies));
+  const {
+    kebabCase
+  } = unlock(componentsPrivateApis);
+  const newFontFamily = {
+    ...fontFamily,
+    slug: kebabCase(fontFamily.slug)
+  };
+  if (newFontFamily?.fontFace) {
+    const newFontFaces = newFontFamily.fontFace.map((face, faceIndex) => {
+      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
+        const {
+          file,
+          ...faceWithoutFileProperty
+        } = face;
+        const newFace = {
+          ...faceWithoutFileProperty,
+          uploadedFile: fileId
+        };
+        return newFace;
+      }
+      return face;
+    });
+    newFontFamily.fontFace = newFontFaces;
+  }
+  formData.append('font_family_settings', JSON.stringify(newFontFamily));
   return formData;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["paramCase","kebabCase","FONT_WEIGHTS","FONT_STYLES","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","File","arrayBuffer","newFont","FontFace","style","weight","loadedFace","load","document","fonts","add","iframeDocument","querySelector","contentDocument","getDisplaySrcFromFontFace","input","urlPrefix","src","isArray","startsWith","replace","encodeURI","wpKebabCase","str","makeFormDataFromFontFamilies","fontFamilies","formData","FormData","newFontFamilies","family","familyIndex","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 * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * Internal dependencies\n */\nimport { FONT_WEIGHTS, FONT_STYLES } from './constants';\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\n// This function replicates one behavior of _wp_to_kebab_case().\n// Additional context: https://github.com/WordPress/gutenberg/issues/53695\nexport function wpKebabCase( str ) {\n\t// If a string contains a digit followed by a number, insert a dash between them.\n\treturn kebabCase( str ).replace(\n\t\t/([a-zA-Z])(\\d)|(\\d)([a-zA-Z])/g,\n\t\t'$1$3-$2$4'\n\t);\n}\n\nexport function makeFormDataFromFontFamilies( fontFamilies ) {\n\tconst formData = new FormData();\n\tconst newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {\n\t\tfamily.slug = wpKebabCase( family.slug );\n\t\tif ( family?.fontFace ) {\n\t\t\tfamily.fontFace = family.fontFace.map( ( 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-${ familyIndex }-${ 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\treturn family;\n\t} );\n\tformData.append( 'font_families', JSON.stringify( newFontFamilies ) );\n\treturn formData;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,IAAIC,SAAS,QAAQ,aAAa;;AAEpD;AACA;AACA;AACA,SAASC,YAAY,EAAEC,WAAW,QAAQ,aAAa;AAEvD,OAAO,SAASC,iBAAiBA,CAAEC,IAAI,EAAEC,WAAW,GAAG,CAAC,CAAC,EAAG;EAC3D,IAAK,CAAED,IAAI,CAACE,IAAI,KAAMF,IAAI,CAACG,UAAU,IAAIH,IAAI,CAACI,IAAI,CAAE,EAAG;IACtDJ,IAAI,CAACE,IAAI,GAAGF,IAAI,CAACG,UAAU,IAAIH,IAAI,CAACI,IAAI;EACzC;EACA,OAAO;IACN,GAAGJ,IAAI;IACP,GAAGC;EACJ,CAAC;AACF;AAEA,OAAO,SAASI,YAAYA,CAAEC,GAAG,EAAG;EACnC,IAAK,OAAOA,GAAG,KAAK,QAAQ,EAAG;IAC9B,OAAO,KAAK;EACb;EACA,OAAOA,GAAG,KAAKC,kBAAkB,CAAED,GAAI,CAAC;AACzC;AAEA,OAAO,SAASE,sBAAsBA,CAAEC,IAAI,EAAG;EAC9C,MAAMC,UAAU,GAAGb,YAAY,CAAEY,IAAI,CAACE,UAAU,CAAE,IAAIF,IAAI,CAACE,UAAU;EACrE,MAAMC,SAAS,GACdH,IAAI,CAACI,SAAS,KAAK,QAAQ,GACxB,EAAE,GACFf,WAAW,CAAEW,IAAI,CAACI,SAAS,CAAE,IAAIJ,IAAI,CAACI,SAAS;EACnD,OAAQ,GAAGH,UAAY,IAAIE,SAAW,EAAC;AACxC;AAEA,OAAO,SAASE,cAAcA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,QAAQ,GAAG,EAAE,EAAG;EAC9D,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAC,CAAC;EACrB,KAAM,MAAMT,IAAI,IAAIM,QAAQ,EAAG;IAC9BE,GAAG,CAACE,GAAG,CAAG,GAAGV,IAAI,CAACE,UAAY,GAAGF,IAAI,CAACI,SAAW,EAAC,EAAEJ,IAAK,CAAC;EAC3D;EACA,KAAM,MAAMA,IAAI,IAAIO,QAAQ,EAAG;IAC9B;IACAC,GAAG,CAACE,GAAG,CAAG,GAAGV,IAAI,CAACE,UAAY,GAAGF,IAAI,CAACI,SAAW,EAAC,EAAEJ,IAAK,CAAC;EAC3D;EACA,OAAOW,KAAK,CAACC,IAAI,CAAEJ,GAAG,CAACK,MAAM,CAAC,CAAE,CAAC;AAClC;AAEA,OAAO,SAASC,iBAAiBA,CAAER,QAAQ,GAAG,EAAE,EAAEC,QAAQ,GAAG,EAAE,EAAG;EACjE,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAC,CAAC;EACrB;EACA,KAAM,MAAMlB,IAAI,IAAIe,QAAQ,EAAG;IAC9BE,GAAG,CAACE,GAAG,CAAEnB,IAAI,CAACI,IAAI,EAAE;MAAE,GAAGJ;IAAK,CAAE,CAAC;EAClC;EACA;EACA,KAAM,MAAMA,IAAI,IAAIgB,QAAQ,EAAG;IAC9B,IAAKC,GAAG,CAACO,GAAG,CAAExB,IAAI,CAACI,IAAK,CAAC,EAAG;MAC3B,MAAM;QAAEqB,QAAQ,EAAEC,iBAAiB;QAAE,GAAGC;MAAa,CAAC,GAAG3B,IAAI;MAC7D,MAAM4B,YAAY,GAAGX,GAAG,CAACY,GAAG,CAAE7B,IAAI,CAACI,IAAK,CAAC;MACzC;MACA,MAAM0B,eAAe,GAAGhB,cAAc,CACrCc,YAAY,CAACH,QAAQ,EACrBC,iBACD,CAAC;MACD;MACAT,GAAG,CAACE,GAAG,CAAEnB,IAAI,CAACI,IAAI,EAAE;QACnB,GAAGuB,YAAY;QACfF,QAAQ,EAAEK;MACX,CAAE,CAAC;IACJ,CAAC,MAAM;MACNb,GAAG,CAACE,GAAG,CAAEnB,IAAI,CAACI,IAAI,EAAE;QAAE,GAAGJ;MAAK,CAAE,CAAC;IAClC;EACD;EACA,OAAOoB,KAAK,CAACC,IAAI,CAAEJ,GAAG,CAACK,MAAM,CAAC,CAAE,CAAC;AAClC;;AAEA;AACA;AACA;AACA;AACA,OAAO,eAAeS,qBAAqBA,CAAEN,QAAQ,EAAEO,MAAM,EAAEC,KAAK,GAAG,KAAK,EAAG;EAC9E,IAAIC,UAAU;EAEd,IAAK,OAAOF,MAAM,KAAK,QAAQ,EAAG;IACjCE,UAAU,GAAI,OAAOF,MAAQ,GAAE;IAC/B;EACD,CAAC,MAAM,IAAKA,MAAM,YAAYG,IAAI,EAAG;IACpCD,UAAU,GAAG,MAAMF,MAAM,CAACI,WAAW,CAAC,CAAC;EACxC;;EAEA;EACA,MAAMC,OAAO,GAAG,IAAIC,QAAQ,CAAEb,QAAQ,CAACtB,UAAU,EAAE+B,UAAU,EAAE;IAC9DK,KAAK,EAAEd,QAAQ,CAACZ,SAAS;IACzB2B,MAAM,EAAEf,QAAQ,CAACd;EAClB,CAAE,CAAC;EAEH,MAAM8B,UAAU,GAAG,MAAMJ,OAAO,CAACK,IAAI,CAAC,CAAC;EAEvC,IAAKT,KAAK,KAAK,UAAU,IAAIA,KAAK,KAAK,KAAK,EAAG;IAC9CU,QAAQ,CAACC,KAAK,CAACC,GAAG,CAAEJ,UAAW,CAAC;EACjC;EAEA,IAAKR,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,KAAK,EAAG;IAC5C,MAAMa,cAAc,GAAGH,QAAQ,CAACI,aAAa,CAC5C,8BACD,CAAC,CAACC,eAAe;IACjBF,cAAc,CAACF,KAAK,CAACC,GAAG,CAAEJ,UAAW,CAAC;EACvC;AACD;AAEA,OAAO,SAASQ,yBAAyBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EAC7D,IAAK,CAAED,KAAK,EAAG;IACd;EACD;EAEA,IAAIE,GAAG;EACP,IAAKhC,KAAK,CAACiC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7BE,GAAG,GAAGF,KAAK,CAAE,CAAC,CAAE;EACjB,CAAC,MAAM;IACNE,GAAG,GAAGF,KAAK;EACZ;EACA;EACA,IAAKE,GAAG,CAACE,UAAU,CAAE,QAAS,CAAC,IAAIH,SAAS,EAAG;IAC9CC,GAAG,GAAGA,GAAG,CAACG,OAAO,CAAE,QAAQ,EAAEJ,SAAU,CAAC;EACzC;EACA,IAAK,CAAE9C,YAAY,CAAE+C,GAAI,CAAC,EAAG;IAC5BA,GAAG,GAAGI,SAAS,CAAEJ,GAAI,CAAC;EACvB;EACA,OAAOA,GAAG;AACX;;AAEA;AACA;AACA,OAAO,SAASK,WAAWA,CAAEC,GAAG,EAAG;EAClC;EACA,OAAO9D,SAAS,CAAE8D,GAAI,CAAC,CAACH,OAAO,CAC9B,gCAAgC,EAChC,WACD,CAAC;AACF;AAEA,OAAO,SAASI,4BAA4BA,CAAEC,YAAY,EAAG;EAC5D,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,CAAC;EAC/B,MAAMC,eAAe,GAAGH,YAAY,CAAC3C,GAAG,CAAE,CAAE+C,MAAM,EAAEC,WAAW,KAAM;IACpED,MAAM,CAAC5D,IAAI,GAAGqD,WAAW,CAAEO,MAAM,CAAC5D,IAAK,CAAC;IACxC,IAAK4D,MAAM,EAAEvC,QAAQ,EAAG;MACvBuC,MAAM,CAACvC,QAAQ,GAAGuC,MAAM,CAACvC,QAAQ,CAACR,GAAG,CAAE,CAAER,IAAI,EAAEyD,SAAS,KAAM;QAC7D,IAAKzD,IAAI,CAAC0D,IAAI,EAAG;UAChB;UACA,MAAMC,MAAM,GAAI,QAAQH,WAAa,IAAIC,SAAW,EAAC;UACrD;UACAL,QAAQ,CAACQ,MAAM,CAAED,MAAM,EAAE3D,IAAI,CAAC0D,IAAI,EAAE1D,IAAI,CAAC0D,IAAI,CAACjE,IAAK,CAAC;UACpD;UACA,MAAM;YAAEiE,IAAI;YAAE,GAAGG;UAAwB,CAAC,GAAG7D,IAAI;UACjD,MAAM8D,OAAO,GAAG;YACf,GAAGD,uBAAuB;YAC1BE,YAAY,EAAEJ;UACf,CAAC;UACD,OAAOG,OAAO;QACf;QACA,OAAO9D,IAAI;MACZ,CAAE,CAAC;IACJ;IACA,OAAOuD,MAAM;EACd,CAAE,CAAC;EACHH,QAAQ,CAACQ,MAAM,CAAE,eAAe,EAAEI,IAAI,CAACC,SAAS,CAAEX,eAAgB,CAAE,CAAC;EACrE,OAAOF,QAAQ;AAChB"}
+{"version":3,"names":["privateApis","componentsPrivateApis","FONT_WEIGHTS","FONT_STYLES","unlock","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","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","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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"}

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

@@ -4,8 +4,8 @@ import { createElement, Fragment } from "react";
  */
 import { __unstableIframe as Iframe, __unstableEditorStyles as EditorStyles, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __unstableMotion as motion, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
-import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import { useThrottle, useReducedMotion, useResizeObserver } from '@wordpress/compose';
+import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -47,6 +47,13 @@ const secondFrame = {
 const normalizedWidth = 248;
 const normalizedHeight = 152;
 const normalizedColorSwatchSize = 32;
+
+// Throttle options for useThrottle. Must be defined outside of the component,
+// so that the object reference is the same on each render.
+const THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: true
+};
 const StylesPreview = ({
   label,
   isFocused,
@@ -66,7 +73,41 @@ const StylesPreview = ({
   const [containerResizeListener, {
     width
   }] = useResizeObserver();
-  const ratio = width ? width / normalizedWidth : 1;
+  const [throttledWidth, setThrottledWidthState] = useState(width);
+  const [ratioState, setRatioState] = useState();
+  const setThrottledWidth = useThrottle(setThrottledWidthState, 250, THROTTLE_OPTIONS);
+
+  // Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+  // size before the width is set.
+  useLayoutEffect(() => {
+    if (width) {
+      setThrottledWidth(width);
+    }
+  }, [width, setThrottledWidth]);
+
+  // Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+  // size before the width is set.
+  useLayoutEffect(() => {
+    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+    const ratioDiff = newRatio - (ratioState || 0);
+
+    // Only update the ratio state if the difference is big enough
+    // or if the ratio state is not yet set. This is to avoid an
+    // endless loop of updates at particular viewport heights when the
+    // presence of a scrollbar causes the width to change slightly.
+    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
+    if (isRatioDiffBigEnough || !ratioState) {
+      setRatioState(newRatio);
+    }
+  }, [throttledWidth, ratioState]);
+
+  // Set a fallbackRatio to use before the throttled ratio has been set.
+  const fallbackRatio = width ? width / normalizedWidth : 1;
+  // Use the throttled ratio if it has been calculated, otherwise
+  // use the fallback ratio. The throttled ratio is used to avoid
+  // an endless loop of updates at particular viewport heights.
+  // See: https://github.com/WordPress/gutenberg/issues/55112
+  const ratio = ratioState ? ratioState : fallbackRatio;
   const {
     paletteColors,
     highlightedColors
@@ -90,6 +131,7 @@ const StylesPreview = ({
   }, containerResizeListener), isReady && createElement(Iframe, {
     className: "edit-site-global-styles-preview__iframe",
     style: {
+      width: '100%',
       height: normalizedHeight * ratio
     },
     onMouseEnter: () => setIsHovered(true),

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

@@ -1 +1 @@
-{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useStylesPreviewColors","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","highlightedColors","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","variants","overflow","spacing","justify","fontSize","color","transition","delay","type","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\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 midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst { paletteColors, highlightedColors } = useStylesPreviewColors();\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"],"mappings":"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"}
+{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useStylesPreviewColors","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","THROTTLE_OPTIONS","leading","trailing","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","paletteColors","highlightedColors","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","variants","overflow","spacing","justify","fontSize","color","transition","delay","type","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\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 midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t// Use the throttled ratio if it has been calculated, otherwise\n\t// use the fallback ratio. The throttled ratio is used to avoid\n\t// an endless loop of updates at particular viewport heights.\n\t// See: https://github.com/WordPress/gutenberg/issues/55112\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst { paletteColors, highlightedColors } = useStylesPreviewColors();\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"],"mappings":"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"}

package/build-module/components/global-styles/screen-color-palette.js

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,25 +11,29 @@ import { TabPanel } from '@wordpress/components';
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+const {
+  Tabs
+} = unlock(componentsPrivateApis);
 function ScreenColorPalette({
   name
 }) {
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Palette'),
     description: __('Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.')
-  }), createElement(TabPanel, {
-    tabs: [{
-      name: 'solid',
-      title: 'Solid',
-      value: 'solid'
-    }, {
-      name: 'gradient',
-      title: 'Gradient',
-      value: 'gradient'
-    }]
-  }, tab => createElement(Fragment, null, tab.value === 'solid' && createElement(ColorPalettePanel, {
+  }), createElement(Tabs, null, createElement(Tabs.TabList, null, createElement(Tabs.Tab, {
+    tabId: "solid"
+  }, "Solid"), createElement(Tabs.Tab, {
+    tabId: "gradient"
+  }, "Gradient")), createElement(Tabs.TabPanel, {
+    tabId: "solid",
+    focusable: false
+  }, createElement(ColorPalettePanel, {
     name: name
-  }), tab.value === 'gradient' && createElement(GradientPalettePanel, {
+  })), createElement(Tabs.TabPanel, {
+    tabId: "gradient",
+    focusable: false
+  }, createElement(GradientPalettePanel, {
     name: name
   }))));
 }

package/build-module/components/global-styles/screen-color-palette.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","TabPanel","ColorPalettePanel","GradientPalettePanel","ScreenHeader","ScreenColorPalette","name","createElement","Fragment","title","description","tabs","value","tab"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TabPanel } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'solid',\n\t\t\t\t\t\ttitle: 'Solid',\n\t\t\t\t\t\tvalue: 'solid',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'gradient',\n\t\t\t\t\t\ttitle: 'Gradient',\n\t\t\t\t\t\tvalue: 'gradient',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ tab.value === 'solid' && (\n\t\t\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ tab.value === 'gradient' && (\n\t\t\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,uBAAuB;;AAEhD;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,OAAOC,YAAY,MAAM,UAAU;AAEnC,SAASC,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACH,YAAY;IACZK,KAAK,EAAGT,EAAE,CAAE,SAAU,CAAG;IACzBU,WAAW,EAAGV,EAAE,CACf,yIACD;EAAG,CACH,CAAC,EACFO,aAAA,CAACN,QAAQ;IACRU,IAAI,EAAG,CACN;MACCL,IAAI,EAAE,OAAO;MACbG,KAAK,EAAE,OAAO;MACdG,KAAK,EAAE;IACR,CAAC,EACD;MACCN,IAAI,EAAE,UAAU;MAChBG,KAAK,EAAE,UAAU;MACjBG,KAAK,EAAE;IACR,CAAC;EACC,GAECC,GAAG,IACNN,aAAA,CAAAC,QAAA,QACGK,GAAG,CAACD,KAAK,KAAK,OAAO,IACtBL,aAAA,CAACL,iBAAiB;IAACI,IAAI,EAAGA;EAAM,CAAE,CAClC,EACCO,GAAG,CAACD,KAAK,KAAK,UAAU,IACzBL,aAAA,CAACJ,oBAAoB;IAACG,IAAI,EAAGA;EAAM,CAAE,CAErC,CAEM,CACT,CAAC;AAEL;AAEA,eAAeD,kBAAkB"}
+{"version":3,"names":["__","privateApis","componentsPrivateApis","ColorPalettePanel","GradientPalettePanel","ScreenHeader","unlock","Tabs","ScreenColorPalette","name","createElement","Fragment","title","description","TabList","Tab","tabId","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction ScreenColorPalette( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"solid\">Solid</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"gradient\">Gradient</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Tabs.TabPanel tabId=\"solid\" focusable={ false }>\n\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"gradient\" focusable={ false }>\n\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEJ,qBAAsB,CAAC;AAEhD,SAASM,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGZ,EAAE,CAAE,SAAU,CAAG;IACzBa,WAAW,EAAGb,EAAE,CACf,yIACD;EAAG,CACH,CAAC,EACFU,aAAA,CAACH,IAAI,QACJG,aAAA,CAACH,IAAI,CAACO,OAAO,QACZJ,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAO,GAAC,OAAe,CAAC,EACxCN,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAU,GAAC,UAAkB,CAChC,CAAC,EACfN,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,OAAO;IAACE,SAAS,EAAG;EAAO,GAC/CR,aAAA,CAACP,iBAAiB;IAACM,IAAI,EAAGA;EAAM,CAAE,CACpB,CAAC,EAChBC,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,UAAU;IAACE,SAAS,EAAG;EAAO,GAClDR,aAAA,CAACN,oBAAoB;IAACK,IAAI,EAAGA;EAAM,CAAE,CACvB,CACV,CACL,CAAC;AAEL;AAEA,eAAeD,kBAAkB"}

package/build-module/components/global-styles/screen-revisions/index.js

@@ -3,9 +3,8 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner } from '@wordpress/components';
+import { __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useState, useEffect } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -15,14 +14,16 @@ import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from
 import ScreenHeader from '../header';
 import { unlock } from '../../../lock-unlock';
 import Revisions from '../../revisions';
-import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';
 import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
+import StyleBook from '../../style-book';
+import Pagination from '../../pagination';
 const {
   GlobalStylesContext,
   areGlobalStyleConfigsEqual
 } = unlock(blockEditorPrivateApis);
+const PAGE_SIZE = 10;
 function ScreenRevisions() {
   const {
     goTo
@@ -33,35 +34,25 @@ function ScreenRevisions() {
   } = useContext(GlobalStylesContext);
   const {
     blocks,
-    editorCanvasContainerView,
-    revisionsCount
-  } = useSelect(select => {
-    const {
-      getEntityRecord,
-      __experimentalGetCurrentGlobalStylesId,
-      __experimentalGetDirtyEntityRecords
-    } = select(coreStore);
-    const isDirty = __experimentalGetDirtyEntityRecords().length > 0;
-    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
-    let _revisionsCount = globalStyles?._links?.['version-history']?.[0]?.count || 0;
-    // one for the reset item.
-    _revisionsCount++;
-    // one for any dirty changes (unsaved).
-    if (isDirty) {
-      _revisionsCount++;
-    }
-    return {
-      editorCanvasContainerView: unlock(select(editSiteStore)).getEditorCanvasContainerView(),
-      blocks: select(blockEditorStore).getBlocks(),
-      revisionsCount: _revisionsCount
-    };
-  }, []);
+    editorCanvasContainerView
+  } = useSelect(select => ({
+    editorCanvasContainerView: unlock(select(editSiteStore)).getEditorCanvasContainerView(),
+    blocks: select(blockEditorStore).getBlocks()
+  }), []);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentRevisions, setCurrentRevisions] = useState([]);
   const {
     revisions,
     isLoading,
-    hasUnsavedChanges
-  } = useGlobalStylesRevisions();
+    hasUnsavedChanges,
+    revisionsCount
+  } = useGlobalStylesRevisions({
+    query: {
+      per_page: PAGE_SIZE,
+      page: currentPage
+    }
+  });
+  const numPages = Math.ceil(revisionsCount / PAGE_SIZE);
   const [currentlySelectedRevision, setCurrentlySelectedRevision] = useState(currentEditorGlobalStyles);
   const [isLoadingRevisionWithUnsavedChanges, setIsLoadingRevisionWithUnsavedChanges] = useState(false);
   const {
@@ -88,11 +79,16 @@ function ScreenRevisions() {
     });
   };
   useEffect(() => {
-    if (editorCanvasContainerView !== 'global-styles-revisions') {
+    if (!editorCanvasContainerView || !editorCanvasContainerView.startsWith('global-styles-revisions')) {
       goTo('/'); // Return to global styles main panel.
       setEditorCanvasContainerView(editorCanvasContainerView);
     }
   }, [editorCanvasContainerView]);
+  useEffect(() => {
+    if (!isLoading && revisions.length) {
+      setCurrentRevisions(revisions);
+    }
+  }, [revisions, isLoading]);
   const firstRevision = revisions[0];
   const currentlySelectedRevisionId = currentlySelectedRevision?.id;
   const shouldSelectFirstItem = !!firstRevision?.id && !selectedRevisionMatchesEditorStyles && !currentlySelectedRevisionId;
@@ -115,44 +111,48 @@ function ScreenRevisions() {
 
   // Only display load button if there is a revision to load,
   // and it is different from the current editor styles.
-  const isLoadButtonEnabled = !!currentlySelectedRevisionId && !selectedRevisionMatchesEditorStyles;
-  const shouldShowRevisions = !isLoading && revisions.length;
+  const isLoadButtonEnabled = !!currentlySelectedRevisionId && currentlySelectedRevisionId !== 'unsaved' && !selectedRevisionMatchesEditorStyles;
+  const hasRevisions = !!currentRevisions.length;
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: revisionsCount &&
     // translators: %s: number of revisions.
     sprintf(__('Revisions (%s)'), revisionsCount),
     description: __('Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'),
     onBack: onCloseRevisions
-  }), isLoading && createElement(Spinner, {
+  }), !hasRevisions && createElement(Spinner, {
     className: "edit-site-global-styles-screen-revisions__loading"
-  }), shouldShowRevisions && createElement(Fragment, null, createElement(Revisions, {
+  }), hasRevisions && (editorCanvasContainerView === 'global-styles-revisions:style-book' ? createElement(StyleBook, {
+    userConfig: currentlySelectedRevision,
+    isSelected: () => {},
+    onClose: () => {
+      setEditorCanvasContainerView('global-styles-revisions');
+    }
+  }) : createElement(Revisions, {
     blocks: blocks,
     userConfig: currentlySelectedRevision,
-    onClose: onCloseRevisions
-  }), createElement("div", {
-    className: "edit-site-global-styles-screen-revisions"
-  }, createElement(RevisionsButtons, {
+    closeButtonLabel: __('Close revisions')
+  })), createElement(RevisionsButtons, {
     onChange: selectRevision,
     selectedRevisionId: currentlySelectedRevisionId,
-    userRevisions: revisions,
-    canApplyRevision: isLoadButtonEnabled
-  }), isLoadButtonEnabled && createElement(SidebarFixedBottom, null, createElement(Button, {
-    variant: "primary",
-    className: "edit-site-global-styles-screen-revisions__button",
-    disabled: !currentlySelectedRevisionId || currentlySelectedRevisionId === 'unsaved',
-    onClick: () => {
-      if (hasUnsavedChanges) {
-        setIsLoadingRevisionWithUnsavedChanges(true);
-      } else {
-        restoreRevision(currentlySelectedRevision);
-      }
-    }
-  }, currentlySelectedRevisionId === 'parent' ? __('Reset to defaults') : __('Apply')))), isLoadingRevisionWithUnsavedChanges && createElement(ConfirmDialog, {
+    userRevisions: currentRevisions,
+    canApplyRevision: isLoadButtonEnabled,
+    onApplyRevision: () => hasUnsavedChanges ? setIsLoadingRevisionWithUnsavedChanges(true) : restoreRevision(currentlySelectedRevision)
+  }), numPages > 1 && createElement("div", {
+    className: "edit-site-global-styles-screen-revisions__footer"
+  }, createElement(Pagination, {
+    className: "edit-site-global-styles-screen-revisions__pagination",
+    currentPage: currentPage,
+    numPages: numPages,
+    changePage: setCurrentPage,
+    totalItems: revisionsCount,
+    disabled: isLoading,
+    label: __('Global Styles pagination navigation')
+  })), isLoadingRevisionWithUnsavedChanges && createElement(ConfirmDialog, {
     isOpen: isLoadingRevisionWithUnsavedChanges,
     confirmButtonText: __('Apply'),
     onConfirm: () => restoreRevision(currentlySelectedRevision),
     onCancel: () => setIsLoadingRevisionWithUnsavedChanges(false)
-  }, __('Any unsaved changes will be lost when you apply this revision.'))));
+  }, __('Any unsaved changes will be lost when you apply this revision.')));
 }
 export default ScreenRevisions;
 //# sourceMappingURL=index.js.map

package/build-module/components/global-styles/screen-revisions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","Button","__experimentalUseNavigator","useNavigator","__experimentalConfirmDialog","ConfirmDialog","Spinner","useSelect","useDispatch","store","coreStore","useContext","useState","useEffect","privateApis","blockEditorPrivateApis","blockEditorStore","ScreenHeader","unlock","Revisions","SidebarFixedBottom","editSiteStore","useGlobalStylesRevisions","RevisionsButtons","GlobalStylesContext","areGlobalStyleConfigsEqual","ScreenRevisions","goTo","user","currentEditorGlobalStyles","setUserConfig","blocks","editorCanvasContainerView","revisionsCount","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","__experimentalGetDirtyEntityRecords","isDirty","length","globalStylesId","globalStyles","undefined","_revisionsCount","_links","count","getEditorCanvasContainerView","getBlocks","revisions","isLoading","hasUnsavedChanges","currentlySelectedRevision","setCurrentlySelectedRevision","isLoadingRevisionWithUnsavedChanges","setIsLoadingRevisionWithUnsavedChanges","setEditorCanvasContainerView","selectedRevisionMatchesEditorStyles","onCloseRevisions","restoreRevision","revision","styles","settings","selectRevision","id","firstRevision","currentlySelectedRevisionId","shouldSelectFirstItem","isLoadButtonEnabled","shouldShowRevisions","createElement","Fragment","title","description","onBack","className","userConfig","onClose","onChange","selectedRevisionId","userRevisions","canApplyRevision","variant","disabled","onClick","isOpen","confirmButtonText","onConfirm","onCancel"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useContext, useState, useEffect } from '@wordpress/element';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from '../header';\nimport { unlock } from '../../../lock-unlock';\nimport Revisions from '../../revisions';\nimport SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';\nimport { store as editSiteStore } from '../../../store';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenRevisions() {\n\tconst { goTo } = useNavigator();\n\tconst { user: currentEditorGlobalStyles, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { blocks, editorCanvasContainerView, revisionsCount } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t} = select( coreStore );\n\t\t\tconst isDirty = __experimentalGetDirtyEntityRecords().length > 0;\n\t\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\t\tconst globalStyles = globalStylesId\n\t\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t\t: undefined;\n\t\t\tlet _revisionsCount =\n\t\t\t\tglobalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;\n\t\t\t// one for the reset item.\n\t\t\t_revisionsCount++;\n\t\t\t// one for any dirty changes (unsaved).\n\t\t\tif ( isDirty ) {\n\t\t\t\t_revisionsCount++;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\teditorCanvasContainerView: unlock(\n\t\t\t\t\tselect( editSiteStore )\n\t\t\t\t).getEditorCanvasContainerView(),\n\t\t\t\tblocks: select( blockEditorStore ).getBlocks(),\n\t\t\t\trevisionsCount: _revisionsCount,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { revisions, isLoading, hasUnsavedChanges } =\n\t\tuseGlobalStylesRevisions();\n\tconst [ currentlySelectedRevision, setCurrentlySelectedRevision ] =\n\t\tuseState( currentEditorGlobalStyles );\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\tsetEditorCanvasContainerView( undefined );\n\t};\n\n\tconst restoreRevision = ( revision ) => {\n\t\tsetUserConfig( () => ( {\n\t\t\tstyles: revision?.styles,\n\t\t\tsettings: revision?.settings,\n\t\t} ) );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst selectRevision = ( revision ) => {\n\t\tsetCurrentlySelectedRevision( {\n\t\t\tstyles: revision?.styles || {},\n\t\t\tsettings: revision?.settings || {},\n\t\t\tid: revision?.id,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( editorCanvasContainerView !== 'global-styles-revisions' ) {\n\t\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\t\tsetEditorCanvasContainerView( editorCanvasContainerView );\n\t\t}\n\t}, [ editorCanvasContainerView ] );\n\n\tconst firstRevision = revisions[ 0 ];\n\tconst currentlySelectedRevisionId = currentlySelectedRevision?.id;\n\tconst shouldSelectFirstItem =\n\t\t!! firstRevision?.id &&\n\t\t! selectedRevisionMatchesEditorStyles &&\n\t\t! currentlySelectedRevisionId;\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * Ensure that the first item is selected and loaded into the preview pane\n\t\t * when no revision is selected and the selected styles don't match the current editor styles.\n\t\t * This is required in case editor styles are changed outside the revisions panel,\n\t\t * e.g., via the reset styles function of useGlobalStylesReset().\n\t\t * See: https://github.com/WordPress/gutenberg/issues/55866\n\t\t */\n\t\tif ( shouldSelectFirstItem ) {\n\t\t\tsetCurrentlySelectedRevision( {\n\t\t\t\tstyles: firstRevision?.styles || {},\n\t\t\t\tsettings: firstRevision?.settings || {},\n\t\t\t\tid: firstRevision?.id,\n\t\t\t} );\n\t\t}\n\t}, [ shouldSelectFirstItem, firstRevision ] );\n\n\t// Only display load button if there is a revision to load,\n\t// and it is different from the current editor styles.\n\tconst isLoadButtonEnabled =\n\t\t!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;\n\tconst shouldShowRevisions = ! isLoading && revisions.length;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\trevisionsCount &&\n\t\t\t\t\t// translators: %s: number of revisions.\n\t\t\t\t\tsprintf( __( 'Revisions (%s)' ), revisionsCount )\n\t\t\t\t}\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Click on previously saved styles to preview them. To restore a selected version to the editor, hit \"Apply.\" When you\\'re ready, use the Save button to save your changes.'\n\t\t\t\t) }\n\t\t\t\tonBack={ onCloseRevisions }\n\t\t\t/>\n\t\t\t{ isLoading && (\n\t\t\t\t<Spinner className=\"edit-site-global-styles-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t{ shouldShowRevisions && (\n\t\t\t\t<>\n\t\t\t\t\t<Revisions\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tuserConfig={ currentlySelectedRevision }\n\t\t\t\t\t\tonClose={ onCloseRevisions }\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"edit-site-global-styles-screen-revisions\">\n\t\t\t\t\t\t<RevisionsButtons\n\t\t\t\t\t\t\tonChange={ selectRevision }\n\t\t\t\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\t\t\t\tuserRevisions={ revisions }\n\t\t\t\t\t\t\tcanApplyRevision={ isLoadButtonEnabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isLoadButtonEnabled && (\n\t\t\t\t\t\t\t<SidebarFixedBottom>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__button\"\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t! currentlySelectedRevisionId ||\n\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevisionId ===\n\t\t\t\t\t\t\t\t\t\t\t'unsaved'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif ( hasUnsavedChanges ) {\n\t\t\t\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges(\n\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\trestoreRevision(\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevision\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ currentlySelectedRevisionId === 'parent'\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</SidebarFixedBottom>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Any unsaved changes will be lost when you apply this revision.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],"mappings":"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"}
+{"version":3,"names":["__","sprintf","__experimentalUseNavigator","useNavigator","__experimentalConfirmDialog","ConfirmDialog","Spinner","useSelect","useDispatch","useContext","useState","useEffect","privateApis","blockEditorPrivateApis","store","blockEditorStore","ScreenHeader","unlock","Revisions","editSiteStore","useGlobalStylesRevisions","RevisionsButtons","StyleBook","Pagination","GlobalStylesContext","areGlobalStyleConfigsEqual","PAGE_SIZE","ScreenRevisions","goTo","user","currentEditorGlobalStyles","setUserConfig","blocks","editorCanvasContainerView","select","getEditorCanvasContainerView","getBlocks","currentPage","setCurrentPage","currentRevisions","setCurrentRevisions","revisions","isLoading","hasUnsavedChanges","revisionsCount","query","per_page","page","numPages","Math","ceil","currentlySelectedRevision","setCurrentlySelectedRevision","isLoadingRevisionWithUnsavedChanges","setIsLoadingRevisionWithUnsavedChanges","setEditorCanvasContainerView","selectedRevisionMatchesEditorStyles","onCloseRevisions","undefined","restoreRevision","revision","styles","settings","selectRevision","id","startsWith","length","firstRevision","currentlySelectedRevisionId","shouldSelectFirstItem","isLoadButtonEnabled","hasRevisions","createElement","Fragment","title","description","onBack","className","userConfig","isSelected","onClose","closeButtonLabel","onChange","selectedRevisionId","userRevisions","canApplyRevision","onApplyRevision","changePage","totalItems","disabled","label","isOpen","confirmButtonText","onConfirm","onCancel"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useContext, useState, useEffect } from '@wordpress/element';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from '../header';\nimport { unlock } from '../../../lock-unlock';\nimport Revisions from '../../revisions';\nimport { store as editSiteStore } from '../../../store';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\nimport StyleBook from '../../style-book';\nimport Pagination from '../../pagination';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst PAGE_SIZE = 10;\n\nfunction ScreenRevisions() {\n\tconst { goTo } = useNavigator();\n\tconst { user: currentEditorGlobalStyles, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { blocks, editorCanvasContainerView } = useSelect(\n\t\t( select ) => ( {\n\t\t\teditorCanvasContainerView: unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t).getEditorCanvasContainerView(),\n\t\t\tblocks: select( blockEditorStore ).getBlocks(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst [ currentPage, setCurrentPage ] = useState( 1 );\n\tconst [ currentRevisions, setCurrentRevisions ] = useState( [] );\n\tconst { revisions, isLoading, hasUnsavedChanges, revisionsCount } =\n\t\tuseGlobalStylesRevisions( {\n\t\t\tquery: {\n\t\t\t\tper_page: PAGE_SIZE,\n\t\t\t\tpage: currentPage,\n\t\t\t},\n\t\t} );\n\n\tconst numPages = Math.ceil( revisionsCount / PAGE_SIZE );\n\n\tconst [ currentlySelectedRevision, setCurrentlySelectedRevision ] =\n\t\tuseState( currentEditorGlobalStyles );\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\tsetEditorCanvasContainerView( undefined );\n\t};\n\n\tconst restoreRevision = ( revision ) => {\n\t\tsetUserConfig( () => ( {\n\t\t\tstyles: revision?.styles,\n\t\t\tsettings: revision?.settings,\n\t\t} ) );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst selectRevision = ( revision ) => {\n\t\tsetCurrentlySelectedRevision( {\n\t\t\tstyles: revision?.styles || {},\n\t\t\tsettings: revision?.settings || {},\n\t\t\tid: revision?.id,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! editorCanvasContainerView ||\n\t\t\t! editorCanvasContainerView.startsWith( 'global-styles-revisions' )\n\t\t) {\n\t\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\t\tsetEditorCanvasContainerView( editorCanvasContainerView );\n\t\t}\n\t}, [ editorCanvasContainerView ] );\n\n\tuseEffect( () => {\n\t\tif ( ! isLoading && revisions.length ) {\n\t\t\tsetCurrentRevisions( revisions );\n\t\t}\n\t}, [ revisions, isLoading ] );\n\n\tconst firstRevision = revisions[ 0 ];\n\tconst currentlySelectedRevisionId = currentlySelectedRevision?.id;\n\tconst shouldSelectFirstItem =\n\t\t!! firstRevision?.id &&\n\t\t! selectedRevisionMatchesEditorStyles &&\n\t\t! currentlySelectedRevisionId;\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * Ensure that the first item is selected and loaded into the preview pane\n\t\t * when no revision is selected and the selected styles don't match the current editor styles.\n\t\t * This is required in case editor styles are changed outside the revisions panel,\n\t\t * e.g., via the reset styles function of useGlobalStylesReset().\n\t\t * See: https://github.com/WordPress/gutenberg/issues/55866\n\t\t */\n\t\tif ( shouldSelectFirstItem ) {\n\t\t\tsetCurrentlySelectedRevision( {\n\t\t\t\tstyles: firstRevision?.styles || {},\n\t\t\t\tsettings: firstRevision?.settings || {},\n\t\t\t\tid: firstRevision?.id,\n\t\t\t} );\n\t\t}\n\t}, [ shouldSelectFirstItem, firstRevision ] );\n\n\t// Only display load button if there is a revision to load,\n\t// and it is different from the current editor styles.\n\tconst isLoadButtonEnabled =\n\t\t!! currentlySelectedRevisionId &&\n\t\tcurrentlySelectedRevisionId !== 'unsaved' &&\n\t\t! selectedRevisionMatchesEditorStyles;\n\tconst hasRevisions = !! currentRevisions.length;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\trevisionsCount &&\n\t\t\t\t\t// translators: %s: number of revisions.\n\t\t\t\t\tsprintf( __( 'Revisions (%s)' ), revisionsCount )\n\t\t\t\t}\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Click on previously saved styles to preview them. To restore a selected version to the editor, hit \"Apply.\" When you\\'re ready, use the Save button to save your changes.'\n\t\t\t\t) }\n\t\t\t\tonBack={ onCloseRevisions }\n\t\t\t/>\n\t\t\t{ ! hasRevisions && (\n\t\t\t\t<Spinner className=\"edit-site-global-styles-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t{ hasRevisions &&\n\t\t\t\t( editorCanvasContainerView ===\n\t\t\t\t'global-styles-revisions:style-book' ? (\n\t\t\t\t\t<StyleBook\n\t\t\t\t\t\tuserConfig={ currentlySelectedRevision }\n\t\t\t\t\t\tisSelected={ () => {} }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t'global-styles-revisions'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Revisions\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tuserConfig={ currentlySelectedRevision }\n\t\t\t\t\t\tcloseButtonLabel={ __( 'Close revisions' ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t<RevisionsButtons\n\t\t\t\tonChange={ selectRevision }\n\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\tuserRevisions={ currentRevisions }\n\t\t\t\tcanApplyRevision={ isLoadButtonEnabled }\n\t\t\t\tonApplyRevision={ () =>\n\t\t\t\t\thasUnsavedChanges\n\t\t\t\t\t\t? setIsLoadingRevisionWithUnsavedChanges( true )\n\t\t\t\t\t\t: restoreRevision( currentlySelectedRevision )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ numPages > 1 && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-revisions__footer\">\n\t\t\t\t\t<Pagination\n\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__pagination\"\n\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\tnumPages={ numPages }\n\t\t\t\t\t\tchangePage={ setCurrentPage }\n\t\t\t\t\t\ttotalItems={ revisionsCount }\n\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\tlabel={ __( 'Global Styles pagination navigation' ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t}\n\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Any unsaved changes will be lost when you apply this revision.'\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],"mappings":"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"}