npm - @wordpress/edit-site - Versions diffs - 5.30.0 → 5.32.0 - Mend

@wordpress/edit-site 5.30.0 → 5.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (470) hide show

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

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

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

@@ -75,6 +75,9 @@ export function formatFontFamily(input) {
  * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName(input) {
+  if (!input) {
+    return '';
+  }
   let output = input.trim();
   if (output.includes(',')) {
     output = output.split(',')

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( ~~blockEditorPrivateApis~~ );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/ eslint-disable no-restricted-syntax /\n\t\tconst randomRotationValue = Math.floor( Math.random() 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,UAAU,MAAM,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB~~;;AAE~~/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAM;EAAEC,gBAAgB;EAAEC;~~AAAe~~,CAAC,~~GAAGH~~,MAAM,~~CAAED~~,~~sBAAuB~~,CAAC;;~~AAE7E~~;AACAL,MAAM,CAAE,CAAEC,UAAU,CAAG,CAAC;AAExB,OAAO,~~SAASS~~,kBAAkBA,CAAEC,IAAI,EAAG;EAC1C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,~~GAAGL~~,gBAAgB,CACvD,qBAAqB,~~EACrBG~~,IACD,CAAC;EAED,SAASG,eAAeA,CAAA,EAAG;IAC1B;IACA,MAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAK,CAAED,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAI,CAAC;IAC7D;;IAEA,MAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAG,CAAIC,WAAW,IAAM;MACrD,MAAM;QAAEC;MAAM,CAAC,GAAGD,WAAW;MAC7B,MAAME,QAAQ,~~GAAGxB~~,MAAM,~~CAAEuB~~,KAAM,CAAC,CAC9BE,MAAM,CAAET,mBAAoB,CAAC,CAC7BU,KAAK,CAAC,CAAC;MAET,OAAO;QACN,GAAGJ,WAAW;QACdC,KAAK,EAAEC;MACR,CAAC;IACF,CAAE,CAAC;IAEHV,cAAc,CAAEM,SAAU,CAAC;EAC5B;EAEA,OAAOO,MAAM,CAACC,mCAAmC,GAC9C,CAAEb,eAAe,CAAE,GACnB,EAAE;AACN;AAEA,OAAO,SAASc,sBAAsBA,CAAA,EAAG;EACxC,MAAM,CAAEC,SAAS,GAAG,OAAO,CAAE,~~GAAGpB~~,cAAc,CAAE,YAAa,CAAC;EAC9D,MAAM,~~CAAEqB~~,eAAe,GAAG,OAAO,CAAE,~~GAAGrB~~,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,~~CAAEsB~~,YAAY,GAAGF,SAAS,CAAE,~~GAAGpB~~,cAAc,CAClD,wBACD,CAAC;EACD,MAAM,~~CAAEuB~~,UAAU,CAAE,~~GAAGxB~~,gBAAgB,CAAE,oBAAqB,CAAC;EAC/D,MAAM,~~CAAEI~~,WAAW,CAAE,~~GAAGJ~~,gBAAgB,CAAE,qBAAsB,CAAC;EACjE,MAAM,~~CAAEyB~~,YAAY,CAAE,~~GAAGzB~~,gBAAgB,CAAE,sBAAuB,CAAC;EAEnE,~~MAAM0B~~,aAAa,GAAG,CAAEtB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,EAAE,EACvCuB,MAAM,CAAEF,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAG,CAAC,CAC5BE,MAAM,CAAEH,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAG,CAAC;EAC5B,MAAMI,iBAAiB,GAAGF,aAAa,CACrCG,MAAM;EACN;EACA,CAAE;IAAEf;EAAM,CAAC,KAAMA,KAAK,KAAKQ,eAAe,IAAIR,KAAK,KAAKS,YACzD,CAAC,CACAO,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC;EAEf,OAAO;IACNJ,aAAa;IACbE;EACD,CAAC;AACF;AAEA,OAAO,SAASG,kBAAkBA,CAAE5B,IAAI,EAAE6B,OAAO,EAAG;EACnD,MAAM;IAAEC;EAAgB,CAAC,~~GAAGlC~~,SAAS,~~CAClCmC~~,MAAM,IAAM;IACb,OAAO;MACND,eAAe,~~EAAEnC~~,MAAM,~~CACtBoC~~,MAAM,~~CAAEvC~~,WAAY,CACrB,CAAC,~~CAACwC~~,kBAAkB,CAAEhC,IAAI,EAAE6B,OAAQ;IACrC,CAAC;EACF,CAAC,EACD,CAAE7B,IAAI,EAAE6B,OAAO,CAChB,CAAC;EAED,OAAOC,eAAe;AACvB"}
1	+ {"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","useContext","__","mergeBaseAndUserConfigs","useCurrentMergeThemeStyleVariationsWithUserConfig","getFontFamilies","unlock","useSelect","useGlobalSetting","useGlobalStyle","GlobalStylesContext","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations","base","values","reduce","acc","bodyFontFamily","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { getFontFamilies } from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/ eslint-disable no-restricted-syntax /\n\t\tconst randomRotationValue = Math.floor( Math.random() 225 );\n\t\t/* eslint-enable no-restricted-syntax /\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/\n\t * Filter out variations with no settings or styles.\n\t /\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) \|\| // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 \|\|\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\t/\n\t * Filter duplicate variations based on whether the variaitons\n\t * have different heading and body font families.\n\t */\n\treturn typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t// Always preseve the default variation.\n\t\t\t\t\tif ( variation?.title === 'Default' ) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t} else if (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t )\n\t\t: [];\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/palette.js CHANGED Viewed

@@ -54,7 +54,9 @@ function Palette({
     key: `${color}-${index}`
   }, createElement(ColorIndicator, {
     colorValue: color
-  })))), createElement(FlexItem, null, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && createElement(Button, {
+  })))), createElement(FlexItem, {
+    className: "edit-site-global-styles-screen-colors__palette-count"
+  }, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && createElement(Button, {
     variant: "secondary",
     icon: shuffle,
     onClick: randomizeThemeColors

package/build-module/components/global-styles/palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","createElement","spacing","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","key","colorValue","window","__experimentalEnableColorRandomizer","variant","icon","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors \|\| EMPTY_COLORS ),\n\t\t\t...( themeColors \|\| EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],"mappings":"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~~QAAGiC~~,~~iBAA6B~~,~~CAClC~~,CACe,CACd,CAAC,~~EACViB~~,MAAM,CAACC,mCAAmC,~~IAC3CzB~~,WAAW,EAAEQ,MAAM,GAAG,CAAC,IACtBC,aAAA,CAAC3B,MAAM;~~IACN4C~~,OAAO,EAAC,WAAW;IACnBC,IAAI,~~EAAGzC~~,OAAS;~~IAChB0C~~,OAAO,~~EAAGzB~~;EAAsB,GAE9BpB,EAAE,CAAE,kBAAmB,CAClB,CAEH,CAAC;AAEX;AAEA,eAAec,OAAO"}
1	+ {"version":3,"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","createElement","spacing","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","key","colorValue","className","window","__experimentalEnableColorRandomizer","variant","icon","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors \|\| EMPTY_COLORS ),\n\t\t\t...( themeColors \|\| EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem className=\"edit-site-global-styles-screen-colors__palette-count\">\n\t\t\t\t\t\t\t{ paletteButtonText }\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAAS,EACpCC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,cAAc,EACdC,MAAM,QACA,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AACjD,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,kBAAkB,QAAQ,SAAS;AAC5C,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAiB,CAAC,GAAGD,MAAM,CAAEL,sBAAuB,CAAC;AAE7D,MAAMO,YAAY,GAAG,EAAE;AAEvB,SAASC,OAAOA,CAAE;EAAEC;AAAK,CAAC,EAAG;EAC5B,MAAM,CAAEC,YAAY,CAAE,GAAGJ,gBAAgB,CAAE,sBAAuB,CAAC;EACnE,MAAM,CAAEK,WAAW,CAAE,GAAGL,gBAAgB,CAAE,qBAAsB,CAAC;EACjE,MAAM,CAAEM,aAAa,CAAE,GAAGN,gBAAgB,CAAE,uBAAwB,CAAC;EAErE,MAAM,CAAEO,qBAAqB,CAAE,GAAGP,gBAAgB,CACjD,sBAAsB,EACtBG,IACD,CAAC;EAED,MAAM,CAAEK,oBAAoB,CAAE,GAAGX,kBAAkB,CAAC,CAAC;EAErD,MAAMY,MAAM,GAAGjB,OAAO,CACrB,MAAM,CACL,IAAKY,YAAY,IAAIH,YAAY,CAAE,EACnC,IAAKI,WAAW,IAAIJ,YAAY,CAAE,EAClC,IAAKK,aAAa,IAAIC,qBAAqB,GACxCD,aAAa,GACbL,YAAY,CAAE,CACjB,EACD,CAAEG,YAAY,EAAEC,WAAW,EAAEC,aAAa,EAAEC,qBAAqB,CAClE,CAAC;EAED,MAAMG,UAAU,GAAG,CAAEP,IAAI,GACtB,iBAAiB,GACjB,UAAU,GAAGQ,kBAAkB,CAAER,IAAK,CAAC,GAAG,iBAAiB;EAC9D,MAAMS,iBAAiB,GACtBH,MAAM,CAACI,MAAM,GAAG,CAAC,GACdvB,OAAO;EACP;EACAD,EAAE,CAAE,UAAU,EAAE,WAAW,EAAEoB,MAAM,CAACI,MAAO,CAAC,EAC5CJ,MAAM,CAACI,MACP,CAAC,GACDzB,EAAE,CAAE,mBAAoB,CAAC;EAE7B,OACC0B,aAAA,CAAC7B,MAAM;IAAC8B,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACnB,QAAQ;IAACqB,KAAK,EAAG;EAAG,GAAG5B,EAAE,CAAE,SAAU,CAAa,CAAC,EACpD0B,aAAA,CAACpC,SAAS;IAACuC,UAAU;IAACC,WAAW;EAAA,GAChCJ,aAAA,CAAClB,sBAAsB;IACtBuB,IAAI,EAAGT,UAAY;IACnB,cAAatB,EAAE,CAAE,gBAAiB;EAAG,GAErC0B,aAAA,CAACjC,MAAM;IACNuC,SAAS,EACRX,MAAM,CAACI,MAAM,KAAK,CAAC,GAAG,aAAa,GAAG;EACtC,GAEDC,aAAA,CAAC/B,MAAM;IAACsC,SAAS,EAAG,KAAO;IAACC,MAAM,EAAG,CAAC;EAAG,GACtCb,MAAM,CACNc,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC,CACbC,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACvBZ,aAAA,CAAChB,qBAAqB;IACrB6B,GAAG,EAAI,GAAGF,KAAO,IAAIC,KAAO;EAAG,GAE/BZ,aAAA,CAAC5B,cAAc;IAAC0C,UAAU,EAAGH;EAAO,CAAE,CAChB,CACtB,CACI,CAAC,EACTX,aAAA,CAACnC,QAAQ;IAACkD,SAAS,EAAC;EAAsD,GACvEjB,iBACO,CACH,CACe,CACd,CAAC,EACVkB,MAAM,CAACC,mCAAmC,IAC3C1B,WAAW,EAAEQ,MAAM,GAAG,CAAC,IACtBC,aAAA,CAAC3B,MAAM;IACN6C,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAG1C,OAAS;IAChB2C,OAAO,EAAG1B;EAAsB,GAE9BpB,EAAE,CAAE,kBAAmB,CAClB,CAEH,CAAC;AAEX;AAEA,eAAec,OAAO"}

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

@@ -39,14 +39,14 @@ const StylesPreviewColors = ({
       overflow: 'hidden'
     }
   }, createElement(HStack, {
-    spacing: 10 * ratio,
+    spacing: 5 * ratio,
     justify: "center",
     style: {
       height: '100%',
       overflow: 'hidden'
     }
   }, createElement(HighlightedColors, {
-    normalizedColorSwatchSize: 66,
+    normalizedColorSwatchSize: 56,
     ratio: ratio
   }))));
 };

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

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

