/
index.js
123 lines (112 loc) · 3.59 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
__experimentalNavigation as Navigation,
__experimentalNavigationBackButton as NavigationBackButton,
__experimentalNavigationGroup as NavigationGroup,
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationMenu as NavigationMenu,
} from '@wordpress/components';
import { store as coreDataStore } from '@wordpress/core-data';
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ESCAPE } from '@wordpress/keycodes';
import { decodeEntities } from '@wordpress/html-entities';
import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import MainDashboardButton from '../../main-dashboard-button';
import { store as editSiteStore } from '../../../store';
const SITE_EDITOR_KEY = 'site-editor';
const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
const { getEntityRecord } = select( coreDataStore );
const siteData =
getEntityRecord( 'root', '__unstableBase', undefined ) || {};
return {
siteTitle: siteData.name,
isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
};
}, [] );
const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
// Ensures focus is moved to the panel area when it is activated
// from a separate component (such as document actions in the header).
const panelRef = useRef();
useEffect( () => {
if ( isNavigationOpen ) {
panelRef.current.focus();
}
}, [ activeItem, isNavigationOpen ] );
const closeOnEscape = ( event ) => {
if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
event.preventDefault();
setIsNavigationPanelOpened( false );
}
};
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={ classnames( `edit-site-navigation-panel`, {
'is-open': isNavigationOpen,
} ) }
ref={ panelRef }
tabIndex="-1"
onKeyDown={ closeOnEscape }
>
<div className="edit-site-navigation-panel__inner">
<div className="edit-site-navigation-panel__site-title-container">
<div className="edit-site-navigation-panel__site-title">
{ decodeEntities( siteTitle ) }
</div>
</div>
<div className="edit-site-navigation-panel__scroll-container">
<Navigation activeItem={ activeItem }>
<MainDashboardButton.Slot>
<NavigationBackButton
backButtonLabel={ __( 'Dashboard' ) }
className="edit-site-navigation-panel__back-to-dashboard"
href="index.php"
/>
</MainDashboardButton.Slot>
<NavigationMenu>
<NavigationGroup title={ __( 'Editor' ) }>
<NavigationItem
title={ __( 'Site' ) }
item={ SITE_EDITOR_KEY }
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: undefined,
} ) }
/>
<NavigationItem
title={ __( 'Templates' ) }
item="wp_template"
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: 'wp_template',
} ) }
/>
<NavigationItem
title={ __( 'Template Parts' ) }
item="wp_template_part"
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: 'wp_template_part',
} ) }
/>
</NavigationGroup>
</NavigationMenu>
</Navigation>
</div>
</div>
</div>
);
};
export default NavigationPanel;