Make WordPress Core

Opened 19 months ago

Last modified 8 weeks ago

#57381 new defect (bug)

Filter wptexturize brokes tailwindcss brackets

Reported by: artz91's profile ArtZ91 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Formatting Keywords: reporter-feedback has-patch has-unit-tests
Focuses: Cc:

Description

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();
?>

Change History (7)

#1 @printsachen1
14 months ago

  • Keywords reporter-feedback added

Hi,

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

Thank you
Silvio

#2 @ArtZ91
14 months ago

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.

This ticket was mentioned in PR #5697 on WordPress/wordpress-develop by co6x0.


8 months ago
#3

  • Keywords has-patch has-unit-tests added

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

co6x0 commented on PR #5697:


8 months ago
#4

Added commit.
Removed tranformation of & to &#038; 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.

@dmsnell commented on PR #5697:


8 weeks ago
#6

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

@co6x0 commented on PR #5697:


8 weeks ago
#7

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

Note: See TracTickets for help on using tickets.