@wordpress/edit-site 4.19.0 → 5.0.0

package/src/components/layout/index.js

@@ -0,0 +1,278 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState, useEffect } from '@wordpress/element';
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { Sidebar } from '../sidebar';
+import Editor from '../editor';
+import ListPage from '../list';
+import ErrorBoundary from '../error-boundary';
+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';
+
+const ANIMATION_DURATION = 0.5;
+
+export default function Layout( { onError } ) {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+
+	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 { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
+		useState( false );
+	const canvasPadding = isMobileViewport ? 0 : 24;
+	const showSidebar =
+		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
+	const showCanvas =
+		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+	const showFrame =
+		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
+	const showEditButton =
+		isEditorPage &&
+		isMobileViewport &&
+		canvasMode === 'view' &&
+		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();
+	useEffect( () => {
+		if ( canvasMode === 'view' && isMobileViewport ) {
+			setIsMobileCanvasVisible( false );
+		}
+
+		if ( canvasMode === 'edit' && isMobileViewport ) {
+			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' );
+				},
+		  };
+
+	return (
+		<>
+			{ fullResizer }
+			<div
+				className={ classnames( 'edit-site-layout', {
+					'is-full-canvas':
+						( isEditorPage &&
+							canvasMode === 'edit' &&
+							! isMobileViewport ) ||
+						isMobileCanvasVisible,
+				} ) }
+			>
+				<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>
+
+						{ isMobileViewport && ! isMobileCanvasVisible && (
+							<Button
+								onClick={ () =>
+									setIsMobileCanvasVisible( true )
+								}
+								style={ { position: 'fixed', right: 0 } }
+							>
+								{ __( 'View Editor' ) }
+							</Button>
+						) }
+					</div>
+					<AnimatePresence>
+						{ isEditorPage && canvasMode === 'edit' && (
+							<NavigableRegion
+								as={ motion.div }
+								initial={ { y: -60 } }
+								animate={ { y: 0 } }
+								exit={ { y: -60 } }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+								className="edit-site-layout__editor-header"
+								ariaLabel={ __( 'Editor top bar' ) }
+							>
+								<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"
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								<motion.div
+									style={ {
+										position: 'absolute',
+										top: 0,
+										left: 0,
+										bottom: 0,
+									} }
+									initial={ false }
+									animate={ {
+										width: showFrame
+											? canvasSize.width - canvasPadding
+											: fullSize.width,
+									} }
+									transition={ {
+										type: 'tween',
+										duration: disableMotion
+											? 0
+											: ANIMATION_DURATION,
+										ease: 'easeOut',
+									} }
+								>
+									<ErrorBoundary onError={ onError }>
+										{ isEditorPage && <Editor /> }
+										{ isListPage && <ListPage /> }
+									</ErrorBoundary>
+								</motion.div>
+							</motion.div>
+						) }
+					</div>
+				) }
+			</div>
+		</>
+	);
+}

package/src/components/layout/style.scss

@@ -0,0 +1,176 @@
+.edit-site-layout {
+	min-height: 100%;
+	background: $gray-900;
+	color: $white;
+	display: flex;
+	flex-direction: column;
+	@include break-small {
+		display: grid;
+		grid-template-columns: 320px 1fr;
+		grid-template-rows: auto 1fr;
+		grid-template-areas:
+			"header canvas"
+			"sidebar canvas";
+
+		&.is-full-canvas {
+			grid-template-areas:
+				"header header"
+				"canvas canvas";
+		}
+	}
+}
+
+.edit-site-layout__header {
+	grid-area: header;
+	height: $header-height;
+	display: flex;
+}
+
+.edit-site-layout__logo {
+	align-items: center;
+	height: $header-height;
+	display: flex;
+	justify-content: space-between;
+
+	.components-button {
+		color: currentColor;
+	}
+}
+
+.edit-site-layout__edit-button {
+	background: $gray-800;
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
+}
+
+.edit-site-layout__sidebar {
+	grid-area: sidebar;
+	z-index: 1;
+	overflow-y: auto;
+	max-height: calc(100vh - #{$header-height});
+	@include custom-scrollbars-on-hover;
+
+	// This is only necessary for the exit animation
+	.edit-site-layout.is-full-canvas & {
+		display: none;
+		@include break-small {
+			display: block;
+			grid-area: header;
+			position: absolute;
+			top: 60px;
+		}
+	}
+}
+
+.edit-site-layout__editor-header {
+	flex-grow: 1;
+
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		left: 60px;
+		right: 0;
+	}
+}
+
+.edit-site-layout__canvas-container {
+	grid-area: canvas;
+	position: relative;
+	flex-grow: 1;
+	z-index: 2;
+}
+
+.edit-site-layout__canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
+	& > div {
+		color: $gray-900;
+		background: $white;
+	}
+	@include break-small {
+		top: $canvas-padding;
+		bottom: $canvas-padding;
+		width: calc(100% - #{$canvas-padding});
+
+		& > div {
+			border-radius: $radius-block-ui * 4;
+			// Not sure why this is necessary.
+			.edit-site-layout:not(.is-full-canvas) & .edit-site-visual-editor__editor-canvas,
+			.edit-site-layout:not(.is-full-canvas) & .interface-interface-skeleton__content {
+				border-radius: $radius-block-ui * 4;
+			}
+		}
+
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		border-radius: 0;
+	}
+}
+
+// This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__canvas .interface-interface-skeleton {
+	position: relative !important;
+	min-height: 100% !important;
+}
+
+.edit-site-layout__view-mode-toggle.components-button {
+	position: relative;
+	background: $gray-900;
+	color: $white;
+	height: calc(100% + #{$border-width});
+	border-radius: 0;
+	margin-bottom: -$border-width;
+
+	&:hover,
+	&:active {
+		color: $white;
+	}
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-block-ui + $border-width + $border-width;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
+	}
+
+	// Hover color.
+	&:hover::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+	}
+
+	&.has-icon:hover::before {
+		box-shadow: none;
+	}
+
+	// Lightened spot color focus.
+	&:focus::before {
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
+			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	.edit-site-layout__view-mode-toggle-icon {
+		border-radius: $radius-block-ui;
+		object-fit: cover;
+	}
+}

