List block: prevent error upon pasting when list is empty (#43761)

WordPress · Sep 1, 2022 · 9e1717c · 9e1717c
1 parent b8b6edb
commit 9e1717c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/packages/block-library/src/list/utils.js b/packages/block-library/src/list/utils.js
@@ -30,7 +30,7 @@ export function createListBlockFromDOMElement( listElement ) {
 			const [ nestedList, ...nodes ] = children;
 
 			const hasNestedList =
-				nestedList.tagName === 'UL' || nestedList.tagName === 'OL';
+				nestedList?.tagName === 'UL' || nestedList?.tagName === 'OL';
 			if ( ! hasNestedList ) {
 				return createBlock( 'core/list-item', {
 					content: listItem.innerHTML,

diff --git a/...s/editor/blocks/__snapshots__/List-can-be-created-by-pasting-an-empty-list-1-chromium.txt b/...s/editor/blocks/__snapshots__/List-can-be-created-by-pasting-an-empty-list-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
@@ -1132,4 +1132,25 @@ test.describe( 'List', () => {
 <!-- /wp:list -->`
 		);
 	} );
+
+	test( 'can be created by pasting an empty list', async ( {
+		editor,
+		pageUtils,
+	} ) => {
+		// Open code editor
+		await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		// Paste empty list block
+		await pageUtils.setClipboardData( {
+			plainText:
+				'<!-- wp:list -->\n<ul><li></li></ul>\n<!-- /wp:list -->',
+		} );
+		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+
+		// Go back to normal editor
+		await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		// Verify no WSOD and content is proper.
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );