wpcom-block-editor-nux: Support getting the canvas mode from the quer…

…y string after GB 19.6 (#40045)

* Introduce @wordpress/router

* Get canvas mode from the URL search parameter

* changelog

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11677336292

Upstream-Ref: Automattic/jetpack@e8c0297

CHANGELOG.md

@@ -17,6 +17,7 @@ This is an alpha version! The changes listed here are not final.
 - Fix PHPUnit coverage warnings.
 - Help Center: fixed api typo
 - We now check if JP_CONNECTION_INITIAL_STATE is defined before accessing it when using Global Styles'
+- wpcom-block-editor: Support getting the canvas mode from the query string after GB 19.6
 
 ## [5.65.0] - 2024-10-29
 ### Added

package.json

@@ -70,6 +70,7 @@
 		"@wordpress/icons": "10.9.0",
 		"@wordpress/plugins": "7.9.0",
 		"@wordpress/private-apis": "^1.8.1",
+		"@wordpress/router": "^1.8.11",
 		"@wordpress/url": "4.9.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",

src/build/wpcom-block-editor-nux/wpcom-block-editor-nux.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-nux', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-private-apis', 'wp-url'), 'version' => '84c0373645699d975b72');
+<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-nux', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-private-apis', 'wp-router', 'wp-url'), 'version' => 'acd9efa73a7249ceeaef');

src/common/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useCanvasMode } from './use-canvas-mode';
+export { default as useLocation } from './use-location';

src/common/hooks/use-canvas-mode.ts

@@ -0,0 +1,20 @@
+import { useSelect } from '@wordpress/data';
+import useLocation from './use-location';
+
+const useCanvasMode = () => {
+	const location = useLocation();
+
+	return useSelect(
+		select => {
+			// The canvas mode is limited to the site editor.
+			if ( ! select( 'core/edit-site' ) ) {
+				return null;
+			}
+
+			return new URLSearchParams( location?.search ).get( 'canvas' ) || 'view';
+		},
+		[ location?.search ]
+	);
+};
+
+export default useCanvasMode;

src/common/hooks/use-location.ts

@@ -0,0 +1,15 @@
+import * as router from '@wordpress/router';
+import { getUnlock } from '../utils';
+
+const unlock = getUnlock();
+
+const routerPrivateApis = router?.privateApis;
+
+let useLocation: () => Location | null = () => null;
+
+// The routerPrivateApis may be unavailable.
+if ( unlock && routerPrivateApis && unlock( routerPrivateApis ) ) {
+	useLocation = unlock( routerPrivateApis ).useLocation;
+}
+
+export default useLocation;

src/common/utils.ts

@@ -0,0 +1,21 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const getUnlock = () => {
+	/**
+	 * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
+	 * FIXME: The new version allow it by default, but we might need to ensure that all the site has the new version.
+	 * @see https://github.com/Automattic/wp-calypso/pull/79663
+	 */
+	let unlock: ( object: any ) => any | undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
+	try {
+		unlock = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+			'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+			'@wordpress/edit-site'
+		).unlock;
+		return unlock;
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.error( 'Error: Unable to get the unlock api. Reason: %s', error );
+		return undefined;
+	}
+};

src/features/wpcom-block-editor-nux/src/block-editor-nux.js

@@ -4,8 +4,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { getQueryArg } from '@wordpress/url';
+import { useCanvasMode } from '../../../common/hooks';
 import {
 	HasSeenSellerCelebrationModalProvider,
 	HasSeenVideoCelebrationModalProvider,
@@ -22,22 +22,6 @@ import VideoPressCelebrationModal from './video-celebration-modal';
 import WpcomNux from './welcome-modal/wpcom-nux';
 import LaunchWpcomWelcomeTour from './welcome-tour/tour-launch';
 
-/**
- * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
- * FIXME: The new version allow it by default, but we might need to ensure that all the site has the new version.
- * @see https://github.com/Automattic/wp-calypso/pull/79663
- */
-let unlock;
-try {
-	unlock = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
-		'@wordpress/edit-site'
-	).unlock;
-} catch ( error ) {
-	// eslint-disable-next-line no-console
-	console.error( 'Error: Unable to get the unlock api. Reason: %s', error );
-}
-
 /**
  * The WelcomeTour component
  */
@@ -46,31 +30,23 @@ function WelcomeTour() {
 		getQueryArg( window.location.href, 'showDraftPostModal' )
 	);
 
-	const {
-		show,
-		isLoaded,
-		variant,
-		isManuallyOpened,
-		isNewPageLayoutModalOpen,
-		siteEditorCanvasMode,
-	} = useSelect( select => {
-		const welcomeGuideStoreSelect = select( 'automattic/wpcom-welcome-guide' );
-		const starterPageLayoutsStoreSelect = select( 'automattic/starter-page-layouts' );
-		let canvasMode;
-		if ( unlock && select( 'core/edit-site' ) ) {
-			canvasMode =
-				select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode();
-		}
+	const { show, isLoaded, variant, isManuallyOpened, isNewPageLayoutModalOpen } = useSelect(
+		select => {
+			const welcomeGuideStoreSelect = select( 'automattic/wpcom-welcome-guide' );
+			const starterPageLayoutsStoreSelect = select( 'automattic/starter-page-layouts' );
+
+			return {
+				show: welcomeGuideStoreSelect.isWelcomeGuideShown(),
+				isLoaded: welcomeGuideStoreSelect.isWelcomeGuideStatusLoaded(),
+				variant: welcomeGuideStoreSelect.getWelcomeGuideVariant(),
+				isManuallyOpened: welcomeGuideStoreSelect.isWelcomeGuideManuallyOpened(),
+				isNewPageLayoutModalOpen: starterPageLayoutsStoreSelect?.isOpen(), // Handle the case where SPT is not initalized.
+			};
+		},
+		[]
+	);
 
-		return {
-			show: welcomeGuideStoreSelect.isWelcomeGuideShown(),
-			isLoaded: welcomeGuideStoreSelect.isWelcomeGuideStatusLoaded(),
-			variant: welcomeGuideStoreSelect.getWelcomeGuideVariant(),
-			isManuallyOpened: welcomeGuideStoreSelect.isWelcomeGuideManuallyOpened(),
-			isNewPageLayoutModalOpen: starterPageLayoutsStoreSelect?.isOpen(), // Handle the case where SPT is not initalized.
-			siteEditorCanvasMode: canvasMode,
-		};
-	}, [] );
+	const siteEditorCanvasMode = useCanvasMode();
 
 	const setOpenState = useDispatch( 'automattic/starter-page-layouts' )?.setOpenState;