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

Fix the horizontal block list drop indicator when dragging to the start #43944

Merged
merged 4 commits into from
Sep 8, 2022
Merged

Fix the horizontal block list drop indicator when dragging to the start #43944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83b56ab
Ensure the rootClientId is correct when `previousClientId` is undefined
talldan Sep 7, 2022
16cea68
Add horizontal drag to start test
talldan Sep 8, 2022
0746c09
Add horizontal drag to end test
talldan Sep 8, 2022
79c9318
Fix comments
talldan Sep 8, 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
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-popover/inbetween.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ function BlockPopoverInbetween( {
isBlockVisible,
} = select( blockEditorStore );

const _rootClientId = getBlockRootClientId( previousClientId );
const _rootClientId = getBlockRootClientId(
previousClientId ?? nextClientId
);
return {
orientation:
getBlockListSettings( _rootClientId )?.orientation ||
Expand Down
166 changes: 164 additions & 2 deletions test/e2e/specs/editor/various/draggable-blocks.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ( {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that changing the test's title will cause the reporter to open a new issue since it's the only id. I think it's okay though.

editor,
page,
} ) => {
Expand Down Expand Up @@ -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,
} ) => {
Expand Down Expand Up @@ -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 -->` );
} );
} );