-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Social Link: group all variations under one block type #19887
Changes from all commits
febaaff
c5a0da2
38eacaa
52071b0
ba9070f
586da71
74c7987
d1b6347
07a9e36
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"name": "core/social-link", | ||
"category": "widgets", | ||
"attributes": { | ||
"url": { | ||
"type": "string" | ||
}, | ||
"service": { | ||
"type": "string" | ||
}, | ||
"label": { | ||
"type": "number" | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,17 +13,17 @@ | |
* @return string Rendered HTML of the referenced block. | ||
*/ | ||
function render_core_social_link( $attributes ) { | ||
$site = ( isset( $attributes['site'] ) ) ? $attributes['site'] : 'Icon'; | ||
$url = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false; | ||
$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : __( 'Link to ' ) . core_social_link_get_name( $site ); | ||
$service = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon'; | ||
$url = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false; | ||
$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : __( 'Link to ' ) . core_social_link_get_name( $service ); | ||
|
||
// Don't render a link if there is no URL set. | ||
if ( ! $url ) { | ||
return ''; | ||
} | ||
|
||
$icon = core_social_link_get_icon( $site ); | ||
return '<li class="wp-social-link wp-social-link-' . $site . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>'; | ||
$icon = core_social_link_get_icon( $service ); | ||
return '<li class="wp-social-link wp-social-link-' . $service . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>'; | ||
} | ||
|
||
/** | ||
|
@@ -72,26 +72,30 @@ function register_block_core_social_link() { | |
'youtube', | ||
); | ||
|
||
$path = __DIR__ . '/social-link/block.json'; | ||
$metadata = json_decode( file_get_contents( $path ), true ); | ||
|
||
foreach ( $sites as $site ) { | ||
register_block_type( | ||
'core/social-link-' . $site, | ||
array( | ||
'attributes' => array( | ||
'url' => array( | ||
'type' => 'string', | ||
), | ||
'site' => array( | ||
'type' => 'string', | ||
'default' => $site, | ||
), | ||
'label' => array( | ||
'type' => 'string', | ||
), | ||
), | ||
'render_callback' => 'render_core_social_link', | ||
array_merge( | ||
$metadata, | ||
array( | ||
'render_callback' => 'render_core_social_link', | ||
) | ||
) | ||
); | ||
} | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd love to get rid of the loop above right away, in which all Right now only the editor has a back-compat provision via the change in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You should check the HTML output of the edit post page. All blocks registered here will have a huge impact on the size of the page. In particular, the part that registers blocks to work with the At the same time, it's something that was never part of the WordPress core so we can provide the backward-compatibility only for the Gutenberg plugin and call it the day 😄 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Yeah, that seems like the right way to go. Let's address in a subsequent PR. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
register_block_type( | ||
$metadata['name'], | ||
array_merge( | ||
$metadata, | ||
array( | ||
'render_callback' => 'render_core_social_link', | ||
) | ||
) | ||
); | ||
} | ||
add_action( 'init', 'register_block_core_social_link' ); | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm also wondering now that I noticed that the block's title is now
Social Icon
, should we change the name as well? :)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I started this PR I was pretty much on the
links
camp, but now I lean a bit towardsicon
too.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mcsf Why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because I was initially considering the primary function of these blocks to be the linking — and this fit in with the possibility of declaring Social Links as a variation of Navigation or Buttons. But now I think we may compromise on functionality if we center the semantics of these blocks around just the linking.
Instead, their real purpose lies more in the appearance: the rendering of the links as icons. In the future, the icons may change looks, colours or shape, but they will remain icons. I think the user is best served if we are clear about this. If, instead, the primary purpose is linking, then other blocks are better suited (Navigation, Buttons, File, etc.).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have a diff that moves everything to Icons, but it's very large, so I'll open a separate PR to discuss this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure thing 💯
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The point of having social icon links is that they're links, not that they're icons, isn't it? From an accessibility standpoint, I question whether we should even have a block dedicated to textless buttons in the first place. Wouldn't that be sort of an anti-pattern?
Also, what if I want to have social links with visible text labels? Would I use the Buttons block for that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's the subject part of the debate, I think.
If done correctly, none of it should matter: icons should be as accessible as a regular text link, whether the reader cannot see, cannot use a cursor, etc.
I could see either block type accommodating that use case.
I'll cc you on the new PR if you're interested in discussing this there.