Skip to content

List block: Add empty state placeholder to prevent block from disappearing#71405

Open
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/list-empty-block-placeholder
Open

List block: Add empty state placeholder to prevent block from disappearing#71405
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/list-empty-block-placeholder

Conversation

@dhruvikpatel18
Copy link
Copy Markdown
Contributor

@dhruvikpatel18 dhruvikpatel18 commented Aug 29, 2025

What?

Closes #65646

Add empty state placeholder for List block to prevent it from disappearing when it has no inner blocks.

Why?

When a List block has all its inner list-item blocks deleted, it becomes completely invisible in the editor canvas when not selected. This creates a poor user experience where users cannot see or interact with the empty block, even though it still exists in the block hierarchy. This inconsistency with other core blocks (like Buttons, Social Icons, etc.) that show placeholders when empty needed to be addressed.

Testing Instructions

  1. Open a post or page in the block editor
  2. Insert a List block (it will have one default list item)
  3. Select the inner list item and delete it (the List block should now be empty)
  4. Click elsewhere to deselect the List block (e.g., click below to add a Paragraph)
  5. Verify that the List block now shows a placeholder with the list icon and "Click to add list item" text
  6. Click on the placeholder to select the List block
  7. Verify that the block appender appears and you can add list items normally
  8. Test with both ordered and unordered lists to ensure appropriate icons are shown

Screenshots or screencast

Before

List.Block.Before.mov

After

List.Block.After.mov

@dhruvikpatel18 dhruvikpatel18 marked this pull request as ready for review August 29, 2025 12:14
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 29, 2025

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin, New Block.
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 29, 2025

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: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

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

t-hamano
t-hamano reviewed Sep 1, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

I think we need to decide how we should represent empty blocks first. See #65646 (comment)

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Status] Blocked Used to indicate that a current effort isn't able to move forward [Block] List Affects the List Block labels Sep 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano left review comments

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] List Affects the List Block [Status] Blocked Used to indicate that a current effort isn't able to move forward [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Some empty blocks disappear from the editor canvas

2 participants

@dhruvikpatel18 @t-hamano