← All changes | src/editor/components/FontSelect.tsx +115 -115 1.28.0 → 1.13.0 View file →

		@@ -1,132 +1,132 @@
1		-import { FontSizePicker, SelectControl } from '@wordpress/components';
	1	+import { SelectControl, FontSizePicker } from '@wordpress/components';
2	2	import { __ } from '@wordpress/i18n';
3	3
4	4	// This file ignores types as they are outdated from the source
5	5
6	6	export const FontSizeSelect = ({
7		- value,
8		- onChange,
	7	+ value,
	8	+ onChange,
9	9	}: {
10		- value: string;
11		- onChange: (v: string | undefined) => void;
	10	+ value: string;
	11	+ onChange: (v: string | undefined) => void;
12	12	}) => {
13		- return (
14		- <FontSizePicker
15		- onChange={(size) => {
16		- // @ts-expect-error-next-line
17		- onChange(size ?? '.875rem');
18		- }}
19		- // @ts-expect-error-next-line
20		- value={value}
21		- fontSizes={[
22		- {
23		- name: 'Tiny',
24		- // @ts-expect-error-next-line
25		- size: '.75rem',
26		- slug: 'tiny',
27		- },
28		- {
29		- name: 'Small',
30		- // @ts-expect-error-next-line
31		- size: '.875rem',
32		- slug: 'small',
33		- },
34		- {
35		- name: 'Normal',
36		- // @ts-expect-error-next-line
37		- size: '1rem',
38		- slug: 'normal',
39		- },
40		- {
41		- name: 'Big',
42		- // @ts-expect-error-next-line
43		- size: '1.125rem',
44		- slug: 'big',
45		- },
46		- ]}
47		- />
48		- );
	13	+ return (
	14	+ <FontSizePicker
	15	+ onChange={(size) => {
	16	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	17	+ // @ts-ignore-next-line
	18	+ onChange(size ?? '.875rem');
	19	+ }}
	20	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	21	+ // @ts-ignore-next-line
	22	+ value={value}
	23	+ fontSizes={[
	24	+ {
	25	+ name: 'Tiny',
	26	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	27	+ // @ts-ignore-next-line
	28	+ size: '.75rem',
	29	+ slug: 'tiny',
	30	+ },
	31	+ {
	32	+ name: 'Small',
	33	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	34	+ // @ts-ignore-next-line
	35	+ size: '.875rem',
	36	+ slug: 'small',
	37	+ },
	38	+ {
	39	+ name: 'Normal',
	40	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	41	+ // @ts-ignore-next-line
	42	+ size: '1rem',
	43	+ slug: 'normal',
	44	+ },
	45	+ {
	46	+ name: 'Big',
	47	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	48	+ // @ts-ignore-next-line
	49	+ size: '1.125rem',
	50	+ slug: 'big',
	51	+ },
	52	+ ]}
	53	+ />
	54	+ );
49	55	};
50	56
51	57	export const FontLineHeightSelect = ({
52		- value,
53		- onChange,
	58	+ value,
	59	+ onChange,
54	60	}: {
55		- value: string;
56		- onChange: (v: string | undefined) => void;
	61	+ value: string;
	62	+ onChange: (v: string | undefined) => void;
57	63	}) => {
58		- return (
59		- <FontSizePicker
60		- onChange={(size) => {
61		- // @ts-expect-error-next-line
62		- onChange(size ?? '.875rem');
63		- }}
64		- // @ts-expect-error-next-line
65		- value={value}
66		- fontSizes={[
67		- {
68		- name: 'None',
69		- // @ts-expect-error-next-line
70		- size: '1rem',
71		- slug: 'none',
72		- },
73		- {
74		- name: 'Tight',
75		- // @ts-expect-error-next-line
76		- size: '1.25rem',
77		- slug: 'tight',
78		- },
79		- {
80		- name: 'Normal',
81		- // @ts-expect-error-next-line
82		- size: '1.5rem',
83		- slug: 'normal',
84		- },
85		- {
86		- name: 'Relaxed',
87		- // @ts-expect-error-next-line
88		- size: '1.625rem',
89		- slug: 'relaxed',
90		- },
91		- ]}
92		- />
93		- );
	64	+ return (
	65	+ <FontSizePicker
	66	+ onChange={(size) => {
	67	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	68	+ // @ts-ignore-next-line
	69	+ onChange(size ?? '.875rem');
	70	+ }}
	71	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	72	+ // @ts-ignore-next-line
	73	+ value={value}
	74	+ fontSizes={[
	75	+ {
	76	+ name: 'None',
	77	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	78	+ // @ts-ignore-next-line
	79	+ size: '1rem',
	80	+ slug: 'none',
	81	+ },
	82	+ {
	83	+ name: 'Tight',
	84	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	85	+ // @ts-ignore-next-line
	86	+ size: '1.25rem',
	87	+ slug: 'tight',
	88	+ },
	89	+ {
	90	+ name: 'Normal',
	91	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	92	+ // @ts-ignore-next-line
	93	+ size: '1.5rem',
	94	+ slug: 'normal',
	95	+ },
	96	+ {
	97	+ name: 'Relaxed',
	98	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	99	+ // @ts-ignore-next-line
	100	+ size: '1.625rem',
	101	+ slug: 'relaxed',
	102	+ },
	103	+ ]}
	104	+ />
	105	+ );
94	106	};
95	107	export const FontFamilySelect = ({
96		- value,
97		- onChange,
	108	+ value,
	109	+ onChange,
98	110	}: {
99		- value: string;
100		- onChange: (v: string) => void;
	111	+ value: string;
	112	+ onChange: (v: string) => void;
101	113	}) => {
102		- const fonts = {
103		- '': __('System Default', 'code-block-pro'),
104		- 'Code-Pro-Comic-Mono.ttf': 'Comic Mono',
105		- 'Code-Pro-Cozette': 'Cozette',
106		- 'Code-Pro-Deja-Vu-Mono.ttf': 'DejaVu Mono',
107		- 'Code-Pro-Fantasque-Sans-Mono': 'Fantasque Sans Mono',
108		- 'Code-Pro-Fira-Code': 'Fira Code',
109		- 'Code-Pro-Geist-Mono': 'Geist Mono',
110		- 'Code-Pro-Hack': 'Hack',
111		- 'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
112		- 'Code-Pro-JetBrains-Mono-NL.ttf': 'JetBrains Mono (No Ligatures)',
113		- 'Code-Pro-Monaspace-Argon.woff': 'Monaspace Argon',
114		- 'Code-Pro-Monaspace-Krypton.woff': 'Monaspace Krypton',
115		- 'Code-Pro-Monaspace-Neon.woff': 'Monaspace Neon',
116		- 'Code-Pro-Monaspace-Radon.woff': 'Monaspace Radon',
117		- 'Code-Pro-Monaspace-Xenon.woff': 'Monaspace Xenon',
118		- 'Code-Pro-Roboto-Mono.ttf': 'Roboto Mono',
119		- };
120		- return (
121		- <SelectControl
122		- id="code-block-pro-font-family"
123		- label={__('Font Family', 'code-block-pro')}
124		- value={value}
125		- onChange={onChange}
126		- options={Object.entries(fonts).map(([value, label]) => ({
127		- label,
128		- value,
129		- }))}
130		- />
131		- );
	114	+ const fonts = {
	115	+ '': __('System Default', 'code-block-pro'),
	116	+ 'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
	117	+ 'Code-Pro-Fira-Code': 'Fira Code',
	118	+ };
	119	+ return (
	120	+ <SelectControl
	121	+ id="code-block-pro-font-family"
	122	+ label={__('Font Family', 'code-block-pro')}
	123	+ help={__('Fonts only render on the frontend.', 'code-block-pro')}
	124	+ value={value}
	125	+ onChange={onChange}
	126	+ options={Object.entries(fonts).map(([value, label]) => ({
	127	+ label,
	128	+ value,
	129	+ }))}
	130	+ />
	131	+ );
132	132	};