Changeset 56682

Timestamp:

09/25/2023 05:04:41 PM (16 months ago)

Author:

spacedmonkey

Message:

Script Loader: Replace hardcoded output of style tags with calls to wp_add_inline_style.

In this commit, enhancements have been made by replacing manually constructed style tags with calls to wp_add_inline_style. Previously, numerous style tags were generated and output directly in the header, resulting in redundant code and bypassing the core's style enqueueing system. This approach made it challenging for third-party developers to manage and control the output of these style tags.

To ensure backward compatibility, the following functions have been deprecated and replaced:

• print_embed_styles
• print_emoji_styles
• wp_admin_bar_header
• _admin_bar_bump_cb

Backward compatibility shims have also been added, ensuring that if these functions were previously unhooked from there actions, they will continue to not output a style tag.

However, for the following functions, conversion to use inline styles was not feasible due to the potential disruption it might cause by changing the style tag IDs, potentially breaking JavaScript functionality for a number of plugins in the repository:

• custom-background
• wp-custom

These changes improve code maintainability and enhance the flexibility and control available to developers when managing style outputs within WordPress core.

Props spacedmonkey, hlunter, westonruter, flixos90.
Fixes #58775.

Location:

trunk

Files:

• src/wp-admin/includes/admin-filters.php (modified) (1 diff)
• src/wp-includes/admin-bar.php (modified) (1 diff)
• src/wp-includes/default-filters.php (modified) (3 diffs)
• src/wp-includes/deprecated.php (modified) (1 diff)
• src/wp-includes/embed.php (modified) (1 diff)
• src/wp-includes/formatting.php (modified) (1 diff)
• src/wp-includes/theme-templates.php (modified) (2 diffs)
• tests/phpunit/tests/blocks/editor.php (modified) (1 diff)
• tests/phpunit/tests/oembed/template.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php (modified) (1 diff)

trunk/src/wp-admin/includes/admin-filters.php

@@ -61 +61 @@
 add_action( 'admin_print_scripts', 'print_head_scripts', 20 );
 add_action( 'admin_print_footer_scripts', '_wp_footer_scripts' );
-add_action( 'admin_print_styles', 'print_emoji_styles' );
+add_action( 'admin_enqueue_scripts', 'wp_enqueue_emoji_styles' );
+add_action( 'admin_print_styles', 'print_emoji_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_emoji_styles().
 add_action( 'admin_print_styles', 'print_admin_styles', 20 );
 

trunk/src/wp-includes/admin-bar.php

@@ -1226 +1226 @@
 
 /**
- * Prints style and scripts for the admin bar.
- *
- * @since 3.1.0
- */
-function wp_admin_bar_header() {
-    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-    ?>
-<style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
-    <?php
-}
-
-/**
- * Prints default admin bar callback.
- *
- * @since 3.1.0
- */
-function _admin_bar_bump_cb() {
-    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-    ?>
-<style<?php echo $type_attr; ?> media="screen">
-    html { margin-top: 32px !important; }
-    @media screen and ( max-width: 782px ) {
-        html { margin-top: 46px !important; }
-    }
-</style>
-    <?php
+ * Enqueues inline style to hide the admin bar when printing.
+ *
+ * @since 6.4.0
+ */
+function wp_enqueue_admin_bar_header_styles() {
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    $action = is_admin() ? 'admin_head' : 'wp_head';
+    if ( ! has_action( $action, 'wp_admin_bar_header' ) ) {
+        return;
+    }
+    remove_action( $action, 'wp_admin_bar_header' );
+
+    wp_add_inline_style( 'admin-bar', '@media print { #wpadminbar { display:none; } }' );
+}
+
+/**
+ * Enqueues inline bump styles to make room for the admin bar.
+ *
+ * @since 6.4.0
+ */
+function wp_enqueue_admin_bar_bump_styles() {
+    if ( current_theme_supports( 'admin-bar' ) ) {
+        $admin_bar_args  = get_theme_support( 'admin-bar' );
+        $header_callback = $admin_bar_args[0]['callback'];
+    }
+
+    if ( empty( $header_callback ) ) {
+        $header_callback = '_admin_bar_bump_cb';
+    }
+
+    if ( '_admin_bar_bump_cb' !== $header_callback ) {
+        return;
+    }
+
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    if ( ! has_action( 'wp_head', $header_callback ) ) {
+        return;
+    }
+    remove_action( 'wp_head', $header_callback );
+
+    $css = '
+        @media screen { html { margin-top: 32px !important; } }
+        @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } }
+    ';
+    wp_add_inline_style( 'admin-bar', $css );
 }
 

