Skip to content

Commit

Permalink
Use slot/fill for NavigationSidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevin940726
kevin940726 committed Dec 3, 2021
1 parent b2deffa commit 5a14c53
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 152 deletions.
205 changes: 99 additions & 106 deletions packages/edit-site/src/components/editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
*/
import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import {
SlotFillProvider,
Popover,
Button,
Notice,
} from '@wordpress/components';
import { Popover, Button, Notice } from '@wordpress/components';
import { EntityProvider, store as coreStore } from '@wordpress/core-data';
import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
import {
Expand Down Expand Up @@ -176,114 +171,112 @@ function Editor( { onError } ) {
<URLQueryController />
{ isReady && (
<ShortcutProvider>
<SlotFillProvider>
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ templateType }
id={ entityId }
>
<GlobalStylesProvider>
<BlockContextProvider
value={ blockContext }
>
<GlobalStylesRenderer />
<ErrorBoundary onError={ onError }>
<UnsavedChangesWarning />
<KeyboardShortcuts.Register />
<SidebarComplementaryAreaFills />
<InterfaceSkeleton
labels={ interfaceLabels }
secondarySidebar={ secondarySidebar() }
sidebar={
sidebarIsOpened && (
<ComplementaryArea.Slot scope="core/edit-site" />
)
}
drawer={ <NavigationSidebar /> }
header={
<Header
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ templateType }
id={ entityId }
>
<GlobalStylesProvider>
<BlockContextProvider value={ blockContext }>
<GlobalStylesRenderer />
<ErrorBoundary onError={ onError }>
<UnsavedChangesWarning />
<KeyboardShortcuts.Register />
<SidebarComplementaryAreaFills />
<InterfaceSkeleton
labels={ interfaceLabels }
secondarySidebar={ secondarySidebar() }
sidebar={
sidebarIsOpened && (
<ComplementaryArea.Slot scope="core/edit-site" />
)
}
drawer={
<NavigationSidebar.Slot />
}
header={
<Header
openEntitiesSavedStates={
openEntitiesSavedStates
}
/>
}
notices={ <EditorSnackbars /> }
content={
<>
<EditorNotices />
{ template && (
<BlockEditor
setIsInserterOpen={
setIsInserterOpened
}
/>
) }
{ templateResolved &&
! template &&
settings?.siteUrl &&
entityId && (
<Notice
status="warning"
isDismissible={
false
}
>
{ __(
"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
) }
</Notice>
) }
<KeyboardShortcuts
openEntitiesSavedStates={
openEntitiesSavedStates
}
/>
}
notices={ <EditorSnackbars /> }
content={
<>
<EditorNotices />
{ template && (
<BlockEditor
setIsInserterOpen={
setIsInserterOpened
}
/>
) }
{ templateResolved &&
! template &&
settings?.siteUrl &&
entityId && (
<Notice
status="warning"
isDismissible={
false
}
>
{ __(
"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
) }
</Notice>
) }
<KeyboardShortcuts
openEntitiesSavedStates={
openEntitiesSavedStates
</>
}
actions={
<>
{ isEntitiesSavedStatesOpen ? (
<EntitiesSavedStates
close={
closeEntitiesSavedStates
}
/>
</>
}
actions={
<>
{ isEntitiesSavedStatesOpen ? (
<EntitiesSavedStates
close={
closeEntitiesSavedStates
) : (
<div className="edit-site-editor__toggle-save-panel">
<Button
variant="secondary"
className="edit-site-editor__toggle-save-panel-button"
onClick={
openEntitiesSavedStates
}
/>
) : (
<div className="edit-site-editor__toggle-save-panel">
<Button
variant="secondary"
className="edit-site-editor__toggle-save-panel-button"
onClick={
openEntitiesSavedStates
}
aria-expanded={
false
}
>
{ __(
'Open save panel'
) }
</Button>
</div>
) }
</>
}
footer={ <BlockBreadcrumb /> }
shortcuts={ {
previous: previousShortcut,
next: nextShortcut,
} }
/>
<WelcomeGuide />
<Popover.Slot />
<PluginArea />
</ErrorBoundary>
</BlockContextProvider>
</GlobalStylesProvider>
</EntityProvider>
aria-expanded={
false
}
>
{ __(
'Open save panel'
) }
</Button>
</div>
) }
</>
}
footer={ <BlockBreadcrumb /> }
shortcuts={ {
previous: previousShortcut,
next: nextShortcut,
} }
/>
<WelcomeGuide />
<Popover.Slot />
<PluginArea />
</ErrorBoundary>
</BlockContextProvider>
</GlobalStylesProvider>
</EntityProvider>
</SlotFillProvider>
</EntityProvider>
</ShortcutProvider>
) }
</>
Expand Down
14 changes: 7 additions & 7 deletions packages/edit-site/src/components/list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,14 @@ import Header from './header';
import NavigationSidebar from '../navigation-sidebar';
import Table from './table';
import { store as editSiteStore } from '../../store';
import { useLocation } from '../routes';
import useTitle from '../routes/use-title';

export default function List( { templateType } ) {
export default function List() {
const {
params: { postType: templateType },
} = useLocation();

useRegisterShortcuts();

const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
Expand Down Expand Up @@ -78,12 +83,7 @@ export default function List( { templateType } ) {
...detailedRegionLabels,
} }
header={ <Header templateType={ templateType } /> }
drawer={
<NavigationSidebar
activeTemplateType={ templateType }
isDefaultOpen
/>
}
drawer={ <NavigationSidebar.Slot /> }
notices={ <EditorSnackbars /> }
content={
<main className="edit-site-list-main">
Expand Down
35 changes: 18 additions & 17 deletions packages/edit-site/src/components/navigation-sidebar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,31 @@ export const {
Slot: NavigationPanelPreviewSlot,
} = createSlotFill( 'EditSiteNavigationPanelPreview' );

export default function NavigationSidebar( {
isDefaultOpen = false,
activeTemplateType,
} ) {
const {
Fill: NavigationSidebarFill,
Slot: NavigationSidebarSlot,
} = createSlotFill( 'EditSiteNavigationSidebar' );

function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
const isDesktopViewport = useViewportMatch( 'medium' );
const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );

useEffect( () => {
// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
if ( isDefaultOpen && isDesktopViewport ) {
setIsNavigationPanelOpened( true );
}

// When transitioning to mobile/tablet, close the navigation.
if ( ! isDesktopViewport ) {
setIsNavigationPanelOpened( false );
}
}, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
useEffect(
function autoOpenNavigationPanelOnViewportChange() {
setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
},
[ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
);

return (
<>
<NavigationSidebarFill>
<NavigationToggle />
<NavigationPanel activeItem={ activeTemplateType } />
<NavigationPanelPreviewSlot />
</>
</NavigationSidebarFill>
);
}

NavigationSidebar.Slot = NavigationSidebarSlot;

export default NavigationSidebar;
12 changes: 0 additions & 12 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
} 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';
Expand Down Expand Up @@ -54,15 +53,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
}, [] );
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();
Expand All @@ -76,8 +66,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
className={ classnames( `edit-site-navigation-panel`, {
'is-open': isNavigationOpen,
} ) }
ref={ panelRef }
tabIndex="-1"
onKeyDown={ closeOnEscape }
>
<div className="edit-site-navigation-panel__inner">
Expand Down
Loading

0 comments on commit 5a14c53

Please sign in to comment.