diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index c6bd99a18bf4c7..98cc5218547a47 100644 --- a/lib/experimental/editor-settings.php +++ b/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' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index f76dcdca7d18cb..187e9e453a0548 100644 --- a/lib/experiments-page.php +++ b/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' diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 54121652bbf131..8f74ab96d42d23 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/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 && ( { + 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; +} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index aaf25621d3324b..300e68b9c22042 100644 --- a/packages/editor/src/components/provider/index.js +++ b/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( - { mode === 'template-locked' && ( - - ) } + { mode === 'template-locked' && + type === TEMPLATE_POST_TYPE && ( + + ) } + { mode === 'template-locked' && + type !== TEMPLATE_POST_TYPE && ( + + ) } { type === 'wp_navigation' && ( ) } diff --git a/packages/editor/src/components/simple-editing-mode-selector/index.js b/packages/editor/src/components/simple-editing-mode-selector/index.js new file mode 100644 index 00000000000000..99c8de8ec04f34 --- /dev/null +++ b/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 = ( + + + +); + +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 ( + ( +