package/build-module/components/global-styles/preview-iframe.js CHANGED Viewed

@@ -98,7 +98,6 @@ export default function PreviewIframe({
   }, 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-iframe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } 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';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\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\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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/\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\t /\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t /\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;cursor: pointer;}',\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{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],"mappings":"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~~MACPnB~~,~~KAAK,EAAE,~~MAAM~~;MACbsB~~,~~MAAM,~~EAAEtC,gBAAgB,GAAG4B;IAC5B,CAAG;IACHW,YAAY,EAAGA,CAAA,KAAMzB,YAAY,CAAE,IAAK,CAAG;IAC3C0B,YAAY,EAAGA,CAAA,KAAM1B,YAAY,CAAE,KAAM,CAAG;IAC5C2B,QAAQ,EAAG,CAAC;EAAG,GAEfR,aAAA,CAAChD,YAAY;IAAC0B,MAAM,EAAGkB;EAAc,CAAE,CAAC,EACxCI,aAAA,CAAC5C,MAAM,CAACqD,GAAG;IACVP,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B,KAAK;MAChCZ,KAAK,EAAE,MAAM;MACb2B,UAAU,EAAEjC,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,eAAe;MAC5CmC,MAAM,EAAEpC,aAAa,GAAG,SAAS,GAAGqC;IACrC,CAAG;IACHC,OAAO,EAAC,OAAO;IACfC,OAAO,EACN,CAAElC,SAAS,IAAIN,SAAS,KACxB,CAAEK,aAAa,IACfN,KAAK,GACF,OAAO,GACP;EACH,GAEC,EAAE,CACF0C,MAAM,CAAE3C,QAAS,CAAC,CAAC;EAAA,CACnB4C,GAAG,CAAE,CAAEC,KAAK,EAAEC,GAAG,KAAMD,KAAK,CAAE;IAAEtB,KAAK;IAAEuB;EAAI,CAAE,CAAE,CACtC,CACL,CAER,CAAC;AAEL"}
