Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block editor: Fix Enter handling for nested blocks #37453

Merged
merged 2 commits into from
Dec 16, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ _Parameters_

- _state_ `Object`: Editor state.
- _clientId_ `string`: Block client ID.
- _rootClientId_ `?string`: Optional root client ID of block list.

_Returns_

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
onInsertBlocksAfter( blocks ) {
const { clientId, rootClientId } = ownProps;
const { getBlockIndex } = select( blockEditorStore );
const index = getBlockIndex( clientId, rootClientId );
const index = getBlockIndex( clientId );
insertBlocks( blocks, index + 1, rootClientId );
},
onMerge( forward ) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
}

export default compose( [
withSelect( ( select, { clientId, rootClientId } ) => {
withSelect( ( select, { clientId } ) => {
const {
getBlockIndex,
getSettings,
Expand All @@ -314,7 +314,7 @@ export default compose( [
hasSelectedInnerBlock,
} = select( blockEditorStore );

const order = getBlockIndex( clientId, rootClientId );
const order = getBlockIndex( clientId );
const isSelected = isBlockSelected( clientId );
const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
const block = getBlock( clientId );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
} = useSelect(
( select ) => {
const {
getBlockRootClientId,
getBlockIndex,
getBlockMode,
getBlockName,
Expand All @@ -91,11 +90,10 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
isBlockMultiSelected( clientId ) ||
isAncestorMultiSelected( clientId );
const blockName = getBlockName( clientId );
const rootClientId = getBlockRootClientId( clientId );
const blockType = getBlockType( blockName );

return {
index: getBlockIndex( clientId, rootClientId ),
index: getBlockIndex( clientId ),
mode: getBlockMode( clientId ),
name: blockName,
blockApiVersion: blockType?.apiVersion || 1,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export function useInBetweenInserter() {
return;
}

const index = getBlockIndex( clientId, rootClientId );
const index = getBlockIndex( clientId );

// Don't show the in-between inserter before the first block in
// the list (preserves the original behaviour).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -316,11 +316,8 @@ export default compose(
const rootClientId = getBlockRootClientId( firstClientId );
const blockOrder = getBlockOrder( rootClientId );

const firstIndex = getBlockIndex( firstClientId, rootClientId );
const lastIndex = getBlockIndex(
last( normalizedClientIds ),
rootClientId
);
const firstIndex = getBlockIndex( firstClientId );
const lastIndex = getBlockIndex( last( normalizedClientIds ) );

const innerBlocks = getBlocksByClientId( clientIds );

Expand Down
8 changes: 2 additions & 6 deletions packages/block-editor/src/components/block-mover/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,9 @@ const BlockMoverButton = forwardRef(
const normalizedClientIds = castArray( clientIds );
const firstClientId = first( normalizedClientIds );
const blockRootClientId = getBlockRootClientId( firstClientId );
const firstBlockIndex = getBlockIndex(
firstClientId,
blockRootClientId
);
const firstBlockIndex = getBlockIndex( firstClientId );
const lastBlockIndex = getBlockIndex(
last( normalizedClientIds ),
blockRootClientId
last( normalizedClientIds )
);
const blockOrder = getBlockOrder( blockRootClientId );
const block = getBlock( firstClientId );
Expand Down
7 changes: 2 additions & 5 deletions packages/block-editor/src/components/block-mover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,8 @@ export default withSelect( ( select, { clientIds } ) => {
const firstClientId = first( normalizedClientIds );
const block = getBlock( firstClientId );
const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
const firstIndex = getBlockIndex( firstClientId, rootClientId );
const lastIndex = getBlockIndex(
last( normalizedClientIds ),
rootClientId
);
const firstIndex = getBlockIndex( firstClientId );
const lastIndex = getBlockIndex( last( normalizedClientIds ) );
const blockOrder = getBlockOrder( rootClientId );
const isFirst = firstIndex === 0;
const isLast = lastIndex === blockOrder.length - 1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,11 +138,8 @@ export default compose(
const firstClientId = first( normalizedClientIds );
const rootClientId = getBlockRootClientId( firstClientId );
const blockOrder = getBlockOrder( rootClientId );
const firstIndex = getBlockIndex( firstClientId, rootClientId );
const lastIndex = getBlockIndex(
last( normalizedClientIds ),
rootClientId
);
const firstIndex = getBlockIndex( firstClientId );
const lastIndex = getBlockIndex( last( normalizedClientIds ) );

return {
firstIndex,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
hasBlockMovingClientId,
getBlockListSettings,
} = select( blockEditorStore );
const index = getBlockIndex( clientId, rootClientId );
const index = getBlockIndex( clientId );
const { name, attributes } = getBlock( clientId );
const blockMovingMode = hasBlockMovingClientId();
return {
Expand Down Expand Up @@ -169,14 +169,8 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
if ( ( isEnter || isSpace ) && startingBlockClientId ) {
const sourceRoot = getBlockRootClientId( startingBlockClientId );
const destRoot = getBlockRootClientId( selectedBlockClientId );
const sourceBlockIndex = getBlockIndex(
startingBlockClientId,
sourceRoot
);
let destinationBlockIndex = getBlockIndex(
selectedBlockClientId,
destRoot
);
const sourceBlockIndex = getBlockIndex( startingBlockClientId );
let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
if (
sourceBlockIndex < destinationBlockIndex &&
sourceRoot === destRoot
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,19 +64,12 @@ function useInsertionPoint( {
_destinationIndex = insertionIndex;
} else if ( clientId ) {
// Insert after a specific client ID.
_destinationIndex = getBlockIndex(
clientId,
_destinationRootClientId
);
_destinationIndex = getBlockIndex( clientId );
} else if ( ! isAppender && selectedBlockClientId ) {
_destinationRootClientId = getBlockRootClientId(
selectedBlockClientId
);
_destinationIndex =
getBlockIndex(
selectedBlockClientId,
_destinationRootClientId
) + 1;
_destinationIndex = getBlockIndex( selectedBlockClientId ) + 1;
} else {
// Insert at the end of the list.
_destinationIndex = getBlockOrder( _destinationRootClientId )
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inserter/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export default compose( [

// If the clientId is defined, we insert at the position of the block.
if ( clientId ) {
return getBlockIndex( clientId, rootClientId );
return getBlockIndex( clientId );
}

// If there a selected block, we insert after the selected block.
Expand All @@ -275,7 +275,7 @@ export default compose( [
end &&
getBlockRootClientId( end ) === rootClientId
) {
return getBlockIndex( end, rootClientId ) + 1;
return getBlockIndex( end ) + 1;
}

// Otherwise, we insert at the end of the current rootClientId
Expand Down
7 changes: 2 additions & 5 deletions packages/block-editor/src/components/inserter/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -343,10 +343,7 @@ export default compose( [
const destinationRootClientId = isAnyBlockSelected
? getBlockRootClientId( end )
: rootClientId;
const selectedBlockIndex = getBlockIndex(
end,
destinationRootClientId
);
const selectedBlockIndex = getBlockIndex( end );
const endOfRootIndex = getBlockOrder( rootClientId ).length;
const isSelectedUnmodifiedDefaultBlock = isAnyBlockSelected
? isUnmodifiedDefaultBlock( getBlock( end ) )
Expand All @@ -364,7 +361,7 @@ export default compose( [

// If the clientId is defined, we insert at the position of the block.
if ( clientId ) {
return getBlockIndex( clientId, rootClientId );
return getBlockIndex( clientId );
}

// If there is a selected block,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function QuickInserter( {
const { getSettings, getBlockIndex, getBlockCount } = select(
blockEditorStore
);
const index = getBlockIndex( clientId, rootClientId );
const index = getBlockIndex( clientId );
return {
setInserterIsOpened: getSettings()
.__experimentalSetIsInserterOpened,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export default function useListViewDropZone() {
return {
clientId,
rootClientId,
blockIndex: getBlockIndex( clientId, rootClientId ),
blockIndex: getBlockIndex( clientId ),
element: blockElement,
isDraggedBlock: isBlockDrag
? draggedBlockClientIds.includes( clientId )
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,7 @@ export function onBlockDrop(

// If the user is moving a block
if ( dropType === 'block' ) {
const sourceBlockIndex = getBlockIndex(
sourceClientIds[ 0 ],
sourceRootClientId
);
const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );

// If the user is dropping to the same position, return early.
if (
Expand Down
7 changes: 3 additions & 4 deletions packages/block-editor/src/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1169,8 +1169,7 @@ export const duplicateBlocks = ( clientIds, updateSelection = true ) => ( {

const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
const lastSelectedIndex = select.getBlockIndex(
last( castArray( clientIds ) ),
rootClientId
last( castArray( clientIds ) )
);
const clonedBlocks = blocks.map( ( block ) =>
__experimentalCloneSanitizedBlock( block )
Expand Down Expand Up @@ -1205,7 +1204,7 @@ export const insertBeforeBlock = ( clientId ) => ( { select, dispatch } ) => {
return;
}

const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
const firstSelectedIndex = select.getBlockIndex( clientId );
return dispatch.insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
};

Expand All @@ -1224,7 +1223,7 @@ export const insertAfterBlock = ( clientId ) => ( { select, dispatch } ) => {
return;
}

const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
const firstSelectedIndex = select.getBlockIndex( clientId );
return dispatch.insertDefaultBlock(
{},
rootClientId,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -892,11 +892,11 @@ export function getBlockOrder( state, rootClientId ) {
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {number} Index at which block exists in order.
*/
export function getBlockIndex( state, clientId, rootClientId ) {
export function getBlockIndex( state, clientId ) {
const rootClientId = getBlockRootClientId( state, clientId );
return getBlockOrder( state, rootClientId ).indexOf( clientId );
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/store/test/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -1358,7 +1358,7 @@ describe( 'selectors', () => {
},
};

expect( getBlockIndex( state, 56, '123' ) ).toBe( 1 );
expect( getBlockIndex( state, 56 ) ).toBe( 1 );
} );
} );

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/group/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export default compose( [
const { innerBlocks } = block;
const selectedBlockClientId = getSelectedBlockClientId();
const totalInnerBlocks = innerBlocks.length - 1;
const blockIndex = getBlockIndex( selectedBlockClientId, clientId );
const blockIndex = getBlockIndex( selectedBlockClientId );
isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const useWidgetLibraryInsertionPoint = () => {

return {
rootClientId,
insertionIndex: getBlockIndex( clientId, rootClientId ) + 1,
insertionIndex: getBlockIndex( clientId ) + 1,
};
},
[ firstRootId ]
Expand Down