trunk/src/wp-includes/default-filters.php

@@ -358 +358 @@
 add_action( 'after_switch_theme', '_wp_menus_changed' );
 add_action( 'after_switch_theme', '_wp_sidebars_changed' );
-add_action( 'wp_print_styles', 'print_emoji_styles' );
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_emoji_styles' );
+add_action( 'wp_print_styles', 'print_emoji_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_emoji_styles().
 
 if ( isset( $_GET['replytocom'] ) ) {
@@ -648 +649 @@
 add_action( 'template_redirect', '_wp_admin_bar_init', 0 );
 add_action( 'admin_init', '_wp_admin_bar_init' );
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_bump_styles' );
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_header_styles' );
+add_action( 'admin_enqueue_scripts', 'wp_enqueue_admin_bar_header_styles' );
 add_action( 'before_signup_header', '_wp_admin_bar_init' );
 add_action( 'activate_header', '_wp_admin_bar_init' );
@@ -669 +673 @@
 add_action( 'embed_head', 'enqueue_embed_scripts', 1 );
 add_action( 'embed_head', 'print_emoji_detection_script' );
-add_action( 'embed_head', 'print_embed_styles' );
+add_action( 'embed_head', 'wp_enqueue_embed_styles', 9 );
+add_action( 'embed_head', 'print_embed_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_embed_styles().
 add_action( 'embed_head', 'wp_print_head_scripts', 20 );
 add_action( 'embed_head', 'wp_print_styles', 20 );

trunk/src/wp-includes/deprecated.php

@@ -5873 +5873 @@
 
 /**
+ * Prints the CSS in the embed iframe header.
+ *
+ * @since 4.4.0
+ * @deprecated 6.4.0 Use wp_enqueue_embed_styles() instead.
+ */
+function print_embed_styles() {
+    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_embed_styles' );
+
+    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
+    $suffix    = SCRIPT_DEBUG ? '' : '.min';
+    ?>
+    <style<?php echo $type_attr; ?>>
+        <?php echo file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ); ?>
+    </style>
+    <?php
+}
+
+/**
+ * Prints the important emoji-related styles.
+ *
+ * @since 4.2.0
+ * @deprecated 6.4.0 Use wp_enqueue_emoji_styles() instead.
+ */
+function print_emoji_styles() {
+    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_emoji_styles' );
+    static $printed = false;
+
+    if ( $printed ) {
+        return;
+    }
+
+    $printed = true;
+
+    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
+    ?>
+    <style<?php echo $type_attr; ?>>
+    img.wp-smiley,
+    img.emoji {
+        display: inline !important;
+        border: none !important;
+        box-shadow: none !important;
+        height: 1em !important;
+        width: 1em !important;
+        margin: 0 0.07em !important;
+        vertical-align: -0.1em !important;
+        background: none !important;
+        padding: 0 !important;
+    }
+    </style>
+    <?php
+}
+
+/**
+ * Prints style and scripts for the admin bar.
+ *
+ * @since 3.1.0
+ * @deprecated 6.4.0 Use wp_enqueue_admin_bar_header_styles() instead.
+ */
+function wp_admin_bar_header() {
+    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_admin_bar_header_styles' );
+    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
+    ?>
+    <style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
+    <?php
+}
+
+/**
+ * Prints default admin bar callback.
+ *
+ * @since 3.1.0
+ * @deprecated 6.4.0 Use wp_enqueue_admin_bar_bump_styles() instead.
+ */
+function _admin_bar_bump_cb() {
+    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_admin_bar_bump_styles' );
+    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
+    ?>
+    <style<?php echo $type_attr; ?> media="screen">
+    html { margin-top: 32px !important; }
+    @media screen and ( max-width: 782px ) {
+      html { margin-top: 46px !important; }
+    }
+    </style>
+    <?php
+}
+
+/**
  * Runs a remote HTTPS request to detect whether HTTPS supported, and stores potential errors.
  *

trunk/src/wp-includes/embed.php

@@ -1060 +1060 @@
 
 /**
- * Prints the CSS in the embed iframe header.
- *
- * @since 4.4.0
- */
-function print_embed_styles() {
-    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-    $suffix    = SCRIPT_DEBUG ? '' : '.min';
-    ?>
-    <style<?php echo $type_attr; ?>>
-        <?php echo file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ); ?>
-    </style>
-    <?php
+ * Enqueues the CSS in the embed iframe header.
+ *
+ * @since 6.4.0
+ */
+function wp_enqueue_embed_styles() {
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    if ( ! has_action( 'embed_head', 'print_embed_styles' ) ) {
+        return;
+    }
+    remove_action( 'embed_head', 'print_embed_styles' );
+
+    $suffix = wp_scripts_get_suffix();
+    $handle = 'wp-embed-template';
+    wp_register_style( $handle, false );
+    wp_add_inline_style( $handle, file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ) );
+    wp_enqueue_style( $handle );
 }
 

trunk/src/wp-includes/formatting.php

@@ -5859 +5859 @@
 
 /**
- * Prints the important emoji-related styles.
- *
- * @since 4.2.0
- */
-function print_emoji_styles() {
-    static $printed = false;
-
-    if ( $printed ) {
+ * Enqueues the important emoji-related styles.
+ *
+ * @since 6.4.0
+ */
+function wp_enqueue_emoji_styles() {
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    $action = is_admin() ? 'admin_print_styles' : 'wp_print_styles';
+    if ( ! has_action( $action, 'print_emoji_styles' ) ) {
         return;
     }
-
-    $printed = true;
-
-    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-    ?>
-<style<?php echo $type_attr; ?>>
-img.wp-smiley,
-img.emoji {
-    display: inline !important;
-    border: none !important;
-    box-shadow: none !important;
-    height: 1em !important;
-    width: 1em !important;
-    margin: 0 0.07em !important;
-    vertical-align: -0.1em !important;
-    background: none !important;
-    padding: 0 !important;
-}
-</style>
-    <?php
+    remove_action( $action, 'print_emoji_styles' );
+
+    $emoji_styles = '
+    img.wp-smiley, img.emoji {
+        display: inline !important;
+        border: none !important;
+        box-shadow: none !important;
+        height: 1em !important;
+        width: 1em !important;
+        margin: 0 0.07em !important;
+        vertical-align: -0.1em !important;
+        background: none !important;
+        padding: 0 !important;
+    }';
+    $handle       = 'wp-emoji-styles';
+    wp_register_style( $handle, false );
+    wp_add_inline_style( $handle, $emoji_styles );
+    wp_enqueue_style( $handle );
 }
 

trunk/src/wp-includes/theme-templates.php

@@ -119 +119 @@
         return;
     }
-    ?>
-
-    <?php
-    /**
-     * Print the skip-link styles.
-     */
-    ?>
-    <style id="skip-link-styles">
+
+    $skip_link_styles = '
         .skip-link.screen-reader-text {
             border: 0;
@@ -155 +149 @@
             width: auto;
             z-index: 100000;
-        }
-    </style>
-    <?php
+        }';
+
+    $handle = 'wp-block-template-skip-link';
+
+    /**
+     * Print the skip-link styles.
+     */
+    wp_register_style( $handle, false );
+    wp_add_inline_style( $handle, $skip_link_styles );
+    wp_enqueue_style( $handle );
+
     /**
      * Print the skip-link script.

trunk/tests/phpunit/tests/blocks/editor.php

@@ -18 +18 @@
 
         parent::set_up();
+
+        remove_action( 'wp_print_styles', 'print_emoji_styles' );
 
         $args = array(

trunk/tests/phpunit/tests/oembed/template.php

@@ -11 +11 @@
         global $wp_scripts;
         $wp_scripts = null;
+
+        remove_action( 'wp_print_styles', 'print_emoji_styles' );
     }
 

trunk/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php

@@ -19 +19 @@
     private $test_blocks = array();
 
+    public function set_up() {
+        parent::set_up();
+        remove_action( 'wp_print_styles', 'print_emoji_styles' );
+    }
+
     public function tear_down() {
         // Unregister test blocks.