Widgets screen: Use button block appender instead of inline appender

[DaisyOlsen]

Describe the bug
It is very easy to have an empty Paragraph block end up in an otherwise empty widget area.

To reproduce
Steps to reproduce the behavior:

1. Go to widgets screen
2. Remove all widgets
3. Click into empty widget area
4. Save settings

Expected behavior
It should be less easy to have an empty block in a widget area. Some themes will check for contents in a widget area as a mechanism to determine whether or not to output the wrapper HTML. Others will have styling that will create a visibly empty container.

Editor version (please complete the following information):

• WordPress version: 5.5.1
• If the Gutenberg plugin is installed, which version is it? 9.1.1

Additional context
Also worth noting that I've seen cases where adding an empty widget as a workaround to avoid default widget content without displaying any actual content. Having an empty column in a multi-column footer, for example. Not really a good practice but it does happen.

[noisysocks]

@mapk: Could we go back to the block appender? (The one that the Columns block uses.)

[mapk]

I'd like to keep the experience as close to the Post Editor as possible. Creating an empty post (no content, just a title) does not leave any empty Paragraph blocks anywhere that I noticed. So why does that happen in the Widget Editor?

[DaisyOlsen]

@mapk - I actually have seen this happen pretty extensively in the Post editor, but I'd agree that anywhere blocks are used should be a consistent experience. Somehow this feels more impactful in widgets than in post content because of the way themes work with widgets for styling, and sometimes even whether or not the widget area loads at all.

[skorasaurus]

similarly in the post editor #18297

and matching the display on the frontend and backend regarding empty paragraphs #10051

[mapk]

@mapk - I actually have seen this happen pretty extensively in the Post editor

I'm surprised. I just tested this with a title and can see the prompt to start writing in the post editor, but when I preview on frontend, I'm not seeing any empty paragraphs. So weird.

In either case though, as you mentioned @DaisyOlsen, if we can get this fixed in one editor, it should be implemented on all of them. :)

[talldan]

Paragraphs aren't there by default, but it's very easy to create them, as soon as you click into the appender it becomes a paragraph block.

I think this consistent across editors, but it's difficult for users because an empty paragraph and an appender look exactly the same.

[mapk]

So it seems to me this is a technical issue? Should we just not render empty Paragraph blocks at all?

[talldan]

So it seems to me this is a technical issue? Should we just not render empty Paragraph blocks at all?

I think it's only a technical issue if it wasn't intended to work like that in the first place. We'd probably need to consult someone that's been involved in Gutenberg from the start to understand how it should work (as it predates my involvement). Maybe @mtias or @jasmussen might know.

[jasmussen]

In most content areas an empty paragraph shouldn't be the end of the world, though #10051 would be nice to address to make that feel less jarring than it currently feels.

An alternative solution that may be more widget-like, is to change the default appender from being the empty paragraph, to being the white plus button, as is seen in the Group block if inserted on its own:

Then you have to select the Paragraph as a block, to explicitly insert it.

[paaljoachim]

Adding in this associated issue:
Widgets screen: style adjustments for the block areas hover and font face
#25777

[mapk]

An alternative solution that may be more widget-like, is to change the default appender from being the empty paragraph, to being the white plus button, as is seen in the Group block if inserted on its own:

This was considered early on, but design and a11y feedback suggested against this solution. So I pursued to align it more consistently with the post editor. It does introduce this hanging Paragraph now which is far from ideal.

I wouldn't mind returning back to the larger + button that forces the user to select a block or widget. 👍

[mapk]

Here's a prototype how that would be solved bringing that larger button back in.

[paaljoachim]

I brought up the issue during a Design Feedback session. @garretthyder and myself were present.
I went ahead and removed the "Needs Design Feedback" label as a developer needs to adjust the widget inserter.