Skip to content

Commit

Permalink
List: improve writing flow (#43954)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Sep 16, 2022
1 parent 9e874a9 commit c437a0e
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 16 deletions.
12 changes: 11 additions & 1 deletion packages/block-editor/src/components/writing-flow/use-arrow-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useRefEffect } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { getBlockClientId } from '../../utils/dom';
import { getBlockClientId, isInSameBlock } from '../../utils/dom';
import { store as blockEditorStore } from '../../store';

/**
Expand Down Expand Up @@ -101,6 +101,16 @@ export function getClosestTabbable(
}

function isTabCandidate( node ) {
// Skip if there's only one child that is content editable (and thus a
// better candidate).
if (
node.children.length === 1 &&
isInSameBlock( node, node.firstElementChild ) &&
node.firstElementChild.getAttribute( 'contenteditable' ) === 'true'
) {
return;
}

// Not a candidate if the node is not tabbable.
if ( ! focus.tabbable.isTabbableIndex( node ) ) {
return false;
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/list-item/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default function ListItemEdit( {
const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: [ 'core/list' ],
renderAppender: false,
} );
const useEnterRef = useEnter( { content, clientId } );
const useSpaceRef = useSpace( clientId );
Expand Down
1 change: 0 additions & 1 deletion packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
await insertButton.click();
// Select the list wrapper so the image is inserable.
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await insertBlock( 'Image' );
await closeGlobalBlockInserter();
await page.waitForSelector( '.product[data-number-of-children="2"]' );
Expand Down
5 changes: 0 additions & 5 deletions packages/e2e-tests/specs/editor/various/block-switcher.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ describe( 'Block Switcher', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await pressKeyWithModifier( 'alt', 'F10' );

// Verify the block switcher exists.
Expand Down Expand Up @@ -47,7 +46,6 @@ describe( 'Block Switcher', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await pressKeyWithModifier( 'alt', 'F10' );

// Verify the block switcher exists.
Expand Down Expand Up @@ -81,7 +79,6 @@ describe( 'Block Switcher', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await pressKeyWithModifier( 'alt', 'F10' );

// Verify the block switcher exists.
Expand All @@ -96,7 +93,6 @@ describe( 'Block Switcher', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await insertBlock( 'Heading' );
await page.keyboard.type( 'I am a header' );
await page.keyboard.down( 'Shift' );
Expand All @@ -110,7 +106,6 @@ describe( 'Block Switcher', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List content' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await insertBlock( 'Heading' );
await page.keyboard.type( 'I am a header' );
await page.keyboard.press( 'Enter' );
Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/specs/editor/various/splitting-merging.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ describe( 'splitting and merging blocks', () => {
await page.keyboard.type( 'item 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'item 2' );
await pressKeyTimes( 'ArrowUp', 5 );
await pressKeyTimes( 'ArrowUp', 3 );
await page.keyboard.press( 'Delete' );
// Carret should be in the first block and at the proper position.
await page.keyboard.type( '-' );
Expand All @@ -257,7 +257,6 @@ describe( 'splitting and merging blocks', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'item 2' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await pressKeyTimes( 'ArrowLeft', 6 );
await page.keyboard.press( 'Backspace' );
// Carret should be in the first block and at the proper position.
Expand Down
11 changes: 4 additions & 7 deletions test/e2e/specs/editor/blocks/list.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ test.describe( 'List', () => {
await page.keyboard.press( 'Enter' );
await editor.clickBlockToolbarButton( 'Indent' );
await page.keyboard.type( 'two' );
await pageUtils.pressKeyTimes( 'ArrowUp', 5 );
await pageUtils.pressKeyTimes( 'ArrowUp', 4 );
await editor.transformBlockTo( 'core/paragraph' );

await expect.poll( editor.getEditedPostContent ).toBe(
Expand Down Expand Up @@ -419,7 +419,6 @@ test.describe( 'List', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Enter' );

await expect.poll( editor.getEditedPostContent ).toBe(
Expand Down Expand Up @@ -493,7 +492,6 @@ test.describe( 'List', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );

Expand Down Expand Up @@ -682,7 +680,7 @@ test.describe( 'List', () => {

// To do: investigate why the toolbar is not showing up right after
// outdenting.
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowLeft' );
await editor.clickBlockToolbarButton( 'Outdent' );

await expect.poll( editor.getEditedPostContent ).toBe(
Expand Down Expand Up @@ -782,7 +780,6 @@ test.describe( 'List', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'c' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );

await expect.poll( editor.getEditedPostContent ).toBe(
Expand Down Expand Up @@ -924,7 +921,7 @@ test.describe( 'List', () => {
await page.keyboard.type( '* 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( ' a' );
await pageUtils.pressKeyTimes( 'ArrowUp', 3 );
await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
await page.keyboard.press( 'Enter' );
// The caret should land in the second item.
await page.keyboard.type( '2' );
Expand Down Expand Up @@ -1025,6 +1022,7 @@ test.describe( 'List', () => {

// Again create a new paragraph.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );

// Move to the end of the list.
await page.keyboard.press( 'ArrowLeft' );
Expand Down Expand Up @@ -1058,7 +1056,6 @@ test.describe( 'List', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.press( 'Backspace' );

Expand Down

0 comments on commit c437a0e

Please sign in to comment.