From 3ad7f0a4e509b9eac22c40fd8f71d94870f3c2af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 20 Jul 2022 16:43:15 +0200 Subject: [PATCH 1/5] List v2: add forward delete --- packages/block-library/src/list-item/edit.js | 12 +- .../src/list-item/hooks/use-backspace.js | 51 ------- .../src/list-item/hooks/use-merge.js | 69 +++++++-- .../list-item/hooks/use-outdent-list-item.js | 136 +++++++++--------- 4 files changed, 130 insertions(+), 138 deletions(-) delete mode 100644 packages/block-library/src/list-item/hooks/use-backspace.js diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js index 085ad17b8a006..303cade808454 100644 --- a/packages/block-library/src/list-item/edit.js +++ b/packages/block-library/src/list-item/edit.js @@ -22,7 +22,6 @@ import { useMergeRefs } from '@wordpress/compose'; */ import { useEnter, - useBackspace, useSpace, useIndentListItem, useOutdentListItem, @@ -42,14 +41,14 @@ function IndentUI( { clientId } ) { title={ __( 'Outdent' ) } describedBy={ __( 'Outdent list item' ) } disabled={ ! canOutdent } - onClick={ outdentListItem } + onClick={ () => outdentListItem() } /> indentListItem() } /> ); @@ -67,7 +66,6 @@ export default function ListItemEdit( { allowedBlocks: [ 'core/list' ], } ); const useEnterRef = useEnter( { content, clientId } ); - const useBackspaceRef = useBackspace( { clientId } ); const useSpaceRef = useSpace( clientId ); const onSplit = useSplit( clientId ); const onMerge = useMerge( clientId ); @@ -75,11 +73,7 @@ export default function ListItemEdit( { <>
  • diff --git a/packages/block-library/src/list-item/hooks/use-backspace.js b/packages/block-library/src/list-item/hooks/use-backspace.js deleted file mode 100644 index c2888b95af905..0000000000000 --- a/packages/block-library/src/list-item/hooks/use-backspace.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * WordPress dependencies - */ -import { useRef } from '@wordpress/element'; -import { useRefEffect } from '@wordpress/compose'; -import { BACKSPACE } from '@wordpress/keycodes'; -import { useSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import useOutdentListItem from './use-outdent-list-item'; - -export default function useBackspace( props ) { - const { getSelectionStart, getSelectionEnd } = - useSelect( blockEditorStore ); - const propsRef = useRef( props ); - propsRef.current = props; - const [ canOutdent, outdentListItem ] = useOutdentListItem( - propsRef.current.clientId - ); - return useRefEffect( - ( element ) => { - function onKeyDown( event ) { - if ( event.defaultPrevented || event.keyCode !== BACKSPACE ) { - return; - } - // Handle only if we have a collapsed selection at the - // start of a list item and we can outdent. - if ( - ! canOutdent || - [ - getSelectionStart().offset, - getSelectionEnd().offset, - ].some( ( offset ) => offset !== 0 ) - ) { - return; - } - event.preventDefault(); - outdentListItem(); - } - - element.addEventListener( 'keydown', onKeyDown ); - return () => { - element.removeEventListener( 'keydown', onKeyDown ); - }; - }, - [ canOutdent ] - ); -} diff --git a/packages/block-library/src/list-item/hooks/use-merge.js b/packages/block-library/src/list-item/hooks/use-merge.js index 6a22f772773c3..80e3c22f9b2a7 100644 --- a/packages/block-library/src/list-item/hooks/use-merge.js +++ b/packages/block-library/src/list-item/hooks/use-merge.js @@ -4,6 +4,13 @@ import { useRegistry, useDispatch, useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import useOutdentListItem from './use-outdent-list-item'; + +import { name as listItemName } from '../block.json'; + export default function useMerge( clientId ) { const registry = useRegistry(); const { @@ -11,9 +18,11 @@ export default function useMerge( clientId ) { getNextBlockClientId, getBlockOrder, getBlockRootClientId, + getBlockName, } = useSelect( blockEditorStore ); const { mergeBlocks, moveBlocksToPosition } = useDispatch( blockEditorStore ); + const [ , outdentListItem ] = useOutdentListItem( clientId ); function getTrailing( id ) { const order = getBlockOrder( id ); @@ -25,24 +34,56 @@ export default function useMerge( clientId ) { return getTrailing( order[ order.length - 1 ] ); } + function getParentListItem( id ) { + const listId = getBlockRootClientId( id ); + const parentListItem = getBlockRootClientId( listId ); + if ( ! parentListItem ) return; + if ( getBlockName( parentListItem ) !== listItemName ) return; + return parentListItem; + } + + /** + * Return the next list item with respect to the given list item. If none, + * return the next list item of the parent list item if it exists. + * + * @param {string} id A list item client ID. + * @return {string?} The client ID of the next list item. + */ + function _getNext( id ) { + const next = getNextBlockClientId( id ); + if ( next ) return next; + const parentListItem = getParentListItem( id ); + if ( ! parentListItem ) return; + return _getNext( parentListItem ); + } + + /** + * Given a client ID, return the client ID of the list item on the next + * line, regardless of indentation level. + * + * @param {string} id The client ID of the current list item. + * @return {string?} The client ID of the next list item. + */ function getNext( id ) { - return ( - getNextBlockClientId( id ) || getNext( getBlockRootClientId( id ) ) - ); + const order = getBlockOrder( id ); + + // If the list item does not have a nested list, return the next list + // item. + if ( ! order.length ) { + return _getNext( id ); + } + + // Get the first list item in the nested list. + return getBlockOrder( order[ 0 ] )[ 0 ]; } return ( forward ) => { if ( forward ) { - // Forward "merging" (forward delete) should be equal pressing - // Backspace from the next item. If the next item is not at the top - // level, the item should be outdented instead of merged. - if ( getBlockOrder( clientId ).length ) { - // Should be implemented in `./use-backspace`. - return; - } - const nextBlockClientId = getNext( clientId ); - if ( nextBlockClientId ) { + if ( ! nextBlockClientId ) return; + if ( getParentListItem( nextBlockClientId ) ) { + outdentListItem( nextBlockClientId ); + } else { registry.batch( () => { moveBlocksToPosition( getBlockOrder( nextBlockClientId ), @@ -56,7 +97,9 @@ export default function useMerge( clientId ) { // Merging is only done from the top level. For lowel levels, the // list item is outdented instead. const previousBlockClientId = getPreviousBlockClientId( clientId ); - if ( previousBlockClientId ) { + if ( getParentListItem( clientId ) ) { + outdentListItem( clientId ); + } else if ( previousBlockClientId ) { const trailingClientId = getTrailing( previousBlockClientId ); registry.batch( () => { moveBlocksToPosition( diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index c42d97124b966..d78b765ea9ed3 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -44,78 +44,84 @@ export default function useOutdentListItem( clientId ) { return [ canOutdent, - useCallback( () => { - const _hasMultiSelection = hasMultiSelection(); - const clientIds = _hasMultiSelection - ? getMultiSelectedBlockClientIds() - : [ clientId ]; + useCallback( + ( _clientId = clientId ) => { + const _hasMultiSelection = hasMultiSelection(); + const clientIds = _hasMultiSelection + ? getMultiSelectedBlockClientIds() + : [ _clientId ]; - const selectionStart = getSelectionStart(); - const selectionEnd = getSelectionEnd(); + const listParentId = getBlockRootClientId( _clientId ); + const listAttributes = getBlockAttributes( listParentId ); + const listItemParentId = getBlockRootClientId( listParentId ); + const listItemParentAttributes = + getBlockAttributes( listItemParentId ); - const listParentId = getBlockRootClientId( clientId ); - const listAttributes = getBlockAttributes( listParentId ); - const listItemParentId = getBlockRootClientId( listParentId ); - const listItemParentAttributes = - getBlockAttributes( listItemParentId ); + const firstIndex = getBlockIndex( first( clientIds ) ); + const lastIndex = getBlockIndex( last( clientIds ) ); + const siblingBlocks = getBlock( listParentId ).innerBlocks; + const previousSiblings = siblingBlocks.slice( 0, firstIndex ); + const afterSiblings = siblingBlocks.slice( lastIndex + 1 ); - const firstIndex = getBlockIndex( first( clientIds ) ); - const lastIndex = getBlockIndex( last( clientIds ) ); - const siblingBlocks = getBlock( listParentId ).innerBlocks; - const previousSiblings = siblingBlocks.slice( 0, firstIndex ); - const afterSiblings = siblingBlocks.slice( lastIndex + 1 ); - - // Create a new parent list item block with just the siblings - // that existed before the first child item being outdent. - const newListItemParent = createListItem( - listItemParentAttributes, - listAttributes, - previousSiblings - ); - - const lastBlock = getBlock( last( clientIds ) ); - const childList = lastBlock.innerBlocks[ 0 ]; - const childItems = childList?.innerBlocks || []; - const hasChildItems = !! childItems.length; + // Create a new parent list item block with just the siblings + // that existed before the first child item being outdent. + const newListItemParent = createListItem( + listItemParentAttributes, + listAttributes, + previousSiblings + ); - const newBlocksExcludingLast = clientIds - .slice( 0, -1 ) - .map( ( _clientId ) => cloneBlock( getBlock( _clientId ) ) ); + const lastBlock = getBlock( last( clientIds ) ); + const childList = lastBlock.innerBlocks[ 0 ]; + const childItems = childList?.innerBlocks || []; + const hasChildItems = !! childItems.length; - // Create a new list item block whose attributes are equal to the - // last block being outdent and whose children are the children that it had (if any) - // followed by the siblings that existed after it. - const newLastItem = createListItem( - lastBlock.attributes, - hasChildItems ? childList.attributes : listAttributes, - [ ...childItems, ...afterSiblings ] - ); + const newBlocksExcludingLast = clientIds + .slice( 0, -1 ) + .map( ( id ) => cloneBlock( getBlock( id ) ) ); - // Replace the parent list item block, with a new block containing - // the previous siblings before the first block being outdent, - // followed by the blocks being outdent with the after siblings added - // as children of the last block. - replaceBlocks( - [ listItemParentId ], - [ newListItemParent, ...newBlocksExcludingLast, newLastItem ] - ); - - // Restore the selection state. - if ( ! _hasMultiSelection ) { - selectionChange( - newLastItem.clientId, - selectionEnd.attributeKey, - selectionEnd.clientId === selectionStart.clientId - ? selectionStart.offset - : selectionEnd.offset, - selectionEnd.offset + // Create a new list item block whose attributes are equal to the + // last block being outdent and whose children are the children that it had (if any) + // followed by the siblings that existed after it. + const newLastItem = createListItem( + lastBlock.attributes, + hasChildItems ? childList.attributes : listAttributes, + [ ...childItems, ...afterSiblings ] ); - } else { - multiSelect( - first( newBlocksExcludingLast ).clientId, - newLastItem.clientId + + // Replace the parent list item block, with a new block containing + // the previous siblings before the first block being outdent, + // followed by the blocks being outdent with the after siblings added + // as children of the last block. + replaceBlocks( + [ listItemParentId ], + [ + newListItemParent, + ...newBlocksExcludingLast, + newLastItem, + ] ); - } - }, [ clientId ] ), + + // Restore the selection state. + if ( ! _hasMultiSelection ) { + const selectionStart = getSelectionStart(); + const selectionEnd = getSelectionEnd(); + selectionChange( + newLastItem.clientId, + selectionEnd.attributeKey, + selectionEnd.clientId === selectionStart.clientId + ? selectionStart.offset + : selectionEnd.offset, + selectionEnd.offset + ); + } else { + multiSelect( + first( newBlocksExcludingLast ).clientId, + newLastItem.clientId + ); + } + }, + [ clientId ] + ), ]; } From 44a34b65b091b4b4f16632f85bbf0717fc7ce743 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 20 Jul 2022 16:52:00 +0200 Subject: [PATCH 2/5] Remove old export --- packages/block-library/src/list-item/hooks/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/list-item/hooks/index.js b/packages/block-library/src/list-item/hooks/index.js index a77c91648ff3b..1687adbe740d0 100644 --- a/packages/block-library/src/list-item/hooks/index.js +++ b/packages/block-library/src/list-item/hooks/index.js @@ -1,7 +1,6 @@ export { default as useOutdentListItem } from './use-outdent-list-item'; export { default as useIndentListItem } from './use-indent-list-item'; export { default as useEnter } from './use-enter'; -export { default as useBackspace } from './use-backspace'; export { default as useSpace } from './use-space'; export { default as useSplit } from './use-split'; export { default as useMerge } from './use-merge'; From e6e47e4c43bdcfd95a0aa6510007671038472404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 20 Jul 2022 18:00:15 +0200 Subject: [PATCH 3/5] Leave selection alone --- packages/block-editor/src/store/reducer.js | 4 ++++ .../list-item/hooks/use-outdent-list-item.js | 18 +++++++++++------- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 534a69c67f138..5034f668e2432 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1264,6 +1264,10 @@ function selectionHelper( state = {}, action ) { return state; } + if ( action.indexToSelect === -1 ) { + return state; + } + const blockToSelect = action.blocks[ action.indexToSelect ] || action.blocks[ action.blocks.length - 1 ]; diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index d78b765ea9ed3..67a47c1209309 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -40,6 +40,7 @@ export default function useOutdentListItem( clientId ) { getSelectionEnd, hasMultiSelection, getMultiSelectedBlockClientIds, + isBlockSelected, } = useSelect( blockEditorStore ); return [ @@ -47,6 +48,7 @@ export default function useOutdentListItem( clientId ) { useCallback( ( _clientId = clientId ) => { const _hasMultiSelection = hasMultiSelection(); + const isSelected = isBlockSelected( _clientId ); const clientIds = _hasMultiSelection ? getMultiSelectedBlockClientIds() : [ _clientId ]; @@ -70,6 +72,7 @@ export default function useOutdentListItem( clientId ) { listAttributes, previousSiblings ); + newListItemParent.clientId = listItemParentId; const lastBlock = getBlock( last( clientIds ) ); const childList = lastBlock.innerBlocks[ 0 ]; @@ -99,11 +102,17 @@ export default function useOutdentListItem( clientId ) { newListItemParent, ...newBlocksExcludingLast, newLastItem, - ] + ], + -1 ); // Restore the selection state. - if ( ! _hasMultiSelection ) { + if ( _hasMultiSelection ) { + multiSelect( + first( newBlocksExcludingLast ).clientId, + newLastItem.clientId + ); + } else if ( isSelected ) { const selectionStart = getSelectionStart(); const selectionEnd = getSelectionEnd(); selectionChange( @@ -114,11 +123,6 @@ export default function useOutdentListItem( clientId ) { : selectionEnd.offset, selectionEnd.offset ); - } else { - multiSelect( - first( newBlocksExcludingLast ).clientId, - newLastItem.clientId - ); } }, [ clientId ] From 46b60a05a0a7c55c00bd4fc180bff947364f759d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 20 Jul 2022 19:10:45 +0200 Subject: [PATCH 4/5] Simplify outdent --- packages/block-editor/src/store/reducer.js | 4 - .../list-item/hooks/use-outdent-list-item.js | 156 ++++++++---------- 2 files changed, 72 insertions(+), 88 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 5034f668e2432..534a69c67f138 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1264,10 +1264,6 @@ function selectionHelper( state = {}, action ) { return state; } - if ( action.indexToSelect === -1 ) { - return state; - } - const blockToSelect = action.blocks[ action.indexToSelect ] || action.blocks[ action.blocks.length - 1 ]; diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index 67a47c1209309..87eb4b223d9b5 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -1,22 +1,23 @@ /** * External dependencies */ -import { first, last } from 'lodash'; +import { first, last, castArray } from 'lodash'; /** * WordPress dependencies */ import { useCallback } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { cloneBlock } from '@wordpress/blocks'; /** * Internal dependencies */ -import { createListItem } from '../utils'; +import { name as listItemName } from '../block.json'; export default function useOutdentListItem( clientId ) { + const registry = useRegistry(); const { canOutdent } = useSelect( ( innerSelect ) => { const { getBlockRootClientId } = innerSelect( blockEditorStore ); @@ -29,103 +30,90 @@ export default function useOutdentListItem( clientId ) { }, [ clientId ] ); - const { replaceBlocks, selectionChange, multiSelect } = - useDispatch( blockEditorStore ); + const { + moveBlocksToPosition, + removeBlock, + insertBlock, + updateBlockListSettings, + } = useDispatch( blockEditorStore ); const { getBlockRootClientId, - getBlockAttributes, - getBlock, + getBlockName, + getBlockOrder, getBlockIndex, - getSelectionStart, - getSelectionEnd, - hasMultiSelection, - getMultiSelectedBlockClientIds, - isBlockSelected, + getSelectedBlockClientIds, + getBlock, + getBlockListSettings, } = useSelect( blockEditorStore ); + function getParentListItem( id ) { + const listId = getBlockRootClientId( id ); + const parentListItem = getBlockRootClientId( listId ); + if ( ! parentListItem ) return; + if ( getBlockName( parentListItem ) !== listItemName ) return; + return parentListItem; + } + return [ canOutdent, - useCallback( - ( _clientId = clientId ) => { - const _hasMultiSelection = hasMultiSelection(); - const isSelected = isBlockSelected( _clientId ); - const clientIds = _hasMultiSelection - ? getMultiSelectedBlockClientIds() - : [ _clientId ]; + useCallback( ( clientIds = getSelectedBlockClientIds() ) => { + clientIds = castArray( clientIds ); - const listParentId = getBlockRootClientId( _clientId ); - const listAttributes = getBlockAttributes( listParentId ); - const listItemParentId = getBlockRootClientId( listParentId ); - const listItemParentAttributes = - getBlockAttributes( listItemParentId ); + if ( ! clientIds.length ) return; - const firstIndex = getBlockIndex( first( clientIds ) ); - const lastIndex = getBlockIndex( last( clientIds ) ); - const siblingBlocks = getBlock( listParentId ).innerBlocks; - const previousSiblings = siblingBlocks.slice( 0, firstIndex ); - const afterSiblings = siblingBlocks.slice( lastIndex + 1 ); + const firstClientId = first( clientIds ); - // Create a new parent list item block with just the siblings - // that existed before the first child item being outdent. - const newListItemParent = createListItem( - listItemParentAttributes, - listAttributes, - previousSiblings - ); - newListItemParent.clientId = listItemParentId; + // Can't outdent if it's not a list item. + if ( getBlockName( firstClientId ) !== listItemName ) return; - const lastBlock = getBlock( last( clientIds ) ); - const childList = lastBlock.innerBlocks[ 0 ]; - const childItems = childList?.innerBlocks || []; - const hasChildItems = !! childItems.length; + const parentListItem = getParentListItem( firstClientId ); - const newBlocksExcludingLast = clientIds - .slice( 0, -1 ) - .map( ( id ) => cloneBlock( getBlock( id ) ) ); + // Can't outdent if it's at the top level. + if ( ! parentListItem ) return; - // Create a new list item block whose attributes are equal to the - // last block being outdent and whose children are the children that it had (if any) - // followed by the siblings that existed after it. - const newLastItem = createListItem( - lastBlock.attributes, - hasChildItems ? childList.attributes : listAttributes, - [ ...childItems, ...afterSiblings ] - ); + const parentList = getBlockRootClientId( firstClientId ); + const lastClientId = last( clientIds ); + const order = getBlockOrder( parentList ); + const followingListItems = order.slice( + getBlockIndex( lastClientId ) + 1 + ); - // Replace the parent list item block, with a new block containing - // the previous siblings before the first block being outdent, - // followed by the blocks being outdent with the after siblings added - // as children of the last block. - replaceBlocks( - [ listItemParentId ], - [ - newListItemParent, - ...newBlocksExcludingLast, - newLastItem, - ], - -1 - ); + registry.batch( () => { + if ( followingListItems.length ) { + let nestedList = first( getBlockOrder( firstClientId ) ); - // Restore the selection state. - if ( _hasMultiSelection ) { - multiSelect( - first( newBlocksExcludingLast ).clientId, - newLastItem.clientId - ); - } else if ( isSelected ) { - const selectionStart = getSelectionStart(); - const selectionEnd = getSelectionEnd(); - selectionChange( - newLastItem.clientId, - selectionEnd.attributeKey, - selectionEnd.clientId === selectionStart.clientId - ? selectionStart.offset - : selectionEnd.offset, - selectionEnd.offset + if ( ! nestedList ) { + const nestedListBlock = cloneBlock( + getBlock( parentList ), + {}, + [] + ); + nestedList = nestedListBlock.clientId; + insertBlock( nestedListBlock, 0, firstClientId, false ); + // Immediately update the block list settings, otherwise + // blocks can't be moved here due to canInsert checks. + updateBlockListSettings( + nestedList, + getBlockListSettings( parentList ) + ); + } + + moveBlocksToPosition( + followingListItems, + parentList, + nestedList ); } - }, - [ clientId ] - ), + moveBlocksToPosition( + clientIds, + parentList, + getBlockRootClientId( parentListItem ), + getBlockIndex( parentListItem ) + 1 + ); + if ( ! getBlockOrder( parentList ).length ) { + removeBlock( parentList ); + } + } ); + }, [] ), ]; } From c022acffdf17ea692c9a8bd38ceb65977cd70ac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 22 Jul 2022 11:34:37 +0200 Subject: [PATCH 5/5] Address feedback --- .../src/list-item/hooks/use-merge.js | 36 +++++++-------- .../list-item/hooks/use-outdent-list-item.js | 44 +++++++++---------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/block-library/src/list-item/hooks/use-merge.js b/packages/block-library/src/list-item/hooks/use-merge.js index 80e3c22f9b2a7..bb0cbef910c00 100644 --- a/packages/block-library/src/list-item/hooks/use-merge.js +++ b/packages/block-library/src/list-item/hooks/use-merge.js @@ -24,22 +24,22 @@ export default function useMerge( clientId ) { useDispatch( blockEditorStore ); const [ , outdentListItem ] = useOutdentListItem( clientId ); - function getTrailing( id ) { + function getTrailingId( id ) { const order = getBlockOrder( id ); if ( ! order.length ) { return id; } - return getTrailing( order[ order.length - 1 ] ); + return getTrailingId( order[ order.length - 1 ] ); } - function getParentListItem( id ) { + function getParentListItemId( id ) { const listId = getBlockRootClientId( id ); - const parentListItem = getBlockRootClientId( listId ); - if ( ! parentListItem ) return; - if ( getBlockName( parentListItem ) !== listItemName ) return; - return parentListItem; + const parentListItemId = getBlockRootClientId( listId ); + if ( ! parentListItemId ) return; + if ( getBlockName( parentListItemId ) !== listItemName ) return; + return parentListItemId; } /** @@ -49,12 +49,12 @@ export default function useMerge( clientId ) { * @param {string} id A list item client ID. * @return {string?} The client ID of the next list item. */ - function _getNext( id ) { + function _getNextId( id ) { const next = getNextBlockClientId( id ); if ( next ) return next; - const parentListItem = getParentListItem( id ); - if ( ! parentListItem ) return; - return _getNext( parentListItem ); + const parentListItemId = getParentListItemId( id ); + if ( ! parentListItemId ) return; + return _getNextId( parentListItemId ); } /** @@ -64,13 +64,13 @@ export default function useMerge( clientId ) { * @param {string} id The client ID of the current list item. * @return {string?} The client ID of the next list item. */ - function getNext( id ) { + function getNextId( id ) { const order = getBlockOrder( id ); // If the list item does not have a nested list, return the next list // item. if ( ! order.length ) { - return _getNext( id ); + return _getNextId( id ); } // Get the first list item in the nested list. @@ -79,9 +79,9 @@ export default function useMerge( clientId ) { return ( forward ) => { if ( forward ) { - const nextBlockClientId = getNext( clientId ); + const nextBlockClientId = getNextId( clientId ); if ( ! nextBlockClientId ) return; - if ( getParentListItem( nextBlockClientId ) ) { + if ( getParentListItemId( nextBlockClientId ) ) { outdentListItem( nextBlockClientId ); } else { registry.batch( () => { @@ -97,17 +97,17 @@ export default function useMerge( clientId ) { // Merging is only done from the top level. For lowel levels, the // list item is outdented instead. const previousBlockClientId = getPreviousBlockClientId( clientId ); - if ( getParentListItem( clientId ) ) { + if ( getParentListItemId( clientId ) ) { outdentListItem( clientId ); } else if ( previousBlockClientId ) { - const trailingClientId = getTrailing( previousBlockClientId ); + const trailingId = getTrailingId( previousBlockClientId ); registry.batch( () => { moveBlocksToPosition( getBlockOrder( clientId ), clientId, previousBlockClientId ); - mergeBlocks( trailingClientId, clientId ); + mergeBlocks( trailingId, clientId ); } ); } } diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index 87eb4b223d9b5..a5c37c0dc647b 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -46,12 +46,12 @@ export default function useOutdentListItem( clientId ) { getBlockListSettings, } = useSelect( blockEditorStore ); - function getParentListItem( id ) { + function getParentListItemId( id ) { const listId = getBlockRootClientId( id ); - const parentListItem = getBlockRootClientId( listId ); - if ( ! parentListItem ) return; - if ( getBlockName( parentListItem ) !== listItemName ) return; - return parentListItem; + const parentListItemId = getBlockRootClientId( listId ); + if ( ! parentListItemId ) return; + if ( getBlockName( parentListItemId ) !== listItemName ) return; + return parentListItemId; } return [ @@ -66,52 +66,52 @@ export default function useOutdentListItem( clientId ) { // Can't outdent if it's not a list item. if ( getBlockName( firstClientId ) !== listItemName ) return; - const parentListItem = getParentListItem( firstClientId ); + const parentListItemId = getParentListItemId( firstClientId ); // Can't outdent if it's at the top level. - if ( ! parentListItem ) return; + if ( ! parentListItemId ) return; - const parentList = getBlockRootClientId( firstClientId ); + const parentListId = getBlockRootClientId( firstClientId ); const lastClientId = last( clientIds ); - const order = getBlockOrder( parentList ); + const order = getBlockOrder( parentListId ); const followingListItems = order.slice( getBlockIndex( lastClientId ) + 1 ); registry.batch( () => { if ( followingListItems.length ) { - let nestedList = first( getBlockOrder( firstClientId ) ); + let nestedListId = first( getBlockOrder( firstClientId ) ); - if ( ! nestedList ) { + if ( ! nestedListId ) { const nestedListBlock = cloneBlock( - getBlock( parentList ), + getBlock( parentListId ), {}, [] ); - nestedList = nestedListBlock.clientId; + nestedListId = nestedListBlock.clientId; insertBlock( nestedListBlock, 0, firstClientId, false ); // Immediately update the block list settings, otherwise // blocks can't be moved here due to canInsert checks. updateBlockListSettings( - nestedList, - getBlockListSettings( parentList ) + nestedListId, + getBlockListSettings( parentListId ) ); } moveBlocksToPosition( followingListItems, - parentList, - nestedList + parentListId, + nestedListId ); } moveBlocksToPosition( clientIds, - parentList, - getBlockRootClientId( parentListItem ), - getBlockIndex( parentListItem ) + 1 + parentListId, + getBlockRootClientId( parentListItemId ), + getBlockIndex( parentListItemId ) + 1 ); - if ( ! getBlockOrder( parentList ).length ) { - removeBlock( parentList ); + if ( ! getBlockOrder( parentListId ).length ) { + removeBlock( parentListId ); } } ); }, [] ),