@wordpress/edit-site 5.0.0 → 5.2.0

package/src/components/layout/style.scss

@@ -1,83 +1,117 @@
+$hub-height: $grid-unit-20 * 2 + $button-size;
+
 .edit-site-layout {
-	min-height: 100%;
+	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__hub {
+	position: fixed;
+	top: $canvas-padding;
+	left: $canvas-padding;
+	width: calc(100vw - #{$canvas-padding * 2});
+	height: $hub-height;
+	z-index: z-index(".edit-site-layout__hub");
+
+	background: $black;
+	padding: $grid-unit-20;
+	padding-left: 0;
+	border-radius: $radius-block-ui * 4;
+	box-shadow: $shadow-modal;
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		left: 0;
+		padding: 0;
+		padding-right: $grid-unit-20;
+		height: $header-height;
+		border-radius: 0;
+		width: 100vw;
+		box-shadow: none;
+
+		@include break-medium {
+			width: auto;
+			padding-right: 0;
 		}
 	}
-}
 
-.edit-site-layout__header {
-	grid-area: header;
-	height: $header-height;
-	display: flex;
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
 }
 
-.edit-site-layout__logo {
-	align-items: center;
+.edit-site-layout__header {
 	height: $header-height;
 	display: flex;
-	justify-content: space-between;
+	z-index: z-index(".edit-site-layout__header");
 
-	.components-button {
-		color: currentColor;
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		width: 100vw;
 	}
 }
 
-.edit-site-layout__edit-button {
-	background: $gray-800;
-	/* Overrides the color for all states of the button */
-	color: inherit !important;
+.edit-site-layout__content {
+	flex-grow: 1;
+	display: flex;
+	gap: $canvas-padding;
+
+	// Hide scrollbars during the edit/view animation.
+	overflow: hidden;
 }
 
 .edit-site-layout__sidebar {
-	grid-area: sidebar;
-	z-index: 1;
-	overflow-y: auto;
-	max-height: calc(100vh - #{$header-height});
-	@include custom-scrollbars-on-hover;
+	z-index: z-index(".edit-site-layout__sidebar");
+	width: 100vw;
+
+	@include break-medium {
+		width: $nav-sidebar-width;
+	}
 
 	// 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;
-		}
+		position: fixed !important;
+		height: 100vh;
+		left: 0;
+		top: 0;
 	}
-}
 
-.edit-site-layout__editor-header {
-	flex-grow: 1;
+	.resizable-editor__drag-handle.is-right {
+		right: math.div(-$grid-unit-15, 2);
+	}
 
-	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
-		position: fixed;
-		left: 60px;
-		right: 0;
+	> div {
+		overflow-y: auto;
+		min-height: 100%;
+		@include custom-scrollbars-on-hover;
 	}
 }
 
 .edit-site-layout__canvas-container {
-	grid-area: canvas;
 	position: relative;
 	flex-grow: 1;
-	z-index: 2;
+	z-index: z-index(".edit-site-layout__canvas-container");
+
+	&.is-resizing::after {
+		// This covers the whole content which ensures mouse up triggers
+		// even if the content is "inert".
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
+	}
 }
 
 .edit-site-layout__canvas {
@@ -86,13 +120,14 @@
 	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;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
-	@include break-small {
+
+	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
 		width: calc(100% - #{$canvas-padding});
@@ -112,7 +147,10 @@
 		top: 0;
 		bottom: 0;
 		width: 100%;
-		border-radius: 0;
+
+		& > div {
+			border-radius: 0;
+		}
 	}
 }
 
@@ -124,11 +162,14 @@
 
 .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;
+	height: 100%;
+	width: 100%;
+	border-radius: $radius-block-ui;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	&:hover,
 	&:active {
@@ -150,15 +191,6 @@
 		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;
 	}
 
@@ -170,7 +202,7 @@
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {
+		display: flex;
 		border-radius: $radius-block-ui;
-		object-fit: cover;
 	}
 }

package/src/components/list/style.scss

@@ -44,18 +44,11 @@
 		.interface-interface-skeleton__content {
 			background: $white;
 			padding: $grid-unit-20;
-
-			.interface-navigable-region__stacker {
-				align-items: center;
-			}
+			align-items: center;
 
 			@include break-medium() {
 				padding: $grid-unit * 9;
 			}
-
-			& > .interface-navigable-region__stacker {
-				height: auto;
-			}
 		}
 	}
 }

