-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
variations-typography.js
102 lines (94 loc) · 2.72 KB
/
variations-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
/**
* WordPress dependencies
*/
import { useContext } from '@wordpress/element';
import {
__experimentalGrid as Grid,
__experimentalVStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { mergeBaseAndUserConfigs } from '../global-styles-provider';
import { unlock } from '../../../lock-unlock';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
import TypographyExample from '../typography-example';
import PreviewIframe from '../preview-iframe';
import { getFontFamilies } from '../utils';
import Variation from './variation';
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
export default function TypographyVariations() {
const typographyVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( {
property: 'typography',
} );
const { base } = useContext( GlobalStylesContext );
if ( ! typographyVariations?.length ) {
return null;
}
/*
* Filter duplicate variations based on the font families used in the variation.
*/
const uniqueTypographyVariations = typographyVariations?.length
? Object.values(
typographyVariations.reduce( ( acc, variation ) => {
const [ bodyFontFamily, headingFontFamily ] =
getFontFamilies(
mergeBaseAndUserConfigs( base, variation )
);
if (
headingFontFamily?.name &&
bodyFontFamily?.name &&
! acc[
`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
]
) {
acc[
`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
] = variation;
}
return acc;
}, {} )
)
: [];
return (
<VStack spacing={ 3 }>
<Grid
columns={ 3 }
className="edit-site-global-styles-style-variations-container"
>
{ typographyVariations && typographyVariations.length
? uniqueTypographyVariations.map( ( variation, index ) => (
<Variation key={ index } variation={ variation }>
{ ( isFocused ) => (
<PreviewIframe
label={ variation?.title }
isFocused={ isFocused }
>
{ ( { ratio, key } ) => (
<HStack
key={ key }
spacing={ 10 * ratio }
justify="center"
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<TypographyExample
variation={ variation }
fontSize={ 85 * ratio }
/>
</HStack>
) }
</PreviewIframe>
) }
</Variation>
) )
: null }
</Grid>
</VStack>
);
}