Fix HTML5 validation error for skip-link css on footer

[plugindevs]

Fix the following HTML5 validation error by moving skip-link CSS to head from the body:

Error: Element ​style not allowed as child of element ​body in this context. (Suppressing further errors from this subtree.)

[plugindevs]

Screenshot of the Error

Fix the following HTML5 validation error by moving skip-link CSS to head from the body:

Error: Element ​style not allowed as child of element ​body in this context. (Suppressing further errors from this subtree.)

Trac ticket: https://core.trac.wordpress.org/ticket/59505

[sabernhardt]

moving skip link CSS/JS function to the wp_enqueue_scripts action

[sabernhardt]

Hi and thanks for the report!

If the function name should change, the old function would need to be moved to deprecated.php.

However, I think moving the CSS might be simpler now that the script is registered and enqueued instead of printing it all directly into the footer.

If my proof-of-concept patch is good, it probably should also have some documentation updates and backward compatibility code for anyone who removed the_block_template_skip_link from the wp_footer action. That includes the ​AMP plugin, ​WeCodeArt and emulsion themes, plus some others in a ​GitHub code search.

Trac ticket: https://core.trac.wordpress.org/ticket/59505

[westonruter]

Note that there are other instances where a style can appear in the body. Also, this is what print_late_styles() is for. See also ​https://github.com/WordPress/gutenberg/issues/38917

That being said, it makes sense to me that this should be moved from wp_footer to wp_enqueue_scripts, especially after #58775 and #58664.

@sabernhardt I've put your patch into a new PR and added the back-compat code: ​https://github.com/WordPress/wordpress-develop/pull/5472

cc @spacedmonkey

[westonruter]

With the back-compat code, a plugin can still do the following to remove the skip link:

<?php
remove_action( 'wp_footer', 'the_block_template_skip_link' );

[spacedmonkey]

This PR looks good. I like that is fixes an outstanding issue on gutenberg as well. Assigning to @westonruter to commit.

[westonruter]

In 56932:

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.

Committed in r56932.

[westonruter]

In 61469:

Themes: Use WP_HTML_Tag_Processor to insert the block template skip link instead of JavaScript.

• The skip link now works when JavaScript is turned off.
• By removing the script, the amount of JavaScript sent to the client is reduced for a very marginal performance improvement.
• A new wp-block-template-skip-link stylesheet is registered, with minification and path data for inlining.
• The CSS for the skip link now has an RTL version generated, although it is not yet served when the styles are inlined. See #61625.
• The wp_enqueue_block_template_skip_link() function now exclusively enqueues the stylesheet since the script is removed.
• For backwards-compatibility, the skip link will continue to be omitted if the_block_template_skip_link() is unhooked from the wp_footer action or wp_enqueue_block_template_skip_link() is unhooked from wp_enqueue_scripts.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10676

Follow-up to [56932], [51003].

Props rutviksavsani, westonruter, dmsnell, whiteshadow01, Slieptsov.
See #59505, #53176.
Fixes #64361.