@wordpress/global-styles-ui 1.11.1-next.v.202604201441.0 → 1.12.0

package/build-module/font-library/upload-fonts.mjs.map

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

package/build-module/pagination/index.mjs

@@ -2,7 +2,7 @@
 import clsx from "clsx";
 import {
   __experimentalHStack as HStack,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   Button
 } from "@wordpress/components";
 import { __, _x, _n, sprintf, isRTL } from "@wordpress/i18n";
@@ -29,7 +29,7 @@ function Pagination({
       className: clsx("global-styles-ui-pagination", className),
       children: [
         /* @__PURE__ */ jsx(
-          Text,
+          WCText,
           {
             variant: "muted",
             className: "global-styles-ui-pagination__total",
@@ -66,7 +66,7 @@ function Pagination({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Text, { variant: "muted", children: sprintf(
+        /* @__PURE__ */ jsx(WCText, { variant: "muted", children: sprintf(
           // translators: 1: Current page number. 2: Total number of pages.
           _x("%1$d of %2$d", "paging"),
           currentPage,

package/build-module/pagination/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/pagination/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAgCvD,cAUA,YAVA;AAnBY,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,QAAK,SAAQ,SACX;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as WCText,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<WCText\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</WCText>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<WCText variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</WCText>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAgCvD,cAUA,YAVA;AAnBY,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,UAAO,SAAQ,SACb;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/screen-background.mjs

@@ -1,7 +1,7 @@
 // packages/global-styles-ui/src/screen-background.tsx
 import { __ } from "@wordpress/i18n";
 import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { __experimentalText as Text } from "@wordpress/components";
+import { __experimentalText as WCText } from "@wordpress/components";
 import BackgroundPanel from "./background-panel.mjs";
 import { ScreenHeader } from "./screen-header.mjs";
 import { useSetting } from "./hooks.mjs";
@@ -16,7 +16,7 @@ function ScreenBackground() {
       ScreenHeader,
       {
         title: __("Background"),
-        description: /* @__PURE__ */ jsx(Text, { children: __("Set styles for the site's background.") })
+        description: /* @__PURE__ */ jsx(WCText, { children: __("Set styles for the site's background.") })
       }
     ),
     hasBackgroundPanel && /* @__PURE__ */ jsx(BackgroundPanel, {})

package/build-module/screen-background.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-background.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</Text>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,YAAY;AAK3C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAQrB,mBAIG,KAJH;AANF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,QACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as WCText } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<WCText>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</WCText>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,cAAc;AAK7C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAQrB,mBAIG,KAJH;AANF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,UACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
   "names": []
 }

package/build-module/screen-block-list.mjs

@@ -5,7 +5,7 @@ import {
   FlexItem,
   SearchControl,
   __experimentalHStack as HStack,
-  __experimentalText as Text
+  __experimentalText as WCText
 } from "@wordpress/components";
 import { useSelect } from "@wordpress/data";
 import {
@@ -105,7 +105,7 @@ function BlockList({ filterValue }) {
       ref: blockTypesListRef,
       className: "global-styles-ui-block-types-item-list",
       role: "list",
-      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(Text, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
+      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(WCText, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
         BlockMenuItem,
         {
           block

package/build-module/screen-block-list.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-block-list.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<Text align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</Text>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as WCText,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<WCText align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</WCText>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/screen-header.mjs

@@ -5,7 +5,7 @@ import {
   __experimentalSpacer as Spacer,
   __experimentalHeading as Heading,
   __experimentalView as View,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   Navigator
 } from "@wordpress/components";
 import { isRTL, __ } from "@wordpress/i18n";
@@ -60,7 +60,7 @@ function ScreenHeader({
         }
       ) })
     ] }),
-    description && /* @__PURE__ */ jsx(Text, { className: "global-styles-ui-header__description", children: description })
+    description && /* @__PURE__ */ jsx(WCText, { className: "global-styles-ui-header__description", children: description })
   ] }) }) }) });
 }
 export {

package/build-module/screen-header.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-header.tsx"],
-  "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__experimentalText as Text,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tstates?: StateDefinition[];\n\tselectedState?: string;\n\tonChangeState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tstates,\n\tselectedState = 'default',\n\tonChangeState,\n}: ScreenHeaderProps ) {\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<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tstates={ states }\n\t\t\t\t\t\t\t\t\t\tvalue={ selectedState }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChangeState }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<Text className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AA2BhB,cAOC,YAPD;AAzBP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAWjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ;AAAA,gBACR,MAAO;AAAA,gBAEL;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,QAAK,WAAU,wCACb,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
+  "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__experimentalText as WCText,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tstates?: StateDefinition[];\n\tselectedState?: string;\n\tonChangeState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tstates,\n\tselectedState = 'default',\n\tonChangeState,\n}: ScreenHeaderProps ) {\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<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tstates={ states }\n\t\t\t\t\t\t\t\t\t\tvalue={ selectedState }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChangeState }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<WCText className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AA2BhB,cAOC,YAPD;AAzBP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAWjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ;AAAA,gBACR,MAAO;AAAA,gBAEL;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,UAAO,WAAU,wCACf,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
   "names": []
 }

