@wordpress/edit-site 5.0.0 → 5.2.0

package/src/components/layout/index.js

@@ -6,12 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
-	Button,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
+	__unstableUseNavigateRegions as useNavigateRegions,
+	ResizableBox,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -19,14 +19,14 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import { Sidebar } from '../sidebar';
+import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
@@ -34,30 +34,55 @@ import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
-import SiteIcon from '../site-icon';
-import SiteTitle from '../site-title';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import SiteHub from '../site-hub';
+import ResizeHandle from '../block-editor/resize-handle';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const ANIMATION_DURATION = 0.5;
+const emptyResizeHandleStyles = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
 
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
+	useSyncCanvasModeWithURL();
 
+	const hubRef = useRef();
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink } = useSelect(
-		( select ) => ( {
-			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
-			dashboardLink:
-				select( editSiteStore ).getSettings()
-					.__experimentalDashboardLink,
-		} ),
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { __unstableGetCanvasMode } = select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/next-region'
+				),
+			};
+		},
 		[]
 	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const navigateRegionsProps = useNavigateRegions( {
+		previous: previousShortcut,
+		next: nextShortcut,
+	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
@@ -70,17 +95,21 @@ export default function Layout( { onError } ) {
 		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
 	const showFrame =
 		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-	const showEditButton =
-		isEditorPage &&
-		isMobileViewport &&
-		canvasMode === 'view' &&
+
+	const isFullCanvas =
+		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
 		isMobileCanvasVisible;
-	const isBackToDashboardButton =
-		( ! isMobileViewport && canvasMode === 'view' ) ||
-		( isMobileViewport && ! isMobileCanvasVisible );
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
+	const [ forcedWidth, setForcedWidth ] = useState( null );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const isResizingEnabled = ! isMobileViewport && canvasMode === 'view';
+	const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
+	let canvasWidth = isResizing ? '100%' : fullSize.width;
+	if ( showFrame && ! isResizing ) {
+		canvasWidth = canvasSize.width - canvasPadding;
+	}
 	useEffect( () => {
 		if ( canvasMode === 'view' && isMobileViewport ) {
 			setIsMobileCanvasVisible( false );
@@ -90,94 +119,58 @@ export default function Layout( { onError } ) {
 			setIsMobileCanvasVisible( true );
 		}
 	}, [ canvasMode, isMobileViewport ] );
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setIsMobileCanvasVisible( false );
-					__unstableSetCanvasMode( 'view' );
-				},
-		  };
+
+	// Synchronizing the URL with the store value of canvasMode happens in an effect
+	// This condition ensures the component is only rendered after the synchronization happens
+	// which prevents any animations due to potential canvasMode value change.
+	if ( canvasMode === 'init' ) {
+		return null;
+	}
 
 	return (
 		<>
 			{ fullResizer }
 			<div
-				className={ classnames( 'edit-site-layout', {
-					'is-full-canvas':
-						( isEditorPage &&
-							canvasMode === 'edit' &&
-							! isMobileViewport ) ||
-						isMobileCanvasVisible,
-				} ) }
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
+				className={ classnames(
+					'edit-site-layout',
+					navigateRegionsProps.className,
+					{
+						'is-full-canvas': isFullCanvas,
+						'is-edit-mode': canvasMode === 'edit',
+					}
+				) }
 			>
-				<div className="edit-site-layout__header">
-					<div className="edit-site-layout__logo">
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-						<AnimatePresence initial={ false }>
-							{ ( isBackToDashboardButton || showEditButton ) && (
-								<motion.div
-									initial={ { opacity: 0 } }
-									exit={ { opacity: 0 } }
-									animate={ { opacity: 1 } }
-									style={ {
-										position: 'absolute',
-										left: 60,
-									} }
-								>
-									<HStack>
-										{ isBackToDashboardButton && (
-											<SiteTitle />
-										) }
-
-										{ showEditButton && (
-											<Button
-												className="edit-site-layout__edit-button"
-												label={ __(
-													'Open the editor'
-												) }
-												onClick={ () => {
-													__unstableSetCanvasMode(
-														'edit'
-													);
-												} }
-											>
-												{ __( 'Edit' ) }
-											</Button>
-										) }
-									</HStack>
-								</motion.div>
-							) }
-						</AnimatePresence>
+				<SiteHub
+					ref={ hubRef }
+					className="edit-site-layout__hub"
+					style={ {
+						width:
+							isResizingEnabled && forcedWidth
+								? forcedWidth - 48
+								: undefined,
+					} }
+					isMobileCanvasVisible={ isMobileCanvasVisible }
+					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
+				/>
 
-						{ isMobileViewport && ! isMobileCanvasVisible && (
-							<Button
-								onClick={ () =>
-									setIsMobileCanvasVisible( true )
-								}
-								style={ { position: 'fixed', right: 0 } }
-							>
-								{ __( 'View Editor' ) }
-							</Button>
-						) }
-					</div>
-					<AnimatePresence>
-						{ isEditorPage && canvasMode === 'edit' && (
+				<AnimatePresence initial={ false }>
+					{ isEditorPage &&
+						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
 							<NavigableRegion
+								className="edit-site-layout__header"
+								ariaLabel={ __( 'Editor top bar' ) }
 								as={ motion.div }
-								initial={ { y: -60 } }
-								animate={ { y: 0 } }
-								exit={ { y: -60 } }
+								animate={ {
+									y: 0,
+								} }
+								initial={ {
+									y: '-100%',
+								} }
+								exit={ {
+									y: '-100%',
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
@@ -185,93 +178,145 @@ export default function Layout( { onError } ) {
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
-								className="edit-site-layout__editor-header"
-								ariaLabel={ __( 'Editor top bar' ) }
 							>
-								<Header />
+								{ canvasMode === 'edit' && <Header /> }
 							</NavigableRegion>
 						) }
-					</AnimatePresence>
-				</div>
-
-				<AnimatePresence initial={ false }>
-					{ showSidebar && (
-						<motion.div
-							initial={ {
-								opacity: 0,
-							} }
-							animate={ {
-								opacity: 1,
-							} }
-							exit={ {
-								opacity: 0,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-							className="edit-site-layout__sidebar"
-						>
-							<Sidebar />
-						</motion.div>
-					) }
 				</AnimatePresence>
 
-				{ showCanvas && (
-					<div
-						className="edit-site-layout__canvas-container"
-						style={ {
-							paddingTop: showFrame ? canvasPadding : 0,
-							paddingBottom: showFrame ? canvasPadding : 0,
-						} }
-					>
-						{ canvasResizer }
-						{ !! canvasSize.width && (
-							<motion.div
-								initial={ false }
-								layout="position"
-								className="edit-site-layout__canvas"
+				<div className="edit-site-layout__content">
+					<AnimatePresence initial={ false }>
+						{ showSidebar && (
+							<ResizableBox
+								as={ motion.div }
+								initial={ {
+									opacity: 0,
+								} }
+								animate={ {
+									opacity: 1,
+								} }
+								exit={ {
+									opacity: 0,
+								} }
 								transition={ {
 									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
+									duration:
+										disableMotion || isResizing
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
+								size={ {
+									height: '100%',
+									width:
+										isResizingEnabled && forcedWidth
+											? forcedWidth
+											: defaultSidebarWidth,
+								} }
+								className="edit-site-layout__sidebar"
+								enable={ {
+									right: isResizingEnabled,
+								} }
+								onResizeStop={ ( event, direction, elt ) => {
+									setForcedWidth( elt.clientWidth );
+									setIsResizing( false );
+								} }
+								onResizeStart={ () => {
+									setIsResizing( true );
+								} }
+								onResize={ ( event, direction, elt ) => {
+									// This is a performance optimization
+									// We set the width imperatively to avoid re-rendering
+									// the whole component while resizing.
+									hubRef.current.style.width =
+										elt.clientWidth - 48 + 'px';
+								} }
+								handleComponent={ {
+									right: (
+										<ResizeHandle
+											direction="right"
+											variation="separator"
+										/>
+									),
+								} }
+								handleClasses={ undefined }
+								handleStyles={ {
+									right: emptyResizeHandleStyles,
+								} }
+								minWidth={ isResizingEnabled ? 320 : undefined }
+								maxWidth={
+									isResizingEnabled && fullSize
+										? fullSize.width - 360
+										: undefined
+								}
 							>
+								<NavigableRegion
+									ariaLabel={ __( 'Navigation sidebar' ) }
+								>
+									<Sidebar />
+								</NavigableRegion>
+							</ResizableBox>
+						) }
+					</AnimatePresence>
+
+					{ showCanvas && (
+						<div
+							className={ classnames(
+								'edit-site-layout__canvas-container',
+								{
+									'is-resizing': isResizing,
+								}
+							) }
+							style={ {
+								paddingTop: showFrame ? canvasPadding : 0,
+								paddingBottom: showFrame ? canvasPadding : 0,
+							} }
+						>
+							{ canvasResizer }
+							{ !! canvasSize.width && (
 								<motion.div
-									style={ {
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										bottom: 0,
-									} }
 									initial={ false }
-									animate={ {
-										width: showFrame
-											? canvasSize.width - canvasPadding
-											: fullSize.width,
-									} }
+									layout="position"
+									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
+										duration:
+											disableMotion || isResizing
+												? 0
+												: ANIMATION_DURATION,
 										ease: 'easeOut',
 									} }
 								>
-									<ErrorBoundary onError={ onError }>
-										{ isEditorPage && <Editor /> }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
+									<motion.div
+										style={ {
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											bottom: 0,
+										} }
+										initial={ false }
+										animate={ {
+											width: canvasWidth,
+										} }
+										transition={ {
+											type: 'tween',
+											duration:
+												disableMotion || isResizing
+													? 0
+													: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+									>
+										<ErrorBoundary onError={ onError }>
+											{ isEditorPage && <Editor /> }
+											{ isListPage && <ListPage /> }
+										</ErrorBoundary>
+									</motion.div>
 								</motion.div>
-							</motion.div>
-						) }
-					</div>
-				) }
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</>
 	);