Changeset 56932

Timestamp:

10/13/2023 05:19:31 PM (12 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:

• default-filters.php (modified) (1 diff)
• deprecated.php (modified) (1 diff)
• theme-templates.php (modified) (2 diffs)

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

@@ -717 +717 @@
 add_filter( 'pre_wp_unique_post_slug', 'wp_filter_wp_template_unique_post_slug', 10, 5 );
 add_action( 'save_post_wp_template_part', 'wp_set_unique_slug_on_create_template_part' );
-add_action( 'wp_footer', 'the_block_template_skip_link' );
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_template_skip_link' );
+add_action( 'wp_footer', 'the_block_template_skip_link' ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_block_template_skip_link().
 add_action( 'setup_theme', 'wp_enable_block_templates' );
 add_action( 'wp_loaded', '_add_template_loader_filters' );

trunk/src/wp-includes/deprecated.php

@@ -6125 +6125 @@
     return $new_content;
 }
+
+/**
+ * Prints the skip-link script & styles.
+ *
+ * @since 5.8.0
+ * @access private
+ * @deprecated 6.4.0 Use wp_enqueue_block_template_skip_link() instead.
+ *
+ * @global string $_wp_current_template_content
+ */
+function the_block_template_skip_link() {
+    _deprecated_function( __FUNCTION__, '6.4.0', 'wp_enqueue_block_template_skip_link()' );
+
+    global $_wp_current_template_content;
+
+    // Early exit if not a block theme.
+    if ( ! current_theme_supports( 'block-templates' ) ) {
+        return;
+    }
+
+    // Early exit if not a block template.
+    if ( ! $_wp_current_template_content ) {
+        return;
+    }
+    ?>
+
+    <?php
+    /**
+     * Print the skip-link styles.
+     */
+    ?>
+    <style id="skip-link-styles">
+        .skip-link.screen-reader-text {
+            border: 0;
+            clip: rect(1px,1px,1px,1px);
+            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: auto !important;
+            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;
+        }
+    </style>
+    <?php
+    /**
+     * Print the skip-link script.
+     */
+    ?>
+    <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.href = '#' + skipLinkTargetID;
+        skipLink.innerHTML = '<?php /* translators: Hidden accessibility text. */ esc_html_e( 'Skip to content' ); ?>';
+
+        // Inject the skip link.
+        sibling.parentElement.insertBefore( skipLink, sibling );
+    }() );
+    </script>
+    <?php
+}

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

@@ -100 +100 @@
 
 /**
- * Prints the skip-link script & styles.
+ * Enqueues the skip-link script & styles.
  *
  * @access private
- * @since 5.8.0
+ * @since 6.4.0
  *
  * @global string $_wp_current_template_content
  */
-function the_block_template_skip_link() {
+function wp_enqueue_block_template_skip_link() {
     global $_wp_current_template_content;
+
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    if ( ! has_action( 'wp_footer', 'the_block_template_skip_link' ) ) {
+        return;
+    }
+    remove_action( 'wp_footer', 'the_block_template_skip_link' );
 
     // Early exit if not a block theme.
@@ -208 +214 @@
     $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 );
+    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 );