Rendering arbitrary Tailwind CSS classes break in Gutenberg Block

[cmccomas]

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).

[Otto42]

This is the meta trac, a place for leaving tickets related to wordpress .org or surrounding properties. If you want to submit a ticket for WordPress itself, please use the core trac instead.