/
screen-typography.js
110 lines (101 loc) · 2.76 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalItemGroup as ItemGroup,
__experimentalVStack as VStack,
__experimentalHStack as HStack,
FlexItem,
} from '@wordpress/components';
/**
* Internal dependencies
*/
import ScreenHeader from './header';
import NavigationButton from './navigation-button';
import { useStyle } from './hooks';
import Subtitle from './subtitle';
import TypographyPanel from './typography-panel';
function Item( { name, parentMenu, element, label } ) {
const hasSupport = ! name;
const prefix =
element === 'text' || ! element ? '' : `elements.${ element }.`;
const extraStyles =
element === 'link'
? {
textDecoration: 'underline',
}
: {};
const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
const [ letterSpacing ] = useStyle(
prefix + 'typography.letterSpacing',
name
);
const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
const [ color ] = useStyle( prefix + 'color.text', name );
if ( ! hasSupport ) {
return null;
}
return (
<NavigationButton path={ parentMenu + '/typography/' + element }>
<HStack justify="flex-start">
<FlexItem
className="edit-site-global-styles-screen-typography__indicator"
style={ {
fontFamily: fontFamily ?? 'serif',
background: gradientValue ?? backgroundColor,
color,
fontStyle,
fontWeight,
letterSpacing,
...extraStyles,
} }
>
{ __( 'Aa' ) }
</FlexItem>
<FlexItem>{ label }</FlexItem>
</HStack>
</NavigationButton>
);
}
function ScreenTypography( { name } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;
return (
<>
<ScreenHeader
back={ parentMenu ? parentMenu : '/' }
title={ __( 'Typography' ) }
description={ __(
'Manage the typography settings for different elements.'
) }
/>
{ ! name && (
<div className="edit-site-global-styles-screen-typography">
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Elements' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<Item
name={ name }
parentMenu={ parentMenu }
element="text"
label={ __( 'Text' ) }
/>
<Item
name={ name }
parentMenu={ parentMenu }
element="link"
label={ __( 'Links' ) }
/>
</ItemGroup>
</VStack>
</div>
) }
{ /* no typogrpahy elements support yet for blocks */ }
{ !! name && <TypographyPanel name={ name } element="text" /> }
</>
);
}
export default ScreenTypography;