UX Experiment - "Simple" mode for content editing

packages/block-editor/src/components/block-toolbar/index.js

@@ -179,18 +179,18 @@ export function PrivateBlockToolbar( {
 									disabled={ ! isDefaultEditingMode }
 									isUsingBindings={ isUsingBindings }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
+								{ isDefaultEditingMode && ! isMultiToolbar && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+
+								{ ( isDefaultEditingMode ||
+									isContentOnlyEditingMode ) && (
+									<BlockMover
+										clientIds={ blockClientIds }
+										hideDragHandle={ hideDragHandle }
+									/>
 								) }
 							</ToolbarGroup>
 						</div>

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

@@ -11,8 +11,9 @@ 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 { forwardRef, useEffect } from '@wordpress/element';
+import { Icon, edit as editIcon, brush as brushIcon } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -31,12 +32,38 @@ const selectIcon = (
 );
 
 function ToolSelector( props, ref ) {
-	const mode = useSelect(
-		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
-		[]
-	);
+	const { mode } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		return {
+			mode: __unstableGetEditorMode(),
+		};
+	}, [] );
+
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
+	const modeIcons = {
+		edit: editIcon,
+		navigation: selectIcon,
+		simple: brushIcon,
+		default: editIcon, // Fallback icon if mode is not recognized
+	};
+
+	// Usage
+	const modeIcon = modeIcons[ mode ] || modeIcons.default;
+
+	const { get: getPreference } = useSelect( ( select ) =>
+		select( preferencesStore )
+	);
+
+	// Todo - avoid effect.
+	useEffect( () => {
+		const editorMode = getPreference( 'core', '__experimentalEditorMode' );
+		if ( editorMode === 'simple' ) {
+			__unstableSetEditorMode( editorMode );
+		}
+	}, [ __unstableSetEditorMode, getPreference ] );
+
 	return (
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
@@ -45,7 +72,7 @@ function ToolSelector( props, ref ) {
 					__next40pxDefaultSize={ false }
 					{ ...props }
 					ref={ ref }
-					icon={ mode === 'navigation' ? selectIcon : editIcon }
+					icon={ modeIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -58,26 +85,35 @@ function ToolSelector( props, ref ) {
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
 						<MenuItemsChoice
-							value={
-								mode === 'navigation' ? 'navigation' : 'edit'
-							}
-							onSelect={ __unstableSetEditorMode }
+							value={ mode }
+							onSelect={ ( newMode ) => {
+								__unstableSetEditorMode( newMode );
+							} }
 							choices={ [
+								// {
+								// 	value: 'navigation',
+								// 	label: (
+								// 		<>
+								// 			{ selectIcon }
+								// 			{ __( 'Select' ) }
+								// 		</>
+								// 	),
+								// },
 								{
-									value: 'edit',
+									value: 'simple',
 									label: (
 										<>
-											<Icon icon={ editIcon } />
-											{ __( 'Edit' ) }
+											<Icon icon={ brushIcon } />
+											{ __( 'Simple' ) }
 										</>
 									),
 								},
 								{
-									value: 'navigation',
+									value: 'edit',
 									label: (
 										<>
-											{ selectIcon }
-											{ __( 'Select' ) }
+											<Icon icon={ editIcon } />
+											{ __( 'Advanced Mode' ) }
 										</>
 									),
 								},

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

@@ -21,6 +21,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -1672,20 +1673,22 @@ export const setNavigationMode =
 export const __unstableSetEditorMode =
 	( mode ) =>
 	( { dispatch, select, registry } ) => {
+		const { set: setPreference } = registry.dispatch( preferencesStore );
+
+		const { [ sectionRootClientIdKey ]: sectionRootClientId } = registry
+			.select( STORE_NAME )
+			.getSettings();
+
+		const sectionClientIds = select.getBlockOrder( sectionRootClientId );
+
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			const { [ sectionRootClientIdKey ]: sectionRootClientId } = registry
-				.select( STORE_NAME )
-				.getSettings();
 
 			if ( firstSelectedClientId ) {
 				let sectionClientId;
 
 				if ( sectionRootClientId ) {
-					const sectionClientIds =
-						select.getBlockOrder( sectionRootClientId );
-
 					// If the selected block is a section block, use it.
 					if ( sectionClientIds?.includes( firstSelectedClientId ) ) {
 						sectionClientId = firstSelectedClientId;
@@ -1712,22 +1715,57 @@ export const __unstableSetEditorMode =
 			}
 		}
 
+		// Insert the provided logic here
+		if ( mode === 'simple' ) {
+			dispatch.updateBlockAttributes( sectionClientIds, {
+				templateLock: 'contentOnly',
+			} );
+
+			sectionClientIds.forEach( ( clientId ) => {
+				dispatch.setBlockEditingMode( clientId, 'contentOnly' );
+			} );
+
+			// Set the preference
+			setPreference( 'core', '__experimentalEditorMode', 'simple' );
+		} else {
+			dispatch.updateBlockAttributes( sectionClientIds, {
+				templateLock: null,
+			} );
+
+			sectionClientIds.forEach( ( clientId ) => {
+				dispatch.unsetBlockEditingMode( clientId );
+			} );
+
+			// Remove the preference
+			setPreference( 'core', '__experimentalEditorMode', null );
+		}
+
 		dispatch( { type: 'SET_EDITOR_MODE', mode } );
 
-		if ( mode === 'navigation' ) {
-			speak(
-				__(
-					'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
-				)
-			);
-		} else if ( mode === 'edit' ) {
-			speak(
-				__(
-					'You are currently in edit mode. To return to the navigation mode, press Escape.'
-				)
-			);
-		} else if ( mode === 'zoom-out' ) {
-			speak( __( 'You are currently in zoom-out mode.' ) );
+		switch ( mode ) {
+			case 'navigation':
+				speak(
+					__(
+						'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
+					)
+				);
+				break;
+			case 'edit':
+				speak(
+					__(
+						'You are currently in edit mode. To return to the navigation mode, press Escape.'
+					)
+				);
+				break;
+			case 'zoom-out':
+				speak( __( 'You are currently in zoom-out mode.' ) );
+				break;
+			case 'simple':
+				speak( __( 'You are currently in simple editing mode.' ) );
+				break;
+			default:
+				// Optional: handle other cases or do nothing
+				break;
 		}
 	};
 

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

@@ -1770,6 +1770,11 @@ export function canMoveBlock( state, clientId ) {
 	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
 		return false;
 	}
+
+	if ( getBlockEditingMode( state, clientId ) === 'contentOnly' ) {
+		return true;
+	}
+
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }