Add skip link to block templates (#30336)

* Add skip-link to FSE themes

* Add check for null selectors

* Allow opt-in to auto-css for the skip-link

* Escape things where needed

* Add inline comment

* This MUST NOT be escaped

* Use wp_json_encode

* Don't use an anonymous function

* Allow multiple skip-links

* Update lib/class-wp-theme-json.php

Co-authored-by: Timothy Jacobs <timothy@ironbounddesigns.com>

* fix should_add_skip_link_styles check after the refactor

* make css opt-out

* classList.add can add multiple classes at once

* Add docs

* fix merge conflicts

* attempt to simplify previous implementation

* more merge-conflicts

* No docs tweaks needed

* fix link label

* This file is irrelevant to this PR

* add missing textdomain

* Update list of elements to check for

* Use gutenberg_supports_block_templates()

* Revert "Update list of elements to check for"

This reverts commit a6947c4.

Co-authored-by: Timothy Jacobs <timothy@ironbounddesigns.com>

lib/full-site-editing/templates.php

@@ -192,3 +192,94 @@ function set_unique_slug_on_create_template( $post_id ) {
 	}
 }
 add_action( 'save_post_wp_template', 'set_unique_slug_on_create_template' );
+
+/**
+ * Print the skip-link script & styles.
+ *
+ * @return void
+ */
+function gutenberg_the_skip_link() {
+
+	// Early exit if not an FSE theme.
+	if ( ! gutenberg_supports_block_templates() ) {
+		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' ),
+			parentEl,
+			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.
+		parentEl = document.querySelector( '.wp-site-blocks' ) || document.body,
+
+		// 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 esc_html_e( 'Skip to content', 'gutenberg' ); ?>';
+
+		// Inject the skip link.
+		parentEl.insertAdjacentElement( 'afterbegin', skipLink );
+	}() );
+	</script>
+	<?php
+}
+add_action( 'wp_footer', 'gutenberg_the_skip_link' );