@wordpress/edit-site 4.19.0 → 5.1.0

package/src/components/header-edit-mode/document-actions/style.scss

@@ -41,9 +41,12 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: currentColor;
 	}
 
 	.edit-site-document-actions__secondary-item {
+		display: flex;
+		align-items: center;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -51,9 +54,13 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background: $gray-200;
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		border-radius: 2px;
 		@include reduce-motion(transition);
+
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
 	}
 
 	&.has-secondary-label {

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

@@ -27,6 +27,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -37,12 +38,13 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
+import { useHasStyleBook } from '../style-book';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function Header( { showIconLabels } ) {
+export default function HeaderEditMode() {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -53,6 +55,7 @@ export default function Header( { showIconLabels } ) {
 		isVisualMode,
 		blockEditorMode,
 		homeUrl,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -81,6 +84,10 @@ export default function Header( { showIconLabels } ) {
 			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
 			homeUrl: getUnstableBase()?.home,
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 
@@ -107,6 +114,8 @@ export default function Header( { showIconLabels } ) {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const hasStyleBook = useHasStyleBook();
+
 	const isFocusMode = templateType === 'wp_template_part';
 
 	/* translators: button label text should, if possible, be under 16 characters. */
@@ -121,93 +130,102 @@ export default function Header( { showIconLabels } ) {
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<div className="edit-site-header-edit-mode">
-			<NavigableToolbar
-				className="edit-site-header-edit-mode__start"
-				aria-label={ __( 'Document tools' ) }
-			>
-				<div className="edit-site-header-edit-mode__toolbar">
-					<ToolbarItem
-						ref={ inserterButton }
-						as={ Button }
-						className="edit-site-header-edit-mode__inserter-toggle"
-						variant="primary"
-						isPressed={ isInserterOpen }
-						onMouseDown={ preventDefault }
-						onClick={ openInserter }
-						disabled={ ! isVisualMode }
-						icon={ plus }
-						label={ showIconLabels ? shortLabel : longLabel }
-						showTooltip={ ! showIconLabels }
-					/>
-					{ isLargeViewport && (
-						<>
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-							/>
-							<ToolbarItem
-								as={ UndoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ RedoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ Button }
-								className="edit-site-header-edit-mode__list-view-toggle"
-								disabled={ ! isVisualMode && isZoomedOutView }
-								icon={ listView }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'List View' ) }
-								onClick={ toggleListView }
-								shortcut={ listViewShortcut }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							{ isZoomedOutViewExperimentEnabled && (
+		<div
+			className={ classnames( 'edit-site-header-edit-mode', {
+				'show-icon-labels': showIconLabels,
+			} ) }
+		>
+			{ ! hasStyleBook && (
+				<NavigableToolbar
+					className="edit-site-header-edit-mode__start"
+					aria-label={ __( 'Document tools' ) }
+				>
+					<div className="edit-site-header-edit-mode__toolbar">
+						<ToolbarItem
+							ref={ inserterButton }
+							as={ Button }
+							className="edit-site-header-edit-mode__inserter-toggle"
+							variant="primary"
+							isPressed={ isInserterOpen }
+							onMouseDown={ preventDefault }
+							onClick={ openInserter }
+							disabled={ ! isVisualMode }
+							icon={ plus }
+							label={ showIconLabels ? shortLabel : longLabel }
+							showTooltip={ ! showIconLabels }
+						/>
+						{ isLargeViewport && (
+							<>
+								<ToolbarItem
+									as={ ToolSelector }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+									disabled={ ! isVisualMode }
+								/>
+								<ToolbarItem
+									as={ UndoButton }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
+								<ToolbarItem
+									as={ RedoButton }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
 								<ToolbarItem
 									as={ Button }
-									icon={ chevronUpDown }
-									isPressed={ isZoomedOutView }
+									className="edit-site-header-edit-mode__list-view-toggle"
+									disabled={
+										! isVisualMode || isZoomedOutView
+									}
+									icon={ listView }
+									isPressed={ isListViewOpen }
 									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'Zoom-out View' ) }
-									onClick={ () => {
-										setPreviewDeviceType( 'desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
+									label={ __( 'List View' ) }
+									onClick={ toggleListView }
+									shortcut={ listViewShortcut }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
 								/>
-							) }
-						</>
-					) }
-				</div>
-			</NavigableToolbar>
+								{ isZoomedOutViewExperimentEnabled && (
+									<ToolbarItem
+										as={ Button }
+										className="edit-site-header-edit-mode__zoom-out-view-toggle"
+										icon={ chevronUpDown }
+										isPressed={ isZoomedOutView }
+										/* translators: button label text should, if possible, be under 16 characters. */
+										label={ __( 'Zoom-out View' ) }
+										onClick={ () => {
+											setPreviewDeviceType( 'desktop' );
+											__unstableSetEditorMode(
+												isZoomedOutView
+													? 'edit'
+													: 'zoom-out'
+											);
+										} }
+									/>
+								) }
+							</>
+						) }
+					</div>
+				</NavigableToolbar>
+			) }
 
 			<div className="edit-site-header-edit-mode__center">
-				<DocumentActions />
+				{ hasStyleBook ? __( 'Style Book' ) : <DocumentActions /> }
 			</div>
 
 			<div className="edit-site-header-edit-mode__end">
 				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && (
+					{ ! isFocusMode && ! hasStyleBook && (
 						<div
 							className={ classnames(
 								'edit-site-header-edit-mode__preview-options',

package/src/components/header-edit-mode/style.scss

@@ -1,20 +1,16 @@
 $header-toolbar-min-width: 335px;
 
 .edit-site-header-edit-mode {
+	height: $header-height;
 	align-items: center;
 	background-color: $white;
+	color: $gray-900;
 	display: flex;
-	height: $header-height;
 	box-sizing: border-box;
 	width: 100%;
 	justify-content: space-between;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
+	border-bottom: $border-width solid $gray-200;
+	padding-left: $header-height;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;
@@ -40,29 +36,6 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-// Keeps the document title centered when the sidebar is open
-body.is-navigation-sidebar-open {
-	.edit-site-header-edit-mode {
-		padding-left: 0;
-		transition: padding-left 20ms linear;
-		transition-delay: 0ms;
-		@include reduce-motion("transition");
-	}
-}
-
-// Centred document title on small screens with sidebar open
-@media ( max-width: #{ ($break-large - 1) } ) {
-	body.is-navigation-sidebar-open .edit-site-header-edit-mode {
-		.edit-site-header-edit-mode__inserter-toggle ~ .components-button,
-		.edit-site-header-edit-mode__end .components-button:not(.is-primary) {
-			display: none;
-		}
-		.edit-site-save-button__button {
-			margin-right: 0;
-		}
-	}
-}
-
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
@@ -177,7 +150,7 @@ body.is-navigation-sidebar-open {
 
 // Button text label styles
 
-.show-icon-labels .edit-site-header-edit-mode {
+.edit-site-header-edit-mode.show-icon-labels {
 	.components-button.has-icon {
 		width: auto;
 
@@ -218,7 +191,7 @@ body.is-navigation-sidebar-open {
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header__start .edit-site-header__toolbar > * + * {
+	.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
 }

package/src/components/keyboard-shortcuts/index.js

@@ -6,6 +6,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -119,6 +120,18 @@ function KeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 
 		registerShortcut( {

package/src/components/layout/index.js

@@ -0,0 +1,235 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+	__unstableUseNavigateRegions as useNavigateRegions,
+} from '@wordpress/components';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { NavigableRegion } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * 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 useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import SiteHub from '../site-hub';
+
+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, 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 navigateRegionsProps = useNavigateRegions( {
+		previous: previousShortcut,
+		next: nextShortcut,
+	} );
+	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 isFullCanvas =
+		( isEditorPage && canvasMode === 'edit' && ! 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 ] );
+
+	return (
+		<>
+			{ fullResizer }
+			<div
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
+				className={ classnames(
+					'edit-site-layout',
+					navigateRegionsProps.className,
+					{
+						'is-full-canvas': isFullCanvas,
+						'is-edit-mode': canvasMode === 'edit',
+					}
+				) }
+			>
+				<SiteHub
+					className="edit-site-layout__hub"
+					isMobileCanvasVisible={ isMobileCanvasVisible }
+					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
+				/>
+
+				<AnimatePresence initial={ false }>
+					{ isEditorPage &&
+						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
+							<NavigableRegion
+								className="edit-site-layout__header"
+								ariaLabel={ __( 'Editor top bar' ) }
+								as={ motion.div }
+								animate={ {
+									y: 0,
+								} }
+								initial={ {
+									y: '-100%',
+								} }
+								exit={ {
+									y: '-100%',
+								} }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								{ canvasMode === 'edit' && <Header /> }
+							</NavigableRegion>
+						) }
+				</AnimatePresence>
+
+				<div className="edit-site-layout__content">
+					<AnimatePresence initial={ false }>
+						{ showSidebar && (
+							<NavigableRegion
+								as={ 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"
+								ariaLabel={ __( 'Navigation sidebar' ) }
+							>
+								<Sidebar />
+							</NavigableRegion>
+						) }
+					</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>
+			</div>
+		</>
+	);
+}