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.

Sign up for GitHub

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

List: improve writing flow #43954

Merged
merged 3 commits into from
Sep 16, 2022
Merged

List: improve writing flow #43954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
291656d
List: improve writing flow
ellatrix Sep 7, 2022
ea5df99
Fix e2e tests
ellatrix Sep 8, 2022
d65776d
Add same block condition
ellatrix Sep 9, 2022
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
12 changes: 11 additions & 1 deletion packages/block-editor/src/components/writing-flow/use-arrow-nav.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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