Skip to content

Commit

Permalink
Font Library: Group fonts by source (#63211)
Browse files Browse the repository at this point in the history
* Font Library Sidebar: Group fonts by source

* Render text as paragraph

* Change "User" to "Custom"

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
  • Loading branch information
7 people authored Jul 12, 2024
1 parent d88a0ed commit e7bf3b6
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 36 deletions.
64 changes: 35 additions & 29 deletions packages/edit-site/src/components/global-styles/font-families.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalText as Text,
__experimentalItemGroup as ItemGroup,
__experimentalVStack as VStack,
Button,
Expand Down Expand Up @@ -48,48 +49,53 @@ function FontFamilies() {
/>
) }

<VStack spacing={ 2 }>
<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
{ hasFonts ? (
<>
<VStack spacing={ 4 }>
{ themeFonts.length > 0 && (
<VStack>
<Subtitle level={ 3 }>{ __( 'Theme Fonts' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
{ customFonts.map( ( font ) => (
{ themeFonts.map( ( font ) => (
<FontFamilyItem
key={ font.slug }
font={ font }
/>
) ) }
{ themeFonts.map( ( font ) => (
</ItemGroup>
</VStack>
) }
{ customFonts.length > 0 && (
<VStack>
<Subtitle level={ 3 }>
{ __( 'Custom fonts' ) }
</Subtitle>
<ItemGroup isBordered isSeparated>
{ customFonts.map( ( font ) => (
<FontFamilyItem
key={ font.slug }
font={ font }
/>
) ) }
</ItemGroup>
<Button
className="edit-site-global-styles-font-families__manage-fonts"
variant="secondary"
__next40pxDefaultSize
onClick={ () =>
setModalTabOpen( 'installed-fonts' )
}
>
{ __( 'Manage fonts' ) }
</Button>
</>
) : (
<>
{ __( 'No fonts installed.' ) }
<Button
className="edit-site-global-styles-font-families__add-fonts"
variant="secondary"
__next40pxDefaultSize
onClick={ () => setModalTabOpen( 'upload-fonts' ) }
>
{ __( 'Add fonts' ) }
</Button>
</>
</VStack>
) }
{ ! hasFonts && (
<VStack>
<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
<Text as="p">{ __( 'No fonts installed.' ) }</Text>
</VStack>
) }
<Button
className="edit-site-global-styles-font-families__manage-fonts"
variant="secondary"
__next40pxDefaultSize
onClick={ () =>
setModalTabOpen(
hasFonts ? 'installed-fonts' : 'upload-fonts'
)
}
>
{ hasFonts ? __( 'Manage fonts' ) : __( 'Add fonts' ) }
</Button>
</VStack>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,10 @@ function InstalledFonts() {
{ notice.message }
</Notice>
) }
{ baseCustomFonts.length > 0 && (
{ baseThemeFonts.length > 0 && (
<VStack>
<h2 className="font-library-modal__fonts-title">
{ __( 'Installed Fonts' ) }
{ __( 'Theme Fonts' ) }
</h2>
{ /*
* Disable reason: The `list` ARIA role is redundant but
Expand All @@ -183,7 +183,7 @@ function InstalledFonts() {
role="list"
className="font-library-modal__fonts-list"
>
{ baseCustomFonts.map( ( font ) => (
{ baseThemeFonts.map( ( font ) => (
<li
key={ font.slug }
className="font-library-modal__fonts-list-item"
Expand All @@ -206,10 +206,10 @@ function InstalledFonts() {
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
</VStack>
) }
{ baseThemeFonts.length > 0 && (
{ baseCustomFonts.length > 0 && (
<VStack>
<h2 className="font-library-modal__fonts-title">
{ __( 'Theme Fonts' ) }
{ __( 'Custom fonts' ) }
</h2>
{ /*
* Disable reason: The `list` ARIA role is redundant but
Expand All @@ -220,7 +220,7 @@ function InstalledFonts() {
role="list"
className="font-library-modal__fonts-list"
>
{ baseThemeFonts.map( ( font ) => (
{ baseCustomFonts.map( ( font ) => (
<li
key={ font.slug }
className="font-library-modal__fonts-list-item"
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@
color: $gray-700;
}

.edit-site-global-styles-font-families__add-fonts,
.edit-site-global-styles-font-families__manage-fonts {
justify-content: center;
}
Expand Down

0 comments on commit e7bf3b6

Please sign in to comment.