@wordpress/edit-post 6.16.0 → 6.17.0

package/src/components/header/index.js

@@ -10,6 +10,7 @@ import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -23,13 +24,12 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
-function Header( { setEntitiesSavedStatesCallback } ) {
+function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
-		hasReducedUI,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -38,28 +38,47 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			hasReducedUI:
-				select( editPostStore ).isFeatureActive( 'reducedUI' ),
 		} ),
 		[]
 	);
 
 	const isLargeViewport = useViewportMatch( 'large' );
 
-	const classes = classnames( 'edit-post-header', {
-		'has-reduced-ui': hasReducedUI,
-	} );
+	const classes = classnames( 'edit-post-header' );
+
+	const slideY = {
+		hidden: isDistractionFree ? { y: '-50' } : { y: 0 },
+		hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+	};
+
+	const slideX = {
+		hidden: isDistractionFree ? { x: '-100%' } : { x: 0 },
+		hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+	};
 
 	return (
 		<div className={ classes }>
 			<MainDashboardButton.Slot>
-				<FullscreenModeClose showTooltip />
+				<motion.div
+					variants={ slideX }
+					transition={ { type: 'tween', delay: 0.8 } }
+				>
+					<FullscreenModeClose showTooltip />
+				</motion.div>
 			</MainDashboardButton.Slot>
-			<div className="edit-post-header__toolbar">
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="edit-post-header__toolbar"
+			>
 				<HeaderToolbar />
 				<TemplateTitle />
-			</div>
-			<div className="edit-post-header__settings">
+			</motion.div>
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="edit-post-header__settings"
+			>
 				{ ! isPublishSidebarOpened && (
 					// This button isn't completely hidden by the publish sidebar.
 					// We can't hide the whole toolbar when the publish sidebar is open because
@@ -93,7 +112,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				{ showIconLabels && ! isLargeViewport && (
 					<MoreMenu showIconLabels={ showIconLabels } />
 				) }
-			</div>
+			</motion.div>
 		</div>
 	);
 }

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

@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 							scope="core/edit-post"
 						/>
 					) }
-					<WritingMenu />
+					<WritingMenu onClose={ onClose } />
 					<ModeSwitcher />
 					<ActionItem.Slot
 						name="core/edit-post/plugin-more-menu"

package/src/components/header/style.scss

@@ -200,3 +200,47 @@
 		}
 	}
 }
+
+.is-distraction-free {
+	.interface-interface-skeleton__header {
+		border-bottom: none;
+	}
+
+	.edit-post-header {
+		backdrop-filter: blur(20px) !important;
+		background-color: rgba(255, 255, 255, 0.9);
+		border-bottom: 1px solid #e0e0e0;
+		position: absolute;
+		width: 100%;
+
+
+		// hide some parts
+		& > .edit-post-header__settings > .editor-post-preview {
+			visibility: hidden;
+		}
+
+		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
+		& > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle,
+		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
+		& > .edit-post-header__settings > .interface-pinned-items {
+			display: none;
+		}
+
+	}
+
+	// We need ! important because we override inline styles
+	// set by the motion component.
+	.interface-interface-skeleton__header:focus-within {
+		opacity: 1 !important;
+		div {
+			transform: translateX(0) translateZ(0) !important;
+		}
+
+	}
+
+	.components-editor-notices__dismissible {
+		position: absolute;
+		z-index: 35;
+	}
+
+}

package/src/components/header/writing-menu/index.js

@@ -1,13 +1,51 @@
 /**
  * WordPress dependencies
  */
+import { useSelect, useDispatch } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as postEditorStore } from '../../../store';
+
+function WritingMenu( { onClose } ) {
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
+
+	const blocks = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks(),
+		[]
+	);
+
+	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
+		useDispatch( postEditorStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core/edit-post', 'fixedToolbar', false );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+		onClose();
+		if ( ! isDistractionFree ) {
+			selectBlock( blocks[ 0 ].clientId );
+		}
+	};
 
