@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,141 @@
+/**
+ * Internal dependencies
+ */
+import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { formatFontFamily } from './preview-styles';
+export function setUIValuesNeeded(font, extraValues = {}) {
+  if (!font.name && (font.fontFamily || font.slug)) {
+    font.name = font.fontFamily || font.slug;
+  }
+  return {
+    ...font,
+    ...extraValues
+  };
+}
+export function isUrlEncoded(url) {
+  if (typeof url !== 'string') {
+    return false;
+  }
+  return url !== decodeURIComponent(url);
+}
+export function getFontFaceVariantName(face) {
+  const weightName = FONT_WEIGHTS[face.fontWeight] || face.fontWeight;
+  const styleName = face.fontStyle === 'normal' ? '' : FONT_STYLES[face.fontStyle] || face.fontStyle;
+  return `${weightName} ${styleName}`;
+}
+export function mergeFontFaces(existing = [], incoming = []) {
+  const map = new Map();
+  for (const face of existing) {
+    map.set(`${face.fontWeight}${face.fontStyle}`, face);
+  }
+  for (const face of incoming) {
+    // This will overwrite if the src already exists, keeping it unique.
+    map.set(`${face.fontWeight}${face.fontStyle}`, face);
+  }
+  return Array.from(map.values());
+}
+export function mergeFontFamilies(existing = [], incoming = []) {
+  const map = new Map();
+  // Add the existing array to the map.
+  for (const font of existing) {
+    map.set(font.slug, {
+      ...font
+    });
+  }
+  // Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.
+  for (const font of incoming) {
+    if (map.has(font.slug)) {
+      const {
+        fontFace: incomingFontFaces,
+        ...restIncoming
+      } = font;
+      const existingFont = map.get(font.slug);
+      // Merge the fontFaces existing with the incoming fontFaces.
+      const mergedFontFaces = mergeFontFaces(existingFont.fontFace, incomingFontFaces);
+      // Except for the fontFace key all the other keys are overwritten with the incoming values.
+      map.set(font.slug, {
+        ...restIncoming,
+        fontFace: mergedFontFaces
+      });
+    } else {
+      map.set(font.slug, {
+        ...font
+      });
+    }
+  }
+  return Array.from(map.values());
+}
+
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser(fontFace, source, addTo = 'all') {
+  let dataSource;
+  if (typeof source === 'string') {
+    dataSource = `url(${source})`;
+    // eslint-disable-next-line no-undef
+  } else if (source instanceof File) {
+    dataSource = await source.arrayBuffer();
+  }
+
+  // eslint-disable-next-line no-undef
+  const newFont = new FontFace(formatFontFamily(fontFace.fontFamily), dataSource, {
+    style: fontFace.fontStyle,
+    weight: fontFace.fontWeight
+  });
+  const loadedFace = await newFont.load();
+  if (addTo === 'document' || addTo === 'all') {
+    document.fonts.add(loadedFace);
+  }
+  if (addTo === 'iframe' || addTo === 'all') {
+    const iframeDocument = document.querySelector('iframe[name="editor-canvas"]').contentDocument;
+    iframeDocument.fonts.add(loadedFace);
+  }
+}
+export function getDisplaySrcFromFontFace(input, urlPrefix) {
+  let src;
+  if (Array.isArray(input)) {
+    src = input[0];
+  } else {
+    src = input;
+  }
+  // If it is a theme font, we need to make the url absolute
+  if (src.startsWith('file:.') && urlPrefix) {
+    src = src.replace('file:.', urlPrefix);
+  }
+  if (!isUrlEncoded(src)) {
+    src = encodeURI(src);
+  }
+  return src;
+}
+export function makeFormDataFromFontFamilies(fontFamilies) {
+  const formData = new FormData();
+  const newFontFamilies = fontFamilies.map((family, familyIndex) => {
+    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('fontFamilies', JSON.stringify(newFontFamilies));
+  return formData;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["FONT_WEIGHTS","FONT_STYLES","formatFontFamily","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","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 * Internal dependencies\n */\nimport { FONT_WEIGHTS, FONT_STYLES } from './constants';\nimport { formatFontFamily } from './preview-styles';\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(\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\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 makeFormDataFromFontFamilies( fontFamilies ) {\n\tconst formData = new FormData();\n\tconst newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {\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( 'fontFamilies', JSON.stringify( newFontFamilies ) );\n\treturn formData;\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/font-library-modal/utils/make-families-from-faces.js

@@ -0,0 +1,16 @@
+export default function makeFamiliesFromFaces(fontFaces) {
+  const fontFamiliesObject = fontFaces.reduce((acc, item) => {
+    if (!acc[item.fontFamily]) {
+      acc[item.fontFamily] = {
+        name: item.fontFamily,
+        fontFamily: item.fontFamily,
+        slug: item.fontFamily.replace(/\s+/g, '-').toLowerCase(),
+        fontFace: []
+      };
+    }
+    acc[item.fontFamily].fontFace.push(item);
+    return acc;
+  }, {});
+  return Object.values(fontFamiliesObject);
+}
+//# sourceMappingURL=make-families-from-faces.js.map

package/build-module/components/global-styles/font-library-modal/utils/make-families-from-faces.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeFamiliesFromFaces","fontFaces","fontFamiliesObject","reduce","acc","item","fontFamily","name","slug","replace","toLowerCase","fontFace","push","Object","values"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js"],"sourcesContent":["export default function makeFamiliesFromFaces( fontFaces ) {\n\tconst fontFamiliesObject = fontFaces.reduce( ( acc, item ) => {\n\t\tif ( ! acc[ item.fontFamily ] ) {\n\t\t\tacc[ item.fontFamily ] = {\n\t\t\t\tname: item.fontFamily,\n\t\t\t\tfontFamily: item.fontFamily,\n\t\t\t\tslug: item.fontFamily.replace( /\\s+/g, '-' ).toLowerCase(),\n\t\t\t\tfontFace: [],\n\t\t\t};\n\t\t}\n\t\tacc[ item.fontFamily ].fontFace.push( item );\n\t\treturn acc;\n\t}, {} );\n\treturn Object.values( fontFamiliesObject );\n}\n"],"mappings":"AAAA,eAAe,SAASA,qBAAqBA,CAAEC,SAAS,EAAG;EAC1D,MAAMC,kBAAkB,GAAGD,SAAS,CAACE,MAAM,CAAE,CAAEC,GAAG,EAAEC,IAAI,KAAM;IAC7D,IAAK,CAAED,GAAG,CAAEC,IAAI,CAACC,UAAU,CAAE,EAAG;MAC/BF,GAAG,CAAEC,IAAI,CAACC,UAAU,CAAE,GAAG;QACxBC,IAAI,EAAEF,IAAI,CAACC,UAAU;QACrBA,UAAU,EAAED,IAAI,CAACC,UAAU;QAC3BE,IAAI,EAAEH,IAAI,CAACC,UAAU,CAACG,OAAO,CAAE,MAAM,EAAE,GAAI,CAAC,CAACC,WAAW,CAAC,CAAC;QAC1DC,QAAQ,EAAE;MACX,CAAC;IACF;IACAP,GAAG,CAAEC,IAAI,CAACC,UAAU,CAAE,CAACK,QAAQ,CAACC,IAAI,CAAEP,IAAK,CAAC;IAC5C,OAAOD,GAAG;EACX,CAAC,EAAE,CAAC,CAAE,CAAC;EACP,OAAOS,MAAM,CAACC,MAAM,CAAEZ,kBAAmB,CAAC;AAC3C"}

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

@@ -0,0 +1,68 @@
+function findNearest(input, numbers) {
+  // If the numbers array is empty, return null
+  if (numbers.length === 0) {
+    return null;
+  }
+  // Sort the array based on the absolute difference with the input
+  numbers.sort((a, b) => Math.abs(input - a) - Math.abs(input - b));
+  // Return the first element (which will be the nearest) from the sorted array
+  return numbers[0];
+}
+function extractFontWeights(fontFaces) {
+  const result = [];
+  fontFaces.forEach(face => {
+    const weights = String(face.fontWeight).split(' ');
+    if (weights.length === 2) {
+      const start = parseInt(weights[0]);
+      const end = parseInt(weights[1]);
+      for (let i = start; i <= end; i += 100) {
+        result.push(i);
+      }
+    } else if (weights.length === 1) {
+      result.push(parseInt(weights[0]));
+    }
+  });
+  return result;
+}
+export 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}'`;
+    }
+    return font; // Return font as is if no transformation is needed
+  }).join(', ');
+}
+export function getFamilyPreviewStyle(family) {
+  const style = {
+    fontFamily: formatFontFamily(family.fontFamily)
+  };
+  if (!Array.isArray(family.fontFace)) {
+    style.fontWeight = '400';
+    style.fontStyle = 'normal';
+    return style;
+  }
+  if (family.fontFace) {
+    //get all the font faces with normal style
+    const normalFaces = family.fontFace.filter(face => face.fontStyle.toLowerCase() === 'normal');
+    if (normalFaces.length > 0) {
+      style.fontStyle = 'normal';
+      const normalWeights = extractFontWeights(normalFaces);
+      const nearestWeight = findNearest(400, normalWeights);
+      style.fontWeight = String(nearestWeight) || '400';
+    } else {
+      style.fontStyle = family.fontFace.length && family.fontFace[0].fontStyle || 'normal';
+      style.fontWeight = family.fontFace.length && String(family.fontFace[0].fontWeight) || '400';
+    }
+  }
+  return style;
+}
+export function getFacePreviewStyle(face) {
+  return {
+    fontFamily: formatFontFamily(face.fontFamily),
+    fontStyle: face.fontStyle || 'normal',
+    fontWeight: face.fontWeight || '400'
+  };
+}
+//# sourceMappingURL=preview-styles.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,30 @@
+function getNumericFontWeight(value) {
+  switch (value) {
+    case 'normal':
+      return 400;
+    case 'bold':
+      return 700;
+    case 'bolder':
+      return 500;
+    case 'lighter':
+      return 300;
+    default:
+      return parseInt(value, 10);
+  }
+}
+export function sortFontFaces(faces) {
+  return faces.sort((a, b) => {
+    // Ensure 'normal' fontStyle is always first
+    if (a.fontStyle === 'normal' && b.fontStyle !== 'normal') return -1;
+    if (b.fontStyle === 'normal' && a.fontStyle !== 'normal') return 1;
+
+    // If both fontStyles are the same, sort by fontWeight
+    if (a.fontStyle === b.fontStyle) {
+      return getNumericFontWeight(a.fontWeight) - getNumericFontWeight(b.fontWeight);
+    }
+
+    // Sort other fontStyles alphabetically
+    return a.fontStyle.localeCompare(b.fontStyle);
+  });
+}
+//# sourceMappingURL=sort-font-faces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getNumericFontWeight","value","parseInt","sortFontFaces","faces","sort","a","b","fontStyle","fontWeight","localeCompare"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js"],"sourcesContent":["function getNumericFontWeight( value ) {\n\tswitch ( value ) {\n\t\tcase 'normal':\n\t\t\treturn 400;\n\t\tcase 'bold':\n\t\t\treturn 700;\n\t\tcase 'bolder':\n\t\t\treturn 500;\n\t\tcase 'lighter':\n\t\t\treturn 300;\n\t\tdefault:\n\t\t\treturn parseInt( value, 10 );\n\t}\n}\n\nexport function sortFontFaces( faces ) {\n\treturn faces.sort( ( a, b ) => {\n\t\t// Ensure 'normal' fontStyle is always first\n\t\tif ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) return -1;\n\t\tif ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) return 1;\n\n\t\t// If both fontStyles are the same, sort by fontWeight\n\t\tif ( a.fontStyle === b.fontStyle ) {\n\t\t\treturn (\n\t\t\t\tgetNumericFontWeight( a.fontWeight ) -\n\t\t\t\tgetNumericFontWeight( b.fontWeight )\n\t\t\t);\n\t\t}\n\n\t\t// Sort other fontStyles alphabetically\n\t\treturn a.fontStyle.localeCompare( b.fontStyle );\n\t} );\n}\n"],"mappings":"AAAA,SAASA,oBAAoBA,CAAEC,KAAK,EAAG;EACtC,QAASA,KAAK;IACb,KAAK,QAAQ;MACZ,OAAO,GAAG;IACX,KAAK,MAAM;MACV,OAAO,GAAG;IACX,KAAK,QAAQ;MACZ,OAAO,GAAG;IACX,KAAK,SAAS;MACb,OAAO,GAAG;IACX;MACC,OAAOC,QAAQ,CAAED,KAAK,EAAE,EAAG,CAAC;EAC9B;AACD;AAEA,OAAO,SAASE,aAAaA,CAAEC,KAAK,EAAG;EACtC,OAAOA,KAAK,CAACC,IAAI,CAAE,CAAEC,CAAC,EAAEC,CAAC,KAAM;IAC9B;IACA,IAAKD,CAAC,CAACE,SAAS,KAAK,QAAQ,IAAID,CAAC,CAACC,SAAS,KAAK,QAAQ,EAAG,OAAO,CAAC,CAAC;IACrE,IAAKD,CAAC,CAACC,SAAS,KAAK,QAAQ,IAAIF,CAAC,CAACE,SAAS,KAAK,QAAQ,EAAG,OAAO,CAAC;;IAEpE;IACA,IAAKF,CAAC,CAACE,SAAS,KAAKD,CAAC,CAACC,SAAS,EAAG;MAClC,OACCR,oBAAoB,CAAEM,CAAC,CAACG,UAAW,CAAC,GACpCT,oBAAoB,CAAEO,CAAC,CAACE,UAAW,CAAC;IAEtC;;IAEA;IACA,OAAOH,CAAC,CAACE,SAAS,CAACE,aAAa,CAAEH,CAAC,CAACC,SAAU,CAAC;EAChD,CAAE,CAAC;AACJ"}

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

