@wordpress/edit-site 5.17.0 → 5.18.0

package/src/hooks/commands/use-edit-mode-commands.js

@@ -14,6 +14,7 @@ import {
 	blockDefault,
 	code,
 	keyboard,
+	listView,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -194,28 +195,38 @@ function useEditUICommands() {
 	const {
 		openGeneralSidebar,
 		closeGeneralSidebar,
-		setIsInserterOpened,
+		toggleDistractionFree,
 		setIsListViewOpened,
 		switchEditorMode,
 	} = useDispatch( editSiteStore );
-	const { canvasMode, editorMode, activeSidebar, showBlockBreadcrumbs } =
-		useSelect(
-			( select ) => ( {
-				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-				editorMode: select( editSiteStore ).getEditorMode(),
-				activeSidebar: select(
-					interfaceStore
-				).getActiveComplementaryArea( editSiteStore.name ),
-				showBlockBreadcrumbs: select( preferencesStore ).get(
-					'core/edit-site',
-					'showBlockBreadcrumbs'
-				),
-			} ),
-			[]
-		);
+	const {
+		canvasMode,
+		editorMode,
+		activeSidebar,
+		showBlockBreadcrumbs,
+		isListViewOpen,
+		isDistractionFree,
+	} = useSelect( ( select ) => {
+		const { isListViewOpened, getEditorMode } = select( editSiteStore );
+		return {
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			editorMode: getEditorMode(),
+			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			),
+			showBlockBreadcrumbs: select( preferencesStore ).get(
+				'core/edit-site',
+				'showBlockBreadcrumbs'
+			),
+			isListViewOpen: isListViewOpened(),
+			isDistractionFree: select( preferencesStore ).get(
+				editSiteStore.name,
+				'distractionFree'
+			),
+		};
+	}, [] );
 	const { openModal } = useDispatch( interfaceStore );
-	const { get: getPreference } = useSelect( preferencesStore );
-	const { set: setPreference, toggle } = useDispatch( preferencesStore );
+	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
@@ -265,20 +276,7 @@ function useEditUICommands() {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
 		callback: ( { close } ) => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-			toggle( 'core/edit-site', 'distractionFree' );
-			createInfoNotice(
-				getPreference( 'core/edit-site', 'distractionFree' )
-					? __( 'Distraction free on.' )
-					: __( 'Distraction free off.' ),
-				{
-					id: 'core/edit-site/distraction-free-mode/notice',
-					type: 'snackbar',
-				}
-			);
+			toggleDistractionFree();
 			close();
 		},
 	} );
@@ -288,6 +286,9 @@ function useEditUICommands() {
 		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'fixedToolbar' );
+			if ( isDistractionFree ) {
+				toggleDistractionFree();
+			}
 			close();
 		},
 	} );
@@ -341,6 +342,16 @@ function useEditUICommands() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-list-view',
+		label: __( 'Toggle list view' ),
+		icon: listView,
+		callback: ( { close } ) => {
+			setIsListViewOpened( ! isListViewOpen );
+			close();
+		},
+	} );
+
 	return {
 		isLoading: false,
 		commands,

package/src/index.js

@@ -43,7 +43,7 @@ export function initializeEditor( id, settings ) {
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
 
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	const coreBlocks = __experimentalGetCoreBlocks().filter(
 		( { name } ) => name !== 'core/freeform'
 	);

package/src/store/actions.js

@@ -373,12 +373,20 @@ export function updateSettings( settings ) {
  * @param {boolean} isOpen If true, opens the list view. If false, closes it.
  *                         It does not toggle the state, but sets it directly.
  */
-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-site', 'distractionFree' );
+		if ( isDistractionFree && isOpen ) {
+			dispatch.toggleDistractionFree();
+		}
+		dispatch( {
+			type: 'SET_IS_LIST_VIEW_OPENED',
+			isOpen,
+		} );
 	};
-}
 
 /**
  * Sets whether the save view panel should be open.
@@ -533,7 +541,13 @@ export const revertTemplate =
  */
 export const openGeneralSidebar =
 	( name ) =>
-	( { registry } ) => {
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-site', 'distractionFree' );
+		if ( isDistractionFree ) {
+			dispatch.toggleDistractionFree();
+		}
 		registry
 			.dispatch( interfaceStore )
 			.enableComplementaryArea( editSiteStoreName, name );
@@ -552,7 +566,7 @@ export const closeGeneralSidebar =
 
 export const switchEditorMode =
 	( mode ) =>
-	( { registry } ) => {
+	( { dispatch, registry } ) => {
 		registry
 			.dispatch( 'core/preferences' )
 			.set( 'core/edit-site', 'editorMode', mode );
@@ -565,6 +579,12 @@ export const switchEditorMode =
 		if ( mode === 'visual' ) {
 			speak( __( 'Visual editor selected' ), 'assertive' );
 		} else if ( mode === 'text' ) {
+			const isDistractionFree = registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'distractionFree' );
+			if ( isDistractionFree ) {
+				dispatch.toggleDistractionFree();
+			}
 			speak( __( 'Code editor selected' ), 'assertive' );
 		}
 	};
@@ -587,3 +607,46 @@ export const setHasPageContentFocus =
 			hasPageContentFocus,
 		} );
 	};
