@wordpress/edit-site 5.12.0 → 5.12.2

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useCallback, useRef } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	ToolSelector,
@@ -21,6 +21,7 @@ import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
 import {
+	__unstableMotion as motion,
 	Button,
 	ToolbarItem,
 	MenuGroup,
@@ -43,7 +44,7 @@ import {
 	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
@@ -60,6 +61,7 @@ export default function HeaderEditMode() {
 		isListViewOpen,
 		listViewShortcut,
 		isVisualMode,
+		isDistractionFree,
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
@@ -99,6 +101,10 @@ export default function HeaderEditMode() {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
 		};
 	}, [] );
 
@@ -108,6 +114,7 @@ export default function HeaderEditMode() {
 		setIsListViewOpened,
 	} = useDispatch( editSiteStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const disableMotion = useReducedMotion();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -142,7 +149,8 @@ export default function HeaderEditMode() {
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
-	const isFocusMode = templateType === 'wp_template_part';
+	const isFocusMode =
+		templateType === 'wp_template_part' || templateType === 'wp_navigation';
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -155,6 +163,19 @@ export default function HeaderEditMode() {
 		window?.__experimentalEnableZoomedOutView && isVisualMode;
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
+	const toolbarVariants = {
+		isDistractionFree: { y: '-50px' },
+		isDistractionFreeHovering: { y: 0 },
+		view: { y: 0 },
+		edit: { y: 0 },
+	};
+
+	const toolbarTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : 0.2,
+		ease: 'easeOut',
+	};
+
 	return (
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
@@ -163,26 +184,33 @@ export default function HeaderEditMode() {
 		>
 			{ hasDefaultEditorCanvasView && (
 				<NavigableToolbar
+					as={ motion.div }
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
 					shouldUseKeyboardFocusShortcut={
 						! blockToolbarCanBeFocused
 					}
+					variants={ toolbarVariants }
+					transition={ toolbarTransition }
 				>
 					<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={ toggleInserter }
-							disabled={ ! isVisualMode }
-							icon={ plus }
-							label={ showIconLabels ? shortLabel : longLabel }
-							showTooltip={ ! showIconLabels }
-						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								ref={ inserterButton }
+								as={ Button }
+								className="edit-site-header-edit-mode__inserter-toggle"
+								variant="primary"
+								isPressed={ isInserterOpen }
+								onMouseDown={ preventDefault }
+								onClick={ toggleInserter }
+								disabled={ ! isVisualMode }
+								icon={ plus }
+								label={
+									showIconLabels ? shortLabel : longLabel
+								}
+								showTooltip={ ! showIconLabels }
+							/>
+						) }
 						{ isLargeViewport && (
 							<>
 								<ToolbarItem
@@ -207,57 +235,70 @@ export default function HeaderEditMode() {
 										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 && (
+								{ ! isDistractionFree && (
 									<ToolbarItem
 										as={ Button }
-										className="edit-site-header-edit-mode__zoom-out-view-toggle"
-										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
+										}
 									/>
 								) }
+								{ isZoomedOutViewExperimentEnabled &&
+									! isDistractionFree && (
+										<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">
-				{ ! hasDefaultEditorCanvasView ? (
-					getEditorCanvasContainerTitle( editorCanvasView )
-				) : (
-					<DocumentActions />
-				) }
-			</div>
+			{ ! isDistractionFree && (
+				<div className="edit-site-header-edit-mode__center">
+					{ ! hasDefaultEditorCanvasView ? (
+						getEditorCanvasContainerTitle( editorCanvasView )
+					) : (
+						<DocumentActions />
+					) }
+				</div>
+			) }
 
 			<div className="edit-site-header-edit-mode__end">
-				<div className="edit-site-header-edit-mode__actions">
+				<motion.div
+					className="edit-site-header-edit-mode__actions"
+					variants={ toolbarVariants }
+					transition={ toolbarTransition }
+				>
 					{ ! isFocusMode && hasDefaultEditorCanvasView && (
 						<div
 							className={ classnames(
@@ -268,8 +309,7 @@ export default function HeaderEditMode() {
 							<PreviewOptions
 								deviceType={ deviceType }
 								setDeviceType={ setPreviewDeviceType }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								viewLabel={ __( 'View' ) }
+								label={ __( 'View' ) }
 							>
 								<MenuGroup>
 									<MenuItem
@@ -290,9 +330,11 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<SaveButton />
-					<PinnedItems.Slot scope="core/edit-site" />
+					{ ! isDistractionFree && (
+						<PinnedItems.Slot scope="core/edit-site" />
+					) }
 					<MoreMenu showIconLabels={ showIconLabels } />
-				</div>
+				</motion.div>
 			</div>
 		</div>
 	);

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 =
@@ -76,8 +95,12 @@ function KeyboardShortcutsEditMode() {
 		event.preventDefault();
 	} );
 
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
 	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		setIsListViewOpened( ! isListViewOpen );
+		if ( isListViewOpen ) {
+			return;
+		}
+		setIsListViewOpened( true );
 	} );
 
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
@@ -110,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/index.js

@@ -93,8 +93,12 @@ function KeyboardShortcuts() {
 		event.preventDefault();
 	} );
 
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
 	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		setIsListViewOpened( ! isListViewOpen );
+		if ( ! isListViewOpen ) {
+			return;
+		}
+		setIsListViewOpened( true );
 	} );
 
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {

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

@@ -129,7 +129,7 @@ function KeyboardShortcutsRegister() {
 		} );
 
 		registerShortcut( {
-			name: `core/edit-site/transform-heading-to-paragraph`,
+			name: 'core/edit-site/transform-heading-to-paragraph',
 			category: 'block-library',
 			description: __( 'Transform heading to paragraph.' ),
 			keyCombination: {
@@ -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/hooks.js

@@ -10,6 +10,8 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../use-edited-entity-record';
 
+const MAX_LOADING_TIME = 10000; // 10 seconds
+
 export function useIsSiteEditorLoading() {
 	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
 	const [ loaded, setLoaded ] = useState( false );
@@ -22,6 +24,25 @@ export function useIsSiteEditorLoading() {
 		[ loaded ]
 	);
 
+	/*
+	 * If the maximum expected loading time has passed, we're marking the
+	 * editor as loaded, in order to prevent any failed requests from blocking
+	 * the editor canvas from appearing.
+	 */
+	useEffect( () => {
+		let timeout;
+
+		if ( ! loaded ) {
+			timeout = setTimeout( () => {
+				setLoaded( true );
+			}, MAX_LOADING_TIME );
+		}
+
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [ loaded ] );
+
 	useEffect( () => {
 		if ( inLoadingPause ) {
 			/*