package/build-types/font-families.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-families.d.ts","sourceRoot":"","sources":["../src/font-families.tsx"],"names":[],"mappings":"AAwHA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EAAE,GAAG,KAAK,EAAE;;CAAA,+BAMjD"}
+{"version":3,"file":"font-families.d.ts","sourceRoot":"","sources":["../src/font-families.tsx"],"names":[],"mappings":"AAuHA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EAAE,GAAG,KAAK,EAAE;;CAAA,+BAMjD"}

package/build-types/font-library/font-collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAqflD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAoflD;AAED,eAAe,cAAc,CAAC"}

package/build-types/font-library/installed-fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"AA4CA,iBAAS,cAAc,gCAwatB;AAwED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"AA4CA,iBAAS,cAAc,gCAuatB;AAwED,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-ui",
-	"version": "1.11.1-next.v.202604201441.0+dab6d8c07",
+	"version": "1.12.0",
 	"description": "Global Styles UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,22 +44,22 @@
 	},
 	"react-native": "src/index",
 	"dependencies": {
-		"@wordpress/a11y": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/api-fetch": "^7.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/base-styles": "^6.20.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/block-editor": "^15.18.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/blocks": "^15.17.2-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/components": "^33.0.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/compose": "^7.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/core-data": "^7.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/data": "^10.45.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/date": "^5.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/element": "^6.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/global-styles-engine": "^1.11.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/i18n": "^6.17.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/icons": "^12.2.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/keycodes": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/private-apis": "^1.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/a11y": "^4.45.0",
+		"@wordpress/api-fetch": "^7.45.0",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/block-editor": "^15.18.0",
+		"@wordpress/blocks": "^15.18.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/core-data": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/global-styles-engine": "^1.12.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/private-apis": "^1.45.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.0",
 		"colord": "^2.7.0"
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c788005ba4ee2a34851c1217c51602656aa7c3a6"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/font-families.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
@@ -65,7 +65,6 @@ function FontFamiliesInner() {
 					defaultTabId={ modalTabOpen }
 				/>
 			) }
