First pass at adding simple editing mode

lib/experimental/editor-settings.php

@@ -40,6 +40,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-simple-editing-mode', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalSimpleEditingMode = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -199,6 +199,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-simple-editing-mode',
+		__( 'Simple editing mode', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Add UI that lets you toggle between a simple and an advanced editing mode.', 'gutenberg' ),
+			'id'    => 'gutenberg-simple-editing-mode',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/editor/src/components/document-tools/index.js

@@ -27,6 +27,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
+import SimpleEditingModeSelector from '../simple-editing-mode-selector';
 
 function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
@@ -139,7 +140,11 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 					<>
 						{ isLargeViewport && ! hasFixedToolbar && (
 							<ToolbarItem
-								as={ ToolSelector }
+								as={
+									window.__experimentalSimpleEditingMode
+										? SimpleEditingModeSelector
+										: ToolSelector
+								}
 								showTooltip={ ! showIconLabels }
 								variant={
 									showIconLabels ? 'tertiary' : undefined

packages/editor/src/components/provider/content-only-lock-sections.js

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Component that when rendered, makes it so that the editor allows only
+ * specific sections to be edited in content-only mode for templates.
+ */
+export default function ContentOnlyLockSections() {
+	const registry = useRegistry();
+
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	const selected = useSelect( ( select ) => {
+		const {
+			getBlockOrder,
+			getClientIdsOfDescendants,
+			getClientIdsWithDescendants,
+		} = select( blockEditorStore );
+		const { getEditorSettings } = select( editorStore );
+		const { sectionRootClientId } = getEditorSettings();
+		const sectionClientIds = getBlockOrder( sectionRootClientId );
+		const allClientIds = sectionRootClientId
+			? getClientIdsOfDescendants( sectionRootClientId )
+			: getClientIdsWithDescendants();
+		return {
+			sectionClientIds,
+			allClientIds,
+		};
+	}, [] );
+	const { sectionClientIds, allClientIds } = selected;
+	const { getBlockOrder, getBlockName } = useSelect( blockEditorStore );
+	const { __experimentalHasContentRoleAttribute } = useSelect( blocksStore );
+
+	useEffect( () => {
+		const sectionChildrenClientIds = sectionClientIds.flatMap(
+			( clientId ) => getBlockOrder( clientId )
+		);
+		const contentClientIds = allClientIds.filter( ( clientId ) =>
+			__experimentalHasContentRoleAttribute( getBlockName( clientId ) )
+		);
+
+		registry.batch( () => {
+			for ( const clientId of sectionClientIds ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
+			for ( const clientId of sectionChildrenClientIds ) {
+				setBlockEditingMode( clientId, 'disabled' );
+			}
+			for ( const clientId of contentClientIds ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
+		} );
+
+		return () => {
+			registry.batch( () => {
+				for ( const clientId of [
+					...sectionClientIds,
+					...sectionChildrenClientIds,
+					...contentClientIds,
+				] ) {
+					unsetBlockEditingMode( clientId );
+				}
+			} );
+		};
+	}, [
+		__experimentalHasContentRoleAttribute,
+		allClientIds,
+		getBlockName,
+		getBlockOrder,
+		registry,
+		sectionClientIds,
+		setBlockEditingMode,
+		unsetBlockEditingMode,
+	] );
+
+	return null;
+}

packages/editor/src/components/provider/index.js

@@ -34,6 +34,8 @@ import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 import PatternRenameModal from '../pattern-rename-modal';
 import PatternDuplicateModal from '../pattern-duplicate-modal';
 import TemplatePartMenuItems from '../template-part-menu-items';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import ContentOnlyLockSections from './content-only-lock-sections';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -302,9 +304,14 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									<PatternsMenuItems />
 									<TemplatePartMenuItems />
 									<ContentOnlySettingsMenu />
-									{ mode === 'template-locked' && (
-										<DisableNonPageContentBlocks />
-									) }
+									{ mode === 'template-locked' &&
+										type === TEMPLATE_POST_TYPE && (
+											<ContentOnlyLockSections />
+										) }
+									{ mode === 'template-locked' &&
+										type !== TEMPLATE_POST_TYPE && (
+											<DisableNonPageContentBlocks />
+										) }
 									{ type === 'wp_navigation' && (
 										<NavigationBlockEditingMode />
 									) }

packages/editor/src/components/simple-editing-mode-selector/index.js

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Dropdown,
+	Button,
+	MenuItemsChoice,
+	NavigableMenu,
+	SVG,
+	Path,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+
+const selectIcon = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z" />
+	</SVG>
+);
+
+function SimpleEditingModeSelector( props, ref ) {
+	const { postType, renderingMode } = useSelect(
+		( select ) => ( {
+			postType: select( editorStore ).getCurrentPostType(),
+			renderingMode: select( editorStore ).getRenderingMode(),
+		} ),
+		[]
+	);
+
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	if ( postType !== TEMPLATE_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
+					{ ...props }
+					ref={ ref }
+					icon={ selectIcon }
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					onClick={ onToggle }
+					/* translators: button label text should, if possible, be under 16 characters. */
+					label={ __( 'Editing mode' ) }
+				/>
+			) }
+			popoverProps={ { placement: 'bottom-start' } }
+			renderContent={ () => (
+				<NavigableMenu
+					className="editor-simple-editing-mode-selector__menu"
+					role="menu"
+					aria-label={ __( 'Editing mode' ) }
+				>
+					<MenuItemsChoice
+						value={
+							renderingMode === 'template-locked'
+								? 'simple'
+								: 'advanced'
+						}
+						onSelect={ ( mode ) =>
+							setRenderingMode(
+								mode === 'simple'
+									? 'template-locked'
+									: 'post-only'
+							)
+						}
+						choices={ [
+							{
+								value: 'advanced',
+								label: __( 'Advanced' ),
+								info: __(
+									'Full control over layout and styling'
+								),
+							},
+							{
+								value: 'simple',
+								label: __( 'Simple' ),
+								info: __(
+									'Focus on page structure and content'
+								),
+							},
+						] }
+					/>
+				</NavigableMenu>
+			) }
+		/>
+	);
+}
+
+export default forwardRef( SimpleEditingModeSelector );

packages/editor/src/components/simple-editing-mode-selector/style.scss

@@ -0,0 +1,9 @@
+.editor-simple-editing-mode-selector__menu {
+	.components-menu-item__button {
+		height: auto;
+	}
+
+	.components-menu-item__info {
+		width: max-content;
+	}
+}

packages/editor/src/style.scss

@@ -52,6 +52,7 @@
 @import "./components/start-page-options/style.scss";
 @import "./components/start-template-options/style.scss";
 @import "./components/sidebar/style.scss";
+@import "./components/simple-editing-mode-selector/style.scss";
 @import "./components/site-discussion/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/text-editor/style.scss";