Skip to content

Commit

Permalink
Fix DFM ui toggling bugs (#59061)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@draganescu @youknowriad @scruffian
4 people authored Feb 15, 2024
1 parent acd79ef commit 24cf6d9
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 26 deletions.
25 changes: 16 additions & 9 deletions packages/edit-post/src/components/editor-initialization/listener-hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ) {
Expand Down
40 changes: 40 additions & 0 deletions packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ describe( 'listener hook tests', () => {
isViewportMatch: jest.fn(),
},
},
'core/preferences': {
...storeConfig,
selectors: {
get: jest.fn(),
},
},
[ STORE_NAME ]: {
...storeConfig,
actions: {
Expand Down Expand Up @@ -112,6 +118,7 @@ describe( 'listener hook tests', () => {
'getBlockSelectionStart',
true
);
setMockReturnValue( 'core/preferences', 'get', false );

render( <TestedOutput /> );

Expand All @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@ function Layout( { initialPost } ) {
<PostSyncStatusModal />
<StartPageOptions />
<PluginArea onError={ onPluginAreaError } />
<SettingsSidebar />
{ ! isDistractionFree && <SettingsSidebar /> }
</>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,7 @@ export default function Editor( { isLoading } ) {
( shouldShowListView && <ListViewSidebar /> ) )
}
sidebar={
! isDistractionFree &&
isEditMode &&
isRightSidebarOpen && (
<>
Expand Down
38 changes: 22 additions & 16 deletions packages/editor/src/components/document-tools/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function DocumentTools( {
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editorStore );
const {
isDistractionFree,
isInserterOpened,
isListViewOpen,
listViewShortcut,
Expand All @@ -69,6 +70,7 @@ function DocumentTools( {
listViewToggleRef: getListViewToggleRef(),
hasFixedToolbar: getSettings().hasFixedToolbar,
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
};
}, [] );

Expand Down Expand Up @@ -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 }
Expand Down

1 comment on commit 24cf6d9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 24cf6d9.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7916017710
📝 Reported issues:

Please sign in to comment.