Edit Site: Add browse mode.

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -833,6 +833,18 @@ _Returns_
 
 -   `boolean`: Whether block is selected and not the last in the selection.
 
+<a name="isBrowseMode" href="#isBrowseMode">#</a> **isBrowseMode**
+
+Returns whether the browse mode is enabled.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+
+_Returns_
+
+-   `boolean`: Is browse mode enabled.
+
 <a name="isCaretWithinFormattedText" href="#isCaretWithinFormattedText">#</a> **isCaretWithinFormattedText**
 
 Returns true if the caret is within formatted text, or false otherwise.
@@ -1294,6 +1306,14 @@ _Parameters_
 
 -   _hasBlockMovingClientId_ `(string|null)`: Enable/Disable block moving mode.
 
+<a name="setBrowseMode" href="#setBrowseMode">#</a> **setBrowseMode**
+
+Returns an action object used to enable or disable the browse mode.
+
+_Parameters_
+
+-   _isBrowseMode_ `string`: Enable/Disable browse mode.
+
 <a name="setHasControlledInnerBlocks" href="#setHasControlledInnerBlocks">#</a> **setHasControlledInnerBlocks**
 
 Returns an action object that sets whether the block has controlled innerblocks.

packages/block-editor/src/components/tool-selector/index.js

@@ -11,8 +11,8 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
-import { Icon, edit as editIcon } from '@wordpress/icons';
+import { useState, forwardRef } from '@wordpress/element';
+import { Icon, edit as editIcon, link as linkIcon } from '@wordpress/icons';
 
 const selectIcon = (
 	<SVG
@@ -26,23 +26,43 @@ const selectIcon = (
 );
 
 function ToolSelector( props, ref ) {
-	const isNavigationTool = useSelect(
-		( select ) => select( 'core/block-editor' ).isNavigationMode(),
+	const { isNavigationMode, enableFullSiteEditing } = useSelect(
+		( select ) => {
+			const { isNavigationMode: _isNavigationMode, getSettings } = select(
+				'core/block-editor'
+			);
+			return {
+				isNavigationMode: _isNavigationMode(),
+				enableFullSiteEditing: getSettings()
+					.__experimentalEnableFullSiteEditing,
+			};
+		},
 		[]
 	);
-	const { setNavigationMode } = useDispatch( 'core/block-editor' );
+	const { setNavigationMode, setBrowseMode } = useDispatch(
+		'core/block-editor'
+	);
+
+	const [ tool, setTool ] = useState( isNavigationMode ? 'select' : 'edit' );
 
 	const onSwitchMode = ( mode ) => {
 		setNavigationMode( mode === 'edit' ? false : true );
+		setBrowseMode( mode === 'browse' );
+		setTool( mode );
 	};
-
 	return (
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
 					{ ...props }
 					ref={ ref }
-					icon={ isNavigationTool ? selectIcon : editIcon }
+					icon={
+						{
+							edit: editIcon,
+							select: selectIcon,
+							browse: linkIcon,
+						}[ tool ]
+					}
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					label={ __( 'Tools' ) }
@@ -53,7 +73,7 @@ function ToolSelector( props, ref ) {
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
 						<MenuItemsChoice
-							value={ isNavigationTool ? 'select' : 'edit' }
+							value={ tool }
 							onSelect={ onSwitchMode }
 							choices={ [
 								{
@@ -74,7 +94,16 @@ function ToolSelector( props, ref ) {
 										</>
 									),
 								},
-							] }
+								enableFullSiteEditing && {
+									value: 'browse',
+									label: (
+										<>
+											<Icon icon={ linkIcon } />
+											{ __( 'Browse' ) }
+										</>
+									),
+								},
+							].filter( Boolean ) }
 						/>
 					</NavigableMenu>
 					<div className="block-editor-tool-selector__help">

packages/block-editor/src/store/actions.js

@@ -914,6 +914,18 @@ export function* setNavigationMode( isNavigationMode = true ) {
 	}
 }
 
+/**
+ * Returns an action object used to enable or disable the browse mode.
+ *
+ * @param {string} isBrowseMode Enable/Disable browse mode.
+ */
+export function* setBrowseMode( isBrowseMode = true ) {
+	return {
+		type: 'SET_BROWSE_MODE',
+		isBrowseMode,
+	};
+}
+
 /**
  * Generator that triggers an action used to enable or disable the block moving mode.
  *

packages/block-editor/src/store/reducer.js

@@ -1535,6 +1535,21 @@ export function isNavigationMode( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning whether the browse mode is enabled or not.
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function isBrowseMode( state = false, action ) {
+	if ( action.type === 'SET_BROWSE_MODE' ) {
+		return action.isBrowseMode;
+	}
+	return state;
+}
+
 /**
  * Reducer returning whether the block moving mode is enabled or not.
  *
@@ -1661,6 +1676,7 @@ export default combineReducers( {
 	preferences,
 	lastBlockAttributesChange,
 	isNavigationMode,
+	isBrowseMode,
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,

packages/block-editor/src/store/selectors.js

@@ -1590,6 +1590,17 @@ export function isNavigationMode( state ) {
 	return state.isNavigationMode;
 }
 
+/**
+ * Returns whether the browse mode is enabled.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {boolean} Is browse mode enabled.
+ */
+export function isBrowseMode( state ) {
+	return state.isBrowseMode;
+}
+
 /**
  * Returns whether block moving mode is enabled.
  *

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

@@ -17,6 +17,7 @@ import {
 /**
  * Internal dependencies
  */
+import BrowseModeNavigation from '../browse-mode-navigation';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 
@@ -48,6 +49,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			<BrowseModeNavigation />
 			<BlockEditorKeyboardShortcuts />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(

packages/edit-site/src/components/browse-mode-navigation/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { getPathAndQueryString } from '@wordpress/url';
+import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
+
+function useBrowseModeNavigation( isBrowseMode, registry, setPage ) {
+	useEffect( () => {
+		const listener = async ( event ) => {
+			if ( ! event.target.dataset.type || ! event.target.dataset.id )
+				return;
+
+			const entity = await registry
+				.__experimentalResolveSelect( 'core' )
+				.getEntityRecord(
+					'postType',
+					event.target.dataset.type,
+					event.target.dataset.id
+				);
+
+			setPage( {
+				type: entity.type,
+				slug: entity.slug,
+				path: getPathAndQueryString( entity.link || entity.url ),
+				context: { postType: entity.type, postId: entity.id },
+			} );
+		};
+
+		const unsubscribe = () =>
+			document
+				.getElementsByClassName( 'editor-styles-wrapper' )?.[ 0 ]
+				?.removeEventListener( 'click', listener, true );
+
+		if ( ! isBrowseMode ) unsubscribe();
+		else
+			return (
+				document
+					.getElementsByClassName( 'editor-styles-wrapper' )?.[ 0 ]
+					?.addEventListener( 'click', listener, true ) && unsubscribe
+			);
+	}, [ isBrowseMode ] );
+}
+
+export default function BrowseModeNavigation() {
+	const registry = useRegistry();
+	useBrowseModeNavigation(
+		useSelect(
+			( select ) => select( 'core/block-editor' ).isBrowseMode(),
+			[]
+		),
+		registry,
+		useDispatch( 'core/edit-site' ).setPage
+	);
+	return null;
+}