Changeset 61418

Timestamp:

12/30/2025 01:01:11 PM (8 months 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";
 }