wpcom-block-editor: Support getting the canvas mode from the query string after GB 19.6

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

@@ -6,13 +6,13 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState, useMemo } from 'react';
 import wpcom from 'calypso/lib/wp';
+import useLocation from '../../../hooks/use-location';
 import {
 	currentlyPreviewingTheme,
 	PERSONAL_THEME,
 	PREMIUM_THEME,
 	WOOCOMMERCE_THEME,
 } from '../utils';
-import useLocation from './use-location';
 import type { Theme } from 'calypso/types';
 
 /**

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-sidebar-notice.tsx

@@ -1,14 +1,11 @@
 import { Notice } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { render } from '@wordpress/element';
 import { useEffect, useRef, FC, ComponentProps } from 'react';
-import { getUnlock } from '../utils';
+import useCanvasMode from '../../../hooks/use-canvas-mode';
 
 const SAVE_HUB_SELECTOR = '.edit-site-save-hub';
 const SIDEBAR_NOTICE_SELECTOR = 'wpcom-live-preview-sidebar-notice';
 
-const unlock = getUnlock();
-
 const SidebarNotice: FC< {
 	noticeProps: ComponentProps< typeof Notice >;
 } > = ( { noticeProps } ) => {
@@ -27,11 +24,7 @@ export const useSidebarNotice = ( {
 	shouldShowNotice?: boolean;
 } ) => {
 	const isRendered = useRef( false );
-	const canvasMode = useSelect(
-		( select ) =>
-			unlock && select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode(),
-		[]
-	);
+	const canvasMode = useCanvasMode();
 
 	useEffect( () => {
 		if ( ! shouldShowNotice ) {

apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx

@@ -1,13 +1,13 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { FC, useEffect } from 'react';
+import { getUnlock } from '../../utils';
 import { NOTICE_ID } from './constants';
 import { useCanPreviewButNeedUpgrade } from './hooks/use-can-preview-but-need-upgrade';
 import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
 import { LivePreviewUpgradeButton } from './upgrade-button';
 import { LivePreviewUpgradeNotice } from './upgrade-notice';
-import { getUnlock } from './utils';
 
 const unlock = getUnlock();
 

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx

@@ -1,26 +1,19 @@
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { FC, useEffect } from 'react';
+import useCanvasMode from '../../hooks/use-canvas-mode';
 import tracksRecordEvent from '../tracking/track-record-event';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
-import { getUnlock } from './utils';
 
 import './upgrade-button.scss';
 
 const SAVE_HUB_SAVE_BUTTON_SELECTOR = '.edit-site-save-hub__button';
 const HEADER_SAVE_BUTTON_SELECTOR = '.edit-site-save-button__button';
 
-const unlock = getUnlock();
-
 export const LivePreviewUpgradeButton: FC< {
 	previewingTheme: ReturnType< typeof usePreviewingTheme >;
 	upgradePlan: () => void;
 } > = ( { previewingTheme, upgradePlan } ) => {
-	const canvasMode = useSelect(
-		( select ) =>
-			unlock && select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode(),
-		[]
-	);
+	const canvasMode = useCanvasMode();
 
 	/**
 	 * This overrides the `SaveButton` behavior by adding a listener and changing the copy.

apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts

@@ -1,33 +1,9 @@
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { getQueryArg } from '@wordpress/url';
 
 export const WOOCOMMERCE_THEME = 'woocommerce';
 export const PREMIUM_THEME = 'premium';
 export const PERSONAL_THEME = 'personal';
 
-/**
- * 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.
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let unlock: ( object: any ) => any | undefined;
-	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;
-	}
-};
-
 /**
  * Return true if the user is currently previewing a theme.
  * FIXME: This is copied from Gutenberg; we should be creating a selector for the `core/edit-site` store.

apps/wpcom-block-editor/src/wpcom/features/tracking/site-editor-load.tsx

@@ -1,34 +1,11 @@
-import { select, useSelect } from '@wordpress/data';
+import { select } from '@wordpress/data';
 import { registerPlugin } from '@wordpress/plugins';
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { useEffect } from 'react';
+import useCanvasMode from '../../hooks/use-canvas-mode';
 import tracksRecordEvent from './track-record-event';
 
-/**
- * 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
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let unlock: ( object: any ) => any | undefined;
-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 );
-}
-
 const SiteEditorLoad = () => {
-	const canvasMode = useSelect(
-		( _select ) =>
-			unlock &&
-			_select( 'core/edit-site' ) &&
-			unlock( _select( 'core/edit-site' ) ).getCanvasMode(),
-		[]
-	);
+	const canvasMode = useCanvasMode();
 
 	useEffect( () => {
 		// Don't send the event in the Post Editor context.

apps/wpcom-block-editor/src/wpcom/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;

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-location.ts → apps/wpcom-block-editor/src/wpcom/hooks/use-location.ts

@@ -5,7 +5,7 @@ const unlock = getUnlock();
 
 const routerPrivateApis = router?.privateApis;
 
-let useLocation = () => null;
+let useLocation: () => Location | null = () => null;
 
 // The routerPrivateApis may be unavailable.
 if ( unlock && routerPrivateApis && unlock( routerPrivateApis ) ) {

apps/wpcom-block-editor/src/wpcom/utils.ts

@@ -0,0 +1,24 @@
+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.
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let unlock: ( object: any ) => any | undefined;
+	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;
+	}
+};