Filter wptexturize brokes tailwindcss brackets

[ArtZ91]

Hi there. I am developing WordPress Theme with TailwindCss frontend and gutenberg blocks.

My gutenberg block HTML was partially broken by wptexturize filter of the_content function.

Affected code:

<div class="swiper [&>.swiper-pagination]:static">...</div>

Result:

<div class="swiper [&#038;>.swiper-pagination]:static&#187;>...</div>

TailwindCss docs: ​https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

My current solution is remove this filter before calling the_content for my gutenberg page template:

<?php
$content = get_post_field( 'post_content', get_the_ID() );
remove_filter('the_content', 'wptexturize');
the_content();
?>

[printsachen1]

Hi,

can you show an examples?
How you use tailwindcss in your gutenberg block?

Thank you
Silvio

[ArtZ91]

Hi,

I'm use tailwindcss inside ACF Blocks templates like template_parts/block/<block_name>/block.php.

The problem that some custom tailwindcss selectors can use ampersand symbol.

I think I can avoid of using ampersand by creating custom class definition in my stylesheet file.

Ensures valid HTML is worked correctly by ​wptexturize(), ​wp_html_split(), etc.
I started working on this PR when I noticed that using TailwindCSS child selectors would break the layout of block theme (also reported in Trac ticket: 57381).

I have identified a problem with the regular expression defined in _get_wptexturize_split_regex() used in wptexturize().
This problem seemed to be affecting ​get_the_block_template_html() and causing the block theme layout collapse described above.
Changing this regex fixes the layout issue.

Also, wp_html_split() uses almost the same regex.
Other trac tickets caused by this function will also be fixed by updating to a similar regex.

According to the HTML reference at ​html.spec.whatwg.org, attribute values can contain a variety of characters.
With this in mind, I have modified the regex to exclude matching characters within quotation marks.
This fixes the misplacement of GREATER-THAN SIGN(>) and prevents other valid HTML structures from being mishandled.

I've included tests to cover these changes in tests/phpunit/tests/formatting/wpTexturize.php and tests/phpunit/tests/formatting/wpHtmlSplit.php. If there's anything I've missed, please let me know.

Trac ticket: https://core.trac.wordpress.org/ticket/57381
Trac ticket: https://core.trac.wordpress.org/ticket/45387
Trac ticket: https://core.trac.wordpress.org/ticket/43457

Added commit.
Removed tranformation of & to & in HTML attribute values modified by <https://core.trac.wordpress.org/ticket/35008>.

This ticket seems to have been created because the ​W3C HTML Validator found it to be invalid HTML, but as of now, the & in the URL is valid.

These issues in the Gutenberg repository would also be resolved.

• ​https://github.com/WordPress/gutenberg/issues/14861
• ​https://github.com/WordPress/gutenberg/issues/15636

howdy! just wanted to stop by and mention that I've been exploring updating these same functions using the HTML API, which provides a full spec-compliant parse of the HTML stream.

You can find some rough notes on the ​broader roadmap

@dmsnell
Thank you for letting me know.
Handling this with regular expressions has been challenging, so it would be wonderful if we could address it using the HTML API.

Please let me know if there's anything I can help with!
I will close this PR now.