/
screen-typography.js
83 lines (79 loc) · 2.31 KB
/
screen-typography.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
* WordPress dependencies
*/
import { __, isRTL } from '@wordpress/i18n';
import { chevronLeft, chevronRight } from '@wordpress/icons';
import {
FlexItem,
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { store as editorStore } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { IconWithCurrentColor } from './icon-with-current-color';
import TypographyElements from './typogrphy-elements';
import FontFamilies from './font-families';
import ScreenHeader from './header';
import { NavigationButtonAsItem } from './navigation-button';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
function ScreenTypography() {
const fontLibraryEnabled = useSelect(
( select ) =>
select( editorStore ).getEditorSettings().fontLibraryEnabled,
[]
);
const typographyVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( {
property: 'typography',
filter: ( variation ) =>
variation?.settings?.typography?.fontFamilies &&
Object.keys( variation?.settings?.typography?.fontFamilies )
.length,
} );
return (
<>
<ScreenHeader
title={ __( 'Typography' ) }
description={ __(
'Manage the typography settings for different elements.'
) }
/>
<div className="edit-site-global-styles-screen-typography">
<VStack spacing={ 6 }>
{ ! window.__experimentalDisableFontLibrary && (
<VStack spacing={ 3 }>
{ fontLibraryEnabled && <FontFamilies /> }
{ !! typographyVariations.length && (
<ItemGroup isBordered>
<NavigationButtonAsItem
path="/typography/typesets"
aria-label={ __( 'Typesets' ) }
>
<HStack justify="space-between">
<FlexItem>
{ __( 'Typesets' ) }
</FlexItem>
<IconWithCurrentColor
icon={
isRTL()
? chevronLeft
: chevronRight
}
/>
</HStack>
</NavigationButtonAsItem>
</ItemGroup>
) }
</VStack>
) }
<TypographyElements />
</VStack>
</div>
</>
);
}
export default ScreenTypography;