Skip to content

Commit 4f71838

Browse files
jffngjffng
authored
Merge pull request #153 from WordPress/add/preview-system-font
Allow previewing system font
2 parents 1de9132 + d4b02ef commit 4f71838

File tree

3 files changed

+62
-51
lines changed

3 files changed

+62
-51
lines changed

‎src/font-face.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,35 @@ import { Button } from '@wordpress/components';
22

33
const { __ } = wp.i18n;
44

5-
function FontFace ( { fontFace, demoText, deleteFontFace } ) {
6-
7-
// Handle cases like fontWeight is a number instead of a string or when the fontweight is a 'range', a string like "800 900".
8-
const fontWeight = fontFace.fontWeight ? String(fontFace.fontWeight).split(' ')[0] : "normal";
9-
5+
function FontFace ( {
6+
fontFamily,
7+
fontWeight,
8+
fontStyle,
9+
demoText,
10+
deleteFontFace
11+
} ) {
12+
1013
const demoStyles = {
11-
fontFamily: fontFace.fontFamily,
12-
fontStyle: fontFace.fontStyle,
13-
fontWeight: fontWeight,
14+
fontFamily,
15+
fontStyle,
16+
// Handle cases like fontWeight is a number instead of a string or when the fontweight is a 'range', a string like "800 900".
17+
fontWeight: fontWeight ? String(fontWeight).split(' ')[0] : "normal",
1418
};
1519

1620
return (
1721
<tr className="font-face">
18-
<td>{fontFace.fontStyle}</td>
19-
<td>{fontFace.fontWeight}</td>
22+
<td>{fontStyle}</td>
23+
<td>{fontWeight}</td>
2024
<td className="demo-cell"><p style={ demoStyles }>{demoText}</p></td>
21-
<td><Button variant="tertiary" isDestructive={true} onClick={deleteFontFace}>{__('Remove')}</Button></td>
25+
{ deleteFontFace && <td><Button variant="tertiary" isDestructive={true} onClick={deleteFontFace}>{__('Remove')}</Button></td> }
2226
</tr>
2327
);
2428
}
2529

30+
FontFace.defaultProps = {
31+
demoText: __("The quick brown fox jumps over the lazy dog.", "create-block-theme"),
32+
fontWeight: "normal",
33+
fontStyle: "normal",
34+
};
35+
2636
export default FontFace;

‎src/font-family.js‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@ function FontFamily ( { fontFamily, fontFamilyIndex, deleteFontFamily, deleteFon
1111
setIsOpen(!isOpen);
1212
}
1313

14-
// handle font famliy that has no font faces, for example a system font
15-
// "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu..."
1614
const hasFontFaces = fontFamily.fontFace && fontFamily.fontFace.length;
1715

1816
return (
1917
<table className="wp-list-table widefat table-view-list">
20-
<thead onClick={toggleIsOpen}>
18+
<thead>
2119
<td class="font-family-head">
2220
<div><strong>{fontFamily.name || fontFamily.fontFamily}</strong></div>
2321
<div>
@@ -31,44 +29,47 @@ function FontFamily ( { fontFamily, fontFamilyIndex, deleteFontFamily, deleteFon
3129
>
3230
{__('Remove Font Family')}
3331
</Button>
34-
{hasFontFaces && (
35-
<Button onClick={toggleIsOpen}>
36-
<Icon icon={isOpen ? 'arrow-up-alt2' : 'arrow-down-alt2'} />
37-
</Button>
38-
)}
32+
<Button onClick={toggleIsOpen}>
33+
<Icon icon={isOpen ? 'arrow-up-alt2' : 'arrow-down-alt2'} />
34+
</Button>
3935
</div>
4036
</td>
4137
</thead>
42-
{hasFontFaces && (
43-
<tbody className="font-family-contents">
44-
<div className="container">
45-
<div className={` slide ${isOpen ? "open" : "close"}`}>
46-
<table className="wp-list-table widefat striped table-view-list">
47-
<thead>
48-
<td>{__('Style')}</td>
49-
<td>{__('Weight')}</td>
50-
<td>{__('Preview')}</td>
51-
<td></td>
52-
</thead>
53-
<tbody>
54-
{hasFontFaces && fontFamily.fontFace.map((fontFace, i) => (
55-
<FontFace
56-
fontFace={fontFace}
57-
fontFamilyIndex={fontFamilyIndex}
58-
fontFaceIndex={i}
59-
demoText={demoText}
60-
key={`fontface${i}`}
61-
deleteFontFace={
62-
() => deleteFontFace(fontFamilyIndex, i)
63-
}
64-
/>
65-
))}
66-
</tbody>
67-
</table>
68-
</div>
38+
<tbody className="font-family-contents">
39+
<div className="container">
40+
<div className={` slide ${isOpen ? "open" : "close"}`}>
41+
<table className="wp-list-table widefat striped table-view-list">
42+
<thead>
43+
<td>{__('Style')}</td>
44+
<td>{__('Weight')}</td>
45+
<td>{__('Preview')}</td>
46+
{ hasFontFaces && <td></td> }
47+
</thead>
48+
<tbody>
49+
{ hasFontFaces && fontFamily.fontFace.map((fontFace, i) => (
50+
<FontFace
51+
{ ...fontFace }
52+
fontFamilyIndex={fontFamilyIndex}
53+
fontFaceIndex={i}
54+
demoText={demoText}
55+
key={`fontface${i}`}
56+
deleteFontFace={
57+
() => deleteFontFace(fontFamilyIndex, i)
58+
}
59+
/>
60+
)) }
61+
{
62+
! hasFontFaces && fontFamily.fontFamily &&
63+
<FontFace
64+
{ ...fontFamily }
65+
demoText={ demoText }
66+
/>
67+
}
68+
</tbody>
69+
</table>
6970
</div>
70-
</tbody>
71-
)}
71+
</div>
72+
</tbody>
7273
</table>
7374
)
7475
}

‎src/manage-fonts.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ function ManageFonts () {
8080
updatedFontFamily
8181
];
8282
}
83-
84-
if (fontFamily.fontFace.length == 1 && index === fontFamilyIndex) {
83+
84+
if (fontFamily?.fontFace?.length == 1 && index === fontFamilyIndex) {
8585
return acc;
8686
}
8787

@@ -92,7 +92,7 @@ function ManageFonts () {
9292
}
9393

9494
const fontFamilyToDelete = newThemeFonts[fontToDelete.fontFamilyIndex];
95-
const fontFaceToDelete = newThemeFonts[fontToDelete.fontFamilyIndex]?.fontFace[fontToDelete.fontFaceIndex];
95+
const fontFaceToDelete = newThemeFonts[fontToDelete.fontFamilyIndex]?.fontFace?.[fontToDelete.fontFaceIndex];
9696

9797
return (
9898
<>

0 commit comments

Comments
 (0)