Fix : Empty last List Element should not be displayed

[nani-samireddy]

What?

Closes #65876

As mentioned in the above issue. When we create a list and if we leave the last item empty. It renders a empty list item on the front-end.

Why?

When the user adds a list item then we are saving it as list item block. But if the list-item has no content then we are saving empty list-item. Resulting in a empty list-item element

How?

• Added a check to only save the list-item only if it has content

Testing Instructions

• Open the Gutenberg Editor.
• Add the list block
• Add two or three items and for the last item keep it empty
• On the front-end it should not display the last list-item ( empty one)

Testing Instructions for Keyboard

Screenshots or screencast

before

After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: nani-samireddy <[email protected]>
Co-authored-by: up1512001 <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @nani-samireddy! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[up1512001]

LGTM

[Mamaduka]

I'm still not sure about and looking for the feedback from @ellatrix!

@up1512001, you can also see that tests are failing, with usually means that PR isn't ready to be merged.

[up1512001]

I checked the test failure issue and noticed that its due to this file test/integration/fixtures/documents/mixed-content-out.html.
seems like we need to change this

<ul class="wp-block-list"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item -->

with this

<ul class="wp-block-list"><!-- wp:list-item /-->

as on frontend we are not putting empty li with early return.
@Mamaduka let me know if I am right 🙇

[Mamaduka]

@up1512001, @nani-samireddy, I also see failures in e2e tests.

[up1512001]

@Mamaduka one thing I notice during debugging e2e that to run it in watch mode we need to change package.json script from this "test:e2e:watch": "npm run test:e2e -- --watch", to this "test:e2e:watch": "npm run test:e2e --watch", isn't it strange 🤔

npm run test:e2e:watch    

> [email protected] test:e2e:watch
> npm run test:e2e -- --watch


> [email protected] test:e2e
> wp-scripts test-playwright --config test/e2e/playwright.config.ts --watch

error: unknown option '--watch'

[up1512001]

Looks good to me, @Mamaduka any suggestions. 🙇

[ellatrix]

This does not make any sense to me.

[ellatrix]

Why?

It is missing a check while saving the list-item.

I don't understand this answer to "Why?"

This does not make sense to me at all. If the user adds a list item, it should be displayed.

[nani-samireddy]

Closing this PR based on this comment

Thank you @ellatrix for confirming the expected behaviour of the list-item.

Thank you @up1512001 and @Mamaduka for taking time and reviewing this

[Mamaduka]

Thanks for contributing, @nani-samireddy!