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 Appearance Control: Refactor font appearance fallbacks #63215

Merged
merged 28 commits into from
Jul 15, 2024
Merged

Font Appearance Control: Refactor font appearance fallbacks #63215

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
68dc225
Refactor font appearance fallbacks
mikachan Jul 6, 2024
3b434b1
Create new findNearestStyleAndWeight function
mikachan Jul 6, 2024
dacc850
Add tests for findNearestStyleAndWeight
mikachan Jul 6, 2024
23a8fa2
Refactor findNearestStyleAndWeight
mikachan Jul 6, 2024
2e0e9c5
Add a test for normal/100
mikachan Jul 6, 2024
5a22028
Add comments
mikachan Jul 6, 2024
9813347
Tidy up comments
mikachan Jul 6, 2024
23567d5
Fix test description
mikachan Jul 6, 2024
1f102c6
Update test descriptions
mikachan Jul 6, 2024
c74daeb
Update deps and wrap setFontAppearance and resetFontAppearance in use…
mikachan Jul 8, 2024
7e027b4
Add e2e test for appearance control dropdown menu
mikachan Jul 8, 2024
ef7350b
Add periods to end of comments
mikachan Jul 8, 2024
a796d13
Use better test data for font appearance e2e default test
mikachan Jul 8, 2024
72199cc
Add findNearestFontStyle function with tests
mikachan Jul 8, 2024
3796305
Limit the dependency array to just fontFamily
mikachan Jul 8, 2024
64b13cc
Add normal font style test
mikachan Jul 8, 2024
fc209a6
Add invalid font style test
mikachan Jul 8, 2024
1f69824
Try toHaveText instead of toContainText
mikachan Jul 8, 2024
a7a3b6a
Try using TT4 for e2e test rather than TT3
mikachan Jul 8, 2024
74edc0c
Merge branch 'trunk' into try/refactor-font-appearance-defaults
mikachan Jul 8, 2024
cec7d9d
Use combobox role rather than button in e2e test
mikachan Jul 8, 2024
08e73d7
Merge branch 'trunk' into try/refactor-font-appearance-defaults
mikachan Jul 8, 2024
2e23bc5
Merge branch 'trunk' into try/refactor-font-appearance-defaults
mikachan Jul 9, 2024
b06c4e4
Set nearestFontStyle to an empty string by default
mikachan Jul 9, 2024
b407be1
Refactor findNearestFontStyle
mikachan Jul 9, 2024
9d7dfc4
Do not activate a theme in font appearance e2e test
mikachan Jul 9, 2024
18e1bfe
Run findNearestStyleAndWeight only when fontFamily has changed
mikachan Jul 11, 2024
8288dd4
Only trigger appearance onChange if values are different
mikachan Jul 13, 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
254 changes: 254 additions & 0 deletions packages/block-editor/src/components/global-styles/test/typography-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
getFluidTypographyOptionsFromSettings,
getMergedFontFamiliesAndFontFamilyFaces,
findNearestFontWeight,
findNearestStyleAndWeight,
} from '../typography-utils';

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

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
34 changes: 8 additions & 26 deletions packages/block-editor/src/components/global-styles/typography-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import {
getMergedFontFamiliesAndFontFamilyFaces,
findNearestFontWeight,
findNearestStyleAndWeight,
} from './typography-utils';
import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';

