[wp-meta] [Making WordPress.org] #7771: Rendering arbitrary Tailwind CSS classes break in Gutenberg Block

[Making WordPress.org]

#7771: Rendering arbitrary Tailwind CSS classes break in Gutenberg Block
--------------------------+--------------------
 Reporter:  cmccomas      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:
Component:  General       |   Keywords:
--------------------------+--------------------
 In attempting to create a custom block to use in our theme I’m attempting
 to use a [Tailwind CSS arbitrary variant](https://tailwindcss.com/docs
 /adding-custom-styles#arbitrary-variants).


 {{{
 <div class="[&>[data-slot=icon]]:size-24">
         <svg data-slot="icon" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 576 512"><path d="M160
 0H384V160H544V512H256v0V418.1l5.9-.8L286 414l3.3-24.1 3.4-25.3L312.9
 349l19.2-14.9L323 311.6 313.3 288l9.7-23.6 9.2-22.5L312.9
 227l-20.2-15.6-3.4-25.3L286 161.9l-24.1-3.3-25.3-3.4L221
 135.1l-14.9-19.2L183.6 125 160 134.7V0zm0 509.7l3.6 2.3H160v-2.3zM544
 128H416V0L544 128zM124.3 154.6l5.6 2.3L160 169.3 190.1 157l5.6-2.3 3.7 4.8
 19.9 25.7 32.2 4.4 6 .8 .8 6 4.4 32.2 25.7 19.9 4.8 3.7-2.3 5.6L278.7 288
 291 318.1l2.3 5.6-4.8 3.7-25.7 19.9-4.4 32.2-.8 6-6 .8L224
 390.2V512l-64-40L96 512V390.2l-27.6-3.8-6-.8-.8-6-4.4-32.2L31.5
 327.4l-4.8-3.7 2.3-5.6L41.3 288 29 257.9l-2.3-5.6 4.8-3.7 25.7-19.9
 4.4-32.2 .8-6 6-.8 32.2-4.4 19.9-25.7 3.7-4.8zM224
 288c0-35.3-28.7-64-64-64s-64 28.7-64 64s28.7 64 64 64s64-28.7
 64-64z"/></svg>
 </div>
 }}}

 In case that doesn’t work, here’s a
 [Gist](https://gist.github.com/mccomaschris/3c38c0867f8da6056e54c6e2f115db1a)
 with the code.

 This code is added to my block's render.php file. When viewing a post or
 page with the block in the front it, the wrapper div breaks. I’ve removed
 various characters and it seems like the right arrow is breaking the code
 on the front-end.

 It appears that somewhere in the process of rendering blocks the right
 arrow in the CSS class is breaking.

 This works properly in displaying everywhere else in WordPress (templates,
 shortcodes, widgets).

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/7771>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org