[wp-trac] [WordPress Trac] #59913: Buttons (and other blocks using RichText) don't work in editor if styled as flex or grid

[WordPress Trac]

#59913: Buttons (and other blocks using RichText) don't work in editor if styled as
flex or grid
--------------------------+-----------------------------
 Reporter:  nred          |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59913>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform