Skip to content

Commit

Permalink
Font Library: Add headings to user font lists and group them
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Feb 24, 2024
1 parent 593fd64 commit 39f19f4
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 68 deletions.
40 changes: 28 additions & 12 deletions packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,18 +337,34 @@ function FontCollection( { slug } ) {
) }

<div className="font-library-modal__fonts-grid__main">
{ items.map( ( font ) => (
<FontCard
key={ font.font_family_settings.slug }
font={ font.font_family_settings }
navigatorPath={ '/fontFamily' }
onClick={ () => {
setSelectedFont(
font.font_family_settings
);
} }
/>
) ) }
{ /*
* 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"
>
{ items.map( ( font ) => (
<li
key={ font.slug }
className="font-library-modal__fonts-list-item"
>
<FontCard
key={ font.font_family_settings.slug }
font={ font.font_family_settings }
navigatorPath={ '/fontFamily' }
onClick={ () => {
setSelectedFont(
font.font_family_settings
);
} }
/>
</li>
) ) }
</ul>
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
</div>
</NavigatorScreen>

Expand Down
135 changes: 81 additions & 54 deletions packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,71 +97,98 @@ function InstalledFonts() {
<div className="font-library-modal__tabpanel-layout">
{ isResolvingLibrary && (
<HStack align="center">
<Spacer />
<Spinner />
<Spacer />
</HStack>
) }

<NavigatorProvider initialPath="/">
<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 && (
<>
<Text className="font-library-modal__subtitle">
{ __( 'Installed Fonts' ) }
</Text>
<Spacer margin={ 2 } />
{ baseCustomFonts.map( ( font ) => (
<FontCard
font={ font }
key={ font.slug }
navigatorPath={ '/fontFamily' }
variantsText={ getFontCardVariantsText(
font
) }
onClick={ () => {
handleSetLibraryFontSelected( font );
} }
/>
) ) }
<Spacer margin={ 8 } />
</>
) }

{ baseThemeFonts.length > 0 && (
<>
<Text className="font-library-modal__subtitle">
{ __( 'Theme Fonts' ) }
</Text>
<Spacer margin={ 2 } />
{ baseThemeFonts.map( ( font ) => (
<FontCard
font={ font }
key={ font.slug }
navigatorPath={ '/fontFamily' }
variantsText={ getFontCardVariantsText(
font
) }
onClick={ () => {
handleSetLibraryFontSelected( font );
} }
/>
) ) }
</>
) }
<Spacer margin={ 16 } />
) }
{ 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 }
key={ font.slug }
navigatorPath={ '/fontFamily' }
variantsText={ getFontCardVariantsText(
font
) }
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 }
key={ font.slug }
navigatorPath={ '/fontFamily' }
variantsText={ getFontCardVariantsText(
font
) }
onClick={ () => {
handleSetLibraryFontSelected(
font
);
} }
/>
</li>
) ) }
</ul>
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
</VStack>
) }
</VStack>
<Spacer paddingY={ 8 } marginBottom={ 0 } />
</NavigatorScreen>

<NavigatorScreen path="/fontFamily">
Expand Down
19 changes: 18 additions & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,29 @@
margin-bottom: 0;
}

.font-library-modal__fonts-title {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
margin-top: 0;
margin-bottom: 0;
}

.font-library-modal__fonts-list {
margin-top: 0;
margin-bottom: 0;
}

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

.font-library-modal__font-card {
border: 1px solid $gray-200;
width: 100%;
height: auto;
padding: $grid-unit-20;
margin-top: -1px; /* To collapse the margin with the previous element */

&:hover {
background-color: $gray-100;
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/font-library.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );

Expand Down

0 comments on commit 39f19f4

Please sign in to comment.