List Block: fix merging with indented list items (#17845)

* List Block: fix merging with indented list items * Fix forward merge
WordPress · Oct 15, 2019 · 13a5558 · 13a5558
1 parent c5756e0
commit 13a5558
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/packages/block-editor/src/store/effects.js b/packages/block-editor/src/store/effects.js
@@ -102,10 +102,14 @@ export default {
 			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
 			const html = selectedBlock.attributes[ attributeKey ];
 			const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
-			const multilineTag = selectedBlockType.attributes[ attributeKey ].multiline;
+			const {
+				multiline: multilineTag,
+				__unstableMultilineWrapperTags: multilineWrapperTags,
+			} = selectedBlockType.attributes[ attributeKey ];
 			const value = insert( create( {
 				html,
 				multilineTag,
+				multilineWrapperTags,
 			} ), START_OF_SELECTED_AREA, offset, offset );
 
 			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
@@ -136,8 +140,15 @@ export default {
 				typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
 			);
 			const convertedHtml = updatedAttributes[ newAttributeKey ];
-			const multilineTag = blockAType.attributes[ newAttributeKey ].multiline;
-			const convertedValue = create( { html: convertedHtml, multilineTag } );
+			const {
+				multiline: multilineTag,
+				__unstableMultilineWrapperTags: multilineWrapperTags,
+			} = blockAType.attributes[ newAttributeKey ];
+			const convertedValue = create( {
+				html: convertedHtml,
+				multilineTag,
+				multilineWrapperTags,
+			} );
 			const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
 			const newValue = remove( convertedValue, newOffset, newOffset + 1 );
 			const newHtml = toHTMLString( { value: newValue, multilineTag } );

diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
@@ -11,6 +11,7 @@
 			"source": "html",
 			"selector": "ol,ul",
 			"multiline": "li",
+			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": ""
 		},
 		"start": {

diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/list.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/list.test.js.snap
@@ -234,6 +234,18 @@ exports[`List should place the caret in the right place with nested list 1`] = `
 <!-- /wp:list -->"
 `;
 
+exports[`List should preserve indentation after merging backward and forward 1`] = `
+"<!-- wp:list -->
+<ul><li>1<ul><li>2</li><li>3</li></ul></li><li></li></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List should preserve indentation after merging backward and forward 2`] = `
+"<!-- wp:list -->
+<ul><li>1<ul><li>2</li><li>3</li></ul></li></ul>
+<!-- /wp:list -->"
+`;
+
 exports[`List should split indented list item 1`] = `
 "<!-- wp:list -->
 <ul><li>one<ul><li>two</li><li>three</li></ul></li></ul>

diff --git a/packages/e2e-tests/specs/blocks/list.test.js b/packages/e2e-tests/specs/blocks/list.test.js
@@ -431,4 +431,36 @@ describe( 'List', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should preserve indentation after merging backward and forward', async () => {
+		await clickBlockAppender();
+
+		// Tests the shortcut with a non breaking space.
+		await page.keyboard.type( '* 1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Space' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+
+		// Create a new paragraph.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		// Merge the pragraph back. No list items should be joined.
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Again create a new paragraph.
+		await page.keyboard.press( 'Enter' );
+
+		// Move to the end of the list.
+		await page.keyboard.press( 'ArrowLeft' );
+
+		// Merge forward. No list items should be joined.
+		await page.keyboard.press( 'Delete' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );