/
ui.js
103 lines (85 loc) · 2.72 KB
/
ui.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
/**
* WordPress dependencies
*/
import {
__experimentalNavigatorProvider as NavigatorProvider,
__experimentalNavigatorScreen as NavigatorScreen,
} from '@wordpress/components';
import { getBlockTypes } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import ScreenRoot from './screen-root';
import ScreenBlockList from './screen-block-list';
import ScreenBlock from './screen-block';
import ScreenTypography from './screen-typography';
import ScreenTypographyElement from './screen-typography-element';
import ScreenColors from './screen-colors';
import ScreenColorPalette from './screen-color-palette';
import ScreenBackgroundColor from './screen-background-color';
import ScreenTextColor from './screen-text-color';
import ScreenLinkColor from './screen-link-color';
import ScreenLayout from './screen-layout';
function ContextScreens( { name } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;
return (
<>
<NavigatorScreen path={ parentMenu + '/typography' }>
<ScreenTypography name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/typography/text' }>
<ScreenTypographyElement name={ name } element="text" />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/typography/link' }>
<ScreenTypographyElement name={ name } element="link" />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/colors' }>
<ScreenColors name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/colors/palette' }>
<ScreenColorPalette name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/colors/background' }>
<ScreenBackgroundColor name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/colors/text' }>
<ScreenTextColor name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/colors/link' }>
<ScreenLinkColor name={ name } />
</NavigatorScreen>
<NavigatorScreen path={ parentMenu + '/layout' }>
<ScreenLayout name={ name } />
</NavigatorScreen>
</>
);
}
function GlobalStylesUI() {
const blocks = getBlockTypes();
return (
<NavigatorProvider initialPath="/">
<NavigatorScreen path="/">
<ScreenRoot />
</NavigatorScreen>
<NavigatorScreen path="/blocks">
<ScreenBlockList />
</NavigatorScreen>
{ blocks.map( ( block ) => (
<NavigatorScreen
key={ 'menu-block-' + block.name }
path={ '/blocks/' + block.name }
>
<ScreenBlock name={ block.name } />
</NavigatorScreen>
) ) }
<ContextScreens />
{ blocks.map( ( block ) => (
<ContextScreens
key={ 'screens-block-' + block.name }
name={ block.name }
/>
) ) }
</NavigatorProvider>
);
}
export default GlobalStylesUI;