Fix the horizontal block list drop indicator when dragging to the sta…

…rt (#43944) * Ensure the rootClientId is correct when `previousClientId` is undefined * Add horizontal drag to start test * Add horizontal drag to end test * Fix comments
WordPress · Sep 8, 2022 · 346bf5b · 346bf5b
1 parent 40c1212
commit 346bf5b
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 3 deletions.
diff --git 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
@@ -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', () => {
 <!-- /wp:paragraph -->` );
 	} );
 
-	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', () => {
 <p>1</p>
 <!-- /wp:paragraph -->` );
 	} );
+
+	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( `<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->` );
+	} );
+
+	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( `<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->` );
+	} );
 } );