Changeset 61418

Timestamp:

12/30/2025 01:01:11 PM (4 weeks ago)

Author:

jonsurrell

Message:

Use the HTML API to generate style tags.

The HTML API escapes <style> tag contents to ensure the correct HTML structure. Common HTML escaping is unsuitable for <style> tags because they contain "raw text." The additional safety allows other restrictions, such as rejecting content with <>, to be relaxed or removed because the resulting tag will be well-formed.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10656.

Props jonsurrell, westonruter, dmsnell, ramonopoly, soyebsalar01, drw158, sabernhardt.
See #64418.

Location:

trunk/src/wp-includes

Files:

• class-wp-styles.php (modified) (2 diffs)
• fonts/class-wp-font-face.php (modified) (2 diffs)
• script-loader.php (modified) (2 diffs)
• theme.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-styles.php

@@ -159 +159 @@
 
         if ( $inline_style ) {
-            $inline_style_tag = sprintf(
-                "<style id='%s-inline-css'>\n%s\n</style>\n",
-                esc_attr( $handle ),
-                $inline_style
-            );
+            $processor = new WP_HTML_Tag_Processor( '<style></style>' );
+            $processor->next_tag();
+            $processor->set_attribute( 'id', "{$handle}-inline-css" );
+            $processor->set_modifiable_text( "\n{$inline_style}\n" );
+            $inline_style_tag = "{$processor->get_updated_html()}\n";
         } else {
             $inline_style_tag = '';
@@ -337 +337 @@
         }
 
-        printf(
-            "<style id='%s-inline-css'>\n%s\n</style>\n",
-            esc_attr( $handle ),
-            $output
-        );
+        $processor = new WP_HTML_Tag_Processor( '<style></style>' );
+        $processor->next_tag();
+        $processor->set_attribute( 'id', "{$handle}-inline-css" );
+        $processor->set_modifiable_text( "\n{$output}\n" );
+        echo "{$processor->get_updated_html()}\n";
 
         return true;

trunk/src/wp-includes/fonts/class-wp-font-face.php

@@ -93 +93 @@
         }
 
-        printf( $this->get_style_element(), $css );
+        $processor = new WP_HTML_Tag_Processor( '<style class="wp-fonts-local"></style>' );
+        $processor->next_tag();
+        $processor->set_modifiable_text( "\n{$css}\n" );
+        echo "{$processor->get_updated_html()}\n";
     }
 
@@ -195 +198 @@
 
     /**
-     * Gets the style element for wrapping the `@font-face` CSS.
-     *
-     * @since 6.4.0
-     *
-     * @return string The style element.
-     */
-    private function get_style_element() {
-        return "<style class='wp-fonts-local'>\n%s\n</style>\n";
-    }
-
-    /**
      * Gets the `@font-face` CSS styles for locally-hosted font files.
      *

trunk/src/wp-includes/script-loader.php

@@ -2414 +2414 @@
 
         if ( ! empty( $wp_styles->print_code ) ) {
-            echo "<style>\n";
-            echo $wp_styles->print_code;
-            echo sprintf( "\n/*# sourceURL=%s */", rawurlencode( $concat_source_url ) );
-            echo "\n</style>\n";
+            $processor = new WP_HTML_Tag_Processor( '<style></style>' );
+            $processor->next_tag();
+            $style_tag_contents = "\n{$wp_styles->print_code}\n"
+                . sprintf( "/*# sourceURL=%s */\n", rawurlencode( $concat_source_url ) );
+            $processor->set_modifiable_text( $style_tag_contents );
+            echo "{$processor->get_updated_html()}\n";
         }
     }
@@ -3172 +3174 @@
         $action_hook_name,
         static function () use ( $style ) {
-            echo "<style>$style</style>\n";
+            $processor = new WP_HTML_Tag_Processor( '<style></style>' );
+            $processor->next_tag();
+            $processor->set_modifiable_text( $style );
+            echo "{$processor->get_updated_html()}\n";
         },
         $priority

trunk/src/wp-includes/theme.php

@@ -1951 +1951 @@
         $style .= $image . $position . $size . $repeat . $attachment;
     }
-    ?>
-<style<?php echo $type_attr; ?> id="custom-background-css">
-body.custom-background { <?php echo trim( $style ); ?> }
-</style>
-    <?php
+
+    $processor = new WP_HTML_Tag_Processor( "<style{$type_attr} id=\"custom-background-css\"></style>" );
+    $processor->next_tag();
+
+    $style_tag_content = 'body.custom-background { ' . trim( $style ) . ' }';
+    $processor->set_modifiable_text( "\n{$style_tag_content}\n" );
+    echo "{$processor->get_updated_html()}\n";
 }
 
@@ -1965 +1967 @@
 function wp_custom_css_cb() {
     $styles = wp_get_custom_css();
-    if ( $styles || is_customize_preview() ) :
-        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-        ?>
-        <style<?php echo $type_attr; ?> id="wp-custom-css">
-            <?php
-            // Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly.
-            echo strip_tags( $styles );
-            ?>
-        </style>
-        <?php
-    endif;
+    if ( ! $styles && ! is_customize_preview() ) {
+        return;
+    }
+
+    $processor = new WP_HTML_Tag_Processor( '<style></style>' );
+    $processor->next_tag();
+    if ( ! current_theme_supports( 'html5', 'style' ) ) {
+        $processor->set_attribute( 'type', 'text/css' );
+    }
+    $processor->set_attribute( 'id', 'wp-custom-css' );
+    $processor->set_modifiable_text( "\n{$styles}\n" );
+    echo "{$processor->get_updated_html()}\n";
 }