Make WordPress Core

Opened 14 months ago

Last modified 3 months 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 (5)

#1 @printsachen1
9 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
9 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.


3 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:


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

Note: See TracTickets for help on using tickets.