Chrome/Safari: Unable to type in empty RichText element that's flexed

[dougwollison]

Description

In several instances we use flex layout on rich text elements for better handling of pseudo elements, like icons on buttons. However, in 6.4, I can no longer type in an empty button for instance, not unless the flex is turned off (the cursor is visible but typing doesn't update anything).

This appears to be caused by #53341 which removed the contenteditable="false" attribute from the placeholder span.

My bandaid fix has been to set the placeholder span to display: contents. This enables typing into the area, but the cursor does not consistently render in Safari.

Step-by-step reproduction instructions

1. Setup styling so .wp-block-button__link is display: flex; (inline-flex also works)
2. Add a new button in the editor
3. Try focusing the button to type in content

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.4, Gutenberg 16.2-16.7, custom theme
• Chrome 119, Safari 17.1

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

[Mamaduka]

cc @ellatrix

[jakeparis]

Confirming this issue. Displaying a RichText element, with a placeholder attribute, inside a div which has display:flex causes an issue where you can't type into the RichText element.

Confirming the fix: Setting .my-custom-flex-div .rich-text [data-rich-text-placeholder] { display: contents; } fixes the issue.

[sergiu-radu]

Any updates on this issue?

I don't think the display: contents is the best solution as it makes the typing cursor disappear.

[ellatrix]

Is this the same issue as #59192, which I just fixed in #59473?

[sergiu-radu]

Is this the same issue as #59192, which I just fixed in #59473?

Hi @ellatrix,
Yep, seems this is the same issue :)

Thank you very much!

[ellatrix]

Fixed by #59473 :)