Rendering arbitrary Tailwind CSS classes in block

  • Resolved cmccomas

    (@cmccomas)


    2 months, 1 week ago

    In attempting to create a custom block to use in our theme I’m attempting to use a Tailwind CSS arbitrary variant.

    <div class="[&>[data-slot=icon]]:size-24">
    	<svg data-slot="icon" xmlns="https://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 with the code.

    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. If I remove the right arrow it works fine (though the CSS does not work as it’s invalid for Tailwind). See screenshot.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Can you share the code for the block? Is this code in your render.php or is it a in your save.js?

    Thread Starter cmccomas

    (@cmccomas)

    @greenshady thanks for the response. This is the code in render.php:

    <?php
    /**
     * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
     */
    ?>
    <div class="[&>[data-slot=icon]]:size-24">
    	<svg data-slot="icon" xmlns="https://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>

    This doesn’t seem to be related to the block itself. My guess is some of the characters that you’re using in the class are not valid identifiers and need to be escaped.

    You can read more about CSS identifiers here and how to escape them: https://developer.mozilla.org/en-US/docs/Web/CSS/ident

    Most likely, you’d need to replace the > character with & # 6 2 ; (without the spaces, which I had to add to get it to show up here). Maybe the ampersand too.

    Thread Starter cmccomas

    (@cmccomas)

    Thanks for the suggestions. It works every where else in the theme (header.php, single.php, in a custom shortcode, etc) except in the render.php file for our custom block.

    We can’t use the escaped > character because of the way Tailwind parses files and generates classes based on the text in the PHP files.

    I’ll keep digging, thanks again!

    Moderator mizantium

    (@janmtm)

    Sounds like you’re well on your way, @cmccomas !

    I’ve set this as ‘Resolved’ but you can reopen it if you have any more related questions.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.