1	+ {"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } 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';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\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\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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/\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\t /\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t /\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;cursor: pointer;}',\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{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,gBAAgB,IAAIC,MAAM,EAC1BC,sBAAsB,IAAIC,YAAY,EACtCC,WAAW,IAAIC,sBAAsB,QAC/B,yBAAyB;AAChC,SAASC,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;AAClE,SACCC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,QACX,oBAAoB;AAC3B,SAASC,eAAe,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,oBAAoB;;AAEvE;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC,cAAc;EAAEC;AAAsB,CAAC,GAAGF,MAAM,CACvDT,sBACD,CAAC;AAED,MAAMY,eAAe,GAAG,GAAG;AAC3B,MAAMC,gBAAgB,GAAG,GAAG;;AAE5B;AACA;AACA,MAAMC,gBAAgB,GAAG;EACxBC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACX,CAAC;AAED,eAAe,SAASC,aAAaA,CAAE;EACtCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,eAAe,GAAG,OAAO,CAAE,GAAGZ,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,CAAEa,aAAa,CAAE,GAAGb,cAAc,CAAE,gBAAiB,CAAC;EAC5D,MAAM,CAAEc,MAAM,CAAE,GAAGb,qBAAqB,CAAC,CAAC;EAC1C,MAAMc,aAAa,GAAGrB,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAAEsB,SAAS,EAAEC,YAAY,CAAE,GAAGpB,QAAQ,CAAE,KAAM,CAAC;EACrD,MAAM,CAAEqB,uBAAuB,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAGxB,iBAAiB,CAAC,CAAC;EAClE,MAAM,CAAEyB,cAAc,EAAEC,sBAAsB,CAAE,GAAGxB,QAAQ,CAAEsB,KAAM,CAAC;EACpE,MAAM,CAAEG,UAAU,EAAEC,aAAa,CAAE,GAAG1B,QAAQ,CAAC,CAAC;EAEhD,MAAM2B,iBAAiB,GAAG/B,WAAW,CACpC4B,sBAAsB,EACtB,GAAG,EACHjB,gBACD,CAAC;;EAED;EACA;EACAR,eAAe,CAAE,MAAM;IACtB,IAAKuB,KAAK,EAAG;MACZK,iBAAiB,CAAEL,KAAM,CAAC;IAC3B;EACD,CAAC,EAAE,CAAEA,KAAK,EAAEK,iBAAiB,CAAG,CAAC;;EAEjC;EACA;EACA5B,eAAe,CAAE,MAAM;IACtB,MAAM6B,QAAQ,GAAGL,cAAc,GAAGA,cAAc,GAAGlB,eAAe,GAAG,CAAC;IACtE,MAAMwB,SAAS,GAAGD,QAAQ,IAAKH,UAAU,IAAI,CAAC,CAAE;;IAEhD;IACA;IACA;IACA;IACA,MAAMK,oBAAoB,GAAGC,IAAI,CAACC,GAAG,CAAEH,SAAU,CAAC,GAAG,GAAG;IAExD,IAAKC,oBAAoB,IAAI,CAAEL,UAAU,EAAG;MAC3CC,aAAa,CAAEE,QAAS,CAAC;IAC1B;EACD,CAAC,EAAE,CAAEL,cAAc,EAAEE,UAAU,CAAG,CAAC;;EAEnC;EACA,MAAMQ,aAAa,GAAGX,KAAK,GAAGA,KAAK,GAAGjB,eAAe,GAAG,CAAC;EACzD;AACD;AACA;AACA;AACA;AACA;EACC,MAAM6B,KAAK,GAAGT,UAAU,GAAGA,UAAU,GAAGQ,aAAa;;EAErD;AACD;AACA;AACA;AACA;EACC,MAAME,YAAY,GAAGlC,OAAO,CAAE,MAAM;IACnC,IAAKgB,MAAM,EAAG;MACb,OAAO,CACN,GAAGA,MAAM,EACT;QACCmB,GAAG,EAAE,kFAAkF;QACvFC,cAAc,EAAE;MACjB,CAAC,CACD;IACF;IAEA,OAAOpB,MAAM;EACd,CAAC,EAAE,CAAEA,MAAM,CAAG,CAAC;EACf,MAAMqB,OAAO,GAAG,CAAC,CAAEhB,KAAK;EAExB,OACCiB,aAAA,CAAAC,QAAA,QACCD,aAAA;IAAKE,KAAK,EAAG;MAAEC,QAAQ,EAAE;IAAW;EAAG,GACpCrB,uBACE,CAAC,EACJiB,OAAO,IACRC,aAAA,CAAClD,MAAM;IACNsD,SAAS,EAAC,yCAAyC;IACnDF,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B;IAC5B,CAAG;IACHW,YAAY,EAAGA,CAAA,KAAMzB,YAAY,CAAE,IAAK,CAAG;IAC3C0B,YAAY,EAAGA,CAAA,KAAM1B,YAAY,CAAE,KAAM,CAAG;IAC5C2B,QAAQ,EAAG,CAAC;EAAG,GAEfR,aAAA,CAAChD,YAAY;IAAC0B,MAAM,EAAGkB;EAAc,CAAE,CAAC,EACxCI,aAAA,CAAC5C,MAAM,CAACqD,GAAG;IACVP,KAAK,EAAG;MACPG,MAAM,EAAEtC,gBAAgB,GAAG4B,KAAK;MAChCZ,KAAK,EAAE,MAAM;MACb2B,UAAU,EAAEjC,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,eAAe;MAC5CmC,MAAM,EAAEpC,aAAa,GAAG,SAAS,GAAGqC;IACrC,CAAG;IACHC,OAAO,EAAC,OAAO;IACfC,OAAO,EACN,CAAElC,SAAS,IAAIN,SAAS,KACxB,CAAEK,aAAa,IACfN,KAAK,GACF,OAAO,GACP;EACH,GAEC,EAAE,CACF0C,MAAM,CAAE3C,QAAS,CAAC,CAAC;EAAA,CACnB4C,GAAG,CAAE,CAAEC,KAAK,EAAEC,GAAG,KAAMD,KAAK,CAAE;IAAEtB,KAAK;IAAEuB;EAAI,CAAE,CAAE,CACtC,CACL,CAER,CAAC;AAEL"}

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

