Font Library: Convert heading text to heading elements and group font…

…s as a list
WordPress · Apr 27, 2024 · 31fc51c · 31fc51c
1 parent fa72c95
commit 31fc51c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 85 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -126,97 +126,94 @@ function InstalledFonts() {
 						}
 					>
 						<NavigatorScreen path="/">
-							{ notice && (
-								<>
-									<Spacer margin={ 1 } />
+							<VStack spacing="8">
+								{ notice && (
 									<Notice
 										status={ notice.type }
 										onRemove={ () => setNotice( null ) }
 									>
 										{ notice.message }
 									</Notice>
-									<Spacer margin={ 1 } />
-								</>
-							) }
-							{ baseCustomFonts.length > 0 && (
-								<VStack>
-									<h2 className="font-library-modal__fonts-title">
-										{ __( 'Installed Fonts' ) }
-									</h2>
-									{ /*
-									 * 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"
-									>
-										{ baseCustomFonts.map( ( font ) => (
-											<li
-												key={ font.slug }
-												className="font-library-modal__fonts-list-item"
-											>
-												<FontCard
-													font={ font }
-													navigatorPath={
-														'/fontFamily'
-													}
-													variantsText={ getFontCardVariantsText(
-														font
-													) }
-													onClick={ () => {
-														handleSetLibraryFontSelected(
+								) }
+								{ baseCustomFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{ __( 'Installed Fonts' ) }
+										</h2>
+										{ /*
+										 * 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"
+										>
+											{ baseCustomFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
 															font
-														);
-													} }
-												/>
-											</li>
-										) ) }
-									</ul>
-									{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-								</VStack>
-							) }
-
-							{ baseThemeFonts.length > 0 && (
-								<VStack>
-									<h2 className="font-library-modal__fonts-title">
-										{ __( 'Theme Fonts' ) }
-									</h2>
-									{ /*
-									 * 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"
-									>
-										{ baseThemeFonts.map( ( font ) => (
-											<li
-												key={ font.slug }
-												className="font-library-modal__fonts-list-item"
-											>
-												<FontCard
-													font={ font }
-													navigatorPath={
-														'/fontFamily'
-													}
-													variantsText={ getFontCardVariantsText(
-														font
-													) }
-													onClick={ () => {
-														handleSetLibraryFontSelected(
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+								{ baseThemeFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{ __( 'Theme Fonts' ) }
+										</h2>
+										{ /*
+										 * 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"
+										>
+											{ baseThemeFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
 															font
-														);
-													} }
-												/>
-											</li>
-										) ) }
-									</ul>
-									{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-								</VStack>
-							) }
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+							</VStack>
 						</NavigatorScreen>
 
 						<NavigatorScreen path="/fontFamily">

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -80,7 +80,6 @@ $footer-height: 70px;
 }
 
 .font-library-modal__fonts-list-item {
-	margin-top: -1px; /* To collapse the margin with the previous element */
 	margin-bottom: 0;
 }
 
@@ -89,6 +88,7 @@ $footer-height: 70px;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;
+	margin-top: -1px; /* To collapse the margin with the previous element */
 
 	&:hover {
 		background-color: $gray-100;

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
@@ -61,7 +61,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
 			await expect(
-				page.getByRole( 'heading', { name: 'Fonts' } )
+				page.getByRole( 'heading', { name: 'Fonts', exact: true } )
 			).toBeVisible();
 		} );