@wordpress/edit-site 5.12.1 → 5.12.3

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

@@ -3,12 +3,16 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
 import { ActionItem, MoreMenuDropdown } from '@wordpress/interface';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -20,6 +24,7 @@ import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
+import { store as siteEditorStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
 	const [ isModalActive, toggleModal ] = useReducer(
@@ -32,6 +37,29 @@ export default function MoreMenu( { showIconLabels } ) {
 		false
 	);
 
+	const registry = useRegistry();
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
+		[]
+	);
+
+	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
+		useDispatch( siteEditorStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
+
 	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 
 	return (
@@ -48,6 +76,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							<PreferenceToggleMenuItem
 								scope="core/edit-site"
 								name="fixedToolbar"
+								disabled={ isDistractionFree }
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -71,14 +100,30 @@ export default function MoreMenu( { showIconLabels } ) {
 									'Spotlight mode deactivated'
 								) }
 							/>
-							<ModeSwitcher />
-							<ActionItem.Slot
-								name="core/edit-site/plugin-more-menu"
-								label={ __( 'Plugins' ) }
-								as={ MenuGroup }
-								fillProps={ { onClick: onClose } }
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="distractionFree"
+								onToggle={ toggleDistractionFree }
+								label={ __( 'Distraction free' ) }
+								info={ __( 'Write with calmness' ) }
+								messageActivated={ __(
+									'Distraction free mode activated'
+								) }
+								messageDeactivated={ __(
+									'Distraction free mode deactivated'
+								) }
+								shortcut={ displayShortcut.primaryShift(
+									'\\'
+								) }
 							/>
 						</MenuGroup>
+						<ModeSwitcher />
+						<ActionItem.Slot
+							name="core/edit-site/plugin-more-menu"
+							label={ __( 'Plugins' ) }
+							as={ MenuGroup }
+							fillProps={ { onClick: onClose } }
+						/>
 						<MenuGroup label={ __( 'Tools' ) }>
 							<SiteExport />
 							<MenuItem

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -1,12 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -29,8 +32,14 @@ function KeyboardShortcutsEditMode() {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } =
-		useDispatch( editSiteStore );
+	const {
+		isFeatureActive,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleFeature,
+		setIsInserterOpened,
+		closeGeneralSidebar,
+	} = useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 
@@ -38,6 +47,16 @@ function KeyboardShortcutsEditMode() {
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core/edit-site', 'fixedToolbar', false );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+	};
+
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();
 		const destinationBlockName =
@@ -114,6 +133,20 @@ function KeyboardShortcutsEditMode() {
 		);
 	} );
 
+	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
+		toggleDistractionFree();
+		toggleFeature( 'distractionFree' );
+		createInfoNotice(
+			isFeatureActive( 'distractionFree' )
+				? __( 'Distraction free mode turned on.' )
+				: __( 'Distraction free mode turned off.' ),
+			{
+				id: 'core/edit-site/distraction-free-mode/notice',
+				type: 'snackbar',
+			}
+		);
+	} );
+
 	return null;
 }
 

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

@@ -149,6 +149,16 @@ function KeyboardShortcutsRegister() {
 				},
 			} );
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/layout/index.js

@@ -72,24 +72,36 @@ export default function Layout() {
 	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,
@@ -110,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
@@ -140,41 +173,77 @@ 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 }>

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;
@@ -249,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;
 		}
@@ -258,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/page-content-focus-manager/back-to-page-notification.js

