Changeset 58740

Timestamp:

07/17/2024 12:10:52 AM (18 months ago)

Author:

dmsnell

Message:

HTML API: Remove leading whitespace after removing class names.

In part of a larger review of CSS semantics and behaviors, this patch
takes the opportunity to remove leading whitespace in an updated class
attribute after the first class in the attribute has been removed.

Previously, if the first class name had been removed, the whitespace
that formerly followed it would remain in the class attribute. This
stood in contrast to removing other class names, which removed their
associated whitespace.

There should be no semantic or functional changes in this patch, only
a slightly-large diff for modified HTML documents that looks prettier
when removing the first class name in a class attribute.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/6933
Discussed in https://core.trac.wordpress.org/ticket/61531

Props dmsnell, jonsurrell.
See #61531.

Location:

trunk

Files:

• src/wp-includes/html-api/class-wp-html-tag-processor.php (modified) (1 diff)
• tests/phpunit/tests/html-api/wpHtmlTagProcessor.php (modified) (4 diffs)

trunk/src/wp-includes/html-api/class-wp-html-tag-processor.php

@@ -2219 +2219 @@
              * in the output HTML but produce a noisier change.
              */
-            $class .= substr( $existing_class, $ws_at, $ws_length );
+            if ( '' !== $class ) {
+                $class .= substr( $existing_class, $ws_at, $ws_length );
+            }
             $class .= $name;
         }

trunk/tests/phpunit/tests/html-api/wpHtmlTagProcessor.php

@@ -1377 +1377 @@
 
         $this->assertSame(
-            '<div class=" with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
+            '<div class="with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
             $processor->get_updated_html(),
             'Updated HTML does not reflect class name removed from existing class attribute via remove_class()'
         );
         $this->assertSame(
-            ' with-border',
+            'with-border',
             $processor->get_attribute( 'class' ),
             "get_attribute( 'class' ) does not reflect class name removed from existing class attribute via remove_class()"
@@ -1467 +1467 @@
 
         $this->assertSame(
-            '<div class="   main   with-border foo-class" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
+            '<div class="main   with-border foo-class" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
             $processor->get_updated_html(),
             'Updated HTML does not reflect existing excessive whitespace after adding class name via add_class()'
         );
         $this->assertSame(
-            '   main   with-border foo-class',
+            'main   with-border foo-class',
             $processor->get_attribute( 'class' ),
             "get_attribute( 'class' ) does not reflect existing excessive whitespace after adding class name via add_class()"
@@ -1491 +1491 @@
 
         $this->assertSame(
-            '<div class="   main" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
+            '<div class="main" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
             $processor->get_updated_html(),
             'Updated HTML does not reflect existing excessive whitespace after removing class name via remove_class()'
         );
         $this->assertSame(
-            '   main',
+            'main',
             $processor->get_attribute( 'class' ),
             "get_attribute( 'class' ) does not reflect existing excessive whitespace after removing class name via removing_class()"
@@ -1697 +1697 @@
 <div data-details="{ &quot;key&quot;: &quot;value&quot; }" selected class="merge-message is-processed" checked>
     <div class="select-menu d-inline-block">
-        <div checked class=" MixedCaseHTML position-relative button-group Another-Mixed-Case" />
-        <div checked class=" MixedCaseHTML position-relative button-group Another-Mixed-Case">
+        <div checked class="MixedCaseHTML position-relative button-group Another-Mixed-Case" />
+        <div checked class="MixedCaseHTML position-relative button-group Another-Mixed-Case">
             <button type="button" class="merge-box-button btn-group-merge rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
               Merge pull request