@wordpress/edit-site 6.10.0 → 6.12.0

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

@@ -28,262 +28,289 @@ import { store as editSiteStore } from '../../store';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-function useGlobalStylesOpenStylesCommands() {
-	const { openGeneralSidebar, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const history = useHistory();
+const getGlobalStylesOpenStylesCommands = () =>
+	function useGlobalStylesOpenStylesCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
 
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
-
-	const commands = useMemo( () => {
-		if ( ! isBlockBasedTheme ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-styles',
-				label: __( 'Open styles' ),
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && getCanvasMode() !== 'edit' ) {
-						setCanvasMode( 'edit' );
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
+			return [
+				{
+					name: 'core/edit-site/open-styles',
+					label: __( 'Open styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
+								canvas: 'edit',
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{ ...params, canvas: 'edit' },
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+					},
+					icon: styles,
 				},
-				icon: styles,
-			},
-		];
-	}, [
-		history,
-		openGeneralSidebar,
-		setCanvasMode,
-		getCanvasMode,
-		isBlockBasedTheme,
-		params.postId,
-	] );
+			];
+		}, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesToggleWelcomeGuideCommands() {
-	const { openGeneralSidebar, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { set } = useDispatch( preferencesStore );
+const getGlobalStylesToggleWelcomeGuideCommands = () =>
+	function useGlobalStylesToggleWelcomeGuideCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const { set } = useDispatch( preferencesStore );
 
-	const history = useHistory();
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! isBlockBasedTheme ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/toggle-styles-welcome-guide',
-				label: __( 'Learn about styles' ),
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && getCanvasMode() !== 'edit' ) {
-						setCanvasMode( 'edit' );
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					set( 'core/edit-site', 'welcomeGuideStyles', true );
-					// sometimes there's a focus loss that happens after some time
-					// that closes the modal, we need to force reopening it.
-					setTimeout( () => {
+			return [
+				{
+					name: 'core/edit-site/toggle-styles-welcome-guide',
+					label: __( 'Learn about styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
+								canvas: 'edit',
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
 						set( 'core/edit-site', 'welcomeGuideStyles', true );
-					}, 500 );
+						// sometimes there's a focus loss that happens after some time
+						// that closes the modal, we need to force reopening it.
+						setTimeout( () => {
+							set( 'core/edit-site', 'welcomeGuideStyles', true );
+						}, 500 );
+					},
+					icon: help,
 				},
-				icon: help,
-			},
-		];
-	}, [
-		history,
-		openGeneralSidebar,
-		setCanvasMode,
-		getCanvasMode,
-		isBlockBasedTheme,
-		set,
-		params.postId,
-	] );
+			];
+		}, [
+			history,
+			openGeneralSidebar,
+			canvas,
+			isBlockBasedTheme,
+			set,
+			params,
+		] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesResetCommands() {
-	const [ canReset, onReset ] = useGlobalStylesReset();
-	const commands = useMemo( () => {
-		if ( ! canReset ) {
-			return [];
-		}
+const getGlobalStylesResetCommands = () =>
+	function useGlobalStylesResetCommands() {
+		const [ canReset, onReset ] = useGlobalStylesReset();
+		const commands = useMemo( () => {
+			if ( ! canReset ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/reset-global-styles',
-				label: __( 'Reset styles' ),
-				icon: isRTL() ? rotateRight : rotateLeft,
-				callback: ( { close } ) => {
-					close();
-					onReset();
+			return [
+				{
+					name: 'core/edit-site/reset-global-styles',
+					label: __( 'Reset styles' ),
+					icon: isRTL() ? rotateRight : rotateLeft,
+					callback: ( { close } ) => {
+						close();
+						onReset();
+					},
 				},
-			},
-		];
-	}, [ canReset, onReset ] );
+			];
+		}, [ canReset, onReset ] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesOpenCssCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
-		unlock( useDispatch( editSiteStore ) );
-	const { params } = useLocation();
-	const history = useHistory();
-	const { canEditCSS } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
+const getGlobalStylesOpenCssCommands = () =>
+	function useGlobalStylesOpenCssCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const { canEditCSS } = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
 
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
 
-		return {
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+			return {
+				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+			};
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! canEditCSS ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! canEditCSS ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-styles-css',
-				label: __( 'Customize CSS' ),
-				icon: brush,
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && getCanvasMode() !== 'edit' ) {
-						setCanvasMode( 'edit' );
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					setEditorCanvasContainerView( 'global-styles-css' );
+			return [
+				{
+					name: 'core/edit-site/open-styles-css',
+					label: __( 'Customize CSS' ),
+					icon: brush,
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
+								canvas: 'edit',
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView( 'global-styles-css' );
+					},
 				},
-			},
-		];
-	}, [
-		history,
-		openGeneralSidebar,
-		setEditorCanvasContainerView,
-		canEditCSS,
-		getCanvasMode,
-		setCanvasMode,
-		params.postId,
-	] );
-	return {
-		isLoading: false,
-		commands,
+			];
+		}, [
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canEditCSS,
+			canvas,
+			params,
+		] );
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesOpenRevisionsCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
-		unlock( useDispatch( editSiteStore ) );
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { params } = useLocation();
-	const history = useHistory();
-	const hasRevisions = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
-	}, [] );
+const getGlobalStylesOpenRevisionsCommands = () =>
+	function useGlobalStylesOpenRevisionsCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const hasRevisions = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! hasRevisions ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! hasRevisions ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-global-styles-revisions',
-				label: __( 'Style revisions' ),
-				icon: backup,
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && getCanvasMode() !== 'edit' ) {
-						setCanvasMode( 'edit' );
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					setEditorCanvasContainerView( 'global-styles-revisions' );
+			return [
+				{
+					name: 'core/edit-site/open-global-styles-revisions',
+					label: __( 'Style revisions' ),
+					icon: backup,
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
+								canvas: 'edit',
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView(
+							'global-styles-revisions'
+						);
+					},
 				},
-			},
-		];
-	}, [
-		hasRevisions,
-		history,
-		openGeneralSidebar,
-		setEditorCanvasContainerView,
-		getCanvasMode,
-		setCanvasMode,
-		params.postId,
-	] );
+			];
+		}, [
+			hasRevisions,
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canvas,
+			params,
+		] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
 export function useCommonCommands() {
 	const homeUrl = useSelect( ( select ) => {
@@ -304,26 +331,26 @@ export function useCommonCommands() {
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles',
-		hook: useGlobalStylesOpenStylesCommands,
+		hook: getGlobalStylesOpenStylesCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/toggle-styles-welcome-guide',
-		hook: useGlobalStylesToggleWelcomeGuideCommands,
+		hook: getGlobalStylesToggleWelcomeGuideCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/reset-global-styles',
-		hook: useGlobalStylesResetCommands,
+		hook: getGlobalStylesResetCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-css',
-		hook: useGlobalStylesOpenCssCommands,
+		hook: getGlobalStylesOpenCssCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-revisions',
-		hook: useGlobalStylesOpenRevisionsCommands,
+		hook: getGlobalStylesOpenRevisionsCommands(),
 	} );
 }

package/src/hooks/commands/use-set-command-context.js

@@ -4,34 +4,32 @@
 import { useSelect } from '@wordpress/data';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
 
 const { useCommandContext } = unlock( commandsPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 /**
  * React hook used to set the correct command context based on the current state.
  */
 export default function useSetCommandContext() {
-	const { hasBlockSelected, canvasMode } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-		const { getBlockSelectionStart } = select( blockEditorStore );
-		return {
-			canvasMode: getCanvasMode(),
-			hasBlockSelected: getBlockSelectionStart(),
-		};
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
+	const hasBlockSelected = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockSelectionStart();
 	}, [] );
 
 	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
 
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
-	if ( canvasMode === 'edit' ) {
+	if ( canvas === 'edit' ) {
 		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {

package/src/index.js

@@ -68,6 +68,7 @@ export function initializeEditor( id, settings ) {
 		allowRightClickOverrides: true,
 		distractionFree: false,
 		editorMode: 'visual',
+		editorTool: 'edit',
 		fixedToolbar: false,
 		focusMode: false,
 		inactivePanels: [],

package/src/posts.js

@@ -65,6 +65,7 @@ export function initializePostsDashboard( id, settings ) {
 		allowRightClickOverrides: true,
 		distractionFree: false,
 		editorMode: 'visual',
+		editorTool: 'edit',
 		fixedToolbar: false,
 		focusMode: false,
 		inactivePanels: [],