Script Loader: Enqueue inline style for block template skip link in h…

…ead 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@56932 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/default-filters.php

@@ -716,7 +716,8 @@
 add_filter( 'render_block_context', '_block_template_render_without_post_block_context' );
 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' );
 

src/wp-includes/deprecated.php

@@ -6124,3 +6124,112 @@ function _remove_theme_attribute_in_block_template_content( $template_content )
 
 	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
+}

src/wp-includes/theme-templates.php

@@ -99,16 +99,22 @@ function wp_filter_wp_template_unique_post_slug( $override_slug, $slug, $post_id
 }
 
 /**
- * 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.
 	if ( ! current_theme_supports( 'block-templates' ) ) {
 		return;
@@ -207,7 +213,7 @@ function the_block_template_skip_link() {
 	<?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 );
+	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 );
 }