package/src/components/list/header.js

@@ -36,7 +36,11 @@ export default function Header( { templateType } ) {
 
 			{ canCreate && (
 				<div className="edit-site-list-header__right">
-					<AddNewTemplate templateType={ templateType } />
+					<AddNewTemplate
+						templateType={ templateType }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
 				</div>
 			) }
 		</header>

package/src/components/list/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -18,9 +13,7 @@ import { EditorSnackbars } from '@wordpress/editor';
  */
 import useRegisterShortcuts from './use-register-shortcuts';
 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';
 
@@ -31,22 +24,16 @@ export default function List() {
 
 	useRegisterShortcuts();
 
-	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
-		( select ) => {
-			return {
-				previousShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-			};
-		},
-		[]
-	);
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
 
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
@@ -75,15 +62,9 @@ export default function List() {
 
 	return (
 		<InterfaceSkeleton
-			className={ classnames( 'edit-site-list', {
-				'is-navigation-open': isNavigationOpen,
-			} ) }
-			labels={ {
-				drawer: __( 'Navigation Sidebar' ),
-				...detailedRegionLabels,
-			} }
+			className="edit-site-list"
+			labels={ detailedRegionLabels }
 			header={ <Header templateType={ templateType } /> }
-			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
 			content={ <Table templateType={ templateType } /> }
 			shortcuts={ {

package/src/components/list/style.scss

@@ -1,7 +1,6 @@
 .edit-site-list-header {
 	position: relative;
 	align-items: center;
-	background-color: $white;
 	display: flex;
 	height: $header-height;
 	box-sizing: border-box;
@@ -44,21 +43,28 @@
 
 		.interface-interface-skeleton__content {
 			background: $white;
-			align-items: center;
 			padding: $grid-unit-20;
 
+			.interface-navigable-region__stacker {
+				align-items: center;
+			}
+
 			@include break-medium() {
 				padding: $grid-unit * 9;
 			}
+
+			& > .interface-navigable-region__stacker {
+				height: auto;
+			}
 		}
 	}
 }
 
 .edit-site-list-table {
-	width: 100%;
+	min-width: 100%;
 	border: $border-width solid $gray-300;
 	border-radius: 2px;
-	margin: 0;
+	margin: 0 auto;
 	overflow: hidden;
 	border-spacing: 0;
 	max-width: 960px;

package/src/components/navigate-to-link/index.js

@@ -9,12 +9,7 @@ import { edit } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function NavigateToLink( {
-	type,
-	id,
-	activePage,
-	onActivePageChange,
-} ) {
+export default function NavigateToLink( { type, id, onActivePageChange } ) {
 	const post = useSelect(
 		( select ) =>
 			type &&
@@ -27,7 +22,6 @@ export default function NavigateToLink( {
 	const onClick = useMemo( () => {
 		if ( ! post?.link ) return null;
 		const path = getPathAndQueryString( post.link );
-		if ( path === activePage?.path ) return null;
 		return () =>
 			onActivePageChange( {
 				type,
@@ -38,7 +32,7 @@ export default function NavigateToLink( {
 					postId: post.id,
 				},
 			} );
-	}, [ post, activePage?.path, onActivePageChange ] );
+	}, [ post, onActivePageChange ] );
 
 	return (
 		onClick && (

package/src/components/routes/index.js

@@ -46,7 +46,7 @@ export function Routes( { children } ) {
 	return (
 		<HistoryContext.Provider value={ history }>
 			<RoutesContext.Provider value={ location }>
-				{ children( location ) }
+				{ children }
 			</RoutesContext.Provider>
 		</HistoryContext.Provider>
 	);

package/src/components/sidebar/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
+import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+
+function SidebarScreens() {
+	useSyncSidebarPathWithURL();
+
+	return (
+		<>
+			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenTemplates postType="wp_template" />
+			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+		</>
+	);
+}
+
+export function Sidebar() {
+	return (
+		<NavigatorProvider
+			className="edit-site-sidebar__content"
+			initialPath="/"
+		>
+			<SidebarScreens />
+		</NavigatorProvider>
+	);
+}

package/src/components/sidebar/style.scss

@@ -0,0 +1,8 @@
+.edit-site-sidebar__content.edit-site-sidebar__content {
+	overflow-x: unset;
+}
+
+.edit-site-sidebar__content > div {
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
+}