@wordpress/edit-site 5.13.0 → 5.14.0

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,
@@ -60,6 +61,7 @@ export default function HeaderEditMode() {
 		isListViewOpen,
 		listViewShortcut,
 		isVisualMode,
+		isDistractionFree,
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
@@ -99,15 +101,23 @@ export default function HeaderEditMode() {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
+
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
 		setIsListViewOpened,
 	} = useDispatch( editSiteStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const disableMotion = useReducedMotion();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -156,6 +166,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', {
@@ -164,36 +187,47 @@ 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
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
+								{ ! hasFixedToolbar && (
+									<ToolbarItem
+										as={ ToolSelector }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
+										disabled={ ! isVisualMode }
+									/>
+								) }
 								<ToolbarItem
 									as={ UndoButton }
 									showTooltip={ ! showIconLabels }
@@ -208,57 +242,71 @@ 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 &&
+									! hasFixedToolbar && (
+										<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(
@@ -290,9 +338,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

@@ -2,37 +2,62 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useReducer } from '@wordpress/element';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 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 {
+	ActionItem,
+	MoreMenuDropdown,
+	store as interfaceStore,
+} from '@wordpress/interface';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
-import EditSitePreferencesModal from '../../preferences-modal';
+import {
+	KEYBOARD_SHORTCUT_HELP_MODAL_NAME,
+	default as KeyboardShortcutHelpModal,
+} from '../../keyboard-shortcut-help-modal';
+import {
+	PREFERENCES_MODAL_NAME,
+	default as EditSitePreferencesModal,
+} from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 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(
-		( isActive ) => ! isActive,
-		false
+	const registry = useRegistry();
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
+		[]
 	);
 
-	const [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(
-		( isActive ) => ! isActive,
-		false
-	);
+	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
+		useDispatch( siteEditorStore );
+	const { openModal } = useDispatch( interfaceStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
 
-	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
 
 	return (
 		<>
@@ -48,6 +73,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,18 +97,38 @@ 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
-								onClick={ toggleModal }
+								onClick={ () =>
+									openModal(
+										KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+									)
+								}
 								shortcut={ displayShortcut.access( 'h' ) }
 							>
 								{ __( 'Keyboard shortcuts' ) }
@@ -111,21 +157,19 @@ export default function MoreMenu( { showIconLabels } ) {
 							/>
 						</MenuGroup>
 						<MenuGroup>
-							<MenuItem onClick={ togglePreferencesModal }>
+							<MenuItem
+								onClick={ () =>
+									openModal( PREFERENCES_MODAL_NAME )
+								}
+							>
 								{ __( 'Preferences' ) }
 							</MenuItem>
 						</MenuGroup>
 					</>
 				) }
 			</MoreMenuDropdown>
-			<KeyboardShortcutHelpModal
-				isModalActive={ isModalActive }
-				toggleModal={ toggleModal }
-			/>
-			<EditSitePreferencesModal
-				isModalActive={ isPreferencesModalActive }
-				toggleModal={ togglePreferencesModal }
-			/>
+			<KeyboardShortcutHelpModal />
+			<EditSitePreferencesModal />
 		</>
 	);
 }

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -8,8 +8,12 @@ import classnames from 'classnames';
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useSelect } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { store as interfaceStore } from '@wordpress/interface';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,6 +22,9 @@ import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
 
+export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
+	'edit-site/keyboard-shortcut-help';
+
 const ShortcutList = ( { shortcuts } ) => (
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
@@ -82,14 +89,21 @@ const ShortcutCategorySection = ( {
 	);
 };
 
-export default function KeyboardShortcutHelpModal( {
-	isModalActive,
-	toggleModal,
-} ) {
+export default function KeyboardShortcutHelpModal() {
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive(
+			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+		)
+	);
+	const { closeModal, openModal } = useDispatch( interfaceStore );
+	const toggleModal = () =>
+		isModalActive
+			? closeModal()
+			: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 	if ( ! isModalActive ) {
 		return null;
 	}
-
 	return (
 		<Modal
 			className="edit-site-keyboard-shortcut-help-modal"

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;