-
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
@@ -90,11 +89,11 @@ function FontFamiliesInner() {
 				) }
 				{ ! hasFonts && (
 					<>
-						<Text as="p">
+						<WCText as="p">
 							{ hasInstalledFonts
 								? __( 'No fonts activated.' )
 								: __( 'No fonts installed.' ) }
-						</Text>
+						</WCText>
 						<Button
 							className="global-styles-ui-font-families__manage-fonts"
 							variant="secondary"

package/src/font-library/font-card.tsx

@@ -4,7 +4,7 @@
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	useNavigator,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 	Flex,
 	FlexItem,
@@ -52,7 +52,7 @@ function FontCard( {
 				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
-						<Text className="font-library__font-card__count">
+						<WCText className="font-library__font-card__count">
 							{ variantsText ||
 								sprintf(
 									/* translators: %d: Number of font variants. */
@@ -63,7 +63,7 @@ function FontCard( {
 									),
 									variantsCount
 								) }
-						</Text>
+						</WCText>
 					</FlexItem>
 					<FlexItem>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />

package/src/font-library/font-collection.tsx

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Navigator,
@@ -285,7 +285,6 @@ function FontCollection( { slug }: { slug: string } ) {
 					<ProgressBar />
 				</div>
 			) }
-
 			{ ! isLoading && selectedCollection && (
 				<>
 					<Navigator
@@ -298,9 +297,9 @@ function FontCollection( { slug }: { slug: string } ) {
 									<Heading level={ 2 } size={ 13 }>
 										{ selectedCollection.name }
 									</Heading>
-									<Text>
+									<WCText>
 										{ selectedCollection.description }
-									</Text>
+									</WCText>
 								</VStack>
 								<ActionsComponent />
 							</HStack>
@@ -335,11 +334,11 @@ function FontCollection( { slug }: { slug: string } ) {
 
 							{ !! selectedCollection?.font_families?.length &&
 								! fonts.length && (
-									<Text>
+									<WCText>
 										{ __(
 											'No fonts found. Try with a different search term.'
 										) }
-									</Text>
+									</WCText>
 								) }
 
 							<div className="font-library__fonts-grid__main">
@@ -411,9 +410,9 @@ function FontCollection( { slug }: { slug: string } ) {
 								</>
 							) }
 							<Spacer margin={ 4 } />
-							<Text>
+							<WCText>
 								{ __( 'Select font variants to install.' ) }
-							</Text>
+							</WCText>
 							<Spacer margin={ 4 } />
 							<CheckboxControl
 								className="font-library__select-all"

package/src/font-library/font-demo.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { useContext, useEffect, useState, useRef } from '@wordpress/element';
 import type { FontFamily, FontFace } from '@wordpress/core-data';
 
@@ -109,12 +109,12 @@ function FontDemo( { font, text }: FontDemoProps ) {
 					className="font-library__font-variant_demo-image"
 				/>
 			) : (
-				<Text
+				<WCText
 					style={ textDemoStyle }
 					className="font-library__font-variant_demo-text"
 				>
 					{ text }
-				</Text>
+				</WCText>
 			) }
 		</div>
 	);

package/src/font-library/google-fonts-confirm-dialog.tsx

@@ -7,7 +7,7 @@ import {
 	Card,
 	CardBody,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 
@@ -28,17 +28,17 @@ function GoogleFontsConfirmDialog() {
 						{ __( 'Connect to Google Fonts' ) }
 					</Heading>
 					<Spacer margin={ 6 } />
-					<Text as="p">
+					<WCText as="p">
 						{ __(
 							'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'
 						) }
-					</Text>
+					</WCText>
 					<Spacer margin={ 3 } />
-					<Text as="p">
+					<WCText as="p">
 						{ __(
 							'You can alternatively upload files directly on the Upload tab.'
 						) }
-					</Text>
+					</WCText>
 					<Spacer margin={ 6 } />
 					<Button
 						__next40pxDefaultSize

package/src/font-library/installed-fonts.tsx

@@ -9,7 +9,7 @@ import {
 	Navigator,
 	useNavigator,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
@@ -238,7 +238,6 @@ function InstalledFonts() {
 					<ProgressBar />
 				</div>
 			) }
-
 			{ ! isResolvingLibrary && (
 				<>
 					<Navigator
@@ -257,9 +256,9 @@ function InstalledFonts() {
 									</Notice>
 								) }
 								{ ! hasFonts && (
-									<Text as="p">
+									<WCText as="p">
 										{ __( 'No fonts installed.' ) }
-									</Text>
+									</WCText>
 								) }
 								{ baseThemeFonts.length > 0 && (
 									<VStack>
@@ -395,11 +394,11 @@ function InstalledFonts() {
 								</>
 							) }
 							<Spacer margin={ 4 } />
-							<Text>
+							<WCText>
 								{ __(
 									'Choose font variants. Keep in mind that too many variants could make your site slower.'
 								) }
-							</Text>
+							</WCText>
 							<Spacer margin={ 4 } />
 							<VStack spacing={ 0 }>
 								<CheckboxControl

package/src/font-library/upload-fonts.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Button,
 	DropZone,
@@ -253,11 +253,11 @@ function UploadFonts() {
 						) }
 					/>
 				) }
-				<Text className="font-library__upload-area__text">
+				<WCText className="font-library__upload-area__text">
 					{ __(
 						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
 					) }
-				</Text>
+				</WCText>
 			</VStack>
 		</div>
 	);

package/src/pagination/index.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import {
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
@@ -44,7 +44,7 @@ export default function Pagination( {
 			justify="flex-start"
 			className={ clsx( 'global-styles-ui-pagination', className ) }
 		>
-			<Text
+			<WCText
 				variant="muted"
 				className="global-styles-ui-pagination__total"
 			>
@@ -53,7 +53,7 @@ export default function Pagination( {
 					_n( '%d item', '%d items', totalItems ),
 					totalItems
 				) }
-			</Text>
+			</WCText>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
 					variant={ buttonVariant }
@@ -74,14 +74,14 @@ export default function Pagination( {
 					size="compact"
 				/>
 			</HStack>
-			<Text variant="muted">
+			<WCText variant="muted">
 				{ sprintf(
 					// translators: 1: Current page number. 2: Total number of pages.
 					_x( '%1$d of %2$d', 'paging' ),
 					currentPage,
 					numPages
 				) }
-			</Text>
+			</WCText>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
 					variant={ buttonVariant }