diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index 155eaa0fe063ee..b094d1e827783e 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -1291,6 +1291,61 @@ describe( 'typography utils', () => { nearestFontWeight: '400', }, }, + { + message: + 'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain numerical fontWeight value', + fontFamilyFaces: [ + { + fontFamily: 'IBM Plex Mono', + fontStyle: 'normal', + fontWeight: 400, + src: [ + 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2', + ], + }, + { + fontFamily: 'IBM Plex Mono', + fontStyle: 'italic', + fontWeight: '400', + src: [ + 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2', + ], + }, + { + fontFamily: 'IBM Plex Mono', + fontStyle: 'normal', + fontWeight: '700', + src: [ + 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2', + ], + }, + ], + fontStyle: 'normal', + fontWeight: '400', + expected: { + nearestFontStyle: 'normal', + nearestFontWeight: '400', + }, + }, + { + message: + 'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain undefined fontWeight value', + fontFamilyFaces: [ + { + fontFamily: 'IBM Plex Mono', + fontStyle: 'normal', + src: [ + 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2', + ], + }, + ], + fontStyle: 'normal', + fontWeight: '400', + expected: { + nearestFontStyle: 'normal', + nearestFontWeight: '700', + }, + }, ].forEach( ( { message, diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js index 32fbd50db2dbff..4b7c90ae4f222c 100644 --- a/packages/block-editor/src/components/global-styles/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/typography-utils.js @@ -174,6 +174,10 @@ export function findNearestFontWeight( availableFontWeights, newFontWeightValue ) { + newFontWeightValue = + 'number' === typeof newFontWeightValue + ? newFontWeightValue.toString() + : newFontWeightValue; if ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) { return ''; } @@ -260,7 +264,7 @@ export function findNearestStyleAndWeight( ( { value: fs } ) => fs === fontStyle ); const hasFontWeight = fontWeights?.some( - ( { value: fw } ) => fw === fontWeight + ( { value: fw } ) => fw?.toString() === fontWeight?.toString() ); if ( ! hasFontStyle ) { diff --git a/packages/block-editor/src/utils/get-font-styles-and-weights.js b/packages/block-editor/src/utils/get-font-styles-and-weights.js index 88b40a5aacfeb5..dcb56fc86b2673 100644 --- a/packages/block-editor/src/utils/get-font-styles-and-weights.js +++ b/packages/block-editor/src/utils/get-font-styles-and-weights.js @@ -79,7 +79,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) { fontFamilyFaces?.forEach( ( face ) => { // Check for variable font by looking for a space in the font weight value. e.g. "100 900" - if ( /\s/.test( face.fontWeight.trim() ) ) { + if ( + 'string' === typeof face.fontWeight && + /\s/.test( face.fontWeight.trim() ) + ) { isVariableFont = true; // Find font weight start and end values. @@ -105,11 +108,15 @@ export function getFontStylesAndWeights( fontFamilyFaces ) { } // Format font style and weight values. - const fontWeight = formatFontWeight( face.fontWeight ); + const fontWeight = formatFontWeight( + 'number' === typeof face.fontWeight + ? face.fontWeight.toString() + : face.fontWeight + ); const fontStyle = formatFontStyle( face.fontStyle ); // Create font style and font weight lists without duplicates. - if ( fontStyle ) { + if ( fontStyle && Object.keys( fontStyle ).length ) { if ( ! fontStyles.some( ( style ) => style.value === fontStyle.value @@ -118,7 +125,8 @@ export function getFontStylesAndWeights( fontFamilyFaces ) { fontStyles.push( fontStyle ); } } - if ( fontWeight ) { + + if ( fontWeight && Object.keys( fontWeight ).length ) { if ( ! fontWeights.some( ( weight ) => weight.value === fontWeight.value diff --git a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js index ffc1a635aa1fb1..7c50409bae1acc 100644 --- a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js +++ b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js @@ -343,6 +343,17 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7LYxnL31AHfAAy5.woff2', }, + { + fontFamily: 'Piazzolla', + fontStyle: 'normal', + fontWeight: 600, + src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2', + }, + { + fontFamily: 'Piazzolla', + fontStyle: 'normal', + src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2', + }, { fontFamily: 'Piazzolla', fontStyle: 'normal', @@ -378,6 +389,10 @@ describe( 'getFontStylesAndWeights', () => { name: 'Regular', value: '400', }, + { + name: 'Semi Bold', + value: '600', + }, { name: 'Black', value: '900', @@ -396,6 +411,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'normal-600', + name: 'Semi Bold', + style: { + fontStyle: 'normal', + fontWeight: '600', + }, + }, { key: 'normal-900', name: 'Black', @@ -420,6 +443,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'italic-600', + name: 'Semi Bold Italic', + style: { + fontStyle: 'italic', + fontWeight: '600', + }, + }, { key: 'italic-900', name: 'Black Italic', @@ -510,4 +541,121 @@ describe( 'getFontStylesAndWeights', () => { isVariableFont: false, } ); } ); + + it( 'should return available styles and weights for a font without fontWeight', () => { + const fontFamilyFaces = [ + { + fontFamily: 'AR One Sans', + fontStyle: 'normal', + src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf', + }, + ]; + expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( { + fontStyles: [ + { + name: 'Regular', + value: 'normal', + }, + { + name: 'Italic', + value: 'italic', + }, + ], + fontWeights: [ + { + name: 'Bold', + value: '700', + }, + ], + combinedStyleAndWeightOptions: [ + { + key: 'normal-700', + name: 'Bold', + style: { + fontStyle: 'normal', + fontWeight: '700', + }, + }, + { + key: 'italic-700', + name: 'Bold Italic', + style: { + fontStyle: 'italic', + fontWeight: '700', + }, + }, + ], + isSystemFont: false, + isVariableFont: false, + } ); + } ); + + it( 'should return available styles and weights for a font with numeric fontWeight', () => { + const fontFamilyFaces = [ + { + fontFamily: 'AR One Sans', + fontStyle: 'normal', + fontWeight: 400, + src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf', + }, + ]; + expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( { + fontStyles: [ + { + name: 'Regular', + value: 'normal', + }, + { + name: 'Italic', + value: 'italic', + }, + ], + fontWeights: [ + { + name: 'Regular', + value: '400', + }, + { + name: 'Bold', + value: '700', + }, + ], + combinedStyleAndWeightOptions: [ + { + key: 'normal-400', + name: 'Regular', + style: { + fontStyle: 'normal', + fontWeight: '400', + }, + }, + { + key: 'normal-700', + name: 'Bold', + style: { + fontStyle: 'normal', + fontWeight: '700', + }, + }, + { + key: 'italic-400', + name: 'Regular Italic', + style: { + fontStyle: 'italic', + fontWeight: '400', + }, + }, + { + key: 'italic-700', + name: 'Bold Italic', + style: { + fontStyle: 'italic', + fontWeight: '700', + }, + }, + ], + isSystemFont: false, + isVariableFont: false, + } ); + } ); } );