Make WordPress Core

Changeset 56682


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