@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/layout/index.js

@@ -26,6 +26,7 @@ import {
 	privateApis as commandsPrivateApis,
 } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
@@ -34,7 +35,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import Sidebar from '../sidebar';
 import Editor from '../editor';
-import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
@@ -43,16 +43,19 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
 
@@ -62,36 +65,49 @@ export default function Layout() {
 	useSyncCanvasModeWithURL();
 	useCommands();
 	useEditModeCommands();
+	useCommonCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
-	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
-		useSelect( ( select ) => {
-			const { getAllShortcutKeyCombinations } = select(
-				keyboardShortcutsStore
-			);
-			const { getCanvasMode } = unlock( select( editSiteStore ) );
-			return {
-				canvasMode: getCanvasMode(),
-				previousShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/next-region'
-				),
-				hasFixedToolbar:
-					select( preferencesStore ).get( 'fixedToolbar' ),
-			};
-		}, [] );
+
+	const {
+		isDistractionFree,
+		hasFixedToolbar,
+		canvasMode,
+		previousShortcut,
+		nextShortcut,
+	} = useSelect( ( select ) => {
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		return {
+			canvasMode: getCanvasMode(),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
+			hasFixedToolbar: select( preferencesStore ).get(
+				'core/edit-site',
+				'fixedToolbar'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
+		};
+	}, [] );
 	const isEditing = canvasMode === 'edit';
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
 		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
@@ -106,6 +122,27 @@ export default function Layout() {
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
 
+	// This determines which animation variant should apply to the header.
+	// There is also a `isDistractionFreeHovering` state that gets priority
+	// when hovering the `edit-site-layout__header-container` in distraction
+	// free mode. It's set via framer and trickles down to all the children
+	// so they can use this variant state too.
+	//
+	// TODO: The issue with this is we want to have the hover state stick when hovering
+	// a popover opened via the header. We'll probably need to lift this state to
+	// handle it ourselves. Also, focusWithin the header needs to be handled.
+	let headerAnimationState;
+
+	if ( canvasMode === 'view' ) {
+		// We need 'view' to always take priority so 'isDistractionFree'
+		// doesn't bleed over into the view (sidebar) state
+		headerAnimationState = 'view';
+	} else if ( isDistractionFree ) {
+		headerAnimationState = 'isDistractionFree';
+	} else {
+		headerAnimationState = canvasMode; // edit, view, init
+	}
+
 	// Sets the right context for the command center
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
@@ -113,6 +150,9 @@ export default function Layout() {
 			: 'site-editor';
 	useCommandContext( commandContext );
 
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+
 	// 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.
@@ -133,58 +173,105 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
+						'is-distraction-free': isDistractionFree && isEditing,
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
 					}
 				) }
 			>
