Add navigation sidebar

WordPress · Sep 21, 2020 · a766d9e · a766d9e
1 parent effea45
commit a766d9e
Show file tree

Hide file tree

Showing 8 changed files with 379 additions and 35 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -39,15 +39,33 @@ import { SidebarComplementaryAreaFills } from '../sidebar';
 import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
+import NavigationSidebar from '../navigation-sidebar';
 
 const interfaceLabels = {
 	leftSidebar: __( 'Block Library' ),
 };
 
 function Editor() {
-	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+	const [ isInserterOpen, _setIsInserterOpen ] = useState( false );
+	const [ isNavigationOpen, _setIsNavigationOpen ] = useState( false );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
+	const setIsInserterOpen = ( value ) => {
+		if ( isNavigationOpen && value ) {
+			_setIsNavigationOpen( false );
+		}
+
+		_setIsInserterOpen( value );
+	};
+
+	const setIsNavigationOpen = ( value ) => {
+		if ( isInserterOpen && value ) {
+			_setIsInserterOpen( false );
+		}
+
+		_setIsNavigationOpen( value );
+	};
+
 	const {
 		isFullscreenActive,
 		deviceType,
@@ -156,6 +174,32 @@ function Editor() {
 		[ page?.context ]
 	);
 
+	let leftSidebar = null;
+	if ( isNavigationOpen ) {
+		leftSidebar = <NavigationSidebar />;
+	} else if ( isInserterOpen ) {
+		leftSidebar = (
+			<div className="edit-site-editor__inserter-panel">
+				<div className="edit-site-editor__inserter-panel-header">
+					<Button
+						icon={ close }
+						onClick={ () => setIsInserterOpen( false ) }
+					/>
+				</div>
+				<div className="edit-site-editor__inserter-panel-content">
+					<Library
+						showInserterHelpPanel
+						onSelect={ () => {
+							if ( isMobile ) {
+								setIsInserterOpen( false );
+							}
+						} }
+					/>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<>
 			<EditorStyles styles={ settings.styles } />
@@ -190,38 +234,7 @@ function Editor() {
 											<SidebarComplementaryAreaFills />
 											<InterfaceSkeleton
 												labels={ interfaceLabels }
-												leftSidebar={
-													isInserterOpen && (
-														<div className="edit-site-editor__inserter-panel">
-															<div className="edit-site-editor__inserter-panel-header">
-																<Button
-																	icon={
-																		close
-																	}
-																	onClick={ () =>
-																		setIsInserterOpen(
-																			false
-																		)
-																	}
-																/>
-															</div>
-															<div className="edit-site-editor__inserter-panel-content">
-																<Library
-																	showInserterHelpPanel
-																	onSelect={ () => {
-																		if (
-																			isMobile
-																		) {
-																			setIsInserterOpen(
-																				false
-																			);
-																		}
-																	} }
-																/>
-															</div>
-														</div>
-													)
-												}
+												leftSidebar={ leftSidebar }
 												sidebar={
 													sidebarIsOpened && (
 														<ComplementaryArea.Slot scope="core/edit-site" />
@@ -240,6 +253,14 @@ function Editor() {
 																! isInserterOpen
 															)
 														}
+														isNavigationOpen={
+															isNavigationOpen
+														}
+														onToggleNavigation={ () =>
+															setIsNavigationOpen(
+																! isNavigationOpen
+															)
+														}
 													/>
 												}
 												content={

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -51,3 +51,8 @@
 		height: 100%;
 	}
 }
+
+.interface-interface-skeleton__left-sidebar .components-navigation {
+	width: 300px;
+	height: 100%;
+}
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -26,13 +26,15 @@ import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
-import FullscreenModeClose from './fullscreen-mode-close';
 import DocumentActions from './document-actions';
+import NavigationButton from './navigation-button';
 
 export default function Header( {
 	openEntitiesSavedStates,
 	isInserterOpen,
 	onToggleInserter,
+	isNavigationOpen,
+	onToggleNavigation,
 } ) {
 	const {
 		deviceType,
@@ -89,7 +91,10 @@ export default function Header( {
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
 				<MainDashboardButton.Slot>
-					<FullscreenModeClose />
+					<NavigationButton
+						isOpen={ isNavigationOpen }
+						onClick={ onToggleNavigation }
+					/>
 				</MainDashboardButton.Slot>
 				<div className="edit-site-header__toolbar">
 					<Button

diff --git a/packages/edit-site/src/components/header/navigation-button/index.js b/packages/edit-site/src/components/header/navigation-button/index.js
@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+
+function NavigationButton( { icon, isOpen, onClick } ) {
+	const {
+		isActive,
+		isRequestingSiteIcon,
+		siteIconUrl,
+		siteTitle,
+	} = useSelect( ( select ) => {
+		const { isFeatureActive } = select( 'core/edit-site' );
+		const { getEntityRecord } = select( 'core' );
+		const { isResolving } = select( 'core/data' );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isActive: isFeatureActive( 'fullscreenMode' ),
+			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+			siteTitle: siteData.name,
+		};
+	}, [] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	let buttonIcon = <Icon size="32px" icon={ wordpress } />;
+
+	if ( siteIconUrl ) {
+		buttonIcon = (
+			<img
+				alt={ __( 'Site Icon' ) }
+				className="edit-site-navigation-button_site-icon"
+				src={ siteIconUrl }
+			/>
+		);
+	} else if ( isRequestingSiteIcon ) {
+		buttonIcon = null;
+	} else if ( icon ) {
+		buttonIcon = <Icon size="32px" icon={ icon } />;
+	}
+
+	return (
+		<div
+			className={
+				'edit-site-navigation-button_wrapper' +
+				( isOpen ? ' is-open' : '' )
+			}
+		>
+			<Button
+				className="edit-site-navigation-button has-icon"
+				label={ __( 'Open navigation' ) }
+				onClick={ onClick }
+				showTooltip
+			>
+				{ buttonIcon }
+			</Button>
+
+			{ isOpen && (
+				<div className="edit-site-navigation-name">{ siteTitle }</div>
+			) }
+		</div>
+	);
+}
+
+export default NavigationButton;
diff --git a/packages/edit-site/src/components/header/navigation-button/style.scss b/packages/edit-site/src/components/header/navigation-button/style.scss
@@ -0,0 +1,38 @@
+.edit-site-navigation-button_wrapper {
+	display: flex;
+	align-items: center;
+	background-color: #1e1e1e;
+	height: 61px;
+	border-radius: 0;
+}
+
+.edit-site-navigation-button {
+	color: #fff;
+	margin-left: 14px;
+	margin-right: 14px;
+}
+
+.edit-site-navigation-button.components-button.has-icon {
+	justify-content: flex-start;
+	padding: 0;
+	height: 32px;
+	width: 32px;
+}
+
+.edit-site-navigation-button_wrapper.is-open {
+	width: 300px;
+}
+
+.edit-site-navigation-name {
+	font-style: normal;
+	font-weight: 600;
+	font-size: 13px;
+	line-height: 16px;
+	color: #ddd;
+	margin-right: 14px;
+
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}