@@ -25,8 +25,11 @@ export default function BackToPageNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 export function useBackToPageNotification() {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const { isPage, hasPageContentFocus } = useSelect(
+		( select ) => ( {
+			isPage: select( editSiteStore ).isPage(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
+		} ),
 		[]
 	);
 
@@ -39,6 +42,7 @@ export function useBackToPageNotification() {
 	useEffect( () => {
 		if (
 			! alreadySeen.current &&
+			isPage &&
 			prevHasPageContentFocus.current &&
 			! hasPageContentFocus
 		) {
@@ -57,6 +61,7 @@ export function useBackToPageNotification() {
 		prevHasPageContentFocus.current = hasPageContentFocus;
 	}, [
 		alreadySeen,
+		isPage,
 		prevHasPageContentFocus,
 		hasPageContentFocus,
 		createInfoNotice,

package/src/components/page-library/grid-item.js

@@ -49,6 +49,12 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		canvas: 'edit',
 	} );
 
+	const onKeyDown = ( event ) => {
+		if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) {
+			setIsDeleteDialogOpen( true );
+		}
+	};
+
 	const isEmpty = ! item.blocks?.length;
 	const patternClassNames = classnames( 'edit-site-library__pattern', {
 		'is-placeholder': isEmpty,
@@ -72,8 +78,9 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		}
 	};
 
+	const isUserPattern = item.type === USER_PATTERNS;
 	let ariaDescription;
-	if ( item.type === USER_PATTERNS ) {
+	if ( isUserPattern ) {
 		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
 		ariaDescription = __(
 			'Press Enter to edit, or Delete to delete the pattern.'
@@ -91,18 +98,11 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					as="div"
 					{ ...composite }
 					onClick={ item.type !== PATTERNS ? onClick : undefined }
+					onKeyDown={ isUserPattern ? onKeyDown : undefined }
 					aria-label={ item.title }
 					aria-describedby={
 						ariaDescription ? descriptionId : undefined
 					}
-					onKeyDown={ ( event ) => {
-						if (
-							DELETE === event.keyCode ||
-							BACKSPACE === event.keyCode
-						) {
-							setIsDeleteDialogOpen( true );
-						}
-					} }
 				>
 					{ isEmpty && __( 'Empty pattern' ) }
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }

package/src/components/page-library/style.scss

@@ -6,7 +6,7 @@
 	}
 
 	.components-heading {
-		color: $white;
+		color: $gray-200;
 	}
 
 	@include break-medium {
@@ -78,7 +78,7 @@
 .edit-site-library__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
-		color: $gray-100;
+		color: $gray-200;
 
 		&:focus {
 			background: $gray-800;

package/src/components/preferences-modal/enable-feature.js

@@ -6,14 +6,17 @@ import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/
 import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function EnableFeature( props ) {
-	const { featureName, ...remainingProps } = props;
+	const { featureName, onToggle = () => {}, ...remainingProps } = props;
 	const isChecked = useSelect(
 		( select ) =>
 			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
 		[ featureName ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => toggle( 'core/edit-site', featureName );
+	const onChange = () => {
+		onToggle();
+		toggle( 'core/edit-site', featureName );
+	};
 	return (
 		<BaseOption
 			onChange={ onChange }

package/src/components/preferences-modal/index.js

@@ -8,16 +8,33 @@ import {
 } from '@wordpress/interface';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
+import { store as siteEditorStore } from '../../store';
 
 export default function EditSitePreferencesModal( {
 	isModalActive,
 	toggleModal,
 } ) {
+	const registry = useRegistry();
+	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( siteEditorStore );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
+
 	const sections = useMemo( () => [
 		{
 			name: 'general',
@@ -29,6 +46,14 @@ export default function EditSitePreferencesModal( {
 						'Customize options related to the block editor interface and editing flow.'
 					) }
 				>
+					<EnableFeature
+						featureName="distractionFree"
+						onToggle={ toggleDistractionFree }
+						help={ __(
+							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+						) }
+						label={ __( 'Distraction free' ) }
+					/>
 					<EnableFeature
 						featureName="focusMode"
 						help={ __(

package/src/components/sidebar-button/style.scss

@@ -19,6 +19,6 @@
 	&:focus,
 	&:not([aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $white;
+		color: $gray-100;
 	}
 }

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

@@ -56,11 +56,13 @@ export function SidebarComplementaryAreaFills() {
 	useEffect( () => {
 		// Don't automatically switch tab when the sidebar is closed or when we
 		// are focused on page content.
-		if ( ! isEditorSidebarOpened || hasPageContentFocus ) {
+		if ( ! isEditorSidebarOpened ) {
 			return;
 		}
 		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			if ( ! hasPageContentFocus ) {
+				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			}
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}

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

@@ -9,7 +9,7 @@
 	&:hover,
 	&:focus,
 	&[aria-current] {
-		color: $white;
+		color: $gray-200;
 		background: $gray-800;
 	}
 

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

@@ -61,7 +61,8 @@ export default function SidebarNavigationScreen( {
 						<NavigatorToParentButton
 							as={ SidebarButton }
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Back' ) }
+							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ ! isRoot && backPath && (
@@ -69,6 +70,7 @@ export default function SidebarNavigationScreen( {
 							onClick={ () => goTo( backPath, { isBack: true } ) }
 							icon={ icon }
 							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ isRoot && (
@@ -88,7 +90,7 @@ export default function SidebarNavigationScreen( {
 					) }
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
-						color={ 'white' }
+						color={ '#e0e0e0' /* $gray-200 */ }
 						level={ 1 }
 						size={ 20 }
 					>