Make WordPress Core

Opened 7 months ago

Last modified 6 months ago

#59913 new defect (bug)

Buttons (and other blocks using RichText) don't work in editor if styled as flex or grid

Reported by: nred's profile nred Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5
Component: Editor Keywords: close
Focuses: Cc:


With the 6.4/6.4.1 updates, blocks that use the RichText component won't allow adding new text if the element is styled as a flex or grid item via CSS.

To recreate the issue, I'm using a fresh WP install with no plugins. I've tested and the error occurs using both the Twenty Twenty-Four and Twenty Twenty-Two themes and add this CSS:

.wp-block-button__link {
	display: flex;

Then when I add a core/button block to the editor and click on the placeholder it won't allow typing any text. It appears that the placeholder has been selected even though it has pointer-events: none; set in its inline styles.

If I set the element to display: grid; then it's easier to see the two elements in the button - the data-rich-text-placeholder span, and the zero-width space &#xfeff. If clicking on the span, typing input doesn't work. If clicking the &#xfeff area, it works.

Both elements are also there on 6.3.2 and clicking on either works with that version of WP. I'm guessing this is an issue with the latest Gutenberg updates?

Change History (3)

This ticket was mentioned in Slack in #core by jorbin. View the logs.

6 months ago

#2 @jorbin
6 months ago

  • Keywords close added

Hi @nred, thanks for the report and welcome to trac.

I think this is something that is best reported in the Gutenberg repo where work on the editor takes place. I'm adding the close keyword so that after this has been reported there, this ticket can be closed as reported-upstream

This ticket was mentioned in Slack in #core-editor by jorbin. View the logs.

6 months ago

Note: See TracTickets for help on using tickets.