Fix custom placeholder not displaying on subsequent Paragraph blocks

[ndiego]

What?

Fixes #35928.

Why?

If custom placeholders are set on Paragraph blocks, the custom placeholders for subsequent blocks are hidden. This is not ideal for certain implementations as the linked issue details. This is especially troublesome in pattern creation.

How?

This PR solves this issue by conditionally adding the attribute data-has-custom-placeholder to Paragraph blocks with custom placeholders set. Then the Editor styles for Paragraph blocks have been updated to show the placeholders for subsequent blocks with this attribute.

This approach follows the suggestion in #35928. There may be alternatives, but this seemed to be the most straightforward solution.

Testing Instructions

1. Create a new page or post and add the following code example.

<!-- wp:paragraph {"placeholder":"Start writing your story..."} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"placeholder":"This is another placeholder..."} -->
<p></p>
<!-- /wp:paragraph -->

2. You should see both placeholders.
3. Now add the following code, the middle paragraph should have a hidden placeholder since there is no custom placeholder set.

<!-- wp:paragraph {"placeholder":"Start writing your story..."} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"placeholder":"This is another placeholder..."} -->
<p></p>
<!-- /wp:paragraph -->

Screenshots or screencast

Using the last code example above here is a before and after:

Before this PR

After this PR

[richtabor]

Does the trick.

Perhaps we should adapt it to follow the existing naming convention, and make it data-custom-placeholder instead?

Screenshot showing duplicate default placeholders do not occur, but you may also have custom placeholders right after each other that are not invisible:

[ndiego]

Perhaps we should adapt it to follow the existing naming convention, and make it data-custom-placeholder instead?

Sounds good to me!

...but you may also have custom placeholders right after each other that are not invisible:

@richtabor I was a little confused by this. Do you see an issue?

[richtabor]

@richtabor I was a little confused by this. Do you see an issue?

Na, just confirming that multiple custom placeholders do indeed display. :)

[ndiego]

Sorry everyone, something went wrong. 😅

[ndiego]

@afercia, @ellatrix and @MaggieCabrera, sorry for the pings but was hoping to get some additional eyes on this PR. The failing tests seem wholly unrelated.

[afercia]

The failing tests seem wholly unrelated.

I restarted the failing job and now all tests pass (sometimes End-to-End tests fail because of timeouts or other hiccups).

[afercia]

The code change looks good to me. However, to me there's an underlying accessibility and usability issue even with the default placeholder. I'd rather propose to just revert the original change to hide placeholders, as commented on the issue associated to this PR. See #35928 (comment)

[ndiego]

@afercia I agree. Showing every placeholder does add "noise" to the Editor but makes things a lot more clear to the user.

This PR was meant to be a compromise, retaining the original change while allowing for custom placeholders. At the very least, I would like to see this PR merged, and then we can have a larger conversation about placeholders being hidden in general (I am guessing that's going to take some debate).

[ndiego]

Sorry for the ping @jasmussen and @MaggieCabrera but any thought on this one? It's all ready to go and has been tested, just needs final review and approval. 🙏

[jffng]

This fixes the issue reported and seems like an okay approach, judging from the original PR that added a data attribute to the paragraph block.

Using the test markup provided:

Trunk	This PR

[ndiego]

Thanks @jffng 🚢 ing