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 drag and drop indicator before first block and after last block #43135

Merged
merged 2 commits into from
Aug 11, 2022
Merged

Fix drag and drop indicator before first block and after last block #43135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96d3694
Fix drag and drop insertion point before first block and after last b…
talldan Aug 11, 2022
897a814
Improve drag and drop tests to check for insertion point
talldan Aug 11, 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
5 changes: 4 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 @@ -154,7 +154,10 @@ function BlockPopoverInbetween( {

const popoverScrollRef = usePopoverScroll( __unstableContentRef );

if ( ! previousElement || ! nextElement || ! isVisible ) {
// If there's either a previous or a next element, show the inbetween popover.
// Note that drag and drop uses the inbetween popover to show the drop indicator
// before the first block and after the last block.
if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
return null;
}

Expand Down
24 changes: 22 additions & 2 deletions packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Draggable block should drag and drop 1`] = `
exports[`Draggable block can drag and drop to the bottom of a block list 1`] = `
"<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->
Expand All @@ -10,7 +10,27 @@ exports[`Draggable block should drag and drop 1`] = `
<!-- /wp:paragraph -->"
`;

exports[`Draggable block should drag and drop 2`] = `
exports[`Draggable block can drag and drop to the bottom of a block list 2`] = `
"<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->"
`;

exports[`Draggable block can drag and drop to the top of a block list 1`] = `
"<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->"
`;

exports[`Draggable block can drag and drop to the top of a block list 2`] = `
"<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->
Expand Down
97 changes: 83 additions & 14 deletions packages/e2e-tests/specs/editor/various/draggable-block.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,120 @@ import {
deactivatePlugin,
activatePlugin,
showBlockToolbar,
setBrowserViewport,
waitForWindowDimensions,
} from '@wordpress/e2e-test-utils';

describe( 'Draggable block', () => {
beforeAll( async () => {
await page.setDragInterception( true );
// Tests don't seem to pass if beforeAll and afterAll are used.
// Unsure why.
beforeEach( async () => {
await deactivatePlugin(
'gutenberg-test-plugin-disables-the-css-animations'
);

// Set the viewport at a larger size than normal to ensure scrolling doesn't occur.
// Scrolling can interfere with the drag coordinates.
await page.setViewport( { width: 960, height: 1024 } );
await waitForWindowDimensions( 960, 1024 );
await createNewPost();
await page.setDragInterception( true );
} );

afterAll( async () => {
afterEach( async () => {
await page.setDragInterception( false );

// Reset the viewport to normal large size.
await setBrowserViewport( 'large' );
await activatePlugin(
'gutenberg-test-plugin-disables-the-css-animations'
);
} );

beforeEach( async () => {
await createNewPost();
it( 'can drag and drop to the top of a block list', async () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );

// Confirm correct setup.
expect( await getEditedPostContent() ).toMatchSnapshot();

await showBlockToolbar();
const dragHandle = await page.waitForSelector(
'.block-editor-block-mover__drag-handle'
);
const dragHandlePoint = await dragHandle.clickablePoint();

const firstParagraph = await page.$( '[data-type="core/paragraph"]' );
const targetPoint = await firstParagraph.clickablePoint();
const targetRect = await firstParagraph.boundingBox();
const target = {
x: targetPoint.x,
// Drag to the top half.
y: targetPoint.y - targetRect.height * 0.25,
};

const dragData = await page.mouse.drag( dragHandlePoint, target );
await page.mouse.dragEnter( target, dragData );
await page.mouse.dragOver( target, dragData );

// Wait for the insertion point to be visible.
const insertionPoint = await page.waitForSelector(
'.block-editor-block-list__insertion-point'
);

// Expect the insertion point to be visible above the first paragraph.
const insertionPointBoundingBox = await insertionPoint.boundingBox();
expect( insertionPointBoundingBox.y ).toBeLessThan( target.y );

await page.mouse.drop( target, dragData );

expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'should drag and drop', async () => {
it( 'can drag and drop to the bottom of a block list', async () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
await page.keyboard.press( 'ArrowUp' );

// Confirm correct setup.
expect( await getEditedPostContent() ).toMatchSnapshot();

const [ , secondParagraph ] = await page.$$(
'[data-type="core/paragraph"]'
);

await showBlockToolbar();
const dragHandle = await page.waitForSelector(
'.block-editor-block-mover__drag-handle'
);
const dragHandlePoint = await dragHandle.clickablePoint();

const paragraph = await page.$( '[data-type="core/paragraph"]' );
const paragraphPoint = await paragraph.clickablePoint();
const paragraphRect = await paragraph.boundingBox();
const targetPoint = await secondParagraph.clickablePoint();
const targetRect = await secondParagraph.boundingBox();
const target = {
x: targetPoint.x,
// Drag to the bottom half.
y: targetPoint.y + targetRect.height * 0.25,
};

await page.mouse.dragAndDrop( dragHandlePoint, {
x: paragraphPoint.x,
// Drag to the top half.
y: paragraphPoint.y - paragraphRect.height / 4,
} );
const dragData = await page.mouse.drag( dragHandlePoint, target );
await page.mouse.dragEnter( target, dragData );
await page.mouse.dragOver( target, dragData );

// Wait for the insertion point to be visible.
const insertionPoint = await page.waitForSelector(
'.block-editor-block-list__insertion-point'
);

// Expect the insertion point to be visible below the first paragraph.
const insertionPointBoundingBox = await insertionPoint.boundingBox();
expect( insertionPointBoundingBox.y ).toBeGreaterThan( target.y );

await page.mouse.drop( target, dragData );

expect( await getEditedPostContent() ).toMatchSnapshot();
} );
Expand Down