Lock browse mode selectors and actions (#47678)

packages/edit-site/src/components/add-new-template/new-template-part.js

@@ -20,6 +20,7 @@ import {
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
+import { unlock } from '../../experiments';
 
 export default function NewTemplatePart( {
 	postType,
@@ -30,7 +31,7 @@ export default function NewTemplatePart( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
@@ -63,7 +64,7 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
 			history.push( {

packages/edit-site/src/components/add-new-template/new-template.js

@@ -48,6 +48,7 @@ import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
@@ -98,8 +99,9 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, __unstableSetCanvasMode } =
-		useDispatch( editSiteStore );
+	const { setTemplate, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -140,7 +142,7 @@ export default function NewTemplate( {
 			setTemplate( newTemplate.id, newTemplate.slug );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {

packages/edit-site/src/components/block-editor/index.js

@@ -51,13 +51,14 @@ export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
-				select( editSiteStore );
+			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
 			return {
 				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 			};
 		},
 		[ setIsInserterOpened ]

packages/edit-site/src/components/editor/index.js

@@ -38,6 +38,7 @@ import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
+import { unlock } from '../../experiments';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -71,11 +72,11 @@ export default function Editor() {
 			getEditedPostId,
 			getEditedPostContext,
 			getEditorMode,
-			__unstableGetCanvasMode,
+			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
 			isSaveViewOpened,
-		} = select( editSiteStore );
+		} = unlock( select( editSiteStore ) );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -99,7 +100,7 @@ export default function Editor() {
 				  ] )
 				: false,
 			editorMode: getEditorMode(),
-			canvasMode: __unstableGetCanvasMode(),
+			canvasMode: getCanvasMode(),
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),

packages/edit-site/src/components/layout/index.js

@@ -38,6 +38,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
+import { unlock } from '../../experiments';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -66,9 +67,9 @@ export default function Layout() {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
-			const { __unstableGetCanvasMode } = select( editSiteStore );
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
 			return {
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 				previousShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/previous-region'
 				),

packages/edit-site/src/components/site-hub/index.js

@@ -27,6 +27,7 @@ import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import SiteIcon from '../site-icon';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../experiments';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
@@ -38,13 +39,10 @@ const SiteHub = forwardRef(
 		const { canvasMode, dashboardLink, entityConfig } = useSelect(
 			( select ) => {
 				select( editSiteStore ).getEditedPostType();
-				const {
-					__unstableGetCanvasMode,
-					getSettings,
-					getEditedPostType,
-				} = select( editSiteStore );
+				const { getCanvasMode, getSettings, getEditedPostType } =
+					unlock( select( editSiteStore ) );
 				return {
-					canvasMode: __unstableGetCanvasMode(),
+					canvasMode: getCanvasMode(),
 					dashboardLink: getSettings().__experimentalDashboardLink,
 					entityConfig: select( coreStore ).getEntityConfig(
 						'postType',
@@ -56,7 +54,7 @@ const SiteHub = forwardRef(
 		);
 		const disableMotion = useReducedMotion();
 		const isMobileViewport = useViewportMatch( 'medium', '<' );
-		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 		const { clearSelectedBlock } = useDispatch( blockEditorStore );
 		const showEditButton =
 			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
@@ -77,7 +75,7 @@ const SiteHub = forwardRef(
 					onClick: () => {
 						clearSelectedBlock();
 						setIsMobileCanvasVisible( false );
-						__unstableSetCanvasMode( 'view' );
+						setCanvasMode( 'view' );
 					},
 			  };
 		const { getTitle } = useEditedEntityRecord();
@@ -137,7 +135,7 @@ const SiteHub = forwardRef(
 					<Button
 						className="edit-site-site-hub__edit-button"
 						onClick={ () => {
-							__unstableSetCanvasMode( 'edit' );
+							setCanvasMode( 'edit' );
 						} }
 						variant="primary"
 					>

packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -9,15 +9,16 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../experiments';
 
 export default function useSyncCanvasModeWithURL() {
 	const history = useHistory();
 	const { params } = useLocation();
 	const canvasMode = useSelect(
-		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
 		[]
 	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const currentCanvasMode = useRef( canvasMode );
 	const { canvas: canvasInUrl = 'view' } = params;
 	const currentCanvasInUrl = useRef( canvasInUrl );
@@ -34,7 +35,7 @@ export default function useSyncCanvasModeWithURL() {
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
 		if ( canvasInUrl !== currentCanvasMode.current ) {
-			__unstableSetCanvasMode( canvasInUrl );
+			setCanvasMode( canvasInUrl );
 		}
 	}, [ canvasInUrl ] );
 }

packages/edit-site/src/store/actions.js

@@ -530,27 +530,3 @@ export const switchEditorMode =
 			speak( __( 'Mosaic view selected' ), 'assertive' );
 		}
 	};
-
-/**
- * Action that switches the canvas mode.
- *
- * @param {?string} mode Canvas mode.
- */
-export const __unstableSetCanvasMode =
-	( mode ) =>
-	( { registry, dispatch } ) => {
-		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
-		dispatch( {
-			type: 'SET_CANVAS_MODE',
-			mode,
-		} );
-		// Check if the block list view should be open by default.
-		if (
-			mode === 'edit' &&
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-site', 'showListViewByDefault' )
-		) {
-			dispatch.setIsListViewOpened( true );
-		}
-	};

packages/edit-site/src/store/index.js

@@ -8,8 +8,11 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../experiments';
 
 export const storeConfig = {
 	reducer,
@@ -19,3 +22,5 @@ export const storeConfig = {
 
 export const store = createReduxStore( STORE_NAME, storeConfig );
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );

packages/edit-site/src/store/private-actions.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Action that switches the canvas mode.
+ *
+ * @param {?string} mode Canvas mode.
+ */
+export const setCanvasMode =
+	( mode ) =>
+	( { registry, dispatch } ) => {
+		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
+		dispatch( {
+			type: 'SET_CANVAS_MODE',
+			mode,
+		} );
+		// Check if the block list view should be open by default.
+		if (
+			mode === 'edit' &&
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'showListViewByDefault' )
+		) {
+			dispatch.setIsListViewOpened( true );
+		}
+	};

packages/edit-site/src/store/private-selectors.js

@@ -0,0 +1,10 @@
+/**
+ * Returns the current canvas mode.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Canvas mode.
+ */
+export function getCanvasMode( state ) {
+	return state.canvasMode;
+}

packages/edit-site/src/store/selectors.js

@@ -288,17 +288,6 @@ export function getEditorMode( state ) {
 	return __unstableGetPreference( state, 'editorMode' );
 }
 
-/**
- * Returns the current canvas mode.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} Canvas mode.
- */
-export function __unstableGetCanvasMode( state ) {
-	return state.canvasMode;
-}
-
 /**
  * @deprecated
  */