Font library: Under dedicated font library page

lib/experimental/fonts/load.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Bootstraps the Fonts library page in wp-admin.
+ *
+ * @package gutenberg
+ */
+
+add_action( 'admin_menu', 'gutenberg_register_fonts_menu_item' );
+
+/**
+ * Registers the Fonts menu item under Appearance using the gutenberg-boot-wp-admin routing infrastructure.
+ */
+function gutenberg_register_fonts_menu_item() {
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	$url = admin_url( 'admin.php?page=gutenberg-boot-wp-admin&p=' . urlencode( '/font-list' ) );
+
+	add_submenu_page(
+		'themes.php',
+		__( 'Fonts', 'gutenberg' ),
+		__( 'Fonts', 'gutenberg' ),
+		'edit_theme_options',
+		$url,
+		''
+	);
+}

lib/experimental/pages/gutenberg-boot.php

@@ -33,5 +33,6 @@ function gutenberg_boot_register_default_menu_items() {
 	}
 	register_gutenberg_boot_menu_item( 'templateParts', __( 'Template Parts', 'gutenberg' ), '/template-parts', '' );
 	register_gutenberg_boot_menu_item( 'patterns', __( 'Patterns', 'gutenberg' ), '/patterns', '' );
+	register_gutenberg_boot_menu_item( 'fontList', __( 'Fonts', 'gutenberg' ), '/font-list', '' );
 }
 add_action( 'gutenberg-boot_init', 'gutenberg_boot_register_default_menu_items', 5 );

lib/load.php

@@ -117,6 +117,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/pages/gutenberg-boot.php';
 require __DIR__ . '/experimental/posts/load.php';
+require __DIR__ . '/experimental/fonts/load.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-workflow-palette' ) ) {
 	require __DIR__ . '/experimental/workflow-palette.php';

packages/admin-ui/src/page/style.scss

@@ -19,6 +19,7 @@
 	background: $white;
 	position: sticky;
 	top: 0;
+	z-index: 1;
 }
 
 .admin-ui-page__sidebar-toggle-slot:empty {

packages/boot/src/style.scss

@@ -11,6 +11,7 @@
 body:has(.boot-layout-container) {
 	background: #1d2327; // Same as WP-Admin sidebar
 	overflow: hidden;
+	@include wp-admin-reset( ".boot-layout-container" );
 }
 
 #wpcontent {

packages/edit-site-init/src/index.ts

@@ -9,6 +9,7 @@ import {
 	symbol,
 	symbolFilled,
 	layout,
+	typography,
 } from '@wordpress/icons';
 import { dispatch } from '@wordpress/data';
 import { store as bootStore } from '@wordpress/boot';
@@ -27,6 +28,7 @@ export async function init() {
 		templateParts: { icon: symbolFilled },
 		patterns: { icon: symbol },
 		templates: { icon: layout },
+		fontList: { icon: typography },
 	};
 
 	// Update each menu item with its icon

packages/global-styles-ui/src/font-families.tsx

@@ -19,10 +19,10 @@ import { Subtitle } from './subtitle';
 import { useSetting } from './hooks';
 import FontLibraryProvider, {
 	FontLibraryContext,
-} from './font-library-modal/context';
-import FontLibraryModal from './font-library-modal';
+} from './font-library/context';
+import FontLibraryModal from './font-library/modal';
 import FontFamilyItem from './font-family-item';
-import { setUIValuesNeeded } from './font-library-modal/utils';
+import { setUIValuesNeeded } from './font-library/utils';
 
 /**
  * Maps the fonts with the source, if available.

packages/global-styles-ui/src/font-family-item.tsx

@@ -13,8 +13,8 @@ import type { FontFamily } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { FontLibraryContext } from './font-library-modal/context';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { FontLibraryContext } from './font-library/context';
+import { getFamilyPreviewStyle } from './font-library/utils/preview-styles';
 
 interface FontFamilyItemProps {
 	font: FontFamily;

packages/global-styles-ui/src/font-library-modal/collection-font-variant.tsx → packages/global-styles-ui/src/font-library/collection-font-variant.tsx

@@ -29,7 +29,7 @@ function CollectionFontVariant( {
 	const checkboxId = useId();
 
 	return (
-		<div className="font-library-modal__font-card">
+		<div className="font-library__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }

packages/global-styles-ui/src/font-library-modal/font-card.tsx → packages/global-styles-ui/src/font-library/font-card.tsx

@@ -46,13 +46,13 @@ function FontCard( {
 				}
 			} }
 			style={ style }
-			className="font-library-modal__font-card"
+			className="font-library__font-card"
 		>
 			<Flex justify="space-between" wrap={ false }>
 				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
-						<Text className="font-library-modal__font-card__count">
+						<Text className="font-library__font-card__count">
 							{ variantsText ||
 								sprintf(
 									/* translators: %d: Number of font variants. */

packages/global-styles-ui/src/font-library-modal/font-collection.tsx → packages/global-styles-ui/src/font-library/font-collection.tsx

