@@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
}
return null;
}
- if ( topLevelLockedBlock ) {
- return (
-
);
@@ -260,9 +207,13 @@ const AnimatedContainer = ( {
);
};
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+ clientId,
+ blockName,
+ isSectionBlock,
+} ) => {
const availableTabs = useInspectorControlsTabs( blockName );
- const showTabs = availableTabs?.length > 1;
+ const showTabs = ! isSectionBlock && availableTabs?.length > 1;
const hasBlockStyles = useSelect(
( select ) => {
@@ -274,6 +225,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
);
const blockInformation = useBlockDisplayInformation( clientId );
const borderPanelLabel = useBorderPanelLabel( { blockName } );
+ const contentClientIds = useSelect(
+ ( select ) => {
+ // Avoid unnecessary subscription.
+ if ( ! isSectionBlock ) {
+ return;
+ }
+
+ const {
+ getClientIdsOfDescendants,
+ getBlockName,
+ getBlockEditingMode,
+ } = select( blockEditorStore );
+ return getClientIdsOfDescendants( clientId ).filter(
+ ( current ) =>
+ getBlockName( current ) !== 'core/list-item' &&
+ getBlockEditingMode( current ) === 'contentOnly'
+ );
+ },
+ [ isSectionBlock, clientId ]
+ );
return (
@@ -296,35 +267,48 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
{ hasBlockStyles && (
) }
-
-
-
-
-
-
-
-
-
-
-
+
+ { contentClientIds && contentClientIds?.length > 0 && (
+
+
+
+ ) }
+
+ { ! isSectionBlock && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ ) }
) }
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index deda4e3b9d089..90c39649319dc 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -549,6 +549,7 @@ function BlockListBlockProvider( props ) {
getBlockMode,
isSelectionEnabled,
getTemplateLock,
+ isSectionBlock: _isSectionBlock,
getBlockWithoutAttributes,
getBlockAttributes,
canRemoveBlock,
@@ -571,8 +572,6 @@ function BlockListBlockProvider( props ) {
__unstableSelectionHasUnmergeableBlock,
isBlockBeingDragged,
isDragging,
- hasBlockMovingClientId,
- canInsertBlockType,
__unstableHasActiveBlockOverlayActive,
__unstableGetEditorMode,
getSelectedBlocksInitialCaretPosition,
@@ -632,7 +631,6 @@ function BlockListBlockProvider( props ) {
clientId,
checkDeep
);
- const movingClientId = hasBlockMovingClientId();
const blockEditingMode = getBlockEditingMode( clientId );
const multiple = hasBlockSupport( blockName, 'multiple', true );
@@ -653,7 +651,7 @@ function BlockListBlockProvider( props ) {
mode: getBlockMode( clientId ),
isSelectionEnabled: isSelectionEnabled(),
isLocked: !! getTemplateLock( rootClientId ),
- templateLock: getTemplateLock( clientId ),
+ isSectionBlock: _isSectionBlock( clientId ),
canRemove,
canMove,
isSelected: _isSelected,
@@ -681,11 +679,9 @@ function BlockListBlockProvider( props ) {
hasOverlay:
__unstableHasActiveBlockOverlayActive( clientId ) &&
! isDragging(),
- initialPosition:
- _isSelected &&
- ( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
- ? getSelectedBlocksInitialCaretPosition()
- : undefined,
+ initialPosition: _isSelected
+ ? getSelectedBlocksInitialCaretPosition()
+ : undefined,
isHighlighted: isBlockHighlighted( clientId ),
isMultiSelected,
isPartiallySelected:
@@ -694,13 +690,6 @@ function BlockListBlockProvider( props ) {
! __unstableSelectionHasUnmergeableBlock(),
isDragging: isBlockBeingDragged( clientId ),
hasChildSelected: isAncestorOfSelectedBlock,
- isBlockMovingMode: !! movingClientId,
- canInsertMovingBlock:
- movingClientId &&
- canInsertBlockType(
- getBlockName( movingClientId ),
- rootClientId
- ),
isEditingDisabled: blockEditingMode === 'disabled',
hasEditableOutline:
blockEditingMode !== 'disabled' &&
@@ -745,9 +734,7 @@ function BlockListBlockProvider( props ) {
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
- templateLock,
+ isSectionBlock,
isEditingDisabled,
hasEditableOutline,
className,
@@ -792,9 +779,7 @@ function BlockListBlockProvider( props ) {
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
- templateLock,
+ isSectionBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3f4b4c508aeb0..3e3865e689bea 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -80,7 +80,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
// since things like border-radius need to be able to be set on the block itself.
.block-editor-block-list__block.is-highlighted,
.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
- &.is-navigate-mode .block-editor-block-list__block.is-selected,
.block-editor-block-list__block:not([contenteditable="true"]):focus {
outline: none;
@@ -92,34 +91,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}
- // Moving blocks using keyboard (Ellipsis > Move).
- & .is-block-moving-mode.block-editor-block-list__block.is-selected {
-
- &::after {
- content: "";
- position: absolute;
- z-index: 0;
- pointer-events: none;
- transition:
- border-color 0.1s linear,
- border-style 0.1s linear,
- box-shadow 0.1s linear;
- right: 0;
- left: 0;
- top: -$default-block-margin * 0.5;
- border-radius: $radius-small;
- border-top: 4px solid $gray-400;
- bottom: auto;
- box-shadow: none;
- }
- }
-
- & .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
- &::after {
- border-color: var(--wp-admin-theme-color);
- }
- }
-
// Ensure an accurate partial text selection.
// To do this, we disable text selection on the main container, then re-enable it only on the
// elements that actually get selected.
@@ -134,14 +105,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
- // Should be invisible but not unfocusable.
- opacity: 0;
- font-size: 1px;
- height: 1px;
- padding: 0;
-}
-
.block-editor-block-list__layout .block-editor-block-list__block {
// With `position: static`, Safari marks a full-width selection rectangle, including margins.
// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -223,19 +186,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
background-color: transparent;
}
- // Reusable blocks clickthrough overlays.
- &.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
- // Remove only the top click overlay.
- &::after {
- display: none;
- }
-
- // Restore it for subsequent.
- .block-editor-block-list__layout.has-overlay::after {
- display: block;
- }
- }
-
// Reusable blocks parent border.
&.is-reusable.has-child-selected::after {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
@@ -307,7 +257,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
animation-name: block-editor-is-editable__animation;
animation-duration: 0.8s;
animation-timing-function: ease-out;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ea6128f153464..e2e019d4a9bf6 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -47,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
function Root( { className, ...settings } ) {
const isLargeViewport = useViewportMatch( 'medium' );
- const {
- isOutlineMode,
- isFocusMode,
- editorMode,
- temporarilyEditingAsBlocks,
- } = useSelect( ( select ) => {
- const {
- getSettings,
- __unstableGetEditorMode,
- getTemporarilyEditingAsBlocks,
- isTyping,
- } = unlock( select( blockEditorStore ) );
- const { outlineMode, focusMode } = getSettings();
- return {
- isOutlineMode: outlineMode && ! isTyping(),
- isFocusMode: focusMode,
- editorMode: __unstableGetEditorMode(),
- temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
- };
- }, [] );
+ const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+ useSelect( ( select ) => {
+ const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+ unlock( select( blockEditorStore ) );
+ const { outlineMode, focusMode } = getSettings();
+ return {
+ isOutlineMode: outlineMode && ! isTyping(),
+ isFocusMode: focusMode,
+ temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+ };
+ }, [] );
const registry = useRegistry();
const { setBlockVisibility } = useDispatch( blockEditorStore );
@@ -115,7 +106,6 @@ function Root( { className, ...settings } ) {
className: clsx( 'is-root-container', className, {
'is-outline-mode': isOutlineMode,
'is-focus-mode': isFocusMode && isLargeViewport,
- 'is-navigate-mode': editorMode === 'navigation',
} ),
},
settings
@@ -192,7 +182,8 @@ function Items( {
getTemplateLock,
getBlockEditingMode,
__unstableGetEditorMode,
- } = select( blockEditorStore );
+ isSectionBlock,
+ } = unlock( select( blockEditorStore ) );
const _order = getBlockOrder( rootClientId );
@@ -211,15 +202,16 @@ function Items( {
visibleBlocks: __unstableGetVisibleBlocks(),
isZoomOut: __unstableGetEditorMode() === 'zoom-out',
shouldRenderAppender:
+ ! isSectionBlock( rootClientId ) &&
+ getBlockEditingMode( rootClientId ) !== 'disabled' &&
+ ! getTemplateLock( rootClientId ) &&
hasAppender &&
__unstableGetEditorMode() !== 'zoom-out' &&
- ( hasCustomAppender
- ? ! getTemplateLock( rootClientId ) &&
- getBlockEditingMode( rootClientId ) !== 'disabled'
- : rootClientId === selectedBlockClientId ||
- ( ! rootClientId &&
- ! selectedBlockClientId &&
- ! _order.length ) ),
+ ( hasCustomAppender ||
+ rootClientId === selectedBlockClientId ||
+ ( ! rootClientId &&
+ ! selectedBlockClientId &&
+ ! _order.length ) ),
};
},
[ rootClientId, hasAppender, hasCustomAppender ]
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index c3a279a618b5d..1cf1d4908b076 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -25,7 +25,6 @@ import {
} from '../../block-edit/context';
import { useFocusHandler } from './use-focus-handler';
import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useNavModeExit } from './use-nav-mode-exit';
import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
import { useBlockRefProvider } from './use-block-refs';
import { useIntersectionObserver } from './use-intersection-observer';
@@ -98,13 +97,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
defaultClassName,
- templateLock,
+ isSectionBlock,
} = useContext( PrivateBlockContext );
// translators: %s: Type of block (i.e. Text, Image etc)
@@ -116,7 +113,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
useBlockRefProvider( clientId ),
useFocusHandler( clientId ),
useEventHandlers( { clientId, isSelected } ),
- useNavModeExit( clientId ),
useZoomOutModeExit( { editorMode } ),
useIsHovered( { clientId } ),
useIntersectionObserver(),
@@ -124,7 +120,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
useDisabled( { isDisabled: ! hasOverlay } ),
useFlashEditableBlocks( {
clientId,
- isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+ isEnabled: isSectionBlock,
} ),
useScrollIntoView( { isSelected } ),
] );
@@ -182,8 +178,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
'is-reusable': isReusable,
'is-dragging': isDragging,
'has-child-selected': hasChildSelected,
- 'is-block-moving-mode': isBlockMovingMode,
- 'can-insert-moving-block': canInsertMovingBlock,
'is-editing-disabled': isEditingDisabled,
'has-editable-outline': hasEditableOutline,
'has-negative-margin': hasNegativeMargin,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
deleted file mode 100644
index aa9c0a630c5bd..0000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Allows navigation mode to be exited by clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
- */
-export function useNavModeExit( clientId ) {
- const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
- const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
- return useRefEffect(
- ( node ) => {
- function onMouseDown( event ) {
- // Don't select a block if it's already handled by a child
- // block.
- if ( isNavigationMode() && ! event.defaultPrevented ) {
- // Prevent focus from moving to the block.
- event.preventDefault();
-
- // When clicking on a selected block, exit navigation mode.
- if ( isBlockSelected( clientId ) ) {
- setNavigationMode( false );
- } else {
- selectBlock( clientId );
- }
- }
- }
-
- node.addEventListener( 'mousedown', onMouseDown );
-
- return () => {
- node.removeEventListener( 'mousedown', onMouseDown );
- };
- },
- [ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
- );
-}
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 39063db4f52e0..4ebce4172e9b3 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -4,12 +4,9 @@
import {
createSlotFill,
MenuGroup,
- MenuItem,
__experimentalStyleProvider as StyleProvider,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
/>
) }
{ fills }
- { fillProps?.canMove &&
- ! fillProps?.onlyBlock &&
- ! isContentOnly && (
-
- ) }
{ selectedClientIds.length === 1 && (
{
const {
- getBlockCount,
getBlockName,
getBlockRootClientId,
getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
return {
firstParentClientId: _firstParentClientId,
- onlyBlock: 1 === getBlockCount( _firstParentClientId ),
parentBlockType:
_firstParentClientId &&
( getActiveBlockVariation(
@@ -195,7 +192,6 @@ export function BlockSettingsDropdown( {
canCopyStyles,
canDuplicate,
canInsertBlock,
- canMove,
canRemove,
onDuplicate,
onInsertAfter,
@@ -203,7 +199,6 @@ export function BlockSettingsDropdown( {
onRemove,
onCopy,
onPasteStyles,
- onMoveTo,
} ) => (
{
- const {
- getBlock,
- getBlockIndex,
- hasBlockMovingClientId,
- getBlockListSettings,
- __unstableGetEditorMode,
- getNextBlockClientId,
- getPreviousBlockClientId,
- canMoveBlock,
- } = select( blockEditorStore );
- const { getActiveBlockVariation, getBlockType } =
- select( blocksStore );
- const index = getBlockIndex( clientId );
- const { name, attributes } = getBlock( clientId );
- const blockType = getBlockType( name );
- const orientation =
- getBlockListSettings( rootClientId )?.orientation;
- const match = getActiveBlockVariation( name, attributes );
-
- return {
- blockMovingMode: hasBlockMovingClientId(),
- editorMode: __unstableGetEditorMode(),
- icon: match?.icon || blockType.icon,
- label: getAccessibleBlockLabel(
- blockType,
- attributes,
- index + 1,
- orientation
- ),
- canMove: canMoveBlock( clientId, rootClientId ),
- getNextBlockClientId,
- getPreviousBlockClientId,
- };
- },
- [ clientId, rootClientId ]
- );
- const { label, icon, blockMovingMode, editorMode, canMove } = selected;
- const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-
- // Focus the breadcrumb in navigation mode.
- useEffect( () => {
- if ( editorMode === 'navigation' ) {
- ref.current.focus();
- speak( label );
- }
- }, [ label, editorMode ] );
- const blockElement = useBlockElement( clientId );
-
- const {
- hasBlockMovingClientId,
- getBlockIndex,
- getBlockRootClientId,
- getClientIdsOfDescendants,
- getSelectedBlockClientId,
- getMultiSelectedBlocksEndClientId,
- getPreviousBlockClientId,
- getNextBlockClientId,
- } = useSelect( blockEditorStore );
- const {
- selectBlock,
- clearSelectedBlock,
- setBlockMovingClientId,
- moveBlockToPosition,
- } = useDispatch( blockEditorStore );
-
- function onKeyDown( event ) {
- const { keyCode } = event;
- const isUp = keyCode === UP;
- const isDown = keyCode === DOWN;
- const isLeft = keyCode === LEFT;
- const isRight = keyCode === RIGHT;
- const isTab = keyCode === TAB;
- const isEscape = keyCode === ESCAPE;
- const isEnter = keyCode === ENTER;
- const isSpace = keyCode === SPACE;
- const isShift = event.shiftKey;
-
- if ( keyCode === BACKSPACE || keyCode === DELETE ) {
- removeBlock( clientId );
- event.preventDefault();
- return;
- }
-
- const selectedBlockClientId = getSelectedBlockClientId();
- const selectionEndClientId = getMultiSelectedBlocksEndClientId();
- const selectionBeforeEndClientId = getPreviousBlockClientId(
- selectionEndClientId || selectedBlockClientId
- );
- const selectionAfterEndClientId = getNextBlockClientId(
- selectionEndClientId || selectedBlockClientId
- );
-
- const navigateUp = ( isTab && isShift ) || isUp;
- const navigateDown = ( isTab && ! isShift ) || isDown;
- // Move out of current nesting level (no effect if at root level).
- const navigateOut = isLeft;
- // Move into next nesting level (no effect if the current block has no innerBlocks).
- const navigateIn = isRight;
-
- let focusedBlockUid;
- if ( navigateUp ) {
- focusedBlockUid = selectionBeforeEndClientId;
- } else if ( navigateDown ) {
- focusedBlockUid = selectionAfterEndClientId;
- } else if ( navigateOut ) {
- focusedBlockUid =
- getBlockRootClientId( selectedBlockClientId ) ??
- selectedBlockClientId;
- } else if ( navigateIn ) {
- focusedBlockUid =
- getClientIdsOfDescendants( selectedBlockClientId )[ 0 ] ??
- selectedBlockClientId;
- }
- const startingBlockClientId = hasBlockMovingClientId();
- if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
- setBlockMovingClientId( null );
- event.preventDefault();
- }
- if ( ( isEnter || isSpace ) && startingBlockClientId ) {
- const sourceRoot = getBlockRootClientId( startingBlockClientId );
- const destRoot = getBlockRootClientId( selectedBlockClientId );
- const sourceBlockIndex = getBlockIndex( startingBlockClientId );
- let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
- if (
- sourceBlockIndex < destinationBlockIndex &&
- sourceRoot === destRoot
- ) {
- destinationBlockIndex -= 1;
- }
- moveBlockToPosition(
- startingBlockClientId,
- sourceRoot,
- destRoot,
- destinationBlockIndex
- );
- selectBlock( startingBlockClientId );
- setBlockMovingClientId( null );
- }
- // Prevent the block from being moved into itself.
- if (
- startingBlockClientId &&
- selectedBlockClientId === startingBlockClientId &&
- navigateIn
- ) {
- return;
- }
- if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
- if ( focusedBlockUid ) {
- event.preventDefault();
- selectBlock( focusedBlockUid );
- } else if ( isTab && selectedBlockClientId ) {
- let nextTabbable;
-
- if ( navigateDown ) {
- nextTabbable = blockElement;
- do {
- nextTabbable = focus.tabbable.findNext( nextTabbable );
- } while (
- nextTabbable &&
- blockElement.contains( nextTabbable )
- );
-
- if ( ! nextTabbable ) {
- nextTabbable =
- blockElement.ownerDocument.defaultView.frameElement;
- nextTabbable = focus.tabbable.findNext( nextTabbable );
- }
- } else {
- nextTabbable = focus.tabbable.findPrevious( blockElement );
- }
-
- if ( nextTabbable ) {
- event.preventDefault();
- nextTabbable.focus();
- clearSelectedBlock();
- }
- }
- }
- }
-
- const classNames = clsx(
- 'block-editor-block-list__block-selection-button',
- {
- 'is-block-moving-mode': !! blockMovingMode,
- }
- );
-
- const dragHandleLabel = __( 'Drag' );
- const showBlockDraggable = canMove && editorMode === 'navigation';
-
- return (
-
-
-
-
-
- { showBlockDraggable && (
-
-
- { ( draggableProps ) => (
-
- ) }
-
-
- ) }
- { editorMode === 'navigation' && (
-
-
-
- ) }
-
-
- );
-}
-
-export default forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
deleted file mode 100644
index ae03bdb4f5164..0000000000000
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import { PrivateBlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-
-function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
- const {
- capturingClientId,
- isInsertionPointVisible,
- lastClientId,
- rootClientId,
- } = useSelectedBlockToolProps( clientId );
-
- const popoverProps = useBlockToolbarPopoverProps( {
- contentElement: __unstableContentRef?.current,
- clientId,
- } );
-
- return (
-
-
-
- );
-}
-
-export default forwardRef( BlockToolbarBreadcrumb );
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 24f60dbbf970a..099323925384b 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
default as InsertionPoint,
} from './insertion-point';
import BlockToolbarPopover from './block-toolbar-popover';
-import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
import ZoomOutPopover from './zoom-out-popover';
import { store as blockEditorStore } from '../../store';
import usePopoverScroll from '../block-popover/use-popover-scroll';
@@ -78,7 +77,6 @@ export default function BlockTools( {
const { getGroupingBlockName } = useSelect( blocksStore );
const {
showEmptyBlockSideInserter,
- showBreadcrumb,
showBlockToolbarPopover,
showZoomOutToolbar,
} = useShowBlockTools();
@@ -223,14 +221,6 @@ export default function BlockTools( {
/>
) }
- { showBreadcrumb && (
-
- ) }
-
{ showZoomOutToolbar && (
{
const {
@@ -48,7 +47,6 @@ function InbetweenInsertionPointPopover( {
getPreviousBlockClientId,
getNextBlockClientId,
getSettings,
- isNavigationMode: _isNavigationMode,
__unstableGetEditorMode,
} = select( blockEditorStore );
const insertionPoint = getBlockInsertionPoint();
@@ -78,7 +76,6 @@ function InbetweenInsertionPointPopover( {
getBlockListSettings( insertionPoint.rootClientId )
?.orientation || 'vertical',
rootClientId: insertionPoint.rootClientId,
- isNavigationMode: _isNavigationMode(),
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter,
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
@@ -144,7 +141,7 @@ function InbetweenInsertionPointPopover( {
},
};
- if ( isDistractionFree && ! isNavigationMode ) {
+ if ( isDistractionFree ) {
return null;
}
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 9f1325d7f95a1..a3d9153273e98 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -84,84 +84,6 @@
}
}
-/**
- * Block Label for Navigation/Selection Mode
- */
-
-.block-editor-block-list__block-selection-button {
- display: inline-flex;
- padding: 0 $grid-unit-15;
- z-index: z-index(".block-editor-block-list__block-selection-button");
-
- // Dark block UI appearance.
- border-radius: $radius-small;
- background-color: $gray-900;
-
- font-size: $default-font-size;
- height: $block-toolbar-height;
-
- .block-editor-block-list__block-selection-button__content {
- margin: auto;
- display: inline-flex;
- align-items: center;
-
- > .components-flex__item {
- margin-right: $grid-unit-15 * 0.5;
- }
- }
- .components-button.has-icon.block-selection-button_drag-handle {
- cursor: grab;
- padding: 0;
- height: $grid-unit-30;
- min-width: $grid-unit-30;
- margin-left: -2px;
-
- // Drag handle is smaller than the others.
- svg {
- min-width: 18px;
- min-height: 18px;
- }
- }
-
- .block-editor-block-icon {
- font-size: $default-font-size;
- color: $white;
- height: $block-toolbar-height;
- }
-
- // The button here has a special style to appear as a toolbar.
- .components-button {
- min-width: $button-size;
- color: $white;
- height: $block-toolbar-height;
-
- // When button is focused, it receives a box-shadow instead of the border.
- &:focus {
- box-shadow: none;
- border: none;
- }
-
- &:active {
- color: $white;
- }
-
- // Make sure the button has no hover style when it's disabled.
- &[aria-disabled="true"]:hover {
- color: $white;
- }
-
- display: flex;
- }
- .block-selection-button_select-button.components-button {
- padding: 0;
- }
-
- .block-editor-block-mover {
- background: unset;
- border: none;
- }
-}
-
// Hide the popover block editor list while dragging.
// Using a hacky animation to delay hiding the element.
// It's needed because if we hide the element immediately upon dragging,
@@ -178,14 +100,10 @@
.components-popover.block-editor-block-list__block-popover {
// Position the block toolbar.
- .block-editor-block-list__block-selection-button,
.block-editor-block-contextual-toolbar {
pointer-events: all;
margin-top: $grid-unit-10;
margin-bottom: $grid-unit-10;
- }
-
- .block-editor-block-contextual-toolbar {
border: $border-width solid $gray-900;
border-radius: $radius-small;
overflow: visible; // allow the parent selector to be visible
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 07e0ebd16a64b..02a8f0583bcdd 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -22,7 +22,6 @@ export function useShowBlockTools() {
getBlock,
getBlockMode,
getSettings,
- hasMultiSelection,
__unstableGetEditorMode,
isTyping,
} = select( blockEditorStore );
@@ -42,29 +41,20 @@ export function useShowBlockTools() {
! isTyping() &&
editorMode === 'edit' &&
isEmptyDefaultBlock;
- const maybeShowBreadcrumb =
- hasSelectedBlock &&
- ! hasMultiSelection() &&
- editorMode === 'navigation';
-
const isZoomOut = editorMode === 'zoom-out';
const _showZoomOutToolbar =
isZoomOut &&
block?.attributes?.align === 'full' &&
- ! _showEmptyBlockSideInserter &&
- ! maybeShowBreadcrumb;
+ ! _showEmptyBlockSideInserter;
const _showBlockToolbarPopover =
! _showZoomOutToolbar &&
! getSettings().hasFixedToolbar &&
! _showEmptyBlockSideInserter &&
hasSelectedBlock &&
- ! isEmptyDefaultBlock &&
- ! maybeShowBreadcrumb;
+ ! isEmptyDefaultBlock;
return {
showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
- showBreadcrumb:
- ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
showBlockToolbarPopover: _showBlockToolbarPopover,
showZoomOutToolbar: _showZoomOutToolbar,
};
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index a3c46c4b4c970..560bfc6ebb58d 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
@@ -26,7 +21,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
( select ) => {
const {
getBlock,
- hasBlockMovingClientId,
getNextBlockClientId,
getPreviousBlockClientId,
canRemoveBlock,
@@ -62,7 +56,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
}
return {
- blockMovingMode: hasBlockMovingClientId(),
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
@@ -75,7 +68,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
);
const {
- blockMovingMode,
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
@@ -87,15 +79,11 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
const { removeBlock, __unstableSetEditorMode } =
useDispatch( blockEditorStore );
- const classNames = clsx( 'zoom-out-toolbar', {
- 'is-block-moving-mode': !! blockMovingMode,
- } );
-
const showBlockDraggable = canMove && ! isBlockTemplatePart;
return (
{
const {
getBlockName,
- isBlockSelected,
- hasSelectedInnerBlock,
__unstableGetEditorMode,
getTemplateLock,
getBlockRootClientId,
getBlockEditingMode,
getBlockSettings,
- isDragging,
getSectionRootClientId,
} = unlock( select( blockEditorStore ) );
let _isDropZoneDisabled;
@@ -213,8 +210,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
const { hasBlockSupport, getBlockType } = select( blocksStore );
const blockName = getBlockName( clientId );
- const enableClickThrough =
- __unstableGetEditorMode() === 'navigation';
const blockEditingMode = getBlockEditingMode( clientId );
const parentClientId = getBlockRootClientId( clientId );
const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
@@ -236,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
'__experimentalExposeControlsToChildren',
false
),
- hasOverlay:
- blockName !== 'core/template' &&
- ! isBlockSelected( clientId ) &&
- ! hasSelectedInnerBlock( clientId, true ) &&
- enableClickThrough &&
- ! isDragging(),
name: blockName,
blockType: getBlockType( blockName ),
parentLock: getTemplateLock( parentClientId ),
@@ -254,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
);
const {
__experimentalCaptureToolbars,
- hasOverlay,
name,
blockType,
parentLock,
@@ -299,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
className: clsx(
props.className,
'block-editor-block-list__layout',
- __unstableDisableLayoutClassNames ? '' : layoutClassNames,
- {
- 'has-overlay': hasOverlay,
- }
+ __unstableDisableLayoutClassNames ? '' : layoutClassNames
),
children: clientId ? (
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 91bfbd7eddaa0..0ed2b162b127b 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
-import { useSelect } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
/**
@@ -14,7 +8,6 @@ import { forwardRef } from '@wordpress/element';
*/
import ListViewBlockSelectButton from './block-select-button';
import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
import { useListViewContext } from './context';
const ListViewBlockContents = forwardRef(
@@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
ref
) => {
const { clientId } = block;
-
- const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
- ( select ) => {
- const { hasBlockMovingClientId, getSelectedBlockClientId } =
- select( blockEditorStore );
- return {
- blockMovingClientId: hasBlockMovingClientId(),
- selectedBlockInBlockEditor: getSelectedBlockClientId(),
- };
- },
- []
- );
-
const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
useListViewContext();
- const isBlockMoveTarget =
- blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
- const className = clsx( 'block-editor-list-view-block-contents', {
- 'is-dropping-before': isBlockMoveTarget,
- } );
-
// Only include all selected blocks if the currently clicked on block
// is one of the selected blocks. This ensures that if a user attempts
// to drag a block that isn't part of the selection, they're still able
@@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
{ ( { draggable, onDragStart, onDragEnd } ) => (
(
<>
-
+
-
- { __( 'Edit' ) }
+ { selectIcon }
+ { __( 'Design' ) }
),
+ info: __(
+ 'Full control over layout and styling.'
+ ),
},
{
value: 'navigation',
label: (
<>
- { selectIcon }
- { __( 'Select' ) }
+
+ { __( 'Edit' ) }
),
+ info: __( 'Focus on content.' ),
},
] }
/>
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss
index 03774fe0f6b9d..07ca91d346d90 100644
--- a/packages/block-editor/src/components/tool-selector/style.scss
+++ b/packages/block-editor/src/components/tool-selector/style.scss
@@ -8,3 +8,8 @@
color: $gray-700;
min-width: 280px;
}
+
+.block-editor-tool-selector__menu .components-menu-item__info {
+ margin-left: $grid-unit-30 + $grid-unit-15; // icon size + margin
+ text-align: left;
+}
diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js
index 8a09999ecdff3..c88ec4e537892 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -16,7 +16,6 @@ import {
plus as add,
group,
ungroup,
- moveTo as move,
} from '@wordpress/icons';
/**
@@ -127,59 +126,6 @@ export const useTransformCommands = () => {
return { isLoading: false, commands };
};
-const useActionsCommands = () => {
- const { clientIds } = useSelect( ( select ) => {
- const { getSelectedBlockClientIds } = select( blockEditorStore );
- const selectedBlockClientIds = getSelectedBlockClientIds();
-
- return {
- clientIds: selectedBlockClientIds,
- };
- }, [] );
-
- const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
- useSelect( blockEditorStore );
-
- const { setBlockMovingClientId, setNavigationMode, selectBlock } =
- useDispatch( blockEditorStore );
-
- if ( ! clientIds || clientIds.length < 1 ) {
- return { isLoading: false, commands: [] };
- }
-
- const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
- const canMove =
- canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
-
- const commands = [];
-
- if ( canMove ) {
- commands.push( {
- name: 'move-to',
- label: __( 'Move to' ),
- callback: () => {
- setNavigationMode( true );
- selectBlock( clientIds[ 0 ] );
- setBlockMovingClientId( clientIds[ 0 ] );
- },
- icon: move,
- } );
- }
-
- return {
- isLoading: false,
- commands: commands.map( ( command ) => ( {
- ...command,
- name: 'core/block-editor/action-' + command.name,
- callback: ( { close } ) => {
- command.callback();
- close();
- },
- } ) ),
- };
-};
-
const useQuickActionsCommands = () => {
const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
const {
@@ -344,10 +290,6 @@ export const useBlockCommands = () => {
name: 'core/block-editor/blockTransforms',
hook: useTransformCommands,
} );
- useCommandLoader( {
- name: 'core/block-editor/blockActions',
- hook: useActionsCommands,
- } );
useCommandLoader( {
name: 'core/block-editor/blockQuickActions',
hook: useQuickActionsCommands,
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index b321d7c8d2995..3788c7021fd66 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { focus, isFormElement } from '@wordpress/dom';
-import { TAB, ESCAPE } from '@wordpress/keycodes';
+import { TAB } from '@wordpress/keycodes';
import { useSelect, useDispatch } from '@wordpress/data';
import { useRefEffect, useMergeRefs } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
@@ -21,19 +21,9 @@ export default function useTabNav() {
const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
useSelect( blockEditorStore );
- const { setNavigationMode, setLastFocus } = unlock(
- useDispatch( blockEditorStore )
- );
- const isNavigationMode = useSelect(
- ( select ) => select( blockEditorStore ).isNavigationMode(),
- []
- );
-
+ const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
- // Don't allow tabbing to this element in Navigation mode.
- const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
-
// Reference that holds the a flag for enabling or disabling
// capturing on the focus capture elements.
const noCaptureRef = useRef();
@@ -56,8 +46,6 @@ export default function useTabNav() {
.focus();
}
} else {
- setNavigationMode( true );
-
const canvasElement =
container.current.ownerDocument === event.target.ownerDocument
? container.current
@@ -82,7 +70,7 @@ export default function useTabNav() {
const before = (
);
@@ -90,7 +78,7 @@ export default function useTabNav() {
const after = (
);
@@ -101,12 +89,6 @@ export default function useTabNav() {
return;
}
- if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
- event.preventDefault();
- setNavigationMode( true );
- return;
- }
-
// In Edit mode, Tab should focus the first tabbable element after
// the content, which is normally the sidebar (with block controls)
// and Shift+Tab should focus the first tabbable element before the
@@ -119,20 +101,6 @@ export default function useTabNav() {
const isShift = event.shiftKey;
const direction = isShift ? 'findPrevious' : 'findNext';
-
- if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
- // Preserve the behaviour of entering navigation mode when
- // tabbing into the content without a block selection.
- // `onFocusCapture` already did this previously, but we need to
- // do it again here because after clearing block selection,
- // focus land on the writing flow container and pressing Tab
- // will no longer send focus through the focus capture element.
- if ( event.target === node ) {
- setNavigationMode( true );
- }
- return;
- }
-
const nextTabbable = focus.tabbable[ direction ]( event.target );
// We want to constrain the tabbing to the block and its child blocks.
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 36d428dca6b76..1ef4e118fb1bb 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -8,7 +8,6 @@
@import "./components/button-block-appender/content.scss";
@import "./components/default-block-appender/content.scss";
@import "./components/iframe/content.scss";
-@import "./components/inner-blocks/content.scss";
@import "./components/media-placeholder/content.scss";
@import "./components/plain-text/content.scss";
@import "./components/rich-text/content.scss";
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e91f997ca6783..ee11838395ec5 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1728,23 +1728,24 @@ export const __unstableSetEditorMode =
};
/**
- * Action that enables or disables the block moving mode.
+ * Set the block moving client ID.
*
- * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
+ * @deprecated
+ *
+ * @return {Object} Action object.
*/
-export const setBlockMovingClientId =
- ( hasBlockMovingClientId = null ) =>
- ( { dispatch } ) => {
- dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
-
- if ( hasBlockMovingClientId ) {
- speak(
- __(
- 'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
- )
- );
+export function setBlockMovingClientId() {
+ deprecated(
+ 'wp.data.dispatch( "core/block-editor" ).setBlockMovingClientId',
+ {
+ since: '6.7',
+ hint: 'Block moving mode feature has been removed',
}
+ );
+ return {
+ type: 'DO_NOTHING',
};
+}
/**
* Action that duplicates a list of blocks.
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 01ad8f69febc9..0e77e8e2ed433 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -15,6 +15,7 @@ import {
getBlockName,
getTemplateLock,
getClientIdsWithDescendants,
+ isNavigationMode,
} from './selectors';
import {
checkAllowListRecursive,
@@ -479,19 +480,74 @@ export const getContentLockingParent = createSelector(
( state, clientId ) => {
let current = clientId;
let result;
- while ( ( current = state.blocks.parents.get( current ) ) ) {
- if (
- getBlockName( state, current ) === 'core/block' ||
- getTemplateLock( state, current ) === 'contentOnly'
- ) {
+ while (
+ ! result &&
+ ( current = state.blocks.parents.get( current ) )
+ ) {
+ if ( getTemplateLock( state, current ) === 'contentOnly' ) {
result = current;
}
}
return result;
},
- ( state ) => [ state.blocks.parents, state.blockListSettings ]
+ ( state ) => [
+ state.blocks.parents,
+ state.blockListSettings,
+ state.settings.templateLock,
+ ]
);
+/**
+ * Retrieves the client ID of the parent section block.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getParentSectionBlock = createSelector(
+ ( state, clientId ) => {
+ let current = clientId;
+ let result;
+ while (
+ ! result &&
+ ( current = state.blocks.parents.get( current ) )
+ ) {
+ if ( isSectionBlock( state, current ) ) {
+ result = current;
+ }
+ }
+ return result;
+ },
+ ( state ) => [
+ state.blocks.parents,
+ state.blocks.order,
+ state.blockListSettings,
+ state.editorMode,
+ state.settings.templateLock,
+ state.blocks.byClientId,
+ getSectionRootClientId( state ),
+ ]
+);
+
+/**
+ * Retrieves the client ID is a content locking parent
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {boolean} Whether the block is a content locking parent.
+ */
+export function isSectionBlock( state, clientId ) {
+ const sectionRootClientId = getSectionRootClientId( state );
+ const sectionClientIds = getBlockOrder( state, sectionRootClientId );
+ return (
+ getBlockName( state, clientId ) === 'core/block' ||
+ getTemplateLock( state, clientId ) === 'contentOnly' ||
+ ( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
+ );
+}
+
/**
* Retrieves the client ID of the block that is content locked but is
* currently being temporarily edited as a non-locked block.
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index cd4569c45e580..3a99d18ef17ee 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1795,11 +1795,6 @@ export const blockListSettings = ( state = {}, action ) => {
* @return {string} Updated state.
*/
export function editorMode( state = 'edit', action ) {
- // Let inserting block in navigation mode always trigger Edit mode.
- if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
- return 'edit';
- }
-
if ( action.type === 'SET_EDITOR_MODE' ) {
return action.mode;
}
@@ -1807,26 +1802,6 @@ export function editorMode( state = 'edit', action ) {
return state;
}
-/**
- * Reducer returning whether the block moving mode is enabled or not.
- *
- * @param {string|null} state Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string|null} Updated state.
- */
-export function hasBlockMovingClientId( state = null, action ) {
- if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
- return action.hasBlockMovingClientId;
- }
-
- if ( action.type === 'SET_EDITOR_MODE' ) {
- return null;
- }
-
- return state;
-}
-
/**
* Reducer return an updated state representing the most recent block attribute
* update. The state is structured as an object where the keys represent the
@@ -2104,7 +2079,6 @@ const combinedReducers = combineReducers( {
lastBlockAttributesChange,
lastFocus,
editorMode,
- hasBlockMovingClientId,
expandedBlock,
highlightedBlock,
lastBlockInserted,
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 30fdb76bdbe78..ca66340a89e30 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -38,6 +38,8 @@ import {
getTemporarilyEditingAsBlocks,
getTemporarilyEditingFocusModeToRevert,
getSectionRootClientId,
+ isSectionBlock,
+ getParentSectionBlock,
} from './private-selectors';
/**
@@ -1582,6 +1584,11 @@ const canInsertBlockTypeUnmemoized = (
return false;
}
+ const _isSectionBlock = !! isSectionBlock( state, rootClientId );
+ if ( _isSectionBlock ) {
+ return false;
+ }
+
if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
return false;
}
@@ -1733,6 +1740,11 @@ export function canRemoveBlock( state, clientId ) {
return false;
}
+ const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+ if ( isBlockWithinSection ) {
+ return false;
+ }
+
return getBlockEditingMode( state, rootClientId ) !== 'disabled';
}
@@ -2674,12 +2686,17 @@ export function __unstableGetEditorMode( state ) {
/**
* Returns whether block moving mode is enabled.
*
- * @param {Object} state Editor state.
- *
- * @return {string} Client Id of moving block.
+ * @deprecated
*/
-export function hasBlockMovingClientId( state ) {
- return state.hasBlockMovingClientId;
+export function hasBlockMovingClientId() {
+ deprecated(
+ 'wp.data.select( "core/block-editor" ).hasBlockMovingClientId',
+ {
+ since: '6.7',
+ hint: 'Block moving mode feature has been removed',
+ }
+ );
+ return false;
}
/**
@@ -2862,11 +2879,9 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
'__experimentalDisableBlockOverlay',
false
);
- const shouldEnableIfUnselected =
- editorMode === 'navigation' ||
- ( blockSupportDisable
- ? false
- : areInnerBlocksControlled( state, clientId ) );
+ const shouldEnableIfUnselected = blockSupportDisable
+ ? false
+ : areInnerBlocksControlled( state, clientId );
return (
shouldEnableIfUnselected &&
@@ -2955,9 +2970,29 @@ export const getBlockEditingMode = createRegistrySelector(
if ( ! clientId ) {
return 'default';
}
+ const sectionRootClientId = getSectionRootClientId( state );
+ if (
+ editorMode === 'navigation' &&
+ clientId === sectionRootClientId
+ ) {
+ return 'default';
+ }
+ const sectionsClientIds = getBlockOrder(
+ state,
+ sectionRootClientId
+ );
const rootClientId = getBlockRootClientId( state, clientId );
const templateLock = getTemplateLock( state, rootClientId );
- if ( templateLock === 'contentOnly' ) {
+ if (
+ templateLock === 'contentOnly' ||
+ editorMode === 'navigation'
+ ) {
+ // Sections should always be contentOnly in navigation mode.
+ // This will also cause them to display in List View providing
+ // a structure.
+ if ( sectionsClientIds.includes( clientId ) ) {
+ return 'contentOnly';
+ }
const name = getBlockName( state, clientId );
const isContent =
select( blocksStore ).__experimentalHasContentRoleAttribute(
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
index 45432b750bb9e..5f427e79cf699 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -394,6 +394,10 @@ describe( 'private selectors', () => {
parents: new Map( [
[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
] ),
+ order: new Map( [
+ [ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+ [ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ],
+ ] ),
},
blockEditingModes: new Map(),
};
@@ -424,6 +428,21 @@ describe( 'private selectors', () => {
'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
],
] ),
+
+ order: new Map( [
+ [
+ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+ [
+ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+ ],
+ ],
+ [
+ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+ [ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+ ],
+ [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+ ] ),
},
blockEditingModes: new Map( [
[ '', 'disabled' ],
@@ -461,6 +480,21 @@ describe( 'private selectors', () => {
'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
],
] ),
+ order: new Map( [
+ [
+ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+ [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ],
+ ],
+ [
+ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+ [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ],
+ ],
+ [
+ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+ [ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+ ],
+ [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+ ] ),
},
blockEditingModes: new Map( [
[ '', 'disabled' ],
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 85006621c4701..04899a9ee243f 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -2694,6 +2694,7 @@ describe( 'selectors', () => {
byClientId: new Map(),
attributes: new Map(),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {
@@ -2711,6 +2712,7 @@ describe( 'selectors', () => {
blocks: {
byClientId: new Map(),
attributes: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {
@@ -2728,6 +2730,7 @@ describe( 'selectors', () => {
byClientId: new Map(),
attributes: new Map(),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2748,6 +2751,7 @@ describe( 'selectors', () => {
byClientId: new Map(),
attributes: new Map(),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2772,6 +2776,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2796,6 +2801,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
block1: {},
@@ -2822,6 +2828,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
block1: {},
@@ -2848,6 +2855,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
block1: {
@@ -2876,6 +2884,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
block1: {
@@ -2904,6 +2913,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2932,6 +2942,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
block1: {
@@ -2960,6 +2971,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2976,6 +2988,7 @@ describe( 'selectors', () => {
byClientId: new Map(),
attributes: new Map(),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {},
settings: {},
@@ -2992,7 +3005,7 @@ describe( 'selectors', () => {
byClientId: new Map(
Object.entries( {
block1: { name: 'core/test-block-ancestor' },
- block2: { name: 'core/block' },
+ block2: { name: 'core/block1' },
} )
),
attributes: new Map(
@@ -3006,6 +3019,10 @@ describe( 'selectors', () => {
block2: 'block1',
} )
),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3023,6 +3040,37 @@ describe( 'selectors', () => {
).toBe( true );
} );
+ it( 'should prevent blocks from being inserted within sections', () => {
+ const state = {
+ blocks: {
+ byClientId: new Map(
+ Object.entries( {
+ block1: { name: 'core/block' }, // reusable blocks are always sections.
+ } )
+ ),
+ attributes: new Map(
+ Object.entries( {
+ block1: {},
+ } )
+ ),
+ parents: new Map(
+ Object.entries( {
+ block1: '',
+ } )
+ ),
+ order: new Map( [ [ '', [ 'block1' ] ] ] ),
+ },
+ blockListSettings: {
+ block1: {},
+ },
+ settings: {},
+ blockEditingModes: new Map(),
+ };
+ expect(
+ canInsertBlockType( state, 'core/test-block-a', 'block1' )
+ ).toBe( false );
+ } );
+
it( 'should allow blocks to be inserted if both parent and ancestor restrictions are met', () => {
const state = {
blocks: {
@@ -3046,6 +3094,11 @@ describe( 'selectors', () => {
block3: 'block2',
} )
),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ [ 'block2', [ 'block3' ] ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3086,6 +3139,11 @@ describe( 'selectors', () => {
block3: 'block2',
} )
),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ [ 'block2', [ 'block3' ] ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3126,6 +3184,11 @@ describe( 'selectors', () => {
block3: 'block2',
} )
),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ [ 'block2', [ 'block3' ] ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3159,11 +3222,14 @@ describe( 'selectors', () => {
block2: {},
} )
),
- parents: new Map(
- Object.entries( {
- block2: 'block1',
- } )
- ),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ ] ),
+ parents: new Map( [
+ [ 'block2', 'block1' ],
+ [ 'block1', '' ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3203,6 +3269,10 @@ describe( 'selectors', () => {
block2: 'block1',
} )
),
+ order: new Map( [
+ [ '', [ 'block1' ] ],
+ [ 'block1', [ 'block2' ] ],
+ ] ),
},
blockListSettings: {
block1: {},
@@ -3240,6 +3310,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
1: {
@@ -3273,6 +3344,7 @@ describe( 'selectors', () => {
} )
),
parents: new Map(),
+ order: new Map(),
},
blockListSettings: {
1: {
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index b630912a5163d..af991608238e2 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -117,5 +117,6 @@ export function getInsertBlockTypeDependants( state, rootClientId ) {
state.settings.allowedBlockTypes,
state.settings.templateLock,
state.blockEditingModes,
+ state.editorMode,
];
}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4dd18914a7acb..5161b5b524549 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
- `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)).
- `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
- `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)).
+- `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)).
- `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)).
### Deprecations
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e..383eb4066ba86 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,7 @@
.components-menu-items-choice,
.components-menu-items-choice.components-button {
+ height: auto;
+
svg {
margin-right: $grid-unit-15;
}
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
index fcf7adfa77635..c772a062b9e3b 100644
--- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -17,21 +17,17 @@ import { __, _x } from '@wordpress/i18n';
*/
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+ const postContentBlocks = usePostContentBlocks();
const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
( select ) => {
const {
- getBlockEditingMode,
getBlockParentsByBlockName,
getSettings,
getBlockAttributes,
} = select( blockEditorStore );
- const contentOnly =
- getBlockEditingMode( clientId ) === 'contentOnly';
- if ( ! contentOnly ) {
- return {};
- }
const patternParent = getBlockParentsByBlockName(
clientId,
'core/block',
@@ -48,10 +44,14 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
} else {
const { getCurrentTemplateId } = select( editorStore );
const templateId = getCurrentTemplateId();
- const { getContentLockingParent } = unlock(
+ const { getBlockParents } = unlock(
select( blockEditorStore )
);
- if ( ! getContentLockingParent( clientId ) && templateId ) {
+ if (
+ ! getBlockParents( clientId ).some( ( parent ) =>
+ postContentBlocks.includes( parent )
+ )
+ ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_template',
@@ -59,6 +59,9 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
);
}
}
+ if ( ! record ) {
+ return {};
+ }
const _canEditTemplates = select( coreStore ).canUser( 'create', {
kind: 'postType',
name: 'wp_template',
@@ -70,7 +73,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
getSettings().onNavigateToEntityRecord,
};
},
- [ clientId ]
+ [ clientId, postContentBlocks ]
);
if ( ! entity ) {
diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
index 9abb0e14079d5..ae4fd1075fc26 100644
--- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -3,52 +3,32 @@
*/
import { useSelect, useRegistry } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useMemo } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const POST_CONTENT_BLOCK_TYPES = [
- 'core/post-title',
- 'core/post-featured-image',
- 'core/post-content',
-];
+import usePostContentBlocks from './use-post-content-blocks';
/**
* Component that when rendered, makes it so that the site editor allows only
* page content to be edited.
*/
export default function DisableNonPageContentBlocks() {
- const contentOnlyBlockTypes = useMemo(
- () => [
- ...applyFilters(
- 'editor.postContentBlockTypes',
- POST_CONTENT_BLOCK_TYPES
- ),
- 'core/template-part',
- ],
- []
- );
-
- // Note that there are two separate subscriptions because the result for each
- // returns a new array.
- const contentOnlyIds = useSelect(
+ const contentOnlyIds = usePostContentBlocks();
+ const templateParts = useSelect( ( select ) => {
+ const { getBlocksByName } = select( blockEditorStore );
+ return getBlocksByName( 'core/template-part' );
+ }, [] );
+ const disabledIds = useSelect(
( select ) => {
- const { getPostBlocksByName } = unlock( select( editorStore ) );
- return getPostBlocksByName( contentOnlyBlockTypes );
+ const { getBlockOrder } = select( blockEditorStore );
+ return templateParts.flatMap( ( clientId ) =>
+ getBlockOrder( clientId )
+ );
},
- [ contentOnlyBlockTypes ]
+ [ templateParts ]
);
- const disabledIds = useSelect( ( select ) => {
- const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
- return getBlocksByName( 'core/template-part' ).flatMap( ( clientId ) =>
- getBlockOrder( clientId )
- );
- }, [] );
const registry = useRegistry();
@@ -61,6 +41,9 @@ export default function DisableNonPageContentBlocks() {
for ( const clientId of contentOnlyIds ) {
setBlockEditingMode( clientId, 'contentOnly' );
}
+ for ( const clientId of templateParts ) {
+ setBlockEditingMode( clientId, 'contentOnly' );
+ }
for ( const clientId of disabledIds ) {
setBlockEditingMode( clientId, 'disabled' );
}
@@ -72,12 +55,15 @@ export default function DisableNonPageContentBlocks() {
for ( const clientId of contentOnlyIds ) {
unsetBlockEditingMode( clientId );
}
+ for ( const clientId of templateParts ) {
+ unsetBlockEditingMode( clientId );
+ }
for ( const clientId of disabledIds ) {
unsetBlockEditingMode( clientId );
}
} );
};
- }, [ contentOnlyIds, disabledIds, registry ] );
+ }, [ templateParts, contentOnlyIds, disabledIds, registry ] );
return null;
}
diff --git a/packages/editor/src/components/provider/use-post-content-blocks.js b/packages/editor/src/components/provider/use-post-content-blocks.js
new file mode 100644
index 0000000000000..bdd277157e47e
--- /dev/null
+++ b/packages/editor/src/components/provider/use-post-content-blocks.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
+ 'core/post-title',
+ 'core/post-featured-image',
+ 'core/post-content',
+];
+
+export default function usePostContentBlocks() {
+ const contentOnlyBlockTypes = useMemo(
+ () => [
+ ...applyFilters(
+ 'editor.postContentBlockTypes',
+ POST_CONTENT_BLOCK_TYPES
+ ),
+ ],
+ []
+ );
+
+ // Note that there are two separate subscriptions because the result for each
+ // returns a new array.
+ const contentOnlyIds = useSelect(
+ ( select ) => {
+ const { getPostBlocksByName } = unlock( select( editorStore ) );
+ return getPostBlocksByName( contentOnlyBlockTypes );
+ },
+ [ contentOnlyBlockTypes ]
+ );
+
+ return contentOnlyIds;
+}
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index f371786c106d6..c5ca43211e58e 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -11,13 +11,11 @@ import {
BlockControls,
InspectorControls,
BlockIcon,
- store as blockEditorStore,
} from '@wordpress/block-editor';
import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
import { brush as brushIcon } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
import { useEntityRecord } from '@wordpress/core-data';
/**
@@ -102,11 +100,6 @@ function NotEmpty( {
const { record: widgetType, hasResolved: hasResolvedWidgetType } =
useEntityRecord( 'root', 'widgetType', widgetTypeId );
- const isNavigationMode = useSelect(
- ( select ) => select( blockEditorStore ).isNavigationMode(),
- []
- );
-
const setInstance = useCallback( ( nextInstance ) => {
setAttributes( { instance: nextInstance } );
}, [] );
@@ -130,8 +123,7 @@ function NotEmpty( {
);
}
- const mode =
- idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
+ const mode = idBase && ! isSelected ? 'preview' : 'edit';
return (
<>
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
deleted file mode 100644
index 5b8ef6bdcd051..0000000000000
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block moving mode', () => {
- test.beforeEach( async ( { admin } ) => {
- await admin.createNewPost();
- } );
-
- test.afterEach( async ( { requestUtils } ) => {
- await requestUtils.deleteAllPosts();
- } );
-
- test( 'can move block', async ( { editor, page } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- } );
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- } );
-
- // Move the second block in front of the first block.
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowUp' );
- await page.keyboard.press( 'Enter' );
-
- await expect.poll( editor.getBlocks ).toMatchObject( [
- {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- },
- ] );
- } );
-
- test( 'can move block in the nested block', async ( { editor, page } ) => {
- // Create two group blocks with some blocks.
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'First Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Second Paragraph' );
-
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'Third Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Fourth Paragraph' );
-
- // Move a paragraph block in the first group block into the second group block.
- const paragraphBlock = editor.canvas.locator(
- 'text="First Paragraph"'
- );
- await paragraphBlock.focus();
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowLeft' ); // Select the first group block.
- await page.keyboard.press( 'ArrowDown' ); // Select the second group block.
- await page.keyboard.press( 'ArrowRight' ); // Enter the second group block.
- await page.keyboard.press( 'ArrowDown' ); // Move down in the second group block.
- await page.keyboard.press( 'Enter' );
-
- await expect.poll( editor.getBlocks ).toMatchObject( [
- {
- name: 'core/group',
- innerBlocks: [
- {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- },
- ],
- },
- {
- name: 'core/group',
- innerBlocks: [
- {
- name: 'core/paragraph',
- attributes: { content: 'Third Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'Fourth Paragraph' },
- },
- ],
- },
- ] );
- } );
-
- test( 'can not move inside its own block', async ( { editor, page } ) => {
- // Create a paragraph block and a group block.
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- } );
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'Second Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Third Paragraph' );
-
- // Trying to move the group block into its own.
- const groupBlock = editor.canvas.locator(
- 'role=document[name="Block: Group"i]'
- );
- await groupBlock.focus();
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowRight' );
- await expect( groupBlock ).toHaveClass( /is-selected/ );
- } );
-} );
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 6a7125d04f7a6..e1ca121040b97 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
await editor.openDocumentSettingsSidebar();
} );
- test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+ test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
editor,
KeyboardNavigableBlocks,
page,
+ pageUtils,
} ) => {
- const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
- // Create 3 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
+ // Insert three paragraph blocks.
+ for ( let i = 0; i < 3; i++ ) {
await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
+ await page.keyboard.type( `Paragraph ${ i + 1 }` );
}
-
- // Select the middle block.
+ // Select the middle paragraph block.
await page.keyboard.press( 'ArrowUp' );
await editor.showBlockToolbar();
- await KeyboardNavigableBlocks.navigateToContentEditorTop();
- await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-
- // Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
- // This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
- await KeyboardNavigableBlocks.navigateToContentEditorTop();
- await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
- } );
-
- test( 'allows tabbing in navigation mode if no block is selected', async ( {
- editor,
- KeyboardNavigableBlocks,
- page,
- } ) => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = editor.canvas
- .locator( '[data-type="core/paragraph"]' )
- .getByText( '1' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 1. 0'
- );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 2. 1'
- );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
- } );
-
- test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
- editor,
- KeyboardNavigableBlocks,
- page,
- pageUtils,
- } ) => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = editor.canvas
- .locator( '[data-type="core/paragraph"]' )
- .getByText( '1' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- // Put focus behind the block list.
- await page.evaluate( () => {
- document
- .querySelector( '.interface-interface-skeleton__sidebar' )
- .focus();
- } );
-
- await pageUtils.pressKeys( 'shift+Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 2. 1'
- );
-
await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+ await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 1. 0'
+ 'Block: Paragraph'
);
-
- await pageUtils.pressKeys( 'shift+Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
} );
test( 'should navigate correctly with multi selection', async ( {
@@ -208,31 +126,7 @@ class KeyboardNavigableBlocks {
expect( ariaLabel ).toBe( label );
}
- async navigateToContentEditorTop() {
- // Use 'Ctrl+`' to return to the top of the editor.
- await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
- }
-
- async tabThroughParagraphBlock( paragraphText ) {
- await this.tabThroughBlockToolbar();
-
- await this.page.keyboard.press( 'Tab' );
- await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-
- const activeElement = this.editor.canvas.locator( ':focus' );
-
- await expect( activeElement ).toHaveText( paragraphText );
-
- await this.page.keyboard.press( 'Tab' );
- await this.expectLabelToHaveFocus( 'Block' );
-
- // Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
- await this.pageUtils.pressKeys( 'shift+Tab' );
- await this.expectLabelToHaveFocus( 'Block: Paragraph' );
- }
-
- async tabThroughBlockToolbar() {
- await this.page.keyboard.press( 'Tab' );
+ async navigateThroughBlockToolbar() {
await this.expectLabelToHaveFocus( 'Paragraph' );
await this.page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index a8e49f7a6b84d..cfaf4e0be9188 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
} );
- test( 'Focuses correct toolbar in default view options in select mode', async ( {
- editor,
- page,
- toolbarUtils,
- } ) => {
- // Test: Focus the document toolbar from title
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
- // Test: Focus the top level toolbar from empty block
- await editor.insertBlock( { name: 'core/paragraph' } );
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
- // Test: Focus the top level toolbar from paragraph block
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type(
- 'Focus top level toolbar from paragraph block in select mode.'
- );
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
- } );
-
test.describe( 'In Top Toolbar option:', () => {
test.beforeEach( async ( { editor } ) => {
// Ensure the fixed toolbar option is on
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index bd1552ad4cb66..4077d6dcc5820 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
] );
} );
- test( 'Should navigate between inner and root blocks in navigation mode', async ( {
- page,
- writingFlowUtils,
- } ) => {
- await writingFlowUtils.addDemoContent();
-
- // Switch to navigation mode.
- await page.keyboard.press( 'Escape' );
- // Arrow up to Columns block.
- await page.keyboard.press( 'ArrowUp' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/columns' );
- // Arrow right into Column block.
- await page.keyboard.press( 'ArrowRight' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/column' );
- // Arrow down to reach second Column block.
- await page.keyboard.press( 'ArrowDown' );
- // Arrow right again into Paragraph block.
- await page.keyboard.press( 'ArrowRight' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
- // Arrow left back to Column block.
- await page.keyboard.press( 'ArrowLeft' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/column' );
- // Arrow left back to Columns block.
- await page.keyboard.press( 'ArrowLeft' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/columns' );
- // Arrow up to first paragraph.
- await page.keyboard.press( 'ArrowUp' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
- } );
-
test( 'should navigate around inline boundaries', async ( {
editor,
page,
@@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
` );
} );
- test( 'escape should set select mode and then focus the canvas', async ( {
- page,
- writingFlowUtils,
- } ) => {
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Random Paragraph' );
-
- // First escape enters navigation mode.
- await page.keyboard.press( 'Escape' );
- const navigationButton = page.getByLabel(
- 'Paragraph Block. Row 1. Random Paragraph'
- );
- await expect( navigationButton ).toBeVisible();
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
-
- // Second escape should send focus to the canvas
- await page.keyboard.press( 'Escape' );
- // The navigation button should be hidden.
- await expect( navigationButton ).toBeHidden();
- await expect(
- page.getByRole( 'region', { name: 'Editor content' } )
- ).toBeFocused();
- } );
-
// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
editor,
@@ -1222,11 +1154,11 @@ class WritingFlowUtils {
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
-
- await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
- await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
- await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
- await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
+ await this.editor.showBlockToolbar();
+ await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+ await this.page.keyboard.press( 'Enter' ); // Selects the column block.
+ await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+ await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
await this.page.keyboard.type( 'Second paragraph' );
}
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 4db860b703892..1b92ef2e850e6 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
// The button role should have been removed from the iframe.
await expect( editorCanvasButton ).toBeHidden();
- // Test to make sure a Tab keypress works as expected.
- // As of this writing, we are in select mode and a tab
- // keypress will reveal the header template select mode
- // button. This test is not documenting that we _want_
- // that action, but checking that we are within the site
- // editor and keypresses work as intened.
- await pageUtils.pressKeys( 'Tab' );
- await expect(
- page.getByRole( 'button', {
- name: 'Template Part Block. Row 1. header',
- } )
- ).toBeFocused();
-
// Test: We can go back to the main navigation from the editor frame
// Move to the document toolbar
await pageUtils.pressKeys( 'alt+F10' );
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 53b4da7be2d61..38e9d3ee2c58a 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -465,16 +465,6 @@ test.describe( 'Widgets Customizer', () => {
await expect( paragraphBlock ).toBeVisible();
await paragraphBlock.focus();
-
- // Expect pressing the Escape key to enter navigation mode,
- // but not close the editor.
- await page.keyboard.press( 'Escape' );
- await expect(
- page.locator(
- 'css=.block-editor-block-list__layout.is-navigate-mode'
- )
- ).toBeVisible();
- await expect( paragraphBlock ).toBeVisible();
} );
test( 'should move (inner) blocks to another sidebar', async ( {