Changeset 56932 for trunk/src/wp-includes/deprecated.php

Timestamp:

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

File:

• trunk/src/wp-includes/deprecated.php (modified) (1 diff)

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
+}