-function WritingMenu() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	if ( ! isLargeViewport ) {
 		return null;
@@ -17,6 +55,7 @@ function WritingMenu() {
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
+				disabled={ isDistractionFree }
 				name="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
@@ -37,11 +76,21 @@ function WritingMenu() {
 				scope="core/edit-post"
 				name="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
-				info={ __( 'Work without distraction' ) }
+				info={ __( 'Show and hide admin UI' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
+			<PreferenceToggleMenuItem
+				scope="core/edit-post"
+				name="distractionFree"
+				toggleHandler={ toggleDistractionFree }
+				label={ __( 'Distraction free' ) }
+				info={ __( 'Write with calmness' ) }
+				messageActivated={ __( 'Distraction free mode activated' ) }
+				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
+				shortcut={ displayShortcut.primaryShift( '\\' ) }
+			/>
 		</MenuGroup>
 	);
 }

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

@@ -7,9 +7,11 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -18,23 +20,39 @@ import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
 	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
-		useSelect( editPostStore );
+	const {
+		getEditorMode,
+		isEditorSidebarOpened,
+		isListViewOpened,
+		isFeatureActive,
+	} = useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
 
+	const { createInfoNotice } = useDispatch( noticesStore );
+
 	const {
 		switchEditorMode,
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		toggleFeature,
 		setIsListViewOpened,
+		setIsInserterOpened,
 	} = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core/edit-post', 'fixedToolbar', false );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+	};
+
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-mode',
@@ -46,6 +64,16 @@ function KeyboardShortcuts() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/edit-post/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle disrtaction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/edit-post/toggle-fullscreen',
 			category: 'global',
@@ -135,6 +163,24 @@ function KeyboardShortcuts() {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
+	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
+		closeGeneralSidebar();
+		setIsListViewOpened( false );
+		toggleDistractionFree();
+		toggleFeature( 'distractionFree' );
+		const modeState = isFeatureActive( 'distractionFree' )
+			? __( 'on' )
+			: __( 'off' );
+		createInfoNotice(
+			// translators: Mode of distraction free can be 'on' or 'off';
+			sprintf( __( 'Distraction free mode turned %s.' ), modeState ),
+			{
+				speak: true,
+				type: 'snackbar',
+			}
+		);
+	} );
+
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.

package/src/components/layout/index.js

@@ -16,7 +16,7 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -82,7 +82,7 @@ function Layout( { styles } ) {
 		isInserterOpened,
 		isListViewOpened,
 		showIconLabels,
-		hasReducedUI,
+		isDistractionFree,
 		showBlockBreadcrumbs,
 		isTemplateMode,
 		documentLabel,
@@ -115,8 +115,8 @@ function Layout( { styles } ) {
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			hasReducedUI:
-				select( editPostStore ).isFeatureActive( 'reducedUI' ),
+			isDistractionFree:
+				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
@@ -124,11 +124,19 @@ function Layout( { styles } ) {
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 		};
 	}, [] );
+	const [ distractionFree, setDistractionFree ] =
+		useState( isDistractionFree );
+
+	useEffect( () => {
+		setDistractionFree( isDistractionFree );
+	}, [ isDistractionFree ] );
+
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
 		'show-icon-labels': showIconLabels,
+		'is-distraction-free': isDistractionFree,
 	} );
 	const openSidebarPanel = () =>
 		openGeneralSidebar(
@@ -199,6 +207,7 @@ function Layout( { styles } ) {
 			<EditorKeyboardShortcutsRegister />
 			<SettingsSidebar />
 			<InterfaceSkeleton
+				isDistractionFree={ distractionFree }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -206,11 +215,13 @@ function Layout( { styles } ) {
 				} }
 				header={
 					<Header
+						isDistractionFree={ distractionFree }
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
 					/>
 				}
+				editorNotices={ <EditorNotices /> }
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
 					( ! isMobileViewport || sidebarIsOpened ) && (
@@ -236,7 +247,7 @@ function Layout( { styles } ) {
 				notices={ <EditorSnackbars /> }
 				content={
 					<>
-						<EditorNotices />
+						{ ! isDistractionFree && <EditorNotices /> }
 						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 							<TextEditor />
 						) }
@@ -252,11 +263,10 @@ function Layout( { styles } ) {
 						{ isMobileViewport && sidebarIsOpened && (
 							<ScrollLock />
 						) }
-						<BlockStyles.Slot scope="core/block-inspector" />
 					</>
 				}
 				footer={
-					! hasReducedUI &&
+					! isDistractionFree &&
 					showBlockBreadcrumbs &&
 					! isMobileViewport &&
 					isRichEditingEnabled &&

package/src/components/layout/style.scss

@@ -11,6 +11,13 @@
 	padding-left: 16px;
 	padding-right: 16px;
 }
+
+.is-distraction-free {
+	.components-editor-notices__snackbar {
+		bottom: 20px;
+	}
+}
+
 @include editor-left(".edit-post-layout .components-editor-notices__snackbar");
 
 .edit-post-layout .editor-post-publish-panel {

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

@@ -24,6 +24,7 @@ import {
 	PreferencesModalTabs,
 	PreferencesModalSection,
 } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -44,26 +45,40 @@ const MODAL_NAME = 'edit-post/preferences';
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
-	const isModalActive = useSelect(
-		( select ) => select( editPostStore ).isModalActive( MODAL_NAME ),
-		[]
-	);
-	const showBlockBreadcrumbsOption = useSelect(
+	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { getEditorMode, isFeatureActive } = select( editPostStore );
+			const modalActive =
+				select( editPostStore ).isModalActive( MODAL_NAME );
 			const mode = getEditorMode();
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
-			const hasReducedUI = isFeatureActive( 'reducedUI' );
-			return (
-				! hasReducedUI &&
-				isLargeViewport &&
-				isRichEditingEnabled &&
-				mode === 'visual'
-			);
+			const isDistractionFreeEnabled =
+				isFeatureActive( 'distractionFree' );
+			return [
+				modalActive,
+				! isDistractionFreeEnabled &&
+					isLargeViewport &&
+					isRichEditingEnabled &&
+					mode === 'visual',
+				isDistractionFreeEnabled,
+			];
 		},
 		[ isLargeViewport ]
 	);
+
+	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editPostStore );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core/edit-post', 'fixedToolbar', false );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+	};
+
 	const sections = useMemo(
 		() => [
 			{
@@ -95,6 +110,14 @@ export default function EditPostPreferencesModal() {
 								'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={ __(
@@ -116,13 +139,6 @@ export default function EditPostPreferencesModal() {
 								) }
 								label={ __( 'Always open list view' ) }
 							/>
-							<EnableFeature
-								featureName="reducedUI"
-								help={ __(
-									'Compacts options and outlines in the toolbar.'
-								) }
-								label={ __( 'Reduce the interface' ) }
-							/>
 							<EnableFeature
 								featureName="themeStyles"
 								help={ __(

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

@@ -17,7 +17,10 @@ export default compose(
 			isChecked: isFeatureActive( featureName ),
 		};
 	} ),
-	withDispatch( ( dispatch, { featureName } ) => ( {
-		onChange: () => dispatch( editPostStore ).toggleFeature( featureName ),
+	withDispatch( ( dispatch, { featureName, onToggle = () => {} } ) => ( {
+		onChange: () => {
+			onToggle();
+			dispatch( editPostStore ).toggleFeature( featureName );
+		},
 	} ) )
 )( BaseOption );