Skip to content

Commit

Permalink
Font Library: Convert heading text to heading elements and group font…
Browse files Browse the repository at this point in the history 
…s as a list (#58834)

* temp

* Font Library: Convert heading text to heading elements and group fonts as a list

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
  • Loading branch information
@t-hamano @afercia
@colorful-tones @annezazu
6 people committed Apr 30, 2024
1 parent 7fd46f2 commit e2142c3
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 67 deletions.
43 changes: 31 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 @@ -332,18 +332,37 @@ 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.font_family_settings.slug
}
className="font-library-modal__fonts-list-item"
>
<FontCard
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
136 changes: 82 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 @@ -126,66 +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 && (
<>
<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
);
} }
/>
) ) }
</>
) }
) }
{ 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(
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(
font
);
} }
/>
</li>
) ) }
</ul>
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
</VStack>
) }
</VStack>
</NavigatorScreen>

<NavigatorScreen path="/fontFamily">
Expand Down
17 changes: 17 additions & 0 deletions 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 @@ -66,6 +66,23 @@ $footer-height: 70px;
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-bottom: 0;
}

.font-library-modal__font-card {
border: 1px solid $gray-200;
width: 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

1 comment on commit e2142c3

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in e2142c3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8892704813
📝 Reported issues:

Please sign in to comment.