Make WordPress Core

Changeset 56932


Ignore:
Timestamp:
10/13/2023 05:19:31 PM (14 months ago)
Author:
westonruter
Message:

Script Loader: Enqueue inline style for block template skip link in head instead of footer.

  • Introduce wp_enqueue_block_template_skip_link() to replace the_block_template_skip_link(). Add to wp_enqueue_scripts action instead of wp_footer.
  • Keep inline script for skip link in footer.
  • Restore original the_block_template_skip_link() from 6.3 and move to deprecated.php.
  • Preserve back-compat for unhooking skip-link by removing the_block_template_skip_link from wp_footer action.

Follow-up to [56682] and [56687].

Props sabernhardt, plugindevs, westonruter, spacedmonkey.
Fixes #59505.
See #58775.
See #58664.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/default-filters.php

    r56845 r56932  
    717717add_filter( 'pre_wp_unique_post_slug', 'wp_filter_wp_template_unique_post_slug', 10, 5 );
    718718add_action( 'save_post_wp_template_part', 'wp_set_unique_slug_on_create_template_part' );
    719 add_action( 'wp_footer', 'the_block_template_skip_link' );
     719add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_template_skip_link' );
     720add_action( 'wp_footer', 'the_block_template_skip_link' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_block_template_skip_link().
    720721add_action( 'setup_theme', 'wp_enable_block_templates' );
    721722add_action( 'wp_loaded', '_add_template_loader_filters' );
  • trunk/src/wp-includes/deprecated.php

    r56751 r56932  
    61256125    return $new_content;
    61266126}
     6127
     6128/**
     6129 * Prints the skip-link script & styles.
     6130 *
     6131 * @since 5.8.0
     6132 * @access private
     6133 * @deprecated 6.4.0 Use wp_enqueue_block_template_skip_link() instead.
     6134 *
     6135 * @global string $_wp_current_template_content
     6136 */
     6137function the_block_template_skip_link() {
     6138    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_block_template_skip_link()' );
     6139
     6140    global $_wp_current_template_content;
     6141
     6142    // Early exit if not a block theme.
     6143    if ( ! current_theme_supports( 'block-templates' ) ) {
     6144        return;
     6145    }
     6146
     6147    // Early exit if not a block template.
     6148    if ( ! $_wp_current_template_content ) {
     6149        return;
     6150    }
     6151    ?>
     6152
     6153    <?php
     6154    /**
     6155     * Print the skip-link styles.
     6156     */
     6157    ?>
     6158    <style id="skip-link-styles">
     6159        .skip-link.screen-reader-text {
     6160            border: 0;
     6161            clip: rect(1px,1px,1px,1px);
     6162            clip-path: inset(50%);
     6163            height: 1px;
     6164            margin: -1px;
     6165            overflow: hidden;
     6166            padding: 0;
     6167            position: absolute !important;
     6168            width: 1px;
     6169            word-wrap: normal !important;
     6170        }
     6171
     6172        .skip-link.screen-reader-text:focus {
     6173            background-color: #eee;
     6174            clip: auto !important;
     6175            clip-path: none;
     6176            color: #444;
     6177            display: block;
     6178            font-size: 1em;
     6179            height: auto;
     6180            left: 5px;
     6181            line-height: normal;
     6182            padding: 15px 23px 14px;
     6183            text-decoration: none;
     6184            top: 5px;
     6185            width: auto;
     6186            z-index: 100000;
     6187        }
     6188    </style>
     6189    <?php
     6190    /**
     6191     * Print the skip-link script.
     6192     */
     6193    ?>
     6194    <script>
     6195    ( function() {
     6196        var skipLinkTarget = document.querySelector( 'main' ),
     6197            sibling,
     6198            skipLinkTargetID,
     6199            skipLink;
     6200
     6201        // Early exit if a skip-link target can't be located.
     6202        if ( ! skipLinkTarget ) {
     6203            return;
     6204        }
     6205
     6206        /*
     6207         * Get the site wrapper.
     6208         * The skip-link will be injected in the beginning of it.
     6209         */
     6210        sibling = document.querySelector( '.wp-site-blocks' );
     6211
     6212        // Early exit if the root element was not found.
     6213        if ( ! sibling ) {
     6214            return;
     6215        }
     6216
     6217        // Get the skip-link target's ID, and generate one if it doesn't exist.
     6218        skipLinkTargetID = skipLinkTarget.id;
     6219        if ( ! skipLinkTargetID ) {
     6220            skipLinkTargetID = 'wp--skip-link--target';
     6221            skipLinkTarget.id = skipLinkTargetID;
     6222        }
     6223
     6224        // Create the skip link.
     6225        skipLink = document.createElement( 'a' );
     6226        skipLink.classList.add( 'skip-link', 'screen-reader-text' );
     6227        skipLink.href = '#' + skipLinkTargetID;
     6228        skipLink.innerHTML = '<?php /* translators: Hidden accessibility text. */ esc_html_e( 'Skip to content' ); ?>';
     6229
     6230        // Inject the skip link.
     6231        sibling.parentElement.insertBefore( skipLink, sibling );
     6232    }() );
     6233    </script>
     6234    <?php
     6235}
  • trunk/src/wp-includes/theme-templates.php

    r56748 r56932  
    100100
    101101/**
    102  * Prints the skip-link script & styles.
     102 * Enqueues the skip-link script & styles.
    103103 *
    104104 * @access private
    105  * @since 5.8.0
     105 * @since 6.4.0
    106106 *
    107107 * @global string $_wp_current_template_content
    108108 */
    109 function the_block_template_skip_link() {
     109function wp_enqueue_block_template_skip_link() {
    110110    global $_wp_current_template_content;
     111
     112    // Back-compat for plugins that disable functionality by unhooking this action.
     113    if ( ! has_action( 'wp_footer', 'the_block_template_skip_link' ) ) {
     114        return;
     115    }
     116    remove_action( 'wp_footer', 'the_block_template_skip_link' );
    111117
    112118    // Early exit if not a block theme.
     
    208214    $skip_link_script = wp_remove_surrounding_empty_script_tags( ob_get_clean() );
    209215    $script_handle    = 'wp-block-template-skip-link';
    210     wp_register_script( $script_handle, false );
     216    wp_register_script( $script_handle, false, array(), false, array( 'in_footer' => true ) );
    211217    wp_add_inline_script( $script_handle, $skip_link_script );
    212218    wp_enqueue_script( $script_handle );
Note: See TracChangeset for help on using the changeset viewer.