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

@@ -25,6 +25,7 @@ This is an alpha version! The changes listed here are not final.
 ### Fixed
 - Portfolios: Ensure these are enabled and working properly on themes that support portfolios
 - Stats: Fix top post card on the Insight page
+- wpcom-block-editor: Support getting the canvas mode from the query string after GB 19.6
 
 ## 2.5.11 - 2024-09-02
 ### Changed

vendor/automattic/jetpack-mu-wpcom/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

vendor/automattic/jetpack-mu-wpcom/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');

vendor/automattic/jetpack-mu-wpcom/src/common/hooks/index.ts

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

vendor/automattic/jetpack-mu-wpcom/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;

vendor/automattic/jetpack-mu-wpcom/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;

vendor/automattic/jetpack-mu-wpcom/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;
+	}
+};