wpcom-block-editor-nux: avoid using useLocation which throws exceptio…

…n outside Site Editor in GB 19.9.0 (#40656)

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

Upstream-Ref: Automattic/jetpack@f02d391

CHANGELOG.md

@@ -30,6 +30,7 @@ This is an alpha version! The changes listed here are not final.
 - Load WPCOM sidebar notice async
 - Restore visited button color in themes.php to Core's default
 - Starter page templates: correctly insert the pattern to the Content block when rendering mode is template-locked
+- wpcom-block-editor-nux: avoid using useLocation which now throws exception outside Site Editor in Gutenberg 19.9.0
 
 ## [6.0.0] - 2024-12-04
 ### Changed

src/build/holiday-snow/holiday-snow.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'a39c80851a65c7f4801a');
+<?php return array('dependencies' => array(), 'version' => 'c23f757bec60bfa1f4f6');

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-router', 'wp-url'), 'version' => '04bc49fdc15475fbae12');
+<?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' => 'd67480ee268d76fb3fa9');

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

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