Add rel attribute for Social Icons #45469
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
georgeh
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
|
|
|
Size Change: +510 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
dmsnell
approved these changes
Nov 1, 2022
| } else if ( $rel !== '' ) { | ||
| $w->set_attribute('rel', esc_attr( $rel) ); | ||
| } | ||
| return $w; |
There was a problem hiding this comment.
It seemed like a clearer solution than a bunch of string manipulation and worked like a charm!
There was a problem hiding this comment.
Nit: While I also like how clean the "tag processor" looks here, but I don't think it is needed. We're building whole block output in the render callback; in cases like this, I would prefer PHP as a templating engine.
There was a problem hiding this comment.
@Mamaduka I'm confused on what you are saying here. I guess I can see that we're constructing the link HTML entirely, we're not modifying content that was given to us, in which case we could change this whole thing to something like…
$anchor = $open_in_new_tab
? '<a href="' . esc_url( $url ) . '" rel="' . esc_attr( $rel ) . ' noopener nofollow" target="_blank" class="wp-block-social-link">'
: '<a href="' . esc_url( $url ) . '" class="wp-block-social-link">`;
…
$link .= $anchor;that makes sense, though it does highlight a use-case for the tag processor that maybe wasn't the primary goal when creating it, which is making tag text construction more obvious. personally I often find these template pieces noisy and hard to follow, especially since they tend to make for very long lines with intertwining PHP and strings.
$anchor = new WP_HTML_Tag_Processor( "<a>" );
$anchor->next_tag( 'a' );
$anchor->set_attribute( 'href', $url );
$anchor->set_attribute( 'class', 'wp-block-social-link-anchor' );
if ( $open_in_new_tab ) {
$anchor->set_attribute( 'rel', "{$rel} no opener nofollow" );
$anchor->set_attribute( 'target', '_blank' );
} else {
$anchor->set_attribute( 'rel', $rel );
}
$link .= $anchor;now I think maybe there could be a good helper for this 🤔
static function make_tag_opener( $tag_name, $attributes = [] ) {
$w = new WP_HTML_Tag_Walker( "<{$tag_name}>" );
$w->next_tag( $tag_name );
foreach ( $attributes as $name => $value ) {
$w->set_attribute( $name, $value );
}
return $w;
} this code here would then turn into something even less noisy, and at the same time, properly encoded.
$anchor = WP_HTML_Tag_Processor::make_tag_opener( 'a', array(
'href' => $url,
'class' => 'wp-block-social-anchor',
'rel' => $rel
) );
if ( $open_in_new_tab ) {
$anchor->set_attribute( 'rel', "{$rel} no opener nofollow" );
$anchor->set_attribute( 'target', '_blank' );
}
…
$link .= $anchor;none of this is to contradict your input; just taking the opportunity to muse on how this could evolve. this is a very DOM-like interface with its benefits as well as its drawbacks.
cc: @adamziel
There was a problem hiding this comment.
@dmsnell, sorry about the confusion.
I guess I can see that we're constructing the link HTML entirely, we're not modifying content that was given to us, in which case we could change this whole thing to something like
This is what I was trying to formulate but failed 😅
Mamaduka
reviewed
Nov 2, 2022
|
@dmsnell, the 'Link rel' will make this consistent with other blocks. There's also a suggestion to add a description to the link relationship settings. See #20208 (comment). |
Mamaduka
added
[Block] Social
9 tasks
14 tasks
|
When adding "me" or any other text in the rel field, it does not remove "noopener nofollow". So the rel attribute now looks like this: rel="me noopener nofollow". Wouldn't I want Google to follow the link if I am adding "me"?
|
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.
What?
Makes
relattribute editable on social icons, closes #38630Why?
Some social networks like IndieWeb and Mastodon use the pattern of looking for a link back with
rel="me"to establish that a user controls a URL. Adding the option for a customrelattribute allows people to claim their WordPress sites using Gutenberg.How?
This mimics the implementation of the
relattribute on the Button block, by exposing the attribute as an advanced option in the block inspector.Testing Instructions
relrelattribute on the<a>elementScreenshots or screencast