From 346bf5b7234e5f0f6e6bf75c8c88f7974d781628 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 8 Sep 2022 16:36:48 +0800 Subject: [PATCH] Fix the horizontal block list drop indicator when dragging to the start (#43944) * Ensure the rootClientId is correct when `previousClientId` is undefined * Add horizontal drag to start test * Add horizontal drag to end test * Fix comments --- .../src/components/block-popover/inbetween.js | 4 +- .../editor/various/draggable-blocks.spec.js | 166 +++++++++++++++++- 2 files changed, 167 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index f3f435a3c837a8..cf76527f4910a0 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -48,7 +48,9 @@ function BlockPopoverInbetween( { isBlockVisible, } = select( blockEditorStore ); - const _rootClientId = getBlockRootClientId( previousClientId ); + const _rootClientId = getBlockRootClientId( + previousClientId ?? nextClientId + ); return { orientation: getBlockListSettings( _rootClientId )?.orientation || diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 6c57b08c8425e2..59b7ad86abe07c 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -18,7 +18,7 @@ test.describe( 'Draggable block', () => { await admin.createNewPost(); } ); - test( 'can drag and drop to the top of a block list', async ( { + test( 'can drag and drop to the top of a vertical block list', async ( { editor, page, } ) => { @@ -88,7 +88,7 @@ test.describe( 'Draggable block', () => { ` ); } ); - test( 'can drag and drop to the bottom of a block list', async ( { + test( 'can drag and drop to the bottom of a vertical block list', async ( { editor, page, } ) => { @@ -161,4 +161,166 @@ test.describe( 'Draggable block', () => {

1

` ); } ); + + test( 'can drag and drop to the start of a horizontal block list', async ( { + editor, + page, + } ) => { + // Insert a row. + await editor.insertBlock( { + name: 'core/group', + attributes: { + layout: { type: 'flex', flexWrap: 'nowrap' }, + }, + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + content: '1', + }, + }, + { + name: 'core/paragraph', + attributes: { + content: '2', + }, + }, + ], + } ); + + await page.focus( 'role=document[name="Paragraph block"i] >> text=2' ); + await editor.showBlockToolbar(); + + const dragHandle = page.locator( + 'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]' + ); + // Hover to the center of the drag handle. + await dragHandle.hover(); + // Start dragging. + await page.mouse.down(); + + // Move to and hover on the left half of the paragraph block to trigger the indicator. + const firstParagraph = page.locator( + 'role=document[name="Paragraph block"i] >> text=1' + ); + const firstParagraphBound = await firstParagraph.boundingBox(); + // Call the move function twice to make sure the `dragOver` event is sent. + // @see https://github.com/microsoft/playwright/issues/17153 + for ( let i = 0; i < 2; i += 1 ) { + await page.mouse.move( + firstParagraphBound.x + firstParagraphBound.width * 0.25, + firstParagraphBound.y + ); + } + + await expect( + page.locator( 'data-testid=block-draggable-chip >> visible=true' ) + ).toBeVisible(); + + const indicator = page.locator( + 'data-testid=block-list-insertion-point-indicator' + ); + await expect( indicator ).toBeVisible(); + // Expect the indicator to be to the left of the first paragraph. + await expect + .poll( () => indicator.boundingBox().then( ( { x } ) => x ) ) + .toBeLessThan( firstParagraphBound.x ); + + // Drop the paragraph block. + await page.mouse.up(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +
+

2

+ + + +

1

+
+` ); + } ); + + test( 'can drag and drop to the end of a horizontal block list', async ( { + editor, + page, + } ) => { + // Insert a row. + await editor.insertBlock( { + name: 'core/group', + attributes: { + layout: { type: 'flex', flexWrap: 'nowrap' }, + }, + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + content: '1', + }, + }, + { + name: 'core/paragraph', + attributes: { + content: '2', + }, + }, + ], + } ); + + await page.focus( 'role=document[name="Paragraph block"i] >> text=1' ); + await editor.showBlockToolbar(); + + const dragHandle = page.locator( + 'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]' + ); + // Hover to the center of the drag handle. + await dragHandle.hover(); + // Start dragging. + await page.mouse.down(); + + // Move to and hover on the right half of the paragraph block to trigger the indicator. + const secondParagraph = page.locator( + 'role=document[name="Paragraph block"i] >> text=2' + ); + const secondParagraphBound = await secondParagraph.boundingBox(); + // Call the move function twice to make sure the `dragOver` event is sent. + // @see https://github.com/microsoft/playwright/issues/17153 + for ( let i = 0; i < 2; i += 1 ) { + await page.mouse.move( + secondParagraphBound.x + secondParagraphBound.width * 0.75, + secondParagraphBound.y + ); + } + + await expect( + page.locator( 'data-testid=block-draggable-chip >> visible=true' ) + ).toBeVisible(); + + const indicator = page.locator( + 'data-testid=block-list-insertion-point-indicator' + ); + await expect( indicator ).toBeVisible(); + // Expect the indicator to be to the right of the second paragraph. + await expect + .poll( () => + indicator.boundingBox().then( ( { x, width } ) => x + width ) + ) + .toBeGreaterThan( + secondParagraphBound.x + secondParagraphBound.width + ); + + // Drop the paragraph block. + await page.mouse.up(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +
+

2

+ + + +

1

+
+` ); + } ); } );