Paragraph placeholder in InnerBlocks is set to opacity 0

[virgiliud]

Description

When generating an InnerBlock with a template in the editor, the placeholder of a paragraph that's immediately after another paragraph is set to opacity 0. Please see screenshot.

Step-by-step reproduction instructions

1. Create an InnerBlock with the following allowed blocks and template:

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph', 'core/list', 'core/group', 'core/heading', 'core/button' ];

const TEMPLATE = [
  [ 'core/heading', { placeholder: 'Price Title' } ],
  [ 'core/paragraph', { fontSize: 'large', placeholder: '$49/mo' } ],
  [ 'core/paragraph', { placeholder: 'Price Subtitle' } ],
  [ 'core/list', { placeholder: 'Feature list' } ],
  [ 'core/button' ]
];

2. Generate the InnerBlock in the edit() function with the following settings:

<InnerBlocks
      allowedBlocks={ ALLOWED_BLOCKS }
       template={ TEMPLATE }
       renderAppender={ InnerBlocks.ButtonBlockAppender }
/>

3. In the editor, the paragraph block with the placeholder "Price Subtitle" will have 0 opacity.

Screenshots, screen recording, code snippet

Environment info

WP version 5.8.1, using the stable Gutenberg version (not the plugin with experimental features)
Tested in multiple themes

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[skorasaurus]

That is an odd error; I am able to reproduce this on Gutenberg trunk last built on 2021-11-18;

Investigating this more; the cause is this CSS in the paragraph bloc.

@jasmussen - could you shed some light for this decision?

[jasmussen]

Sure! It was added in #28275 to fix #13599. That is, if you create 10 empty paragraphs in a row, there's little value in seeing Type / to choose a block repeated ten times.

A very ugly hack we can't ship would be to do this:

.block-editor-block-list__block[data-empty="true"] + .block-editor-block-list__block[data-empty="true"] {
	[data-rich-text-placeholder="Type / to choose a block"] {
		opacity: 0;
	}
}

Should we add an additional data-custom-placeholder attribute that just ensures full opacity?

[ndiego]

I just encountered this issue on a project I am working on. @jasmussen I like the idea of data-custom-placeholder attribute that can easily be targeted with CSS.

[afercia]

I've been pinged on the associated PR and discovered this issue. Learned something new as I was unaware of this behavior.

I'm not sure the original change from #28275 / #13599 is a good choice in the first place. In my opinion, that introduced an accessibility and usability issue. The point is that the Editor is an editing interface. It should show what is editable. Instead, by hiding the default placeholder for the subsequent paragraph blocks, there's no visual indication of the editable fields.

No border, no shape, no placeholder text, nothing. Seems to me that deliberately hiding the editable parts of an interface is less than ideal. Consider the screenshot below, where:

• A Row block contains 3 empty paragraphs, horizontally stacked.
• After the Row, there are 6 empty paragraphs, vertically stacked.

As a user, I can't really see where the editable paragraphs are, with the exception of the first ones.

It's not even clear where I'm supposed to click to target the editable empty paragraphs. Hovering with the mouse doesn't help.

Basically, the interface is lying to users because there's really no visual presentation of the editable parts.

I'd like to stress that this is an editing context. While I understand the desire to make the editor a visual preview that is as close as possible to the front end, I'm not sure this is the right direction to take.

Overall, I'd like to propose to reconsider the original change and just revert it.

Minor, but interesting annoyance: when entering text or emptying the paragraphs, the placeholder visually 'moves' to the right / left and down / up. Basically, the placeholder appears and disappears based on the associated CSS rule that hides all subsequent placeholders (except the first one). The resulting visual effect is pretty confusing. I doubt users will actually understand why the placeholder appears and disappears. See animated GIF: