Fix DFM ui toggling bugs (#59061)

* don't open post editor inspector if DFM is on, hide list view toggle in site editor if DFM is on, don't render post editor inspector if DFM is on * udpdate tests with the new call for dfm pref and add two tests for when dfm is on Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org>
WordPress · Feb 20, 2024 · b042b49 · b042b49
1 parent f060994
commit b042b49
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 26 deletions.
diff --git a/packages/edit-post/src/components/editor-initialization/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -22,19 +23,25 @@ import {
  * @param {number} postId The current post id.
  */
 export const useBlockSelectionListener = ( postId ) => {
-	const { hasBlockSelection, isEditorSidebarOpened } = useSelect(
-		( select ) => ( {
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			isEditorSidebarOpened: select( STORE_NAME ).isEditorSidebarOpened(),
-		} ),
-		[ postId ]
-	);
+	const { hasBlockSelection, isEditorSidebarOpened, isDistractionFree } =
+		useSelect(
+			( select ) => {
+				const { get } = select( preferencesStore );
+				return {
+					hasBlockSelection:
+						!! select( blockEditorStore ).getBlockSelectionStart(),
+					isEditorSidebarOpened:
+						select( STORE_NAME ).isEditorSidebarOpened(),
+					isDistractionFree: get( 'core', 'distractionFree' ),
+				};
+			},
+			[ postId ]
+		);
 
 	const { openGeneralSidebar } = useDispatch( STORE_NAME );
 
 	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) {
+		if ( ! isEditorSidebarOpened || isDistractionFree ) {
 			return;
 		}
 		if ( hasBlockSelection ) {

diff --git a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
@@ -44,6 +44,12 @@ describe( 'listener hook tests', () => {
 				isViewportMatch: jest.fn(),
 			},
 		},
+		'core/preferences': {
+			...storeConfig,
+			selectors: {
+				get: jest.fn(),
+			},
+		},
 		[ STORE_NAME ]: {
 			...storeConfig,
 			actions: {
@@ -112,6 +118,7 @@ describe( 'listener hook tests', () => {
 				'getBlockSelectionStart',
 				true
 			);
+			setMockReturnValue( 'core/preferences', 'get', false );
 
 			render( <TestedOutput /> );
 
@@ -120,19 +127,52 @@ describe( 'listener hook tests', () => {
 			).toHaveBeenCalledWith( 'edit-post/block' );
 		} );
 		it( 'opens document sidebar if block is not selected', () => {
+			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
 			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
 			setMockReturnValue(
 				'core/block-editor',
 				'getBlockSelectionStart',
 				false
 			);
+			setMockReturnValue( 'core/preferences', 'get', false );
 
 			render( <TestedOutput /> );
 
 			expect(
 				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
 			).toHaveBeenCalledWith( 'edit-post/document' );
 		} );
+		it( 'does not open block sidebar if block is selected and distraction free mode is on', () => {
+			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
+			setMockReturnValue(
+				'core/block-editor',
+				'getBlockSelectionStart',
+				true
+			);
+			setMockReturnValue( 'core/preferences', 'get', true );
+
+			render( <TestedOutput /> );
+
+			expect(
+				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
+			).toHaveBeenCalledTimes( 0 );
+		} );
+		it( 'does not open document sidebar if block is not selected and distraction free is on', () => {
+			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
+			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
+			setMockReturnValue(
+				'core/block-editor',
+				'getBlockSelectionStart',
+				false
+			);
+			setMockReturnValue( 'core/preferences', 'get', true );
+
+			render( <TestedOutput /> );
+
+			expect(
+				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
+			).toHaveBeenCalledTimes( 0 );
+		} );
 	} );
 
 	describe( 'useUpdatePostLinkListener', () => {

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -385,7 +385,7 @@ function Layout( { initialPost } ) {
 			<PostSyncStatusModal />
 			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
-			<SettingsSidebar />
+			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>
 	);
 }

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -263,6 +263,7 @@ export default function Editor( { isLoading } ) {
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
+							! isDistractionFree &&
 							isEditMode &&
 							isRightSidebarOpen && (
 								<>

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
@@ -46,6 +46,7 @@ function DocumentTools( {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
+		isDistractionFree,
 		isInserterOpened,
 		isListViewOpen,
 		listViewShortcut,
@@ -69,6 +70,7 @@ function DocumentTools( {
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
 		};
 	}, [] );
 
@@ -158,22 +160,26 @@ function DocumentTools( {
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
 						/>
-						<ToolbarItem
-							as={ Button }
-							className="editor-document-tools__document-overview-toggle"
-							icon={ listView }
-							disabled={ disableBlockTools }
-							isPressed={ isListViewOpen }
-							/* translators: button label text should, if possible, be under 16 characters. */
-							label={ listViewLabel }
-							onClick={ toggleListView }
-							shortcut={ listViewShortcut }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							aria-expanded={ isListViewOpen }
-							ref={ listViewToggleRef }
-							size="compact"
-						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								as={ Button }
+								className="editor-document-tools__document-overview-toggle"
+								icon={ listView }
+								disabled={ disableBlockTools }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ listViewLabel }
+								onClick={ toggleListView }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								aria-expanded={ isListViewOpen }
+								ref={ listViewToggleRef }
+								size="compact"
+							/>
+						) }
 					</>
 				) }
 				{ children }