Insert block template skip link via HTML API, minify CSS, remove JS. #10676
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -301,7 +301,86 @@ function get_the_block_template_html() { | |
|
|
||
| // Wrap block template in .wp-site-blocks to allow for specific descendant styles | ||
| // (e.g. `.wp-site-blocks > *`). | ||
| $template_html = '<div class="wp-site-blocks">' . $content . '</div>'; | ||
|
|
||
| return _block_template_skip_link_markup( $template_html ); | ||
| } | ||
|
|
||
| /** | ||
| * Inserts the block template skip link into the template HTML. | ||
|
rutviksavsani marked this conversation as resolved.
Outdated
|
||
| * | ||
| * Uses the HTML API to ensure that the main content element has an ID and to | ||
| * inject the skip-link anchor before the block template wrapper. | ||
|
Member
There was a problem hiding this comment. as much as I love this, I’m not sure we need to describe in the docblock how the function operates. we can probably clarify the goal, which is well-stated here, and give an illustrative example. /**
* ...
*
* When a `MAIN` element exists in the template, this function will ensure
* that the element contains a `id` attribute and will insert a link to
* that main element at the top of the first `DIV.wp-site-blocks` match.
*
* Example:
*
* // Input.
* <main>
* <nav>...</nav>
* <div class="wp-site-blocks">
* <h2>...
*
* // Output.
* <main id="wp--skip-link--target">
* <nav>...</nav>
* <div class="wp-site-blocks">
* <a href="#wp--skip-link--target" id="wp-skip-link" class="...">
* <h2>...
*
* When the `MAIN` element already contains a non-empty `id` value it will be
* used instead of the default skip-link id. |
||
| * | ||
| * @access private | ||
| * @since 7.0.0 | ||
| * | ||
| * @param string $template_html Block template markup. | ||
| * @return string Modified markup with skip link when applicable. | ||
| */ | ||
| function _block_template_skip_link_markup( string $template_html ): string { | ||
|
rutviksavsani marked this conversation as resolved.
Outdated
|
||
|
|
||
| // Back-compat for plugins that disable functionality by unhooking this action. | ||
| if ( ! has_action( 'wp_footer', 'the_block_template_skip_link' ) ) { | ||
| return $template_html; | ||
| } | ||
|
Member
There was a problem hiding this comment. It seems like we could move this check up into |
||
|
|
||
| // Ensure a skip-link target exists and has an ID. | ||
| $processor = new WP_HTML_Tag_Processor( $template_html ); | ||
| $skip_link_target_id = null; | ||
|
|
||
| // Get the first <main> element. | ||
| while ( $processor->next_tag() ) { | ||
| if ( 'MAIN' !== $processor->get_tag() ) { | ||
| continue; | ||
| } | ||
|
|
||
| $skip_link_target_id = $processor->get_attribute( 'id' ); | ||
| if ( ! is_string( $skip_link_target_id ) || '' === trim( $skip_link_target_id ) ) { | ||
| $skip_link_target_id = 'wp--skip-link--target'; | ||
| $processor->set_attribute( 'id', $skip_link_target_id ); | ||
| } | ||
|
|
||
| // Only consider the first <main> element. | ||
| break; | ||
| } | ||
|
Member
There was a problem hiding this comment. if we’re going to default to a given value, we could set it first and only change if we find one already exists. // Only add skip-links to templates with a MAIN element.
if ( ! $processor->next_tag( 'MAIN' ) ) {
return $template_html;
}
$target_id = $processor->get_attribute( 'id' );
if ( ! is_string( $target_id ) && '' === $target_id ) {
$target_id = 'wp--skip-link--target'
$processor->set_attribute( 'id', $target_id );
}
...Note too that I did not use we can see differentiation between <p id="me">one</p>
<p id=" me">two</p>
<p id="me ">three</p>
<p id=" me ">four</p>
<style>
#me {
border: 1px solid blue;
}
#\20me {
border: 1px solid green;
}
#me\20 {
border: 1px solid red;
}
#\20me\20 {
border: 1px solid orange;
}
</style>In other words, the |
||
|
|
||
| // Early exit if a skip-link target can't be located. | ||
| if ( ! $skip_link_target_id ) { | ||
| return $template_html; | ||
| } | ||
|
|
||
| // Apply any updates from setting the main ID. | ||
| $template_html = $processor->get_updated_html(); | ||
|
|
||
| // Anonymous subclass of WP_HTML_Tag_Processor which exposes underlying bookmark spans | ||
| // so that text can be inserted before the current token. | ||
| $inserter = new class( $template_html ) extends WP_HTML_Tag_Processor { | ||
| /** | ||
| * Inserts text before the current token. | ||
| * | ||
| * @param string $text Text to insert. | ||
| */ | ||
| public function insert_before( string $text ) { | ||
| $this->set_bookmark( 'here' ); | ||
| $this->lexical_updates[] = new WP_HTML_Text_Replacement( $this->bookmarks['here']->start, 0, $text ); | ||
| } | ||
| }; | ||
|
dmsnell marked this conversation as resolved.
|
||
|
|
||
| while ( $inserter->next_tag() ) { | ||
| if ( 'DIV' === $inserter->get_tag() && $inserter->has_class( 'wp-site-blocks' ) ) { | ||
| $skip_link = sprintf( | ||
| '<a class="skip-link screen-reader-text" id="wp-skip-link" href="#%s">%s</a>', | ||
| esc_attr( $skip_link_target_id ), | ||
|
rutviksavsani marked this conversation as resolved.
Outdated
westonruter marked this conversation as resolved.
Outdated
|
||
| /* translators: Hidden accessibility text. */ | ||
| esc_html__( 'Skip to content' ) | ||
| ); | ||
| $inserter->insert_before( $skip_link ); | ||
| break; | ||
| } | ||
| } | ||
|
dmsnell marked this conversation as resolved.
|
||
|
|
||
| return $inserter->get_updated_html(); | ||
| } | ||
|
|
||
| /** | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.