From 1fa67f69ccc692cba15ab76293fa7ccdbf4c9cdf Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 20 Oct 2022 11:00:02 +0100
Subject: [PATCH] Small follow-ups to the distraction free mode PR

---
 .../edit-post/src/components/header/index.js  |  5 +++-
 .../src/components/header/more-menu/index.js  |  2 +-
 .../src/components/header/style.scss          |  1 -
 .../components/header/writing-menu/index.js   | 24 ++++++++++---------
 .../edit-post/src/components/layout/index.js  |  9 +------
 .../preference-toggle-menu-item/index.js      |  4 ++--
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 6a7e72f4b1fd2..ed4a3ca94609e 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -24,12 +24,13 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
-function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
+function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
+		isDistractionFree,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -38,6 +39,8 @@ function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			isDistractionFree:
+				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 		} ),
 		[]
 	);
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index e134c7ac13194..6085ce65e51e5 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 							scope="core/edit-post"
 						/>
 					) }
-					<WritingMenu onClose={ onClose } />
+					<WritingMenu />
 					<ModeSwitcher />
 					<ActionItem.Slot
 						name="core/edit-post/plugin-more-menu"
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 1228688f25709..7babb010fe717 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -242,5 +242,4 @@
 		position: absolute;
 		z-index: 35;
 	}
-
 }
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index 3d6c3e75a16ea..6cea56392381e 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -17,7 +17,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as postEditorStore } from '../../../store';
 
-function WritingMenu( { onClose } ) {
+function WritingMenu() {
+	const registry = useRegistry();
 	const isDistractionFree = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree,
@@ -36,14 +37,15 @@ function WritingMenu( { onClose } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-		onClose();
-		if ( ! isDistractionFree ) {
-			selectBlock( blocks[ 0 ].clientId );
-		}
+		registry.batch( () => {
+			setPreference( 'core/edit-post', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			if ( ! isDistractionFree && !! blocks.length ) {
+				selectBlock( blocks[ 0 ].clientId );
+			}
+		} );
 	};
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -84,7 +86,7 @@ function WritingMenu( { onClose } ) {
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
 				name="distractionFree"
-				toggleHandler={ toggleDistractionFree }
+				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
 				info={ __( 'Write with calmness' ) }
 				messageActivated={ __( 'Distraction free mode activated' ) }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index c1ecb74676f3a..3385d2624c451 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -124,12 +124,6 @@ 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,
@@ -207,7 +201,7 @@ function Layout( { styles } ) {
 			<EditorKeyboardShortcutsRegister />
 			<SettingsSidebar />
 			<InterfaceSkeleton
-				isDistractionFree={ distractionFree }
+				isDistractionFree={ isDistractionFree }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -215,7 +209,6 @@ function Layout( { styles } ) {
 				} }
 				header={
 					<Header
-						isDistractionFree={ distractionFree }
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js
index 322dd236718c0..2797e6455bc0b 100644
--- a/packages/preferences/src/components/preference-toggle-menu-item/index.js
+++ b/packages/preferences/src/components/preference-toggle-menu-item/index.js
@@ -20,7 +20,7 @@ export default function PreferenceToggleMenuItem( {
 	messageActivated,
 	messageDeactivated,
 	shortcut,
-	toggleHandler = () => null,
+	onToggle = () => null,
 	disabled = false,
 } ) {
 	const isActive = useSelect(
@@ -55,7 +55,7 @@ export default function PreferenceToggleMenuItem( {
 			icon={ isActive && check }
 			isSelected={ isActive }
 			onClick={ () => {
-				toggleHandler();
+				onToggle();
 				toggle( scope, name );
 				speakMessage();
 			} }