diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 13dfd6b33e56a6..f08c58ed2e2fa7 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -179,18 +179,18 @@ export function PrivateBlockToolbar( { disabled={ ! isDefaultEditingMode } isUsingBindings={ isUsingBindings } /> - { isDefaultEditingMode && ( - <> - { ! isMultiToolbar && ( - - ) } - - + { isDefaultEditingMode && ! isMultiToolbar && ( + + ) } + + { ( isDefaultEditingMode || + isContentOnlyEditingMode ) && ( + ) } diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index 4ec777a911cc73..e30e6ae6a52581 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/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 ( ( @@ -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 ) { <> { + __unstableSetEditorMode( newMode ); + } } choices={ [ + // { + // value: 'navigation', + // label: ( + // <> + // { selectIcon } + // { __( 'Select' ) } + // + // ), + // }, { - value: 'edit', + value: 'simple', label: ( <> - - { __( 'Edit' ) } + + { __( 'Simple' ) } ), }, { - value: 'navigation', + value: 'edit', label: ( <> - { selectIcon } - { __( 'Select' ) } + + { __( 'Advanced Mode' ) } ), }, diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index ebd310b3de9d3f..7beeeb5292a905 100644 --- a/packages/block-editor/src/store/actions.js +++ b/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; } }; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 2a840392fbffed..550b997d8fcd66 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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'; }