Skip to content

Commit

Permalink
Font Appearance Control: Refactor font appearance fallbacks (#63215)
Browse files Browse the repository at this point in the history 
* Refactor font appearance fallbacks

* Create new findNearestStyleAndWeight function

* Add tests for findNearestStyleAndWeight

* Refactor findNearestStyleAndWeight

* Add a test for normal/100

* Add comments

* Tidy up comments

* Fix test description

* Update test descriptions

* Update deps and wrap setFontAppearance and resetFontAppearance in useCallback

* Add e2e test for appearance control dropdown menu

* Add periods to end of comments

* Use better test data for font appearance e2e default test

* Add findNearestFontStyle function with tests

* Limit the dependency array to just fontFamily

* Add normal font style test

* Add invalid font style test

* Try toHaveText instead of toContainText

* Try using TT4 for e2e test rather than TT3

* Use combobox role rather than button in e2e test

* Set nearestFontStyle to an empty string by default

* Refactor findNearestFontStyle

* Do not activate a theme in font appearance e2e test

* Run findNearestStyleAndWeight only when fontFamily has changed

* Only trigger appearance onChange if values are different

Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
  • Loading branch information
@mikachan @talldan
@noisysocks @t-hamano @Mamaduka
7 people authored Jul 15, 2024
1 parent 0b8e0b5 commit afb24fc
Show file tree
Hide file tree
Showing 4 changed files with 554 additions and 51 deletions.
325 changes: 325 additions & 0 deletions packages/block-editor/src/components/global-styles/test/typography-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
getFluidTypographyOptionsFromSettings,
getMergedFontFamiliesAndFontFamilyFaces,
findNearestFontWeight,
findNearestFontStyle,
findNearestStyleAndWeight,
} from '../typography-utils';

describe( 'typography utils', () => {
Expand Down Expand Up @@ -951,6 +953,329 @@ describe( 'typography utils', () => {
);
} );

describe( 'findNearestFontStyle', () => {
[
{
message:
'should return empty string when newFontStyleValue is `undefined`',
availableFontStyles: undefined,
newFontStyleValue: undefined,
expected: '',
},
{
message:
'should return newFontStyleValue value when availableFontStyles is empty',
availableFontStyles: [],
newFontStyleValue: 'italic',
expected: 'italic',
},
{
message:
'should return empty string if there is no new font style available',
availableFontStyles: [ { name: 'Normal', value: 'normal' } ],
newFontStyleValue: 'italic',
expected: '',
},
{
message:
'should return empty string if the new font style is invalid',
availableFontStyles: [
{ name: 'Regular', value: 'normal' },
{ name: 'Italic', value: 'italic' },
],
newFontStyleValue: 'not-valid',
expected: '',
},
{
message: 'should return italic if oblique is not available',
availableFontStyles: [
{ name: 'Regular', value: 'normal' },
{ name: 'Italic', value: 'italic' },
],
newFontStyleValue: 'oblique',
expected: 'italic',
},
{
message: 'should return normal if normal is available',
availableFontStyles: [
{ name: 'Regular', value: 'normal' },
{ name: 'Italic', value: 'italic' },
],
newFontStyleValue: 'normal',
expected: 'normal',
},
].forEach(
( {
message,
availableFontStyles,
newFontStyleValue,
expected,
} ) => {
it( `${ message }`, () => {
expect(
findNearestFontStyle(
availableFontStyles,
newFontStyleValue
)
).toEqual( expected );
} );
}
);
} );

describe( 'findNearestStyleAndWeight', () => {
[
{
message: 'should return empty object when all values are empty',
fontFamilyFaces: [],
fontStyle: undefined,
fontWeight: undefined,
expected: {},
},
{
message:
'should return original fontStyle and fontWeight when fontFamilyFaces is empty',
fontFamilyFaces: [],
fontStyle: 'italic',
fontWeight: '700',
expected: {
nearestFontStyle: 'italic',
nearestFontWeight: '700',
},
},
{
message:
'should return undefined values if both fontStyle and fontWeight are not available',
fontFamilyFaces: [
{
fontFamily: 'ABeeZee',
fontStyle: 'italic',
fontWeight: '400',
src: [
'file:./assets/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
],
},
],
fontStyle: undefined,
fontWeight: undefined,
expected: {
nearestFontStyle: undefined,
nearestFontWeight: undefined,
},
},
{
message:
'should return nearest fontStyle and fontWeight for normal/400',
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/100',
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: '100',
expected: {
nearestFontStyle: 'normal',
nearestFontWeight: '400',
},
},
{
message:
'should return nearest fontStyle and fontWeight for italic/900',
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: 'italic',
fontWeight: '900',
expected: {
nearestFontStyle: 'italic',
nearestFontWeight: '700',
},
},
{
message:
'should return nearest fontStyle and fontWeight for oblique/600',
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: '700',
src: [
'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
],
},
],
fontStyle: 'oblique',
fontWeight: '600',
expected: {
nearestFontStyle: 'italic',
nearestFontWeight: '700',
},
},
{
message:
'should return nearest fontStyle and fontWeight for 300 font weight and empty font style',
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: '700',
src: [
'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
],
},
],
fontStyle: undefined,
fontWeight: '300',
expected: {
nearestFontStyle: 'normal',
nearestFontWeight: '400',
},
},
{
message:
'should return nearest fontStyle and fontWeight for oblique font style and empty font weight',
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: '700',
src: [
'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
],
},
],
fontStyle: 'oblique',
fontWeight: undefined,
expected: {
nearestFontStyle: 'italic',
nearestFontWeight: '400',
},
},
].forEach(
( {
message,
fontFamilyFaces,
fontStyle,
fontWeight,
expected,
} ) => {
it( `${ message }`, () => {
expect(
findNearestStyleAndWeight(
fontFamilyFaces,
fontStyle,
fontWeight
)
).toEqual( expected );
} );
}
);
} );

describe( 'typography utils', () => {
[
{
Expand Down
Loading

0 comments on commit afb24fc

Please sign in to comment.