@wordpress/edit-post 7.18.0 → 7.18.1-next.5a1d1283.0

package/src/hooks/commands/use-common-commands.js

@@ -33,6 +33,7 @@ export default function useCommonCommands() {
 		closeGeneralSidebar,
 		switchEditorMode,
 		setIsListViewOpened,
+		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { openModal } = useDispatch( interfaceStore );
 	const {
@@ -41,6 +42,7 @@ export default function useCommonCommands() {
 		isListViewOpen,
 		isPublishSidebarEnabled,
 		showBlockBreadcrumbs,
+		isDistractionFree,
 	} = useSelect( ( select ) => {
 		const { getEditorMode, isListViewOpened, isFeatureActive } =
 			select( editPostStore );
@@ -53,6 +55,10 @@ export default function useCommonCommands() {
 			isPublishSidebarEnabled:
 				select( editorStore ).isPublishSidebarEnabled(),
 			showBlockBreadcrumbs: isFeatureActive( 'showBlockBreadcrumbs' ),
+			isDistractionFree: select( preferencesStore ).get(
+				editPostStore.name,
+				'distractionFree'
+			),
 		};
 	}, [] );
 	const { toggle } = useDispatch( preferencesStore );
@@ -92,7 +98,7 @@ export default function useCommonCommands() {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-post', 'distractionFree' );
+			toggleDistractionFree();
 			close();
 		},
 	} );
@@ -131,6 +137,9 @@ export default function useCommonCommands() {
 		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'fixedToolbar' );
+			if ( isDistractionFree ) {
+				toggleDistractionFree();
+			}
 			close();
 		},
 	} );

package/src/store/actions.js

@@ -26,10 +26,17 @@ import { store as editPostStore } from '.';
  */
 export const openGeneralSidebar =
 	( name ) =>
-	( { registry } ) =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( isDistractionFree ) {
+			dispatch.toggleDistractionFree();
+		}
 		registry
 			.dispatch( interfaceStore )
 			.enableComplementaryArea( editPostStore.name, name );
+	};
 
 /**
  * Returns an action object signalling that the user closed the sidebar.
@@ -210,7 +217,7 @@ export const toggleFeature =
  */
 export const switchEditorMode =
 	( mode ) =>
-	( { registry } ) => {
+	( { dispatch, registry } ) => {
 		registry
 			.dispatch( preferencesStore )
 			.set( 'core/edit-post', 'editorMode', mode );
@@ -220,6 +227,15 @@ export const switchEditorMode =
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
 
+		if (
+			mode === 'text' &&
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-post', 'distractionFree' )
+		) {
+			dispatch.toggleDistractionFree();
+		}
+
 		const message =
 			mode === 'visual'
 				? __( 'Visual editor selected' )
@@ -479,12 +495,20 @@ export function setIsInserterOpened( value ) {
  * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
  * @return {Object} Action object.
  */
-export function setIsListViewOpened( isOpen ) {
-	return {
-		type: 'SET_IS_LIST_VIEW_OPENED',
-		isOpen,
+export const setIsListViewOpened =
+	( isOpen ) =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( isDistractionFree && isOpen ) {
+			dispatch.toggleDistractionFree();
+		}
+		dispatch( {
+			type: 'SET_IS_LIST_VIEW_OPENED',
+			isOpen,
+		} );
 	};
-}
 
 /**
  * Returns an action object used to switch to template editing.
@@ -590,3 +614,46 @@ export const initializeMetaBoxes =
 			type: 'META_BOXES_INITIALIZED',
 		} );
 	};
+
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ */
+export const toggleDistractionFree =
+	() =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( ! isDistractionFree ) {
+			registry.batch( () => {
+				registry
+					.dispatch( preferencesStore )
+					.set( 'core/edit-post', 'fixedToolbar', false );
+				dispatch.setIsInserterOpened( false );
+				dispatch.setIsListViewOpened( false );
+				dispatch.closeGeneralSidebar();
+			} );
+		}
+		registry.batch( () => {
+			registry
+				.dispatch( preferencesStore )
+				.set(
+					'core/edit-post',
+					'distractionFree',
+					! isDistractionFree
+				);
+			registry
+				.dispatch( noticesStore )
+				.createInfoNotice(
+					isDistractionFree
+						? __( 'Distraction free off.' )
+						: __( 'Distraction free on.' ),
+					{
+						id: 'core/edit-post/distraction-free-mode/notice',
+						type: 'snackbar',
+					}
+				);
+		} );
+	};

package/src/store/test/actions.js

@@ -53,6 +53,20 @@ describe( 'actions', () => {
 		).toBeNull();
 	} );
 
+	it( 'openGeneralSidebar - should turn off distraction free mode when opening a general sidebar', () => {
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core/edit-post', 'distractionFree', true );
+		registry
+			.dispatch( editPostStore )
+			.openGeneralSidebar( 'edit-post/block' );
+		expect(
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-post', 'distractionFree' )
+		).toBe( false );
+	} );
+
 	it( 'toggleFeature', () => {
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
@@ -102,6 +116,17 @@ describe( 'actions', () => {
 				'text'
 			);
 		} );
+		it( 'should turn off distraction free mode when switching to code editor', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'distractionFree', true );
+			registry.dispatch( editPostStore ).switchEditorMode( 'text' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( false );
+		} );
 	} );
 
 	it( 'togglePinnedPluginItem', () => {
@@ -333,4 +358,54 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'toggleDistractionFree', () => {
+		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
+			// Enable everything that shouldn't be enabled in distraction free mode.
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'fixedToolbar', true );
+			registry.dispatch( editPostStore ).setIsListViewOpened( true );
+			registry
+				.dispatch( editPostStore )
+				.openGeneralSidebar( 'edit-post/block' );
+			// Initial state is falsy.
+			registry.dispatch( editPostStore ).toggleDistractionFree();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'fixedToolbar' )
+			).toBe( false );
+			expect( registry.select( editPostStore ).isListViewOpened() ).toBe(
+				false
+			);
+			expect( registry.select( editPostStore ).isInserterOpened() ).toBe(
+				false
+			);
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( editPostStore.name )
+			).toBeNull();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should turn off distraction free mode when opening the list view', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'distractionFree', true );
+			registry.dispatch( editPostStore ).setIsListViewOpened( true );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -14,7 +14,7 @@ import {
 	listViewPanel,
 } from '../reducer';
 
-import { setIsInserterOpened, setIsListViewOpened } from '../actions';
+import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'isSavingMetaBoxes', () => {
@@ -135,13 +135,19 @@ describe( 'state', () => {
 
 		it( 'should close the inserter when opening the list view panel', () => {
 			expect(
-				blockInserterPanel( true, setIsListViewOpened( true ) )
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
 			).toBe( false );
 		} );
 
 		it( 'should not change the state when closing the list view panel', () => {
 			expect(
-				blockInserterPanel( true, setIsListViewOpened( false ) )
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
 			).toBe( true );
 		} );
 	} );
@@ -156,12 +162,18 @@ describe( 'state', () => {
 		} );
 
 		it( 'should set the open state of the list view panel', () => {
-			expect( listViewPanel( false, setIsListViewOpened( true ) ) ).toBe(
-				true
-			);
-			expect( listViewPanel( true, setIsListViewOpened( false ) ) ).toBe(
-				false
-			);
+			expect(
+				listViewPanel( false, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
+			).toBe( true );
+			expect(
+				listViewPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
+			).toBe( false );
 		} );
 
 		it( 'should close the list view when opening the inserter panel', () => {