const MIN_TEXT_COLUMNS = 1;
const MAX_TEXT_COLUMNS = 6;
Expand Down Expand Up @@ -257,33 +256,16 @@ export default function TypographyPanel( {

// Check if previous font style and weight values are available in the new font family
useEffect( () => {
const { fontStyles, fontWeights, isSystemFont } =
getFontStylesAndWeights( fontFamilyFaces );
const hasFontStyle = fontStyles?.some(
( { value: fs } ) => fs === fontStyle
);
const hasFontWeight = fontWeights?.some(
( { value: fw } ) => fw === fontWeight
);

// Try to set nearest available font weight
if ( ! hasFontWeight && fontWeight ) {
setFontAppearance( {
fontStyle,
fontWeight: findNearestFontWeight( fontWeights, fontWeight ),
} );
}
const { nearestFontStyle, nearestFontWeight } =
findNearestStyleAndWeight( fontFamilyFaces, fontStyle, fontWeight );

// Set the same weight and style values if the font family is a system font or if both are the same
if ( isSystemFont || ( hasFontStyle && hasFontWeight ) ) {
if ( nearestFontStyle && nearestFontWeight ) {
setFontAppearance( {
fontStyle,
fontWeight,
fontStyle: nearestFontStyle,
fontWeight: nearestFontWeight,
} );
}

// Reset font appearance if the font family does not have the selected font style
if ( ! hasFontStyle ) {
} else {
// Reset font appearance if there are no available styles or weights
mikachan marked this conversation as resolved.
Show resolved Hide resolved
resetFontAppearance();
}
}, [ fontFamily ] );
Copy link
Contributor

Choose a reason for hiding this comment

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

There are some missing dependencies, which results in a linter warning.

I think it'd be good to make sure that's fixed or the rule is disabled for this line (with a comment mentioning why).

To fix it, it looks like setFontAppearance and resetFontAppearance would have to be wrapped in useCallback.

Copy link
Member Author

Choose a reason for hiding this comment

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

I tried adding all of the dependencies but it looks like this causes an infinite loop, and I think it's OK to rely on only the fontFamily changing here as this is the main prop we want to watch in this case.

I've disabled the rule for this line with a comment explaining why: 3796305

I left the useCallback functions in for setFontAppearance and resetFontAppearance as they seem to work the same either way, and I'm guessing this might have some small performance benefits.

Expand Down
56 changes: 56 additions & 0 deletions packages/block-editor/src/components/global-styles/typography-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getComputedFluidTypographyValue,
getTypographyValueAndUnit,
} from '../font-sizes/fluid-utils';
import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';

/**
* @typedef {Object} FluidPreset
Expand Down Expand Up @@ -185,3 +186,58 @@ export function findNearestFontWeight(

return nearestFontWeight;
}

/**
* Returns the nearest font style and weight based on the available font family faces and the new font style and weight.
*
* @param {Array} fontFamilyFaces Array of available font family faces.
* @param {string} fontStyle New font style. Defaults to previous value.
* @param {string} fontWeight New font weight. Defaults to previous value.
* @return {Object} Nearest font style and font weight.
*/
export function findNearestStyleAndWeight(
fontFamilyFaces,
fontStyle,
fontWeight
) {
let nearestFontStyle = fontStyle;
let nearestFontWeight = fontWeight;

const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
getFontStylesAndWeights( fontFamilyFaces );

// Check if the new font style and weight are available in the font family faces
const hasFontStyle = fontStyles?.some(
( { value: fs } ) => fs === fontStyle
);
const hasFontWeight = fontWeights?.some(
( { value: fw } ) => fw === fontWeight
);

if ( ! hasFontStyle ) {
// Default to italic if oblique is not available
// Or find the nearest font style based on the nearest font weight
nearestFontStyle =
fontStyle === 'oblique'
? 'italic'
: combinedStyleAndWeightOptions?.find(
( option ) =>
option.style.fontWeight ===
findNearestFontWeight( fontWeights, fontWeight )
)?.style?.fontStyle;
}

if ( ! hasFontWeight ) {
// Find the nearest font weight based on available weights
// Or find the nearest font weight based on the nearest font style
nearestFontWeight = fontWeight
? findNearestFontWeight( fontWeights, fontWeight )
: combinedStyleAndWeightOptions?.find(
( option ) =>
option.style.fontStyle ===
( nearestFontStyle || fontStyle )
)?.style?.fontWeight;
}

return { nearestFontStyle, nearestFontWeight };
}
Loading