@@ -10,7 +10,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, __unsta
  */
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
-import PreviewTypography from './preview-typography';
+import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewIframe from './preview-iframe';
 const {
@@ -80,7 +80,7 @@ const PreviewStyles = ({
       height: '100%',
       overflow: 'hidden'
     }
-  }, createElement(PreviewTypography, {
+  }, createElement(TypographyExample, {
     fontSize: 65 * ratio,
     variation: variation
   }), createElement(VStack, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","~~PreviewTypography~~","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport ~~PreviewTypography~~ from './~~preview~~-~~typography~~';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\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\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<~~PreviewTypography~~\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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"}
1	+ {"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\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\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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"}

package/build-module/components/global-styles/root-menu.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, image } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -17,7 +17,8 @@ const {
   useHasTypographyPanel,
   useHasColorPanel,
   useGlobalSetting,
-  useSettingsForBlockElement
+  useSettingsForBlockElement,
+  useHasBackgroundPanel
 } = unlock(blockEditorPrivateApis);
 function RootMenu() {
   const [rawSettings] = useGlobalSetting('');
@@ -26,6 +27,7 @@ function RootMenu() {
   const hasColorPanel = useHasColorPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasDimensionsPanel;
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
   return createElement(Fragment, null, createElement(ItemGroup, null, hasTypographyPanel && createElement(NavigationButtonAsItem, {
     icon: typography,
     path: "/typography",
@@ -38,7 +40,11 @@ function RootMenu() {
     icon: layout,
     path: "/layout",
     "aria-label": __('Layout styles')
-  }, __('Layout'))));
+  }, __('Layout')), hasBackgroundPanel && createElement(NavigationButtonAsItem, {
+    icon: image,
+    path: "/background",
+    "aria-label": __('Background styles')
+  }, __('Background'))));
 }
 export default RootMenu;
 //# sourceMappingURL=root-menu.js.map

