RichText should show placeholder again when content has been deleted and block is unfocused

[ktmn]

Issue Overview

When removing all text from <wp.blocks.RichText> the placeholder does not reappear. After saving and reloading the page, it has a new value a .

Steps to Reproduce (for bugs)

1. Add a core/button
2. Click Add text... placeholder
3. Type asd
4. Hit backspace 3 times
5. Unfocus the element

Doesn't get it's placeholder back because the editable still contains  (ZERO WIDTH NO-BREAK SPACE), but the RichText's isEmpty() checks if the container is completely empty.

Bonus:
6. Save the page.
7. Refresh the editor.
8. Button now has content: a.

Chrome 64.0.3282.186

Expected Behavior

Should put the placeholder back, not when all text is deleted, but after the block has lost focus.

Current Behavior

Possible Solution

Screenshots / Video

Related Issues and/or PRs

Todos

• Tests
• Documentation

[mirka]

I'm getting this bug too, and I'd just like to add some repro conditions.

This bug only happens when:

1. The RichText is an inline element, like span or small
2. You delete the text by keying backspace on each character, and not when you ⌘A and delete the whole thing

[ktmn]

Bug still exists and is a major problem in my opinion. In the workflow of creating blocks I often backspace all the way to delete something and then retype different text. After saving and refreshing all the content is gone...

[ellatrix]

@ktmn does this bug still exist?

[ktmn]

@iseulde Reproduction steps 1-5 are fixed, the placeholder returns if you delete everything with backspace. How ever the placeholder sometimes does not return when you select all the characters and hit delete. Not sure what's happening there, but it seems to work only every other time - type asd into core/button, select the 3 characters, press delete - it doesn't show placeholder, do that exact thing again, and it shows the placeholder, then do it again, and it doesn't show it again... tested on frontenberg.

Reproduction steps 6-8 still happens with inline elements (<RichText tagName='span'> ), I think I read somwhere it's a wontfix/cantfix though, something to do with TinyMCE and inline elements.

[ellatrix]

<RichText tagName='span'>

Where are we using that? RichText elements should never have an inline tagName.

[ktmn]

No, Gutenberg core doesn't afaik, but at the time of the report I was heavily using inline elements with RichText. It just felt the most appropriate tag to use for text content that wouldn't otherwise be wrapped with anything on the front end. It didn't yell at me so I never knew it was wrong. It works flawlessly until that bug showcases itself. A console warning or something would be nice I guess, so that other devs don't jump in that pitfall.

[ellatrix]

Action item: warn if RichText is used with inline tag name. We should probably have a whitelist of tag names you can use.

[ellatrix]

Closing in favour of #11839.