Changeset 61469 for trunk/src/wp-includes/theme-templates.php

Timestamp:

01/11/2026 06:34:57 AM (2 months ago)

Author:

westonruter

Message:

Themes: Use WP_HTML_Tag_Processor to insert the block template skip link instead of JavaScript.

• The skip link now works when JavaScript is turned off.
• By removing the script, the amount of JavaScript sent to the client is reduced for a very marginal performance improvement.
• A new wp-block-template-skip-link stylesheet is registered, with minification and path data for inlining.
• The CSS for the skip link now has an RTL version generated, although it is not yet served when the styles are inlined. See #61625.
• The wp_enqueue_block_template_skip_link() function now exclusively enqueues the stylesheet since the script is removed.
• For backwards-compatibility, the skip link will continue to be omitted if the_block_template_skip_link() is unhooked from the wp_footer action or wp_enqueue_block_template_skip_link() is unhooked from wp_enqueue_scripts.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10676

Follow-up to [56932], [51003].

Props rutviksavsani, westonruter, dmsnell, whiteshadow01, Slieptsov.
See #59505, #53176.
Fixes #64361.

File:

• trunk/src/wp-includes/theme-templates.php (modified) (2 diffs)

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

@@ -100 +100 @@
 
 /**
- * Enqueues the skip-link script & styles.
+ * Enqueues the skip-link styles.
  *
  * @access private
  * @since 6.4.0
+ * @since 7.0.0 A script is no longer printed in favor of being added via {@see _block_template_add_skip_link()}.
  *
  * @global string $_wp_current_template_content
@@ -126 +127 @@
     }
 
-    $skip_link_styles = '
-        .skip-link.screen-reader-text {
-            border: 0;
-            clip-path: inset(50%);
-            height: 1px;
-            margin: -1px;
-            overflow: hidden;
-            padding: 0;
-            position: absolute !important;
-            width: 1px;
-            word-wrap: normal !important;
-        }
-
-        .skip-link.screen-reader-text:focus {
-            background-color: #eee;
-            clip-path: none;
-            color: #444;
-            display: block;
-            font-size: 1em;
-            height: auto;
-            left: 5px;
-            line-height: normal;
-            padding: 15px 23px 14px;
-            text-decoration: none;
-            top: 5px;
-            width: auto;
-            z-index: 100000;
-        }';
-
-    $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 );
-
-    /**
-     * Enqueue the skip-link script.
-     */
-    ob_start();
-    ?>
-    <script>
-    ( function() {
-        var skipLinkTarget = document.querySelector( 'main' ),
-            sibling,
-            skipLinkTargetID,
-            skipLink;
-
-        // Early exit if a skip-link target can't be located.
-        if ( ! skipLinkTarget ) {
-            return;
-        }
-
-        /*
-         * Get the site wrapper.
-         * The skip-link will be injected in the beginning of it.
-         */
-        sibling = document.querySelector( '.wp-site-blocks' );
-
-        // Early exit if the root element was not found.
-        if ( ! sibling ) {
-            return;
-        }
-
-        // Get the skip-link target's ID, and generate one if it doesn't exist.
-        skipLinkTargetID = skipLinkTarget.id;
-        if ( ! skipLinkTargetID ) {
-            skipLinkTargetID = 'wp--skip-link--target';
-            skipLinkTarget.id = skipLinkTargetID;
-        }
-
-        // Create the skip link.
-        skipLink = document.createElement( 'a' );
-        skipLink.classList.add( 'skip-link', 'screen-reader-text' );
-        skipLink.id = 'wp-skip-link';
-        skipLink.href = '#' + skipLinkTargetID;
-        skipLink.innerText = '<?php /* translators: Hidden accessibility text. Do not use HTML entities (&nbsp;, etc.). */ esc_html_e( 'Skip to content' ); ?>';
-
-        // Inject the skip link.
-        sibling.parentElement.insertBefore( skipLink, sibling );
-    }() );
-    </script>
-    <?php
-    $skip_link_script = wp_remove_surrounding_empty_script_tags( ob_get_clean() );
-    $script_handle    = 'wp-block-template-skip-link';
-    wp_register_script( $script_handle, false, array(), false, array( 'in_footer' => true ) );
-    wp_add_inline_script( $script_handle, $skip_link_script );
-    wp_enqueue_script( $script_handle );
+    wp_enqueue_style( 'wp-block-template-skip-link' );
 }