package/build-module/components/global-styles/root-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","createElement","Fragment","icon","path"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;~~AAC5D~~,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,~~GAAGL~~,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,~~SAASQ~~,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,~~GAAGH~~,gBAAgB,CAAE,EAAG,CAAC;EAC9C,~~MAAMI~~,QAAQ,~~GAAGH~~,0BAA0B,~~CAAEE~~,WAAY,CAAC;EAC1D,MAAME,kBAAkB,~~GAAGP~~,qBAAqB,~~CAAEM~~,QAAS,CAAC;EAC5D,MAAME,aAAa,~~GAAGP~~,gBAAgB,~~CAAEK~~,QAAS,CAAC;EAClD,MAAMG,kBAAkB,~~GAAGV~~,qBAAqB,~~CAAEO~~,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;~~EAEzC~~,~~OACCE~~,aAAA,CAAAC,QAAA,QACCD,aAAA,~~CAACrB~~,SAAS,~~QACPiB~~,kBAAkB,~~IACnBI~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGtB~~,UAAY;~~IACnBuB~~,IAAI,EAAC,aAAa;IAClB,~~cAAapB~~,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,~~EACCc~~,aAAa,~~IACdG~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGrB~~,KAAO;~~IACdsB~~,IAAI,EAAC,SAAS;IACd,~~cAAapB~~,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,~~EACCgB~~,cAAc,~~IACfC~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGpB~~,MAAQ;~~IACfqB~~,IAAI,EAAC,SAAS;IACd,~~cAAapB~~,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAEA,~~eAAeU~~,QAAQ"}
1	+ {"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","image","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","useHasBackgroundPanel","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","hasBackgroundPanel","createElement","Fragment","icon","path"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout, image } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ image }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,QAAQ,kBAAkB;AACnE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC,0BAA0B;EAC1BC;AACD,CAAC,GAAGN,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,SAASS,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGJ,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EACzC,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEG,QAAS,CAAC;EAE5D,OACCM,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACxB,SAAS,QACPmB,kBAAkB,IACnBK,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGzB,UAAY;IACnB0B,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,EACCe,aAAa,IACdI,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGxB,KAAO;IACdyB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCiB,cAAc,IACfE,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGvB,MAAQ;IACfwB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCkB,kBAAkB,IACnBC,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGtB,KAAO;IACduB,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CAEf,CACV,CAAC;AAEL;AAEA,eAAeW,QAAQ"}