From 6574a25d87f2b3a7014ed49437423bb1211d6113 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 4 Sep 2024 14:25:21 +1000 Subject: [PATCH 1/9] First pass at adding simple editing mode --- lib/experimental/editor-settings.php | 4 + lib/experiments-page.php | 13 +++ .../src/components/document-tools/index.js | 7 +- .../provider/content-only-lock-sections.js | 88 ++++++++++++++ .../editor/src/components/provider/index.js | 13 ++- .../simple-editing-mode-selector/index.js | 107 ++++++++++++++++++ .../simple-editing-mode-selector/style.scss | 9 ++ packages/editor/src/style.scss | 1 + 8 files changed, 238 insertions(+), 4 deletions(-) create mode 100644 packages/editor/src/components/provider/content-only-lock-sections.js create mode 100644 packages/editor/src/components/simple-editing-mode-selector/index.js create mode 100644 packages/editor/src/components/simple-editing-mode-selector/style.scss diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 919be2e6e34a45..ed4bed2b2293e4 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -37,6 +37,10 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = 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 5acd5f0f192364..16a930303fdac9 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -186,6 +186,19 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-zoom-out-experiment', ) ); + + 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 ( + ( +