-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
index.js
102 lines (88 loc) · 2.38 KB
/
index.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 { useEffect, useRef } from '@wordpress/element';
import {
__experimentalNavigation as Navigation,
__experimentalNavigationMenu as NavigationMenu,
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationBackButton as NavigationBackButton,
createSlotFill,
} from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import TemplatesMenu from './menus/templates';
import TemplatePartsMenu from './menus/template-parts';
export const {
Fill: NavigationPanelPreviewFill,
Slot: NavigationPanelPreviewSlot,
} = createSlotFill( 'EditSiteNavigationPanelPreview' );
const NavigationPanel = () => {
const ref = useRef();
useEffect( () => {
if ( ref.current ) {
ref.current.focus();
}
}, [ ref ] );
const { templateId, templatePartId, templateType, activeMenu } = useSelect(
( select ) => {
const {
getTemplateId,
getTemplatePartId,
getTemplateType,
getNavigationPanelActiveMenu,
} = select( 'core/edit-site' );
return {
templateId: getTemplateId(),
templatePartId: getTemplatePartId(),
templateType: getTemplateType(),
activeMenu: getNavigationPanelActiveMenu(),
};
},
[]
);
const {
setTemplate,
setTemplatePart,
setNavigationPanelActiveMenu,
} = useDispatch( 'core/edit-site' );
return (
<div className="edit-site-navigation-panel">
<Navigation
activeItem={
'wp_template' === templateType
? `${ templateType }-${ templateId }`
: `${ templateType }-${ templatePartId }`
}
activeMenu={ activeMenu }
onActivateMenu={ setNavigationPanelActiveMenu }
>
{ activeMenu === 'root' && (
<NavigationBackButton
backButtonLabel={ __( 'Dashboard' ) }
className="edit-site-navigation-panel__back-to-dashboard"
href="index.php"
ref={ ref }
/>
) }
<NavigationMenu title={ __( 'Theme' ) }>
<NavigationItem
title={ __( 'Templates' ) }
navigateToMenu="templates"
/>
<NavigationItem
title={ __( 'Template Parts' ) }
navigateToMenu="template-parts"
/>
<TemplatesMenu onActivateItem={ setTemplate } />
<TemplatePartsMenu onActivateItem={ setTemplatePart } />
</NavigationMenu>
</Navigation>
<NavigationPanelPreviewSlot />
</div>
);
};
export default NavigationPanel;