Skip to content

Commit 31fc51c

Browse files
t-hamanot-hamano
committed
Font Library: Convert heading text to heading elements and group fonts as a list
1 parent fa72c95 commit 31fc51c

File tree

3 files changed

+82
-85
lines changed

3 files changed

+82
-85
lines changed

‎packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

+80-83
Original file line numberDiff line numberDiff line change
@@ -126,97 +126,94 @@ function InstalledFonts() {
126126
}
127127
>
128128
<NavigatorScreen path="/">
129-
{ notice && (
130-
<>
131-
<Spacer margin={ 1 } />
129+
<VStack spacing="8">
130+
{ notice && (
132131
<Notice
133132
status={ notice.type }
134133
onRemove={ () => setNotice( null ) }
135134
>
136135
{ notice.message }
137136
</Notice>
138-
<Spacer margin={ 1 } />
139-
</>
140-
) }
141-
{ baseCustomFonts.length > 0 && (
142-
<VStack>
143-
<h2 className="font-library-modal__fonts-title">
144-
{ __( 'Installed Fonts' ) }
145-
</h2>
146-
{ /*
147-
* Disable reason: The `list` ARIA role is redundant but
148-
* Safari+VoiceOver won't announce the list otherwise.
149-
*/
150-
/* eslint-disable jsx-a11y/no-redundant-roles */ }
151-
<ul
152-
role="list"
153-
className="font-library-modal__fonts-list"
154-
>
155-
{ baseCustomFonts.map( ( font ) => (
156-
<li
157-
key={ font.slug }
158-
className="font-library-modal__fonts-list-item"
159-
>
160-
<FontCard
161-
font={ font }
162-
navigatorPath={
163-
'/fontFamily'
164-
}
165-
variantsText={ getFontCardVariantsText(
166-
font
167-
) }
168-
onClick={ () => {
169-
handleSetLibraryFontSelected(
137+
) }
138+
{ baseCustomFonts.length > 0 && (
139+
<VStack>
140+
<h2 className="font-library-modal__fonts-title">
141+
{ __( 'Installed Fonts' ) }
142+
</h2>
143+
{ /*
144+
* Disable reason: The `list` ARIA role is redundant but
145+
* Safari+VoiceOver won't announce the list otherwise.
146+
*/
147+
/* eslint-disable jsx-a11y/no-redundant-roles */ }
148+
<ul
149+
role="list"
150+
className="font-library-modal__fonts-list"
151+
>
152+
{ baseCustomFonts.map( ( font ) => (
153+
<li
154+
key={ font.slug }
155+
className="font-library-modal__fonts-list-item"
156+
>
157+
<FontCard
158+
font={ font }
159+
navigatorPath={
160+
'/fontFamily'
161+
}
162+
variantsText={ getFontCardVariantsText(
170163
font
171-
);
172-
} }
173-
/>
174-
</li>
175-
) ) }
176-
</ul>
177-
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
178-
</VStack>
179-
) }
180-
181-
{ baseThemeFonts.length > 0 && (
182-
<VStack>
183-
<h2 className="font-library-modal__fonts-title">
184-
{ __( 'Theme Fonts' ) }
185-
</h2>
186-
{ /*
187-
* Disable reason: The `list` ARIA role is redundant but
188-
* Safari+VoiceOver won't announce the list otherwise.
189-
*/
190-
/* eslint-disable jsx-a11y/no-redundant-roles */ }
191-
<ul
192-
role="list"
193-
className="font-library-modal__fonts-list"
194-
>
195-
{ baseThemeFonts.map( ( font ) => (
196-
<li
197-
key={ font.slug }
198-
className="font-library-modal__fonts-list-item"
199-
>
200-
<FontCard
201-
font={ font }
202-
navigatorPath={
203-
'/fontFamily'
204-
}
205-
variantsText={ getFontCardVariantsText(
206-
font
207-
) }
208-
onClick={ () => {
209-
handleSetLibraryFontSelected(
164+
) }
165+
onClick={ () => {
166+
handleSetLibraryFontSelected(
167+
font
168+
);
169+
} }
170+
/>
171+
</li>
172+
) ) }
173+
</ul>
174+
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
175+
</VStack>
176+
) }
177+
{ baseThemeFonts.length > 0 && (
178+
<VStack>
179+
<h2 className="font-library-modal__fonts-title">
180+
{ __( 'Theme Fonts' ) }
181+
</h2>
182+
{ /*
183+
* Disable reason: The `list` ARIA role is redundant but
184+
* Safari+VoiceOver won't announce the list otherwise.
185+
*/
186+
/* eslint-disable jsx-a11y/no-redundant-roles */ }
187+
<ul
188+
role="list"
189+
className="font-library-modal__fonts-list"
190+
>
191+
{ baseThemeFonts.map( ( font ) => (
192+
<li
193+
key={ font.slug }
194+
className="font-library-modal__fonts-list-item"
195+
>
196+
<FontCard
197+
font={ font }
198+
navigatorPath={
199+
'/fontFamily'
200+
}
201+
variantsText={ getFontCardVariantsText(
210202
font
211-
);
212-
} }
213-
/>
214-
</li>
215-
) ) }
216-
</ul>
217-
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
218-
</VStack>
219-
) }
203+
) }
204+
onClick={ () => {
205+
handleSetLibraryFontSelected(
206+
font
207+
);
208+
} }
209+
/>
210+
</li>
211+
) ) }
212+
</ul>
213+
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
214+
</VStack>
215+
) }
216+
</VStack>
220217
</NavigatorScreen>
221218

222219
<NavigatorScreen path="/fontFamily">

‎packages/edit-site/src/components/global-styles/font-library-modal/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ $footer-height: 70px;
8080
}
8181

8282
.font-library-modal__fonts-list-item {
83-
margin-top: -1px; /* To collapse the margin with the previous element */
8483
margin-bottom: 0;
8584
}
8685

@@ -89,6 +88,7 @@ $footer-height: 70px;
8988
width: 100%;
9089
height: auto;
9190
padding: $grid-unit-20;
91+
margin-top: -1px; /* To collapse the margin with the previous element */
9292

9393
&:hover {
9494
background-color: $gray-100;

‎test/e2e/specs/site-editor/font-library.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ test.describe( 'Font Library', () => {
6161
.click();
6262
await expect( page.getByRole( 'dialog' ) ).toBeVisible();
6363
await expect(
64-
page.getByRole( 'heading', { name: 'Fonts' } )
64+
page.getByRole( 'heading', { name: 'Fonts', exact: true } )
6565
).toBeVisible();
6666
} );
6767

0 commit comments

Comments
 (0)