package/src/components/sidebar/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
 
 /**
@@ -22,7 +23,7 @@ function SidebarScreens() {
 	);
 }
 
-export function Sidebar() {
+function Sidebar() {
 	return (
 		<NavigatorProvider
 			className="edit-site-sidebar__content"
@@ -32,3 +33,5 @@ export function Sidebar() {
 		</NavigatorProvider>
 	);
 }
+
+export default memo( Sidebar );

package/src/components/sidebar-edit-mode/index.js

@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavigationMenuSidebar = Fragment;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
 	}
 

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js

@@ -180,6 +180,8 @@ export default function NavigationInspector() {
 			) }
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
+					__nextHasNoMarginBottom
+					className="edit-site-navigation-inspector__select-menu"
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js

@@ -3,6 +3,7 @@
  */
 import {
 	__experimentalListView as ListView,
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -48,5 +49,14 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
+
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
+		return (
+			<OffCanvasEditor
+				blocks={ innerBlocks }
+				selectBlockInCanvas={ false }
+			/>
+		);
+	}
 	return <ListView id={ id } />;
 }

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss

@@ -22,6 +22,10 @@
 	.block-editor-list-view-block__menu-cell {
 		padding-right: 0;
 	}
+
+	.edit-site-navigation-inspector__select-menu {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {

package/src/components/sidebar-navigation-screen/style.scss

@@ -6,16 +6,14 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 0 $button-size;
-	flex-grow: 1;
-	overflow-y: auto;
+	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-80;
+	padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2;
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;

package/src/components/sidebar-navigation-screen-main/index.js

@@ -3,50 +3,22 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
 	__experimentalNavigatorButton as NavigatorButton,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbolFilled } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 
 export default function SidebarNavigationScreenMain() {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	return (
 		<SidebarNavigationScreen
 			path="/"
-			title={
-				<HStack justify="space-between" style={ { minHeight: 36 } }>
-					<div>{ __( 'Design' ) }</div>
-					{ ! isMobileViewport && isEditorPage && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					) }
-				</HStack>
-			}
+			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
 					<NavigatorButton

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -4,10 +4,9 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
@@ -20,7 +19,6 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 import AddNewTemplate from '../add-new-template';
 
 function omit( object, keys ) {
@@ -62,10 +60,7 @@ export default function SidebarNavigationScreenTemplates( {
 	postType = 'wp_template',
 } ) {
 	const { params } = useLocation();
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
 
 	// Ideally the URL params would be enough.
 	// Loading the editor should ideally redirect to the home page
@@ -125,31 +120,18 @@ export default function SidebarNavigationScreenTemplates( {
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
 			title={
-				<HStack style={ { minHeight: 36 } } justify="space-between">
+				<HStack justify="space-between">
 					<div style={ { flexShrink: 0 } }>
 						{ config[ postType ].labels.title }
 					</div>
 					{ ! isMobileViewport && (
-						<HStack spacing={ 2 } justify="right">
-							<AddNewTemplate
-								templateType={ postType }
-								toggleProps={ {
-									className:
-										'edit-site-sidebar-navigation-screen-templates__add-button',
-								} }
-							/>
-							{ isEditorPage && (
-								<Button
-									className="edit-site-layout__edit-button"
-									label={ __( 'Open the editor' ) }
-									onClick={ () => {
-										__unstableSetCanvasMode( 'edit' );
-									} }
-								>
-									{ __( 'Edit' ) }
-								</Button>
-							) }
-						</HStack>
+						<AddNewTemplate
+							templateType={ postType }
+							toggleProps={ {
+								className:
+									'edit-site-sidebar-navigation-screen-templates__add-button',
+							} }
+						/>
 					) }
 				</HStack>
 			}

package/src/components/site-hub/index.js

@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import getIsListPage from '../../utils/get-is-list-page';
+import SiteIcon from '../site-icon';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const HUB_ANIMATION_DURATION = 0.3;
+
+const SiteHub = forwardRef(
+	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
+		const { params } = useLocation();
+		const isListPage = getIsListPage( params );
+		const isEditorPage = ! isListPage;
+		const { canvasMode, dashboardLink, entityConfig } = useSelect(
+			( select ) => {
+				select( editSiteStore ).getEditedPostType();
+				const {
+					__unstableGetCanvasMode,
+					getSettings,
+					getEditedPostType,
+				} = select( editSiteStore );
+				return {
+					canvasMode: __unstableGetCanvasMode(),
+					dashboardLink: getSettings().__experimentalDashboardLink,
+					entityConfig: select( coreStore ).getEntityConfig(
+						'postType',
+						getEditedPostType()
+					),
+				};
+			},
+			[]
+		);
+		const disableMotion = useReducedMotion();
+		const isMobileViewport = useViewportMatch( 'medium', '<' );
+		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { clearSelectedBlock } = useDispatch( blockEditorStore );
+		const showEditButton =
+			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+			( isMobileViewport &&
+				canvasMode === 'view' &&
+				isMobileCanvasVisible );
+		const isBackToDashboardButton =
+			( ! isMobileViewport && canvasMode === 'view' ) ||
+			( isMobileViewport && ! isMobileCanvasVisible );
+		const showLabels = canvasMode !== 'edit';
+		const siteIconButtonProps = isBackToDashboardButton
+			? {
+					href: dashboardLink || 'index.php',
+					'aria-label': __( 'Go back to the dashboard' ),
+			  }
+			: {
+					label: __( 'Open Navigation Sidebar' ),
+					onClick: () => {
+						clearSelectedBlock();
+						setIsMobileCanvasVisible( false );
+						__unstableSetCanvasMode( 'view' );
+					},
+			  };
+		const { getTitle } = useEditedEntityRecord();
+
+		return (
+			<motion.div
+				ref={ ref }
+				{ ...props }
+				className={ classnames(
+					'edit-site-site-hub',
+					props.className
+				) }
+				layout
+				transition={ {
+					type: 'tween',
+					duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+					ease: 'easeOut',
+				} }
+			>
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+				>
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</motion.div>
+
+					{ showLabels && (
+						<VStack spacing={ 0 }>
+							<div className="edit-site-site-hub__title">
+								{ getTitle() }
+							</div>
+							<div className="edit-site-site-hub__post-type">
+								{ entityConfig?.label }
+							</div>
+						</VStack>
+					) }
+				</HStack>
+
+				{ showEditButton && (
+					<Button
+						className="edit-site-site-hub__edit-button"
+						label={ __( 'Open the editor' ) }
+						onClick={ () => {
+							__unstableSetCanvasMode( 'edit' );
+						} }
+						variant="primary"
+					>
+						{ __( 'Edit' ) }
+					</Button>
+				) }
+
+				{ isMobileViewport && ! isMobileCanvasVisible && (
+					<Button
+						onClick={ () => setIsMobileCanvasVisible( true ) }
+						variant="primary"
+					>
+						{ __( 'View Editor' ) }
+					</Button>
+				) }
+			</motion.div>
+		);
+	}
+);
+
+export default SiteHub;

package/src/components/site-hub/style.scss

@@ -0,0 +1,31 @@
+.edit-site-site-hub {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+}
+
+.edit-site-site-hub__edit-button {
+	height: $grid-unit-40;
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
+}
+
+.edit-site-site-hub__title {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}