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

[nred]

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?

[jorbin]

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