@@ -0,0 +1,86 @@
+/**
+ * Toggles the activation of a given font or font variant within a list of custom fonts.
+ *
+ * - If only the font is provided (without face), the entire font family's activation is toggled.
+ * - If both font and face are provided, the activation of the specific font variant is toggled.
+ *
+ * @param {Object} font            - The font to be toggled.
+ * @param {string} font.slug       - The unique identifier for the font.
+ * @param {Array}  [font.fontFace] - The list of font variants (faces) associated with the font.
+ *
+ * @param {Object} [face]          - The specific font variant to be toggled.
+ * @param {string} face.fontWeight - The weight of the font variant.
+ * @param {string} face.fontStyle  - The style of the font variant.
+ *
+ * @param {Array}  initialfonts    - The initial list of custom fonts.
+ *
+ * @return {Array} - The updated list of custom fonts with the font/font variant toggled.
+ *
+ * @example
+ * const customFonts = [
+ *     { slug: 'roboto', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * toggleFont({ slug: 'roboto' }, null, customFonts);
+ * // This will remove 'roboto' from customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts);
+ * // This will remove the specified face from 'roboto' in customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts);
+ * // This will add the specified face to 'roboto' in customFonts
+ */
+export function toggleFont(font, face, initialfonts) {
+  // Helper to check if a font is activated based on its slug
+  const isFontActivated = f => f.slug === font.slug;
+
+  // Helper to get the activated font from a list of fonts
+  const getActivatedFont = fonts => fonts.find(isFontActivated);
+
+  // Toggle the activation status of an entire font family
+  const toggleEntireFontFamily = activatedFont => {
+    if (!activatedFont) {
+      // If the font is not active, activate the entire font family
+      return [...initialfonts, font];
+    }
+    // If the font is already active, deactivate the entire font family
+    return initialfonts.filter(f => !isFontActivated(f));
+  };
+
+  // Toggle the activation status of a specific font variant
+  const toggleFontVariant = activatedFont => {
+    const isFaceActivated = f => f.fontWeight === face.fontWeight && f.fontStyle === face.fontStyle;
+    if (!activatedFont) {
+      // If the font family is not active, activate the font family with the font variant
+      return [...initialfonts, {
+        ...font,
+        fontFace: [face]
+      }];
+    }
+    let newFontFaces = activatedFont.fontFace || [];
+    if (newFontFaces.find(isFaceActivated)) {
+      // If the font variant is active, deactivate it
+      newFontFaces = newFontFaces.filter(f => !isFaceActivated(f));
+    } else {
+      // If the font variant is not active, activate it
+      newFontFaces = [...newFontFaces, face];
+    }
+
+    // If there are no more font faces, deactivate the font family
+    if (newFontFaces.length === 0) {
+      return initialfonts.filter(f => !isFontActivated(f));
+    }
+
+    // Return updated fonts list with toggled font variant
+    return initialfonts.map(f => isFontActivated(f) ? {
+      ...f,
+      fontFace: newFontFaces
+    } : f);
+  };
+  const activatedFont = getActivatedFont(initialfonts);
+  if (!face) {
+    return toggleEntireFontFamily(activatedFont);
+  }
+  return toggleFontVariant(activatedFont);
+}
+//# sourceMappingURL=toggleFont.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toggleFont","font","face","initialfonts","isFontActivated","f","slug","getActivatedFont","fonts","find","toggleEntireFontFamily","activatedFont","filter","toggleFontVariant","isFaceActivated","fontWeight","fontStyle","fontFace","newFontFaces","length","map"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/toggleFont.js"],"sourcesContent":["/**\n * Toggles the activation of a given font or font variant within a list of custom fonts.\n *\n * - If only the font is provided (without face), the entire font family's activation is toggled.\n * - If both font and face are provided, the activation of the specific font variant is toggled.\n *\n * @param {Object} font            - The font to be toggled.\n * @param {string} font.slug       - The unique identifier for the font.\n * @param {Array}  [font.fontFace] - The list of font variants (faces) associated with the font.\n *\n * @param {Object} [face]          - The specific font variant to be toggled.\n * @param {string} face.fontWeight - The weight of the font variant.\n * @param {string} face.fontStyle  - The style of the font variant.\n *\n * @param {Array}  initialfonts    - The initial list of custom fonts.\n *\n * @return {Array} - The updated list of custom fonts with the font/font variant toggled.\n *\n * @example\n * const customFonts = [\n *     { slug: 'roboto', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }\n * ];\n *\n * toggleFont({ slug: 'roboto' }, null, customFonts);\n * // This will remove 'roboto' from customFonts\n *\n * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts);\n * // This will remove the specified face from 'roboto' in customFonts\n *\n * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts);\n * // This will add the specified face to 'roboto' in customFonts\n */\nexport function toggleFont( font, face, initialfonts ) {\n\t// Helper to check if a font is activated based on its slug\n\tconst isFontActivated = ( f ) => f.slug === font.slug;\n\n\t// Helper to get the activated font from a list of fonts\n\tconst getActivatedFont = ( fonts ) => fonts.find( isFontActivated );\n\n\t// Toggle the activation status of an entire font family\n\tconst toggleEntireFontFamily = ( activatedFont ) => {\n\t\tif ( ! activatedFont ) {\n\t\t\t// If the font is not active, activate the entire font family\n\t\t\treturn [ ...initialfonts, font ];\n\t\t}\n\t\t// If the font is already active, deactivate the entire font family\n\t\treturn initialfonts.filter( ( f ) => ! isFontActivated( f ) );\n\t};\n\n\t// Toggle the activation status of a specific font variant\n\tconst toggleFontVariant = ( activatedFont ) => {\n\t\tconst isFaceActivated = ( f ) =>\n\t\t\tf.fontWeight === face.fontWeight && f.fontStyle === face.fontStyle;\n\n\t\tif ( ! activatedFont ) {\n\t\t\t// If the font family is not active, activate the font family with the font variant\n\t\t\treturn [ ...initialfonts, { ...font, fontFace: [ face ] } ];\n\t\t}\n\n\t\tlet newFontFaces = activatedFont.fontFace || [];\n\n\t\tif ( newFontFaces.find( isFaceActivated ) ) {\n\t\t\t// If the font variant is active, deactivate it\n\t\t\tnewFontFaces = newFontFaces.filter(\n\t\t\t\t( f ) => ! isFaceActivated( f )\n\t\t\t);\n\t\t} else {\n\t\t\t// If the font variant is not active, activate it\n\t\t\tnewFontFaces = [ ...newFontFaces, face ];\n\t\t}\n\n\t\t// If there are no more font faces, deactivate the font family\n\t\tif ( newFontFaces.length === 0 ) {\n\t\t\treturn initialfonts.filter( ( f ) => ! isFontActivated( f ) );\n\t\t}\n\n\t\t// Return updated fonts list with toggled font variant\n\t\treturn initialfonts.map( ( f ) =>\n\t\t\tisFontActivated( f ) ? { ...f, fontFace: newFontFaces } : f\n\t\t);\n\t};\n\n\tconst activatedFont = getActivatedFont( initialfonts );\n\n\tif ( ! face ) {\n\t\treturn toggleEntireFontFamily( activatedFont );\n\t}\n\n\treturn toggleFontVariant( activatedFont );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,UAAUA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAG;EACtD;EACA,MAAMC,eAAe,GAAKC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKL,IAAI,CAACK,IAAI;;EAErD;EACA,MAAMC,gBAAgB,GAAKC,KAAK,IAAMA,KAAK,CAACC,IAAI,CAAEL,eAAgB,CAAC;;EAEnE;EACA,MAAMM,sBAAsB,GAAKC,aAAa,IAAM;IACnD,IAAK,CAAEA,aAAa,EAAG;MACtB;MACA,OAAO,CAAE,GAAGR,YAAY,EAAEF,IAAI,CAAE;IACjC;IACA;IACA,OAAOE,YAAY,CAACS,MAAM,CAAIP,CAAC,IAAM,CAAED,eAAe,CAAEC,CAAE,CAAE,CAAC;EAC9D,CAAC;;EAED;EACA,MAAMQ,iBAAiB,GAAKF,aAAa,IAAM;IAC9C,MAAMG,eAAe,GAAKT,CAAC,IAC1BA,CAAC,CAACU,UAAU,KAAKb,IAAI,CAACa,UAAU,IAAIV,CAAC,CAACW,SAAS,KAAKd,IAAI,CAACc,SAAS;IAEnE,IAAK,CAAEL,aAAa,EAAG;MACtB;MACA,OAAO,CAAE,GAAGR,YAAY,EAAE;QAAE,GAAGF,IAAI;QAAEgB,QAAQ,EAAE,CAAEf,IAAI;MAAG,CAAC,CAAE;IAC5D;IAEA,IAAIgB,YAAY,GAAGP,aAAa,CAACM,QAAQ,IAAI,EAAE;IAE/C,IAAKC,YAAY,CAACT,IAAI,CAAEK,eAAgB,CAAC,EAAG;MAC3C;MACAI,YAAY,GAAGA,YAAY,CAACN,MAAM,CAC/BP,CAAC,IAAM,CAAES,eAAe,CAAET,CAAE,CAC/B,CAAC;IACF,CAAC,MAAM;MACN;MACAa,YAAY,GAAG,CAAE,GAAGA,YAAY,EAAEhB,IAAI,CAAE;IACzC;;IAEA;IACA,IAAKgB,YAAY,CAACC,MAAM,KAAK,CAAC,EAAG;MAChC,OAAOhB,YAAY,CAACS,MAAM,CAAIP,CAAC,IAAM,CAAED,eAAe,CAAEC,CAAE,CAAE,CAAC;IAC9D;;IAEA;IACA,OAAOF,YAAY,CAACiB,GAAG,CAAIf,CAAC,IAC3BD,eAAe,CAAEC,CAAE,CAAC,GAAG;MAAE,GAAGA,CAAC;MAAEY,QAAQ,EAAEC;IAAa,CAAC,GAAGb,CAC3D,CAAC;EACF,CAAC;EAED,MAAMM,aAAa,GAAGJ,gBAAgB,CAAEJ,YAAa,CAAC;EAEtD,IAAK,CAAED,IAAI,EAAG;IACb,OAAOQ,sBAAsB,CAAEC,aAAc,CAAC;EAC/C;EAEA,OAAOE,iBAAiB,CAAEF,aAAc,CAAC;AAC1C"}

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

