Skip to content

Styles: Use HTML API to generate <style> tags #10656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sirreal wants to merge 9 commits into
base: trunk
Choose a base branch
from
Draft

Styles: Use HTML API to generate <style> tags #10656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c124eb5
Update wp_custom_css_cb to rely on HTML API for safe SCRIPT tag print…
sirreal Dec 17, 2025
e055156
Wrap customizer CSS test in newlines
sirreal Dec 17, 2025
33f9616
Use HTML API for style tags in script-loader
sirreal Dec 17, 2025
606539e
Use HTML Tag Processor to produce WP_Styles style tags
sirreal Dec 17, 2025
c938d4c
Use HTML Tag Processor for STYLE tags in theme.php
sirreal Dec 17, 2025
dd919f1
Build font style tags with HTML API
sirreal Dec 23, 2025
d29900a
PICKME: Update font tests to use semantic HTML comparison
sirreal Dec 23, 2025
6c6a72b
Use HTML API for hide header text
sirreal Dec 23, 2025
aad4744
Revert "Use HTML API for hide header text"
sirreal Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions src/wp-includes/class-wp-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,12 +183,11 @@ public function do_item( $handle, $group = false ) {
$inline_style = $this->print_inline_style( $handle, false );

if ( $inline_style ) {
$inline_style_tag = sprintf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$inline_style
);
$processor = new WP_HTML_Tag_Processor( "<style{$this->type_attr}></style>\n" );
$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();
} else {
$inline_style_tag = '';
}
Expand Down Expand Up @@ -364,12 +363,11 @@ public function print_inline_style( $handle, $display = true ) {
return $output;
}

printf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$output
);
$processor = new WP_HTML_Tag_Processor( "<style{$this->type_attr}></style>\n" );
$processor->next_tag();
$processor->set_attribute( 'id', "{$handle}-inline-css" );
$processor->set_modifiable_text( "\n{$output}\n" );
echo $processor->get_updated_html();

return true;
}
Expand Down
36 changes: 7 additions & 29 deletions src/wp-includes/fonts/class-wp-font-face.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,13 @@ public function generate_and_print( array $fonts ) {
return;
}

printf( $this->get_style_element(), $css );
$processor = new WP_HTML_Tag_Processor( "<style class=\"wp-fonts-local\"></style>\n" );
$processor->next_tag();
foreach ( $this->style_tag_attrs as $name => $value ) {
$processor->set_attribute( $name, $value );
}
$processor->set_modifiable_text( "\n{$css}\n" );
echo $processor->get_updated_html();
}

/**
Expand Down Expand Up @@ -219,34 +225,6 @@ private function validate_font_face_declarations( array $font_face ) {
return $font_face;
}

/**
* Gets the style element for wrapping the `@font-face` CSS.
*
* @since 6.4.0
*
* @return string The style element.
*/
private function get_style_element() {
$attributes = $this->generate_style_element_attributes();

return "<style class='wp-fonts-local'{$attributes}>\n%s\n</style>\n";
}

/**
* Gets the defined <style> element's attributes.
*
* @since 6.4.0
*
* @return string A string of attribute=value when defined, else, empty string.
*/
private function generate_style_element_attributes() {
$attributes = '';
foreach ( $this->style_tag_attrs as $name => $value ) {
$attributes .= " {$name}='{$value}'";
}
return $attributes;
}

/**
* Gets the `@font-face` CSS styles for locally-hosted font files.
*
Expand Down
15 changes: 10 additions & 5 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2417,10 +2417,12 @@ function _print_styles() {
echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "'{$type_attr} media='all' />\n";

if ( ! empty( $wp_styles->print_code ) ) {
echo "<style{$type_attr}>\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{$type_attr}></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();
}
}

Expand Down Expand Up @@ -3217,7 +3219,10 @@ function wp_enqueue_block_support_styles( $style, $priority = 10 ) {
add_action(
$action_hook_name,
static function () use ( $style ) {
echo "<style>$style</style>\n";
$processor = new WP_HTML_Tag_Processor( "<style></style>\n" );
$processor->next_tag();
$processor->set_modifiable_text( $style );
echo $processor->get_updated_html();
},
$priority
);
Expand Down
35 changes: 19 additions & 16 deletions src/wp-includes/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1953,11 +1953,13 @@ function _custom_background_cb() {

$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();
}

/**
Expand All @@ -1967,17 +1969,18 @@ function _custom_background_cb() {
*/
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();
}

/**
Expand Down
8 changes: 6 additions & 2 deletions tests/phpunit/tests/fonts/font-face/wpFontFace/generateAndPrint.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ public function test_should_generate_and_print_given_fonts( array $fonts, $expec
$style_element = "<style class='wp-fonts-local' type='text/css'>\n%s\n</style>\n";
$expected_output = sprintf( $style_element, $expected );

$this->expectOutputString( $expected_output );
$font_face->generate_and_print( $fonts );
$output = get_echo(
function () use ( $font_face, $fonts ) {
$font_face->generate_and_print( $fonts );
}
);
$this->assertEqualHTML( $expected_output, $output );
}
}
20 changes: 14 additions & 6 deletions tests/phpunit/tests/fonts/font-face/wpPrintFontFaces.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,12 @@ public function test_should_not_print_when_no_fonts() {
public function test_should_print_given_fonts( array $fonts, $expected ) {
$expected_output = $this->get_expected_styles_output( $expected );

$this->expectOutputString( $expected_output );
wp_print_font_faces( $fonts );
$output = get_echo(
function () use ( $fonts ) {
wp_print_font_faces( $fonts );
}
);
$this->assertEqualHTML( $expected_output, $output );
}

public function test_should_escape_tags() {
Expand All @@ -60,9 +64,13 @@ public function test_should_escape_tags() {
</style>

CSS;
$this->expectOutputString( $expected_output );

wp_print_font_faces( $fonts );
$output = get_echo(
function () use ( $fonts ) {
wp_print_font_faces( $fonts );
}
);
$this->assertEqualHTML( $expected_output, $output );
}

public function test_should_print_fonts_in_merged_data() {
Expand All @@ -71,8 +79,8 @@ public function test_should_print_fonts_in_merged_data() {
$expected = $this->get_expected_fonts_for_fonts_block_theme( 'font_face_styles' );
$expected_output = $this->get_expected_styles_output( $expected );

$this->expectOutputString( $expected_output );
wp_print_font_faces();
$output = get_echo( 'wp_print_font_faces' );
$this->assertEqualHTML( $expected_output, $output );
}

private function get_expected_styles_output( $styles ) {
Expand Down
4 changes: 2 additions & 2 deletions tests/phpunit/tests/fonts/font-face/wpPrintFontFacesFromStyleVariations.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ public function test_should_print_fonts_in_style_variations() {
$expected = $this->get_custom_style_variations( 'expected_styles' );
$expected_output = $this->get_expected_styles_output( $expected );

$this->expectOutputString( $expected_output );
wp_print_font_faces_from_style_variations();
$output = get_echo( 'wp_print_font_faces_from_style_variations' );
$this->assertEqualHTML( $expected_output, $output );
}

private function get_expected_styles_output( $styles ) {
Expand Down
Loading