Fix: The List View sidebar needs a message

[Rishit30G]

What?

Closes #69647

Why?

This PR is necessary to add the 'No blocks added yet, open the block inserter to add one or start typing!' text when no block is selected in the block editor.

How?

This PR adds the necessary text and styling required to display the above text.

Testing Instructions

1. Create a new post
2. Click on Document Overview
3. Notice that the 'List View' Tab has 'No block selected.' text when no block is selected.

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: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: luminuu <luminuu@git.wordpress.org>

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

[Infinite-Null]

Hi @Rishit30G,
This PR looks great 👍.
Note that accessibility concerns have been raised regarding centering text. See #67730.

I think it would be great to not center the text vertically like done in this PR #67731

[Mamaduka]

The current behavior is correct, IMO. I left a more general comment on the issue: #69647 (comment).

[Rishit30G]

Thanks @Infinite-Null for the insights! 🚀

[t-hamano]

Thanks for the PR!

We should be able to inject a message without using CSS. Example:

if ( ! clientIdsTree.length && ! showAppender ) {
	return (
		<Spacer padding={ 4 }>
			<Text>
				{ __(
					'No blocks added yet, open the block inserter to add one or start typing!'
				) }
			</Text>
		</Spacer>
	);
}

I'd love to hear other people's feedback on the text, but it seems a bit active to me 😄

[Rishit30G]

Thanks @t-hamano! 👍🏻
I have updated the PR

Edit: Sure, we can tag the relevant people to look into the text, that should expedite the process!

[Rishit30G]

I just wanted to check if everything looks good or if there are any improvements we should consider. 🙇🏻

[t-hamano]

Sorry for the late reply. Everything seems OK from a code perspective.

@WordPress/gutenberg-design I'd love to hear your feedback about the copy text!

• The left-aligned text is intentional for accessibility reasons.
• The copy was suggested here: The List View sidebar needs a “No block selected.” message. #69647 (comment)

[Rishit30G]

No worries @t-hamano, thanks for the update! 😄

[github-actions]

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.

• Required label: Any label starting with [Type].
• Labels found: [Type] Enhancement, Needs Design Feedback, [Type] Copy, Needs Copy Review, [Feature] List View.

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.

[jasmussen]

Perhaps frustrating, but I find myself agreeing with motivations both for and against the message here:

• When the list view is entirely empty, its purpose might be unclear
• When there's something inside the list view that is not blocks, it dilutes the list view itself

In that light, both opinions are valid, yet I'm finding myself softly leaning towards not adding a message here, at least yet. There are a few motivations, one of them already expressed by @Mamaduka elsewhere: it's a list of blocks. Separately, it's an interface not shown by default, to an extent intended for advanced users, so it's unclear how impactful #69647 is. Finally, I believe there are other ways to address the issue, which can perhaps be reduced to the following. Shown here, a fresh post:

And here, the "Type / to choose a block" has been clicked, a paragraph has actually been inserted.

Both of these images are arguably the same, and the actual difference between the two is difficult to explain: the former has only a placeholder paragraph, but no actual content. The latter actually does have a paragraph—a dirty document—that's just empty.

If there's an issue—which is not clear—that would arguably be the one to fix: when the document is empty, it doesn't appear as empty. And my main concern with moving this PR forward is that it's going to make that state worse: suggesting there are no blocks when there clearly appears to be an empty paragraph, I worry, doesn't fix the issue at hand.