@@ -34,8 +34,7 @@ function useGlobalStylesUserConfig() {
     globalStylesId,
     isReady,
     settings,
-    styles,
-    behaviors
+    styles
   } = useSelect(select => {
     const {
       getEditedEntityRecord,
@@ -51,8 +50,7 @@ function useGlobalStylesUserConfig() {
       globalStylesId: _globalStylesId,
       isReady: hasResolved,
       settings: record?.settings,
-      styles: record?.styles,
-      behaviors: record?.behaviors
+      styles: record?.styles
     };
   }, []);
   const {
@@ -64,23 +62,20 @@ function useGlobalStylesUserConfig() {
   const config = useMemo(() => {
     return {
       settings: settings !== null && settings !== void 0 ? settings : {},
-      styles: styles !== null && styles !== void 0 ? styles : {},
-      behaviors: behaviors !== null && behaviors !== void 0 ? behaviors : {}
+      styles: styles !== null && styles !== void 0 ? styles : {}
     };
-  }, [settings, styles, behaviors]);
+  }, [settings, styles]);
   const setConfig = useCallback((callback, options = {}) => {
-    var _record$styles, _record$settings, _record$behaviors;
+    var _record$styles, _record$settings;
     const record = getEditedEntityRecord('root', 'globalStyles', globalStylesId);
     const currentConfig = {
       styles: (_record$styles = record?.styles) !== null && _record$styles !== void 0 ? _record$styles : {},
-      settings: (_record$settings = record?.settings) !== null && _record$settings !== void 0 ? _record$settings : {},
-      behaviors: (_record$behaviors = record?.behaviors) !== null && _record$behaviors !== void 0 ? _record$behaviors : {}
+      settings: (_record$settings = record?.settings) !== null && _record$settings !== void 0 ? _record$settings : {}
     };
     const updatedConfig = callback(currentConfig);
     editEntityRecord('root', 'globalStyles', globalStylesId, {
       styles: cleanEmptyObject(updatedConfig.styles) || {},
-      settings: cleanEmptyObject(updatedConfig.settings) || {},
-      behaviors: cleanEmptyObject(updatedConfig.behaviors) || {}
+      settings: cleanEmptyObject(updatedConfig.settings) || {}
     }, options);
   }, [globalStylesId]);
   return [isReady, config, setConfig];

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

@@ -1 +1 @@
-{"version":3,"names":["deepmerge","isPlainObject","useMemo","useCallback","useSelect","useDispatch","store","coreStore","privateApis","blockEditorPrivateApis","unlock","GlobalStylesContext","cleanEmptyObject","mergeBaseAndUserConfigs","base","user","isMergeableObject","useGlobalStylesUserConfig","globalStylesId","isReady","settings","styles","behaviors","select","getEditedEntityRecord","hasFinishedResolution","_globalStylesId","__experimentalGetCurrentGlobalStylesId","record","undefined","hasResolved","editEntityRecord","config","setConfig","callback","options","_record$styles","_record$settings","_record$behaviors","currentConfig","updatedConfig","useGlobalStylesBaseConfig","baseConfig","__experimentalGetCurrentThemeBaseGlobalStyles","useGlobalStylesContext","isUserConfigReady","userConfig","setUserConfig","isBaseConfigReady","mergedConfig","context","merged","GlobalStylesProvider","children","createElement","Provider","value"],"sources":["@wordpress/edit-site/src/components/global-styles/global-styles-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { GlobalStylesContext, cleanEmptyObject } = unlock(\n\tblockEditorPrivateApis\n);\n\nexport function mergeBaseAndUserConfigs( base, user ) {\n\treturn deepmerge( base, user, {\n\t\t// We only pass as arrays the presets,\n\t\t// in which case we want the new array of values\n\t\t// to override the old array (no merging).\n\t\tisMergeableObject: isPlainObject,\n\t} );\n}\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, isReady, settings, styles, behaviors } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst _globalStylesId =\n\t\t\t\tselect( coreStore ).__experimentalGetCurrentGlobalStylesId();\n\t\t\tconst record = _globalStylesId\n\t\t\t\t? getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId\n\t\t\t\t  )\n\t\t\t\t: undefined;\n\n\t\t\tlet hasResolved = false;\n\t\t\tif (\n\t\t\t\thasFinishedResolution(\n\t\t\t\t\t'__experimentalGetCurrentGlobalStylesId'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\thasResolved = _globalStylesId\n\t\t\t\t\t? hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t  ] )\n\t\t\t\t\t: true;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId: _globalStylesId,\n\t\t\t\tisReady: hasResolved,\n\t\t\t\tsettings: record?.settings,\n\t\t\t\tstyles: record?.styles,\n\t\t\t\tbehaviors: record?.behaviors,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t\tbehaviors: behaviors ?? {},\n\t\t};\n\t}, [ settings, styles, behaviors ] );\n\n\tconst setConfig = useCallback(\n\t\t( callback, options = {} ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t\tbehaviors: record?.behaviors ?? {},\n\t\t\t};\n\t\t\tconst updatedConfig = callback( currentConfig );\n\t\t\teditEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t{\n\t\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t\t\tbehaviors:\n\t\t\t\t\t\tcleanEmptyObject( updatedConfig.behaviors ) || {},\n\t\t\t\t},\n\t\t\t\toptions\n\t\t\t);\n\t\t},\n\t\t[ globalStylesId ]\n\t);\n\n\treturn [ isReady, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeBaseGlobalStyles();\n\t}, [] );\n\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nfunction useGlobalStylesContext() {\n\tconst [ isUserConfigReady, userConfig, setUserConfig ] =\n\t\tuseGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n\nexport function GlobalStylesProvider( { children } ) {\n\tconst context = useGlobalStylesContext();\n\tif ( ! context.isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["deepmerge","isPlainObject","useMemo","useCallback","useSelect","useDispatch","store","coreStore","privateApis","blockEditorPrivateApis","unlock","GlobalStylesContext","cleanEmptyObject","mergeBaseAndUserConfigs","base","user","isMergeableObject","useGlobalStylesUserConfig","globalStylesId","isReady","settings","styles","select","getEditedEntityRecord","hasFinishedResolution","_globalStylesId","__experimentalGetCurrentGlobalStylesId","record","undefined","hasResolved","editEntityRecord","config","setConfig","callback","options","_record$styles","_record$settings","currentConfig","updatedConfig","useGlobalStylesBaseConfig","baseConfig","__experimentalGetCurrentThemeBaseGlobalStyles","useGlobalStylesContext","isUserConfigReady","userConfig","setUserConfig","isBaseConfigReady","mergedConfig","context","merged","GlobalStylesProvider","children","createElement","Provider","value"],"sources":["@wordpress/edit-site/src/components/global-styles/global-styles-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { GlobalStylesContext, cleanEmptyObject } = unlock(\n\tblockEditorPrivateApis\n);\n\nexport function mergeBaseAndUserConfigs( base, user ) {\n\treturn deepmerge( base, user, {\n\t\t// We only pass as arrays the presets,\n\t\t// in which case we want the new array of values\n\t\t// to override the old array (no merging).\n\t\tisMergeableObject: isPlainObject,\n\t} );\n}\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, isReady, settings, styles } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst _globalStylesId =\n\t\t\t\tselect( coreStore ).__experimentalGetCurrentGlobalStylesId();\n\t\t\tconst record = _globalStylesId\n\t\t\t\t? getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId\n\t\t\t\t  )\n\t\t\t\t: undefined;\n\n\t\t\tlet hasResolved = false;\n\t\t\tif (\n\t\t\t\thasFinishedResolution(\n\t\t\t\t\t'__experimentalGetCurrentGlobalStylesId'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\thasResolved = _globalStylesId\n\t\t\t\t\t? hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t  ] )\n\t\t\t\t\t: true;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId: _globalStylesId,\n\t\t\t\tisReady: hasResolved,\n\t\t\t\tsettings: record?.settings,\n\t\t\t\tstyles: record?.styles,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t};\n\t}, [ settings, styles ] );\n\n\tconst setConfig = useCallback(\n\t\t( callback, options = {} ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t};\n\t\t\tconst updatedConfig = callback( currentConfig );\n\t\t\teditEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t{\n\t\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t\t},\n\t\t\t\toptions\n\t\t\t);\n\t\t},\n\t\t[ globalStylesId ]\n\t);\n\n\treturn [ isReady, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeBaseGlobalStyles();\n\t}, [] );\n\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nfunction useGlobalStylesContext() {\n\tconst [ isUserConfigReady, userConfig, setUserConfig ] =\n\t\tuseGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n\nexport function GlobalStylesProvider( { children } ) {\n\tconst context = useGlobalStylesContext();\n\tif ( ! context.isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/screen-block.js

@@ -52,21 +52,20 @@ const {
   useHasDimensionsPanel,
   useHasTypographyPanel,
   useHasBorderPanel,
-  __experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
   useGlobalSetting,
   useSettingsForBlockElement,
   useHasColorPanel,
   useHasEffectsPanel,
   useHasFiltersPanel,
+  useHasImageSettingsPanel,
   useGlobalStyle,
-  __experimentalUseGlobalBehaviors: useGlobalBehaviors,
-  __experimentalBehaviorsPanel: StylesBehaviorsPanel,
   BorderPanel: StylesBorderPanel,
   ColorPanel: StylesColorPanel,
   TypographyPanel: StylesTypographyPanel,
   DimensionsPanel: StylesDimensionsPanel,
   EffectsPanel: StylesEffectsPanel,
   FiltersPanel: StylesFiltersPanel,
+  ImageSettingsPanel,
   AdvancedPanel: StylesAdvancedPanel
 } = unlock(blockEditorPrivateApis);
 function ScreenBlock({
@@ -84,15 +83,9 @@ function ScreenBlock({
   const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
     shouldDecodeEncode: false
   });
+  const [userSettings] = useGlobalSetting('', name, 'user');
   const [rawSettings, setSettings] = useGlobalSetting('', name);
   const settings = useSettingsForBlockElement(rawSettings, name);
-  const {
-    inheritedBehaviors,
-    setBehavior
-  } = useGlobalBehaviors(name);
-  const {
-    behavior
-  } = useGlobalBehaviors(name, 'user');
   const blockType = getBlockType(name);
 
   // Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
@@ -102,11 +95,11 @@ function ScreenBlock({
   const blockVariations = useBlockVariations(name);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = useHasColorPanel(settings);
-  const hasBehaviorsPanel = useHasBehaviorsPanel(rawSettings, name);
   const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasEffectsPanel = useHasEffectsPanel(settings);
   const hasFiltersPanel = useHasFiltersPanel(settings);
+  const hasImageSettingsPanel = useHasImageSettingsPanel(name, userSettings, settings);
   const hasVariationsPanel = !!blockVariations?.length && !variation;
   const {
     canEditCSS
@@ -135,22 +128,43 @@ function ScreenBlock({
   const styleWithLayout = useMemo(() => {
     return {
       ...style,
-      layout: settings.layout
+      layout: userSettings.layout
     };
-  }, [style, settings.layout]);
+  }, [style, userSettings.layout]);
   const onChangeDimensions = newStyle => {
     const updatedStyle = {
       ...newStyle
     };
     delete updatedStyle.layout;
     setStyle(updatedStyle);
-    if (newStyle.layout !== settings.layout) {
+    if (newStyle.layout !== userSettings.layout) {
       setSettings({
-        ...rawSettings,
+        ...userSettings,
         layout: newStyle.layout
       });
     }
   };
+  const onChangeLightbox = newSetting => {
+    // If the newSetting is undefined, this means that the user has deselected
+    // (reset) the lightbox setting.
+    if (newSetting === undefined) {
+      setSettings({
+        ...rawSettings,
+        lightbox: undefined
+      });
+
+      // Otherwise, we simply set the lightbox setting to the new value but
+      // taking care of not overriding the other lightbox settings.
+    } else {
+      setSettings({
+        ...rawSettings,
+        lightbox: {
+          ...rawSettings.lightbox,
+          ...newSetting
+        }
+      });
+    }
+  };
   const onChangeBorders = newStyle => {
     if (!newStyle?.border) {
       setStyle(newStyle);
@@ -243,20 +257,19 @@ function ScreenBlock({
     },
 
     includeLayoutControls: true
+  }), hasImageSettingsPanel && createElement(ImageSettingsPanel, {
+    onChange: onChangeLightbox,
+    value: userSettings,
+    inheritedValue: settings
   }), canEditCSS && createElement(PanelBody, {
     title: __('Advanced'),
     initialOpen: false
   }, createElement("p", null, sprintf(
   // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-  __('Add your own CSS to customize the appearance of the %s block.'), blockType?.title)), createElement(StylesAdvancedPanel, {
+  __('Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'), blockType?.title)), createElement(StylesAdvancedPanel, {
     value: style,
     onChange: setStyle,
     inheritedValue: inheritedStyle
-  }), hasBehaviorsPanel && createElement(StylesBehaviorsPanel, {
-    value: behavior,
-    onChange: setBehavior,
-    behaviors: inheritedBehaviors,
-    blockName: name
   })));
 }
 export default ScreenBlock;