-				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
-
-				<AnimatePresence initial={ false }>
-					{ isEditorPage && isEditing && (
-						<NavigableRegion
-							className="edit-site-layout__header"
-							ariaLabel={ __( 'Editor top bar' ) }
-							as={ motion.div }
-							animate={ {
-								y: 0,
-							} }
-							initial={ {
-								y: '-100%',
-							} }
-							exit={ {
-								y: '-100%',
-							} }
-							transition={ {
+				<motion.div
+					className="edit-site-layout__header-container"
+					variants={ {
+						isDistractionFree: {
+							opacity: 0,
+							transition: {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-						>
-							{ isEditing && <Header /> }
-						</NavigableRegion>
-					) }
-				</AnimatePresence>
+								delay: 0.8,
+								delayChildren: 0.8,
+							}, // How long to wait before the header exits
+						},
+						isDistractionFreeHovering: {
+							opacity: 1,
+							transition: {
+								type: 'tween',
+								delay: 0.2,
+								delayChildren: 0.2,
+							}, // How long to wait before the header shows
+						},
+						view: { opacity: 1 },
+						edit: { opacity: 1 },
+					} }
+					whileHover={
+						isDistractionFree
+							? 'isDistractionFreeHovering'
+							: undefined
+					}
+					animate={ headerAnimationState }
+				>
+					<SiteHub
+						as={ motion.div }
+						variants={ {
+							isDistractionFree: { x: '-100%' },
+							isDistractionFreeHovering: { x: 0 },
+							view: { x: 0 },
+							edit: { x: 0 },
+						} }
+						ref={ hubRef }
+						className="edit-site-layout__hub"
+					/>
+
+					<AnimatePresence initial={ false }>
+						{ isEditorPage && isEditing && (
+							<NavigableRegion
+								className="edit-site-layout__header"
+								ariaLabel={ __( 'Editor top bar' ) }
+								as={ motion.div }
+								variants={ {
+									isDistractionFree: { opacity: 0 },
+									isDistractionFreeHovering: { opacity: 1 },
+									view: { opacity: 1 },
+									edit: { opacity: 1 },
+								} }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion ? 0 : 0.2,
+									ease: 'easeOut',
+								} }
+							>
+								{ isEditing && <Header /> }
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
+				</motion.div>
 
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
-						{ showSidebar && (
+						{
 							<motion.div
 								initial={ {
 									opacity: 0,
 								} }
-								animate={ {
-									opacity: 1,
-								} }
+								animate={
+									showSidebar
+										? { opacity: 1, display: 'block' }
+										: {
+												opacity: 0,
+												transitionEnd: {
+													display: 'none',
+												},
+										  }
+								}
 								exit={ {
 									opacity: 0,
 								} }
 								transition={ {
 									type: 'tween',
-									duration: ANIMATION_DURATION,
+									duration:
+										// Disable transition in mobile to emulate a full page transition.
+										disableMotion || isMobileViewport
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 								className="edit-site-layout__sidebar"
@@ -195,69 +282,79 @@ export default function Layout() {
 									<Sidebar />
 								</NavigableRegion>
 							</motion.div>
-						) }
+						}
 					</AnimatePresence>
 
 					<SavePanel />
 
 					{ showCanvas && (
-						<div
-							className={ classnames(
-								'edit-site-layout__canvas-container',
-								{
-									'is-resizing': isResizing,
-								}
-							) }
-						>
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										isEditorPage && canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration:
-															disableMotion ||
-															isResizing
-																? 0
-																: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
-									className="edit-site-layout__canvas"
-									transition={ {
-										type: 'tween',
-										duration:
-											disableMotion || isResizing
-												? 0
-												: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+						<>
+							{ isListPage && <PageMain /> }
+							{ isEditorPage && (
+								<div
+									className={ classnames(
+										'edit-site-layout__canvas-container',
+										{
+											'is-resizing': isResizing,
+										}
+									) }
 								>
-									<ErrorBoundary>
-										{ isEditorPage && (
-											<ResizableFrame
-												isReady={ ! isEditorLoading }
-												isFullWidth={ isEditing }
-												oversizedClassName="edit-site-layout__resizable-frame-oversized"
-											>
-												<Editor
-													isLoading={
-														isEditorLoading
+									{ canvasResizer }
+									{ !! canvasSize.width && (
+										<motion.div
+											whileHover={
+												isEditorPage &&
+												canvasMode === 'view'
+													? {
+															scale: 1.005,
+															transition: {
+																duration:
+																	disableMotion ||
+																	isResizing
+																		? 0
+																		: 0.5,
+																ease: 'easeOut',
+															},
+													  }
+													: {}
+											}
+											initial={ false }
+											layout="position"
+											className="edit-site-layout__canvas"
+											transition={ {
+												type: 'tween',
+												duration:
+													disableMotion || isResizing
+														? 0
+														: ANIMATION_DURATION,
+												ease: 'easeOut',
+											} }
+										>
+											<ErrorBoundary>
+												<ResizableFrame
+													isReady={
+														! isEditorLoading
 													}
-												/>
-											</ResizableFrame>
-										) }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
-								</motion.div>
+													isFullWidth={ isEditing }
+													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													innerContentStyle={ {
+														background:
+															gradientValue ??
+															backgroundColor,
+													} }
+												>
+													<Editor
+														isLoading={
+															isEditorLoading
+														}
+													/>
+												</ResizableFrame>
+											</ErrorBoundary>
+										</motion.div>
+									) }
+								</div>
 							) }
-						</div>
+						</>
 					) }
 				</div>
 			</div>

package/src/components/layout/style.scss

@@ -1,9 +1,20 @@
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;
-	color: $white;
+	color: $gray-400;
 	display: flex;
 	flex-direction: column;
+
+	// Expand the fixed block toolbar to cover the document title control.
+	.block-editor-block-contextual-toolbar {
+		@include break-medium() {
+			&.is-fixed {
+				// the combined with of the tools at the right of the header and the margin left
+				width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
+			}
+		}
+	}
+
 }
 
 .edit-site-layout__hub {
@@ -36,6 +47,10 @@
 	}
 }
 
+.edit-site-layout__header-container {
+	z-index: z-index(".edit-site-layout__header-container");
+}
+
 .edit-site-layout__header {
 	height: $header-height;
 	display: flex;
@@ -81,6 +96,13 @@
 	}
 }
 
+.edit-site-layout__main {
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
@@ -242,6 +264,9 @@
 	// so the fixed toolbar can be positioned on top of it
 	// but only on desktop
 	@include break-medium() {
+		.edit-site-layout__canvas-container {
+			z-index: 5;
+		}
 		.edit-site-site-hub {
 			z-index: 4;
 		}
@@ -251,3 +276,42 @@
 	}
 }
 
+.is-edit-mode.is-distraction-free {
+
+	.edit-site-layout__header-container {
+		height: $header-height;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: z-index(".edit-site-layout__header-container");
+		width: 100%;
+
+		// We need ! important because we override inline styles
+		// set by the motion component.
+		&:focus-within {
+			opacity: 1 !important;
+			div {
+				transform: translateX(0) translateY(0) translateZ(0) !important;
+			}
+
+			.edit-site-layout__header {
+				opacity: 1 !important;
+			}
+		}
+	}
+
+	.edit-site-site-hub,
+	.edit-site-layout__header {
+		position: absolute;
+		top: 0;
+		z-index: z-index(".edit-site-layout__header");
+	}
+	.edit-site-site-hub {
+		z-index: z-index(".edit-site-layout__hub");
+	}
+	.edit-site-layout__header {
+		width: 100%;
+	}
+
+}

package/src/components/list/index.js

@@ -16,7 +16,7 @@ import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import Table from './table';
 import useTitle from '../routes/use-title';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

package/src/components/page/header.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+export default function Header( { title, subTitle, actions } ) {
+	return (
+		<HStack as="header" alignment="left" className="edit-site-page-header">
+			<FlexBlock className="edit-site-page-header__page-title">
+				<Heading
+					as="h1"
+					level={ 4 }
+					className="edit-site-page-header__title"
+				>
+					{ title }
+				</Heading>
+				{ subTitle && (
+					<Text as="p" className="edit-site-page-header__sub-title">
+						{ subTitle }
+					</Text>
+				) }
+			</FlexBlock>
+			<FlexItem className="edit-site-page-header__actions">
+				{ actions }
+			</FlexItem>
+		</HStack>
+	);
+}

package/src/components/page/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+
+export default function Page( {
+	title,
+	subTitle,
+	actions,
+	children,
+	className,
+	hideTitleFromUI = false,
+} ) {
+	const classes = classnames( 'edit-site-page', className );
+
+	return (
+		<NavigableRegion className={ classes } ariaLabel={ title }>
+			{ ! hideTitleFromUI && title && (
+				<Header
+					title={ title }
+					subTitle={ subTitle }
+					actions={ actions }
+				/>
+			) }
+			<div className="edit-site-page-content">{ children }</div>
+		</NavigableRegion>
+	);
+}

package/src/components/page/style.scss

@@ -0,0 +1,38 @@
+.edit-site-page {
+	color: $gray-800;
+	background: $white;
+	flex-grow: 1;
+	overflow: auto;
+	margin: 0;
+	margin-top: $header-height;
+	@include break-medium() {
+		border-radius: 8px;
+		margin: $grid-unit-30 $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-page-header {
+	padding: 0 $grid-unit-40;
+	height: $header-height;
+	padding-left: $grid-unit-40;
+	border-bottom: 1px solid $gray-100;
+	background: $white;
+	position: sticky;
+	top: 0;
+	z-index: z-index(".edit-site-page-header");
+	.components-text {
+		color: $gray-800;
+	}
+	.components-heading {
+		color: $gray-900;
+	}
+	.edit-site-page-header__sub-title {
+		margin-top: $grid-unit-10;
+		color: $gray-700;
+	}
+}
+
+.edit-site-page-content {
+	padding: $grid-unit-40 $grid-unit-40;
+	overflow-x: auto;
+}