WordPress.org
Get WordPress

Make WordPress Core

Changeset 56682


Ignore:
Timestamp:
09/25/2023 05:04:41 PM (3 years 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:
10 edited

Legend:

Unmodified
Added
Removed

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

    r56500 r56682  
    6161add_action( 'admin_print_scripts', 'print_head_scripts', 20 );
    6262add_action( 'admin_print_footer_scripts', '_wp_footer_scripts' );
    63 add_action( 'admin_print_styles', 'print_emoji_styles' );
     63add_action( 'admin_enqueue_scripts', 'wp_enqueue_emoji_styles' );
     64add_action( 'admin_print_styles', 'print_emoji_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_emoji_styles().
    6465add_action( 'admin_print_styles', 'print_admin_styles', 20 );
    6566

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

    r56548 r56682  
    12261226
    12271227/**
    1228  * Prints style and scripts for the admin bar.
    1229  *
    1230  * @since 3.1.0
    1231  */
    1232 function wp_admin_bar_header() {
    1233         $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    1234         ?>
    1235 <style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
    1236         <?php
    1237 }
    1238 
    1239 /**
    1240  * Prints default admin bar callback.
    1241  *
    1242  * @since 3.1.0
    1243  */
    1244 function _admin_bar_bump_cb() {
    1245         $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    1246         ?>
    1247 <style<?php echo $type_attr; ?> media="screen">
    1248         html { margin-top: 32px !important; }
    1249         @media screen and ( max-width: 782px ) {
    1250                 html { margin-top: 46px !important; }
    1251         }
    1252 </style>
    1253         <?php
     1228 * Enqueues inline style to hide the admin bar when printing.
     1229 *
     1230 * @since 6.4.0
     1231 */
     1232function wp_enqueue_admin_bar_header_styles() {
     1233        // Back-compat for plugins that disable functionality by unhooking this action.
     1234        $action = is_admin() ? 'admin_head' : 'wp_head';
     1235        if ( ! has_action( $action, 'wp_admin_bar_header' ) ) {
     1236                return;
     1237        }
     1238        remove_action( $action, 'wp_admin_bar_header' );
     1239
     1240        wp_add_inline_style( 'admin-bar', '@media print { #wpadminbar { display:none; } }' );
     1241}
     1242
     1243/**
     1244 * Enqueues inline bump styles to make room for the admin bar.
     1245 *
     1246 * @since 6.4.0
     1247 */
     1248function wp_enqueue_admin_bar_bump_styles() {
     1249        if ( current_theme_supports( 'admin-bar' ) ) {
     1250                $admin_bar_args  = get_theme_support( 'admin-bar' );
     1251                $header_callback = $admin_bar_args[0]['callback'];
     1252        }
     1253
     1254        if ( empty( $header_callback ) ) {
     1255                $header_callback = '_admin_bar_bump_cb';
     1256        }
     1257
     1258        if ( '_admin_bar_bump_cb' !== $header_callback ) {
     1259                return;
     1260        }
     1261
     1262        // Back-compat for plugins that disable functionality by unhooking this action.
     1263        if ( ! has_action( 'wp_head', $header_callback ) ) {
     1264                return;
     1265        }
     1266        remove_action( 'wp_head', $header_callback );
     1267
     1268        $css = '
     1269                @media screen { html { margin-top: 32px !important; } }
     1270                @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } }
     1271        ';
     1272        wp_add_inline_style( 'admin-bar', $css );
    12541273}
    12551274

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

    r56664 r56682  
    358358add_action( 'after_switch_theme', '_wp_menus_changed' );
    359359add_action( 'after_switch_theme', '_wp_sidebars_changed' );
    360 add_action( 'wp_print_styles', 'print_emoji_styles' );
     360add_action( 'wp_enqueue_scripts', 'wp_enqueue_emoji_styles' );
     361add_action( 'wp_print_styles', 'print_emoji_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_emoji_styles().
    361362
    362363if ( isset( $_GET['replytocom'] ) ) {
    … …  
    648649add_action( 'template_redirect', '_wp_admin_bar_init', 0 );
    649650add_action( 'admin_init', '_wp_admin_bar_init' );
     651add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_bump_styles' );
     652add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_header_styles' );
     653add_action( 'admin_enqueue_scripts', 'wp_enqueue_admin_bar_header_styles' );
    650654add_action( 'before_signup_header', '_wp_admin_bar_init' );
    651655add_action( 'activate_header', '_wp_admin_bar_init' );
    … …  
    669673add_action( 'embed_head', 'enqueue_embed_scripts', 1 );
    670674add_action( 'embed_head', 'print_emoji_detection_script' );
    671 add_action( 'embed_head', 'print_embed_styles' );
     675add_action( 'embed_head', 'wp_enqueue_embed_styles', 9 );
     676add_action( 'embed_head', 'print_embed_styles' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_embed_styles().
    672677add_action( 'embed_head', 'wp_print_head_scripts', 20 );
    673678add_action( 'embed_head', 'wp_print_styles', 20 );

  • trunk/src/wp-includes/deprecated.php

    r56664 r56682  
    58735873
    58745874/**
     5875 * Prints the CSS in the embed iframe header.
     5876 *
     5877 * @since 4.4.0
     5878 * @deprecated 6.4.0 Use wp_enqueue_embed_styles() instead.
     5879 */
     5880function print_embed_styles() {
     5881        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_embed_styles' );
     5882
     5883        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     5884        $suffix    = SCRIPT_DEBUG ? '' : '.min';
     5885        ?>
     5886        <style<?php echo $type_attr; ?>>
     5887                <?php echo file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ); ?>
     5888        </style>
     5889        <?php
     5890}
     5891
     5892/**
     5893 * Prints the important emoji-related styles.
     5894 *
     5895 * @since 4.2.0
     5896 * @deprecated 6.4.0 Use wp_enqueue_emoji_styles() instead.
     5897 */
     5898function print_emoji_styles() {
     5899        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_emoji_styles' );
     5900        static $printed = false;
     5901
     5902        if ( $printed ) {
     5903                return;
     5904        }
     5905
     5906        $printed = true;
     5907
     5908        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     5909        ?>
     5910        <style<?php echo $type_attr; ?>>
     5911        img.wp-smiley,
     5912        img.emoji {
     5913                display: inline !important;
     5914                border: none !important;
     5915                box-shadow: none !important;
     5916                height: 1em !important;
     5917                width: 1em !important;
     5918                margin: 0 0.07em !important;
     5919                vertical-align: -0.1em !important;
     5920                background: none !important;
     5921                padding: 0 !important;
     5922        }
     5923        </style>
     5924        <?php
     5925}
     5926
     5927/**
     5928 * Prints style and scripts for the admin bar.
     5929 *
     5930 * @since 3.1.0
     5931 * @deprecated 6.4.0 Use wp_enqueue_admin_bar_header_styles() instead.
     5932 */
     5933function wp_admin_bar_header() {
     5934        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_admin_bar_header_styles' );
     5935        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     5936        ?>
     5937        <style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
     5938        <?php
     5939}
     5940
     5941/**
     5942 * Prints default admin bar callback.
     5943 *
     5944 * @since 3.1.0
     5945 * @deprecated 6.4.0 Use wp_enqueue_admin_bar_bump_styles() instead.
     5946 */
     5947function _admin_bar_bump_cb() {
     5948        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_admin_bar_bump_styles' );
     5949        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     5950        ?>
     5951        <style<?php echo $type_attr; ?> media="screen">
     5952        html { margin-top: 32px !important; }
     5953        @media screen and ( max-width: 782px ) {
     5954          html { margin-top: 46px !important; }
     5955        }
     5956        </style>
     5957        <?php
     5958}
     5959
     5960/**
    58755961 * Runs a remote HTTPS request to detect whether HTTPS supported, and stores potential errors.
    58765962 *

  • trunk/src/wp-includes/embed.php

    r56180 r56682  
    10601060
    10611061/**
    1062  * Prints the CSS in the embed iframe header.
    1063  *
    1064  * @since 4.4.0
    1065  */
    1066 function print_embed_styles() {
    1067         $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    1068         $suffix    = SCRIPT_DEBUG ? '' : '.min';
    1069         ?>
    1070         <style<?php echo $type_attr; ?>>
    1071                 <?php echo file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ); ?>
    1072         </style>
    1073         <?php
     1062 * Enqueues the CSS in the embed iframe header.
     1063 *
     1064 * @since 6.4.0
     1065 */
     1066function wp_enqueue_embed_styles() {
     1067        // Back-compat for plugins that disable functionality by unhooking this action.
     1068        if ( ! has_action( 'embed_head', 'print_embed_styles' ) ) {
     1069                return;
     1070        }
     1071        remove_action( 'embed_head', 'print_embed_styles' );
     1072
     1073        $suffix = wp_scripts_get_suffix();
     1074        $handle = 'wp-embed-template';
     1075        wp_register_style( $handle, false );
     1076        wp_add_inline_style( $handle, file_get_contents( ABSPATH . WPINC . "/css/wp-embed-template$suffix.css" ) );
     1077        wp_enqueue_style( $handle );
    10741078}
    10751079

  • trunk/src/wp-includes/formatting.php

    r56596 r56682  
    58595859
    58605860/**
    5861  * Prints the important emoji-related styles.
    5862  *
    5863  * @since 4.2.0
    5864  */
    5865 function print_emoji_styles() {
    5866         static $printed = false;
    5867 
    5868         if ( $printed ) {
     5861 * Enqueues the important emoji-related styles.
     5862 *
     5863 * @since 6.4.0
     5864 */
     5865function wp_enqueue_emoji_styles() {
     5866        // Back-compat for plugins that disable functionality by unhooking this action.
     5867        $action = is_admin() ? 'admin_print_styles' : 'wp_print_styles';
     5868        if ( ! has_action( $action, 'print_emoji_styles' ) ) {
    58695869                return;
    58705870        }
    5871 
    5872         $printed = true;
    5873 
    5874         $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    5875         ?>
    5876 <style<?php echo $type_attr; ?>>
    5877 img.wp-smiley,
    5878 img.emoji {
    5879         display: inline !important;
    5880         border: none !important;
    5881         box-shadow: none !important;
    5882         height: 1em !important;
    5883         width: 1em !important;
    5884         margin: 0 0.07em !important;
    5885         vertical-align: -0.1em !important;
    5886         background: none !important;
    5887         padding: 0 !important;
    5888 }
    5889 </style>
    5890         <?php
     5871        remove_action( $action, 'print_emoji_styles' );
     5872
     5873        $emoji_styles = '
     5874        img.wp-smiley, img.emoji {
     5875                display: inline !important;
     5876                border: none !important;
     5877                box-shadow: none !important;
     5878                height: 1em !important;
     5879                width: 1em !important;
     5880                margin: 0 0.07em !important;
     5881                vertical-align: -0.1em !important;
     5882                background: none !important;
     5883                padding: 0 !important;
     5884        }';
     5885        $handle       = 'wp-emoji-styles';
     5886        wp_register_style( $handle, false );
     5887        wp_add_inline_style( $handle, $emoji_styles );
     5888        wp_enqueue_style( $handle );
    58915889}
    58925890

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

    r56549 r56682  
    119119                return;
    120120        }
    121         ?>
    122 
    123         <?php
    124         /**
    125          * Print the skip-link styles.
    126          */
    127         ?>
    128         <style id="skip-link-styles">
     121
     122        $skip_link_styles = '
    129123                .skip-link.screen-reader-text {
    130124                        border: 0;
    … …  
    155149                        width: auto;
    156150                        z-index: 100000;
    157                 }
    158         </style>
    159         <?php
     151                }';
     152
     153        $handle = 'wp-block-template-skip-link';
     154
     155        /**
     156         * Print the skip-link styles.
     157         */
     158        wp_register_style( $handle, false );
     159        wp_add_inline_style( $handle, $skip_link_styles );
     160        wp_enqueue_style( $handle );
     161
    160162        /**
    161163         * Print the skip-link script.

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

    r56680 r56682  
    1818
    1919                parent::set_up();
     20
     21                remove_action( 'wp_print_styles', 'print_emoji_styles' );
    2022
    2123                $args = array(

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

    r56383 r56682  
    1111                global $wp_scripts;
    1212                $wp_scripts = null;
     13
     14                remove_action( 'wp_print_styles', 'print_emoji_styles' );
    1315        }
    1416

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

    r56254 r56682  
    1919        private $test_blocks = array();
    2020
     21        public function set_up() {
     22                parent::set_up();
     23                remove_action( 'wp_print_styles', 'print_emoji_styles' );
     24        }
     25
    2126        public function tear_down() {
    2227                // Unregister test blocks.
Note: See TracChangeset for help on using the changeset viewer.