@@ -279,9 +279,9 @@ function FontCollection( { slug }: { slug: string } ) {
 	};
 
 	return (
-		<div className="font-library-modal__tabpanel-layout">
+		<div className="font-library__tabpanel-layout">
 			{ isLoading && (
-				<div className="font-library-modal__loading">
+				<div className="font-library__loading">
 					<ProgressBar />
 				</div>
 			) }
@@ -290,7 +290,7 @@ function FontCollection( { slug }: { slug: string } ) {
 				<>
 					<Navigator
 						initialPath="/"
-						className="font-library-modal__tabpanel-layout"
+						className="font-library__tabpanel-layout"
 					>
 						<Navigator.Screen path="/">
 							<HStack justify="space-between">
@@ -344,22 +344,22 @@ function FontCollection( { slug }: { slug: string } ) {
 									</Text>
 								) }
 
-							<div className="font-library-modal__fonts-grid__main">
+							<div className="font-library__fonts-grid__main">
 								{ /*
 								 * Disable reason: The `list` ARIA role is redundant but
 								 * Safari+VoiceOver won't announce the list otherwise.
 								 */
 								/* eslint-disable jsx-a11y/no-redundant-roles */ }
 								<ul
 									role="list"
-									className="font-library-modal__fonts-list"
+									className="font-library__fonts-list"
 								>
 									{ items.map( ( font ) => (
 										<li
 											key={
 												font.font_family_settings.slug
 											}
-											className="font-library-modal__fonts-list-item"
+											className="font-library__fonts-list-item"
 										>
 											<FontCard
 												font={
@@ -418,7 +418,7 @@ function FontCollection( { slug }: { slug: string } ) {
 							</Text>
 							<Spacer margin={ 4 } />
 							<CheckboxControl
-								className="font-library-modal__select-all"
+								className="font-library__select-all"
 								label={ __( 'Select all' ) }
 								checked={ isSelectAllChecked }
 								onChange={ toggleSelectAll }
@@ -433,14 +433,14 @@ function FontCollection( { slug }: { slug: string } ) {
 								/* eslint-disable jsx-a11y/no-redundant-roles */ }
 								<ul
 									role="list"
-									className="font-library-modal__fonts-list"
+									className="font-library__fonts-list"
 								>
 									{ selectedFont &&
 										getSortedFontFaces( selectedFont ).map(
 											( face, i ) => (
 												<li
 													key={ `face${ i }` }
-													className="font-library-modal__fonts-list-item"
+													className="font-library__fonts-list-item"
 												>
 													<CollectionFontVariant
 														font={ selectedFont }
@@ -469,7 +469,7 @@ function FontCollection( { slug }: { slug: string } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__footer"
+							className="font-library__footer"
 						>
 							<Button
 								__next40pxDefaultSize
@@ -489,15 +489,15 @@ function FontCollection( { slug }: { slug: string } ) {
 					{ ! selectedFont && (
 						<HStack
 							expanded={ false }
-							className="font-library-modal__footer"
+							className="font-library__footer"
 							justify="end"
 							spacing={ 6 }
 						>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 1 }
-								className="font-library-modal__page-selection"
+								className="font-library__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(

packages/global-styles-ui/src/font-library-modal/font-demo.tsx → packages/global-styles-ui/src/font-library/font-demo.tsx

@@ -106,12 +106,12 @@ function FontDemo( { font, text }: FontDemoProps ) {
 					src={ previewUrl }
 					loading="lazy"
 					alt={ text }
-					className="font-library-modal__font-variant_demo-image"
+					className="font-library__font-variant_demo-image"
 				/>
 			) : (
 				<Text
 					style={ textDemoStyle }
-					className="font-library-modal__font-variant_demo-text"
+					className="font-library__font-variant_demo-text"
 				>
 					{ text }
 				</Text>

packages/global-styles-ui/src/font-library/font-library.tsx

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesProvider } from '../provider';
+import FontLibraryProvider from './context';
+import InstalledFonts from './installed-fonts';
+import UploadFonts from './upload-fonts';
+import FontCollection from './font-collection';
+
+interface FontLibraryProps {
+	value: any;
+	baseValue: any;
+	onChange: ( value: any ) => void;
+	activeTab?: string;
+	onTabChange?: ( tab: string ) => void;
+}
+
+export function FontLibrary( {
+	value,
+	baseValue,
+	onChange,
+	activeTab = 'installed-fonts',
+}: FontLibraryProps ) {
+	let content;
+	switch ( activeTab ) {
+		case 'upload-fonts':
+			content = <UploadFonts />;
+			break;
+		case 'installed-fonts':
+			content = <InstalledFonts />;
+			break;
+		default:
+			content = <FontCollection slug={ activeTab } />;
+	}
+
+	return (
+		<GlobalStylesProvider
+			value={ value }
+			baseValue={ baseValue }
+			onChange={ onChange }
+		>
+			<FontLibraryProvider>{ content }</FontLibraryProvider>
+		</GlobalStylesProvider>
+	);
+}