From 66c7c3078e7c9be1295a633778373ae0ed8580f1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 11 Sep 2024 10:13:08 +0200 Subject: [PATCH] Remove block moving mode --- .../data/data-core-block-editor.md | 18 +- .../src/components/block-actions/index.js | 12 +- .../src/components/block-list/block.js | 14 -- .../src/components/block-list/content.scss | 28 ---- .../block-list/use-block-props/index.js | 4 - .../block-settings-menu-controls/index.js | 15 -- .../block-settings-dropdown.js | 8 - .../block-tools/zoom-out-toolbar.js | 14 +- .../components/list-view/block-contents.js | 29 +--- .../src/components/list-view/style.scss | 14 -- .../components/use-block-commands/index.js | 57 ------- packages/block-editor/src/store/actions.js | 27 +-- packages/block-editor/src/store/reducer.js | 21 --- packages/block-editor/src/store/selectors.js | 15 +- .../editor/various/block-moving-mode.spec.js | 155 ------------------ 15 files changed, 34 insertions(+), 397 deletions(-) delete mode 100644 test/e2e/specs/editor/various/block-moving-mode.spec.js diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index c6552ef431cef..4b3ca78f74d29 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -857,15 +857,9 @@ _Returns_ ### hasBlockMovingClientId -Returns whether block moving mode is enabled. - -_Parameters_ - -- _state_ `Object`: Editor state. - -_Returns_ +> **Deprecated** -- `string`: Client Id of moving block. +Returns whether block moving mode is enabled. ### hasDraggedInnerBlock @@ -1661,11 +1655,13 @@ _Returns_ ### setBlockMovingClientId -Action that enables or disables the block moving mode. +> **Deprecated** -_Parameters_ +Set the block moving client ID. -- _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode. +_Returns_ + +- `Object`: Action object. ### setBlockVisibility diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index 6b38a05924eb9..f06c8addedad5 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -29,7 +29,6 @@ export default function BlockActions( { getBlockRootClientId, getBlocksByClientId, getDirectInsertBlock, - canMoveBlocks, canRemoveBlocks, } = select( blockEditorStore ); @@ -44,7 +43,6 @@ export default function BlockActions( { : null; return { - canMove: canMoveBlocks( clientIds ), canRemove: canRemoveBlocks( clientIds ), canInsertBlock: canInsertDefaultBlock || !! directInsertBlock, canCopyStyles: blocks.every( ( block ) => { @@ -67,8 +65,7 @@ export default function BlockActions( { ); const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore ); - const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } = - selected; + const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected; const { removeBlocks, @@ -77,8 +74,6 @@ export default function BlockActions( { insertAfterBlock, insertBeforeBlock, flashBlock, - setBlockMovingClientId, - selectBlock, } = useDispatch( blockEditorStore ); const notifyCopy = useNotifyCopy(); @@ -88,7 +83,6 @@ export default function BlockActions( { canCopyStyles, canDuplicate, canInsertBlock, - canMove, canRemove, onDuplicate() { return duplicateBlocks( clientIds, updateSelection ); @@ -102,10 +96,6 @@ export default function BlockActions( { onInsertAfter() { insertAfterBlock( clientIds[ clientIds.length - 1 ] ); }, - onMoveTo() { - selectBlock( clientIds[ 0 ] ); - setBlockMovingClientId( clientIds[ 0 ] ); - }, onGroup() { if ( ! clientIds.length ) { return; diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 6f1ba557eed82..3c0c340abbce1 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -571,8 +571,6 @@ function BlockListBlockProvider( props ) { __unstableSelectionHasUnmergeableBlock, isBlockBeingDragged, isDragging, - hasBlockMovingClientId, - canInsertBlockType, __unstableHasActiveBlockOverlayActive, __unstableGetEditorMode, getSelectedBlocksInitialCaretPosition, @@ -632,7 +630,6 @@ function BlockListBlockProvider( props ) { clientId, checkDeep ); - const movingClientId = hasBlockMovingClientId(); const blockEditingMode = getBlockEditingMode( clientId ); const multiple = hasBlockSupport( blockName, 'multiple', true ); @@ -692,13 +689,6 @@ function BlockListBlockProvider( props ) { ! __unstableSelectionHasUnmergeableBlock(), isDragging: isBlockBeingDragged( clientId ), hasChildSelected: isAncestorOfSelectedBlock, - isBlockMovingMode: !! movingClientId, - canInsertMovingBlock: - movingClientId && - canInsertBlockType( - getBlockName( movingClientId ), - rootClientId - ), isEditingDisabled: blockEditingMode === 'disabled', hasEditableOutline: blockEditingMode !== 'disabled' && @@ -743,8 +733,6 @@ function BlockListBlockProvider( props ) { isReusable, isDragging, hasChildSelected, - isBlockMovingMode, - canInsertMovingBlock, templateLock, isEditingDisabled, hasEditableOutline, @@ -790,8 +778,6 @@ function BlockListBlockProvider( props ) { isReusable, isDragging, hasChildSelected, - isBlockMovingMode, - canInsertMovingBlock, templateLock, isEditingDisabled, hasEditableOutline, diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 72fd10b163c69..5eae127bd354b 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -91,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. 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 a1b8af90c3d35..0bac8c4580dfb 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 @@ -97,8 +97,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isReusable, isDragging, hasChildSelected, - isBlockMovingMode, - canInsertMovingBlock, isEditingDisabled, hasEditableOutline, isTemporarilyEditingAsBlocks, @@ -180,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-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 && ( - - { __( 'Move to' ) } - - ) } { 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, - hasBlockMovingClientId, getNextBlockClientId, getPreviousBlockClientId, canRemoveBlock, @@ -57,7 +51,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { } return { - blockMovingMode: hasBlockMovingClientId(), isBlockTemplatePart, isNextBlockTemplatePart, isPrevBlockTemplatePart, @@ -69,7 +62,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { ); const { - blockMovingMode, isBlockTemplatePart, isNextBlockTemplatePart, isPrevBlockTemplatePart, @@ -80,15 +72,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 { 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 } ) => ( { 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, 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: () => { - 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 { @@ -343,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/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/reducer.js b/packages/block-editor/src/store/reducer.js index 90c69a91bda5b..58c3ca144f4f8 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1804,26 +1804,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 @@ -2101,7 +2081,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 3e4261521a341..87ea0492962fc 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2674,12 +2674,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; } /** 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/ ); - } ); -} );