Site Editor: Add skip link to block templates #30336
Merged
Conversation
This file contains 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
Co-authored-by: Timothy Jacobs <[email protected]>
|
Size Change: +1.18 kB (0%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
|
cc @mcsf |
Thanks, I really like this! Starting small, with no config, and erring on the side of semantics with As discussed in 1:1 with Ari, the implementation itself — the footer-based JS that queries the DOM — can always be changed. I am personally fine with seeing how far JS alone takes us, but I would understand if other voices argued for a non-JS solution. As was also clear in our conversation, once we start digging a bit, it's clear that there are a lot of questions related to skip links. :) Questions around how Gutenberg can help guide site owners towards correctness, with better page semantics, better front-end a11y experiences, etc. Blocks are immensely useful for their semantic value too, which raises the next question: in this case, is it more valuable to look for any As a first step, looking for |
|
Thank you for the feedback @mcsf 👍
I agree, the JS-based implementation here can always be changed, but we need to start somewhere and this is as simple and safe as it can get at this stage. I experimented a bit with a non-JS solution today and this is some code that works: /**
* Get the skip-link target, and set it to the $_skip_link_target global.
*
* @param string $block_content The block content about to be appended.
* @param array $block The full block, including name and attributes.
*
* @return string
*/
function gutenberg_get_skip_link_target( $block_content, $block ) {
global $_skip_link_target;
if (
! $_skip_link_target && // Only run if the skip-link target has not already been locatred.
'core/group' === $block['blockName'] && // Only run on group blocks.
isset( $block['attrs'] ) && // Make sure "attrs" is set.
! empty( $block['attrs']['tagName'] ) && // Make sure we have a "tagName".
'main' === $block['attrs']['tagName'] // Only run iif "tagName" is "main".
) {
// Check if an anchor is defined.
preg_match( '/id="[^"]+"/', $block['innerHTML'], $matches );
if ( empty( $matches ) ) { // An anchor was not found, add an ID to $block_content
$count = 1; // Only replace the 1st occurence of "<main ".
$block_content = str_replace( '<main ', '<main id="wp--skip-link--target" ', $block_content, $count );
$_skip_link_target = 'wp--skip-link--target';
} else { // An anchor was located, use it.
$_skip_link_target = trim( str_replace( array( 'id="', "id='", '"', "'" ), '', $matches[0] ) );
}
}
return $block_content;
}
add_filter( 'render_block', 'gutenberg_get_skip_link_target', 10, 2 );
/**
* Print the skip-link.
*
* @return void
*/
function gutenberg_the_skip_link() {
global $_skip_link_target;
// Early exit if a skip-link target was not defined.
if ( ! $_skip_link_target ) {
return;
}
?>
<a class="skip-link screen-reader-text" href="#<?php echo esc_attr( $_skip_link_target ); ?>">
<?php esc_html_e( 'Skip to content', 'gutenberg' ); ?>
</a>
<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
}
add_action( 'wp_body_open', 'gutenberg_the_skip_link' );However, between the 2, the JS-based implementation feels a bit more natural to me 🤔
Agreed. The semantic value of blocks is great, and we should use them like that. However, since this is not something that affects the editor and it's only for the frontend of sites, it's something that we can change pretty easily. That's the beauty of it, it's isolated and can be tweaked and improved as we go. 👍
YES!! That would be great! But as stated earlier, we need to start somewhere... This PR is a basic implementation so that properly-structured FSE themes can have a skip-link. We can iterate and change the implementation anytime |
aristath
changed the title
mcsf
reviewed
Apr 21, 2021
This reverts commit a6947c4.
mcsf
approved these changes
Apr 21, 2021
priethor
changed the title
Closed
7 tasks
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This is a simplified version of #28946 without the theme.json tweaks.
How has this been tested?
Tested in an FSE theme and verified that when there is a
<main>element, a skip-link gets added, it is properly styled, and points to the main element.Checklist:
*.native.jsfiles for terms that need renaming or removal).