Help Center: use URL params for determining editor canvas state (#95964)

* Help Center: Use router params for canvas mode

* Add wordpress router dep

* Dedupe wordpress router

* Only return canvas mode value in the site editor

* Match wordpress router version of wpcom-block-editor

* Reset yarn.lock from trunk

apps/help-center/help-center-gutenberg-disconnected.js

@@ -5,7 +5,7 @@ import { useMediaQuery } from '@wordpress/compose';
 import { useEffect, useReducer } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import ReactDOM from 'react-dom';
-import { useCanvasMode } from './hooks';
+import { useCanvasMode } from './hooks/use-canvas-mode';
 import './help-center.scss';
 
 function HelpCenterContent() {

apps/help-center/help-center-gutenberg.js

@@ -9,7 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState, useReducer } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import ReactDOM from 'react-dom';
-import { useCanvasMode } from './hooks';
+import { useCanvasMode } from './hooks/use-canvas-mode';
 import './help-center.scss';
 
 const queryClient = new QueryClient();

apps/help-center/hooks/use-canvas-mode.js

@@ -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 { useCanvasMode };

apps/help-center/hooks/use-location.js

@@ -0,0 +1,13 @@
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { getUnlock } from '../utils';
+
+const unlock = getUnlock();
+
+let useLocation;
+
+// The routerPrivateApis may be unavailable.
+if ( unlock && routerPrivateApis && unlock( routerPrivateApis ) ) {
+	useLocation = unlock( routerPrivateApis ).useLocation;
+}
+
+export { useLocation };

apps/help-center/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/data": "^10.8.0",
 		"@wordpress/plugins": "^7.8.0",
 		"@wordpress/private-apis": "^1.8.0",
+		"@wordpress/router": "^1.8.0",
 		"postcss-prefix-selector": "^1.16.1"
 	},
 	"devDependencies": {

apps/help-center/utils.js

@@ -0,0 +1,23 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+/**
+ * Get unlock API from Gutenberg.
+ * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
+ */
+export const getUnlock = () => {
+	/**
+	 * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
+	 */
+	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;
+		return unlock;
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.error( 'Error: Unable to get the unlock api. Reason: %s', error );
+		return undefined;
+	}
+};

yarn.lock

@@ -1119,6 +1119,7 @@ __metadata:
     "@wordpress/plugins": "npm:^7.8.0"
     "@wordpress/private-apis": "npm:^1.8.0"
     "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0"
+    "@wordpress/router": "npm:^1.8.0"
     copy-webpack-plugin: "npm:^10.2.4"
     postcss-prefix-selector: "npm:^1.16.1"
     typescript: "npm:^5.3.3"