List block - Cannot delete last empty list item

[bobbingwide]

Describe the bug
I had a list block with an empty item as the last item. When I deleted the item the bullet disappeared. But the <li></li> tags didn't. So, after update, the empty item reappeared.

Workarounds...

• Use the code editor to remove the empty item.
• Click on the indent/outdent buttons.

To Reproduce
Steps to reproduce the behavior:

1. Create a List block with an empty item
2. Save, view and edit
3. Attempt to delete the empty item using the Delete key
4. The bullet disappears
5. But switch to ordered and see the empty item reappear.

Expected behavior
The empty <li></li> should be deleted.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

• Gutenberg 4.6.1

[skorasaurus]

Confirmed this also occurs in WordPress 5.1-alpha-43678

[chthonic-ds]

Can confirm this happens in WordPress 5.0.2, same desktop specs as OP.

[kadamwhite]

This also happens in custom blocks when using a multiline RichText element:

// edit() method:
<RichText
	tagName="ul"
	multiline="li"
	value={ listItems }
	onChange={ listItems => setAttributes( { listItems } ) }
	placeholder={ __( 'Enter text here. Text may contain links.', 'project' ) }
/>

//save() method:
<RichText.Content
	tagName="ul"
	multiline="li"
	value={ listItems }
/>

Edit/Update: We resolved this for our custom elements by implementing a removeEmptyTrailingItems() method which we call on the list when passing listItems into setAttributes:

const removeEmptyTrailingItems = listItems => {
	if ( listItems.length === 1 ) {
		// Do not delete list entirely even if first element empty.
		return listItems;
	}
	const lastItem = listItems[ listItems.length - 1 ];
	if ( lastItem && lastItem.props && lastItem.props.children ) {
		if ( lastItem.props.children.length === 0 ) {
			// Recursively remove empty trailing list items.
			return removeEmptyTrailingItems( listItems.slice( 0, -1 ) );
		}
	}
	return listItems;
};

[youknowriad]

Can't reproduce this anymore. I suspect it was fixed by #13697.

[ellatrix]

Thanks for testing!

[kennethz3]

This issue has appeared again on my site

[kennethz3]

Scenario to reproduce:

• Classic block before List block in a post
• Classic block containing bullet list, and list block containing a few list items
• Add a new list item at the end of the list in the classic block
• New empty list item appears at the end of the list block

[timofey-drozhzhin]

Related issue #14977