+
+/**
+ * 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-site', 'distractionFree' );
+		if ( ! isDistractionFree ) {
+			registry.batch( () => {
+				registry
+					.dispatch( preferencesStore )
+					.set( 'core/edit-site', 'fixedToolbar', false );
+				dispatch.setIsInserterOpened( false );
+				dispatch.setIsListViewOpened( false );
+				dispatch.closeGeneralSidebar();
+			} );
+		}
+		registry.batch( () => {
+			registry
+				.dispatch( preferencesStore )
+				.set(
+					'core/edit-site',
+					'distractionFree',
+					! isDistractionFree
+				);
+			registry
+				.dispatch( noticesStore )
+				.createInfoNotice(
+					isDistractionFree
+						? __( 'Distraction free off.' )
+						: __( 'Distraction free on.' ),
+					{
+						id: 'core/edit-site/distraction-free-mode/notice',
+						type: 'snackbar',
+					}
+				);
+		} );
+	};

package/src/store/test/actions.js

@@ -215,6 +215,94 @@ describe( 'actions', () => {
 				false
 			);
 		} );
+		it( 'should turn off distraction free mode when opening the list view', () => {
+			const registry = createRegistryWithStores();
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-site', 'distractionFree', true );
+			registry.dispatch( editSiteStore ).setIsListViewOpened( true );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'openGeneralSidebar', () => {
+		it( 'should turn off distraction free mode when opening a general sidebar', () => {
+			const registry = createRegistryWithStores();
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-site', 'distractionFree', true );
+
+			registry
+				.dispatch( editSiteStore )
+				.openGeneralSidebar( 'edit-site/global-styles' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'switchEditorMode', () => {
+		it( 'should turn off distraction free mode when switching to code editor', () => {
+			const registry = createRegistryWithStores();
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-site', 'distractionFree', true );
+			registry.dispatch( editSiteStore ).switchEditorMode( 'visual' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'distractionFree' )
+			).toBe( true );
+			registry.dispatch( editSiteStore ).switchEditorMode( 'text' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'toggleDistractionFree', () => {
+		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
+			const registry = createRegistryWithStores();
+			// Enable everything that shouldn't be enabled in distraction free mode.
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-site', 'fixedToolbar', true );
+			registry.dispatch( editSiteStore ).setIsListViewOpened( true );
+			registry
+				.dispatch( editSiteStore )
+				.openGeneralSidebar( 'edit-site/global-styles' );
+			// Initial state is falsy.
+			registry.dispatch( editSiteStore ).toggleDistractionFree();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'fixedToolbar' )
+			).toBe( false );
+			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
+				false
+			);
+			expect( registry.select( editSiteStore ).isInserterOpened() ).toBe(
+				false
+			);
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( editSiteStore.name )
+			).toBeNull();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-site', 'distractionFree' )
+			).toBe( true );
+		} );
 	} );
 
 	describe( 'setHasPageContentFocus', () => {

package/src/store/test/reducer.js

@@ -14,7 +14,7 @@ import {
 	hasPageContentFocus,
 } from '../reducer';
 
-import { setIsInserterOpened, setIsListViewOpened } from '../actions';
+import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'settings()', () => {
@@ -95,13 +95,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 );
 		} );
 	} );
@@ -116,12 +122,19 @@ 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
-			);
+			// registry.dispatch( editSiteStore ).toggleFeature( 'name' );
+			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', () => {

package/src/style.scss

@@ -2,7 +2,7 @@
 
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
-@import "./components/canvas-spinner/style.scss";
+@import "./components/canvas-loader/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";

package/build/components/block-editor/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FOCUSABLE_ENTITIES","exports"],"sources":["@wordpress/edit-site/src/components/block-editor/constants.js"],"sourcesContent":["export const FOCUSABLE_ENTITIES = [\n\t'wp_template_part',\n\t'wp_navigation',\n\t'wp_block',\n];\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAG,CACjC,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV;AAACC,OAAA,CAAAD,kBAAA,GAAAA,kBAAA"}

package/build/components/canvas-spinner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_blockEditor","require","_components","_lockUnlock","_hooks","ProgressBar","Theme","unlock","componentsPrivateApis","useGlobalStyle","blockEditorPrivateApis","CanvasSpinner","id","_highlightedColors$0$","fallbackIndicatorColor","backgroundColor","highlightedColors","useStylesPreviewColors","indicatorColor","color","_element","createElement","className","accent","background"],"sources":["@wordpress/edit-site/src/components/canvas-spinner/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from '../global-styles/hooks';\n\nconst { ProgressBar, Theme } = unlock( componentsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport default function CanvasSpinner( { id } ) {\n\tconst [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst indicatorColor =\n\t\thighlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;\n\n\treturn (\n\t\t<div className=\"edit-site-canvas-spinner\">\n\t\t\t<Theme accent={ indicatorColor } background={ backgroundColor }>\n\t\t\t\t<ProgressBar id={ id } />\n\t\t\t</Theme>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI,WAAW;EAAEC;AAAM,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAC9D,MAAM;EAAEC;AAAe,CAAC,GAAG,IAAAF,kBAAM,EAAEG,wBAAuB,CAAC;AAE5C,SAASC,aAAaA,CAAE;EAAEC;AAAG,CAAC,EAAG;EAAA,IAAAC,qBAAA;EAC/C,MAAM,CAAEC,sBAAsB,CAAE,GAAGL,cAAc,CAAE,YAAa,CAAC;EACjE,MAAM,CAAEM,eAAe,CAAE,GAAGN,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAM;IAAEO;EAAkB,CAAC,GAAG,IAAAC,6BAAsB,EAAC,CAAC;EACtD,MAAMC,cAAc,IAAAL,qBAAA,GACnBG,iBAAiB,CAAE,CAAC,CAAE,EAAEG,KAAK,cAAAN,qBAAA,cAAAA,qBAAA,GAAIC,sBAAsB;EAExD,OACC,IAAAM,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACxC,IAAAF,QAAA,CAAAC,aAAA,EAACf,KAAK;IAACiB,MAAM,EAAGL,cAAgB;IAACM,UAAU,EAAGT;EAAiB,GAC9D,IAAAK,QAAA,CAAAC,aAAA,EAAChB,WAAW;IAACO,EAAE,EAAGA;EAAI,CAAE,CAClB,CACH,CAAC;AAER"}

package/build-module/components/block-editor/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FOCUSABLE_ENTITIES"],"sources":["@wordpress/edit-site/src/components/block-editor/constants.js"],"sourcesContent":["export const FOCUSABLE_ENTITIES = [\n\t'wp_template_part',\n\t'wp_navigation',\n\t'wp_block',\n];\n"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,GAAG,CACjC,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV"}

package/build-module/components/canvas-spinner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","componentsPrivateApis","unlock","useStylesPreviewColors","ProgressBar","Theme","useGlobalStyle","CanvasSpinner","id","_highlightedColors$0$","fallbackIndicatorColor","backgroundColor","highlightedColors","indicatorColor","color","createElement","className","accent","background"],"sources":["@wordpress/edit-site/src/components/canvas-spinner/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from '../global-styles/hooks';\n\nconst { ProgressBar, Theme } = unlock( componentsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport default function CanvasSpinner( { id } ) {\n\tconst [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst indicatorColor =\n\t\thighlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;\n\n\treturn (\n\t\t<div className=\"edit-site-canvas-spinner\">\n\t\t\t<Theme accent={ indicatorColor } background={ backgroundColor }>\n\t\t\t\t<ProgressBar id={ id } />\n\t\t\t</Theme>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;AAC/E,SAASD,WAAW,IAAIE,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,sBAAsB,QAAQ,wBAAwB;AAE/D,MAAM;EAAEC,WAAW;EAAEC;AAAM,CAAC,GAAGH,MAAM,CAAED,qBAAsB,CAAC;AAC9D,MAAM;EAAEK;AAAe,CAAC,GAAGJ,MAAM,CAAEF,sBAAuB,CAAC;AAE3D,eAAe,SAASO,aAAaA,CAAE;EAAEC;AAAG,CAAC,EAAG;EAAA,IAAAC,qBAAA;EAC/C,MAAM,CAAEC,sBAAsB,CAAE,GAAGJ,cAAc,CAAE,YAAa,CAAC;EACjE,MAAM,CAAEK,eAAe,CAAE,GAAGL,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAM;IAAEM;EAAkB,CAAC,GAAGT,sBAAsB,CAAC,CAAC;EACtD,MAAMU,cAAc,IAAAJ,qBAAA,GACnBG,iBAAiB,CAAE,CAAC,CAAE,EAAEE,KAAK,cAAAL,qBAAA,cAAAA,qBAAA,GAAIC,sBAAsB;EAExD,OACCK,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACxCD,aAAA,CAACV,KAAK;IAACY,MAAM,EAAGJ,cAAgB;IAACK,UAAU,EAAGP;EAAiB,GAC9DI,aAAA,CAACX,WAAW;IAACI,EAAE,EAAGA;EAAI,CAAE,CAClB,CACH,CAAC;AAER"}