From b042b49f87e68cfe7de6c0dc5a90e56bba51a627 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 15 Feb 2024 14:38:39 +0200 Subject: [PATCH] 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 Co-authored-by: youknowriad Co-authored-by: scruffian --- .../editor-initialization/listener-hooks.js | 25 +++++++----- .../test/listener-hooks.js | 40 +++++++++++++++++++ .../edit-post/src/components/layout/index.js | 2 +- .../edit-site/src/components/editor/index.js | 1 + .../src/components/document-tools/index.js | 38 ++++++++++-------- 5 files changed, 80 insertions(+), 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 index 57f5f67721ba7..73872b4d7110e 100644 --- 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 index c263d99398297..5087d303fafe1 100644 --- 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( ); @@ -120,12 +127,14 @@ 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( ); @@ -133,6 +142,37 @@ describe( 'listener hook tests', () => { 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( ); + + 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( ); + + 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 index 9dd7314357e04..eb2b696fa3970 100644 --- 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 } ) { - + { ! isDistractionFree && } ); } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 9c95755db2803..6563374858a37 100644 --- 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 && ) ) } sidebar={ + ! isDistractionFree && isEditMode && isRightSidebarOpen && ( <> diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 05907654fa9b8..26adcb1bb725a 100644 --- 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" /> - + { ! isDistractionFree && ( + + ) } ) } { children }