Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font Library: fix to activate and display the right activation state of system fonts (fonts with no font faces) #58093

Merged
merged 3 commits into from
Jan 23, 2024
Merged

Font Library: fix to activate and display the right activation state of system fonts (fonts with no font faces) #58093

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a1f947
fix to activate and display the right activation state of system font…
matiasbenedetto Jan 22, 2024
01d5642
Merge branch 'try/font-library-refactor' into fix/sytem-fonts-ui
matiasbenedetto Jan 23, 2024
1e1bf02
if the font family has an empty array of fontfaces it should be unact…
matiasbenedetto Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 30 additions & 19 deletions packages/edit-site/src/components/global-styles/font-library-modal/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,11 +171,12 @@ function FontLibraryProvider( { children } ) {

const getAvailableFontsOutline = ( availableFontFamilies ) => {
const outline = availableFontFamilies.reduce( ( acc, font ) => {
const availableFontFaces = Array.isArray( font?.fontFace )
? font?.fontFace.map(
( face ) => `${ face.fontStyle + face.fontWeight }`
)
: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
const availableFontFaces =
font?.fontFace && font.fontFace?.length > 0
? font?.fontFace.map(
( face ) => `${ face.fontStyle + face.fontWeight }`
)
: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400

acc[ font.slug ] = availableFontFaces;
return acc;
Expand Down Expand Up @@ -224,26 +225,35 @@ function FontLibraryProvider( { children } ) {

// Collect font faces that have already been installed (to be activated later)
const alreadyInstalledFontFaces =
installedFontFamily.fontFace.filter( ( fontFaceToInstall ) =>
checkFontFaceInstalled(
fontFaceToInstall,
fontFamilyToInstall.fontFace
)
);
installedFontFamily.fontFace && fontFamilyToInstall.fontFace
? installedFontFamily.fontFace.filter(
( fontFaceToInstall ) =>
checkFontFaceInstalled(
fontFaceToInstall,
fontFamilyToInstall.fontFace
)
)
: [];

// Filter out Font Faces that have already been installed (so that they are not re-installed)
fontFamilyToInstall.fontFace = fontFamilyToInstall.fontFace.filter(
( fontFaceToInstall ) =>
! checkFontFaceInstalled(
fontFaceToInstall,
installedFontFamily.fontFace
)
);
if (
installedFontFamily.fontFace &&
fontFamilyToInstall.fontFace
) {
fontFamilyToInstall.fontFace =
fontFamilyToInstall.fontFace.filter(
( fontFaceToInstall ) =>
! checkFontFaceInstalled(
fontFaceToInstall,
installedFontFamily.fontFace
)
);
}

// Install the fonts (upload the font files to the server and create the post in the database).
let sucessfullyInstalledFontFaces = [];
let unsucessfullyInstalledFontFaces = [];
if ( fontFamilyToInstall.fontFace.length > 0 ) {
if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
const response = await batchInstallFontFaces(
installedFontFamily.id,
makeFontFacesFormData( fontFamilyToInstall )
Expand All @@ -261,6 +271,7 @@ function FontLibraryProvider( { children } ) {

// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
if (
fontFamilyToInstall?.fontFace?.length > 0 &&
sucessfullyInstalledFontFaces.length === 0 &&
alreadyInstalledFontFaces.length === 0
) {
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { FontLibraryContext } from './context';
function LibraryFontCard( { font, ...props } ) {
const { getFontFacesActivated } = useContext( FontLibraryContext );

const variantsInstalled = font.fontFace?.length || 1;
const variantsInstalled =
font?.fontFace?.length > 0 ? font.fontFace.length : 1;
const variantsActive = getFontFacesActivated(
font.slug,
font.source
Expand Down
17 changes: 9 additions & 8 deletions packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ function LibraryFontVariant( { face, font } ) {
const { isFontActivated, toggleActivateFont } =
useContext( FontLibraryContext );

const isIstalled = font?.fontFace
? isFontActivated(
font.slug,
face.fontStyle,
face.fontWeight,
font.source
)
: isFontActivated( font.slug, null, null, font.source );
const isIstalled =
font?.fontFace?.length > 0
? isFontActivated(
font.slug,
face.fontStyle,
face.fontWeight,
font.source
)
: isFontActivated( font.slug, null, null, font.source );

const handleToggleActivation = () => {
if ( font?.fontFace ) {
Expand Down
Loading