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

Timestamp:

10/13/2023 05:19:31 PM (3 years 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
+}