/
font-selection-panel.js
49 lines (45 loc) · 1.14 KB
/
font-selection-panel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
/**
* WordPress dependencies.
*/
import { SelectControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import NoSupport from './no-support';
export default ( {
fontBase,
fontBaseDefault,
fontHeadings,
fontHeadingsDefault,
fontBaseOptions,
fontHeadingsOptions,
updateBaseFont,
updateHeadingsFont,
} ) => {
if ( ! fontBaseOptions || ! fontHeadingsOptions ) {
return <NoSupport unsupportedFeature={ __( 'custom font selection', 'full-site-editing' ) } />;
}
return (
<>
<SelectControl
label={ __( 'Heading Font', 'full-site-editing' ) }
value={ fontHeadings }
options={ fontHeadingsOptions }
onChange={ ( newValue ) => updateHeadingsFont( newValue ) }
style={ { fontFamily: fontHeadings !== 'unset' ? fontHeadings : fontHeadingsDefault } }
/>
<SelectControl
label={ __( 'Base Font', 'full-site-editing' ) }
value={ fontBase }
options={ fontBaseOptions }
onChange={ ( newValue ) => updateBaseFont( newValue ) }
style={ { fontFamily: fontBase !== 'unset' ? fontBase : fontBaseDefault } }
/>
<hr />
</>
);
};