Skip to content
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.

Sign up for GitHub

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

Merged
merged 9 commits into from
Feb 6, 2020
Merged

Social Link: group all variations under one block type #19887

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
febaaff
Social Link: group all variations under one block type
mcsf Feb 3, 2020
c5a0da2
Social Link: Update test fixtures
mcsf Feb 4, 2020
38eacaa
Address review feedback
mcsf Feb 5, 2020
52071b0
Fix misnamed attribute 'type' -> 'site'
mcsf Feb 5, 2020
ba9070f
Social Link: Rename attribute 'site' to 'service'
mcsf Feb 5, 2020
586da71
Social Link: Update description
mcsf Feb 5, 2020
74c7987
Change attribute name to service (previously site)
mkaz Feb 5, 2020
d1b6347
Lint: Equal sign alignment
mkaz Feb 6, 2020
07a9e36
Social Link: Remove unnecessary block deprecation
mcsf Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
[
__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
socialLinks,
...socialLink.sites,
socialLink,

// Register Full Site Editing Blocks.
...( __experimentalEnableFullSiteEditing
Expand Down
15 changes: 15 additions & 0 deletions packages/block-library/src/social-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "core/social-link",
Copy link
Member

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? :)

Copy link
Contributor Author

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 towards icon too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mcsf Why?

Copy link
Contributor Author

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.).

Copy link
Contributor Author

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing 💯

Copy link
Member

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?

Copy link
Contributor Author

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?

That's the subject part of the debate, I think.

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?

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.

Also, what if I want to have social links with visible text labels? Would I use the Buttons block for that?

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.

"category": "widgets",
"attributes": {
"url": {
"type": "string"
},
"site": {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "site" the best attribute name?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about service?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've wondered about service too. Could try that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How's this, @mtias? ba9070f

"type": "string"
},
"label": {
"type": "number"
}
}
}
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
</PanelBody>
</InspectorControls>
<Button className={ classes } onClick={ () => setPopover( true ) }>
<IconComponent />
{ IconComponent && <IconComponent /> }
{ isSelected && showURLPopover && (
<URLPopover onClose={ () => setPopover( false ) }>
<form
Expand Down
39 changes: 10 additions & 29 deletions packages/block-library/src/social-link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,21 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import edit from './edit';
import socialList from './social-list';
import metadata from './block.json';
import variations from './variations';

const commonAttributes = {
category: 'widgets',
const { name } = metadata;

export { metadata, name };

export const settings = {
title: __( 'Social Icon' ),
parent: [ 'core/social-links' ],
supports: {
reusable: false,
html: false,
},
edit,
description: __( 'Create a link to the wider Web' ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This description could be improved. Reading it in isolation doesn't hint what the block does.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, same. My initial diff had a comment about it. Ideas?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create an icon link to external sites.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll try Display an icon linking to a social media profile or website

variations,
};

// Create individual blocks out of each site in social-list.js
export const sites = Object.keys( socialList ).map( ( site ) => {
const siteParams = socialList[ site ];
return {
name: 'core/social-link-' + site,
settings: {
title: siteParams.name,
icon: siteParams.icon,
description: __( 'Link to ' + siteParams.name ),
...commonAttributes,
attributes: {
url: {
type: 'string',
},
site: {
type: 'string',
default: site,
},
label: {
type: 'string',
},
},
},
};
} );
32 changes: 18 additions & 14 deletions packages/block-library/src/social-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
)
)
);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 core/social-link-<foo> types are generated, but in order to do that we need a better plan for back-compat.

Right now only the editor has a back-compat provision via the change in packages/blocks/src/api/parser.js. How could we best handle this for server-side block rendering for the front-end?

Copy link
Member

Choose a reason for hiding this comment

The 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 ServerSideRender component (which is also pointless in this case as they will never be consumed).

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 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😄

Yeah, that seems like the right way to go. Let's address in a subsequent PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#20098

register_block_type(
$metadata['name'],
array_merge(
$metadata,
array(
'render_callback' => 'render_core_social_link',
)
)
);
}
add_action( 'init', 'register_block_core_social_link' );

Expand Down
226 changes: 19 additions & 207 deletions packages/block-library/src/social-link/social-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,227 +1,39 @@
/**
* Internal dependencies
* External dependencies
*/
import {
AmazonIcon,
BandcampIcon,
BehanceIcon,
ChainIcon,
CodepenIcon,
DeviantArtIcon,
DribbbleIcon,
DropboxIcon,
EtsyIcon,
FacebookIcon,
FeedIcon,
FivehundredpxIcon,
FlickrIcon,
FoursquareIcon,
GoodreadsIcon,
GoogleIcon,
GitHubIcon,
InstagramIcon,
LastfmIcon,
LinkedInIcon,
MailIcon,
MastodonIcon,
MeetupIcon,
MediumIcon,
PinterestIcon,
PocketIcon,
RedditIcon,
SkypeIcon,
SnapchatIcon,
SoundCloudIcon,
SpotifyIcon,
TumblrIcon,
TwitchIcon,
TwitterIcon,
VimeoIcon,
VkIcon,
WordPressIcon,
YelpIcon,
YouTubeIcon,
} from './icons';
import { find } from 'lodash';

const socialList = {
fivehundredpx: {
name: '500px',
icon: FivehundredpxIcon,
},
amazon: {
name: 'Amazon',
icon: AmazonIcon,
},
bandcamp: {
name: 'Bandcamp',
icon: BandcampIcon,
},
behance: {
name: 'Behance',
icon: BehanceIcon,
},
chain: {
name: 'Link',
icon: ChainIcon,
},
codepen: {
name: 'CodePen',
icon: CodepenIcon,
},
deviantart: {
name: 'DeviantArt',
icon: DeviantArtIcon,
},
dribbble: {
name: 'Dribbble',
icon: DribbbleIcon,
},
dropbox: {
name: 'Dropbox',
icon: DropboxIcon,
},
etsy: {
name: 'Etsy',
icon: EtsyIcon,
},
facebook: {
name: 'Facebook',
icon: FacebookIcon,
},
feed: {
name: 'RSS Feed',
icon: FeedIcon,
},
flickr: {
name: 'Flickr',
icon: FlickrIcon,
},
foursquare: {
name: 'Foursquare',
icon: FoursquareIcon,
},
goodreads: {
name: 'Goodreads',
icon: GoodreadsIcon,
},
google: {
name: 'Google',
icon: GoogleIcon,
},
github: {
name: 'GitHub',
icon: GitHubIcon,
},
instagram: {
name: 'Instagram',
icon: InstagramIcon,
},
lastfm: {
name: 'Last.fm',
icon: LastfmIcon,
},
linkedin: {
name: 'LinkedIn',
icon: LinkedInIcon,
},
mail: {
name: 'Mail',
icon: MailIcon,
},
mastodon: {
name: 'Mastodon',
icon: MastodonIcon,
},
meetup: {
name: 'Meetup',
icon: MeetupIcon,
},
medium: {
name: 'Medium',
icon: MediumIcon,
},
pinterest: {
name: 'Pinterest',
icon: PinterestIcon,
},
pocket: {
name: 'Pocket',
icon: PocketIcon,
},
reddit: {
name: 'Reddit',
icon: RedditIcon,
},
skype: {
name: 'Skype',
icon: SkypeIcon,
},
snapchat: {
name: 'Snapchat',
icon: SnapchatIcon,
},
soundcloud: {
name: 'SoundCloud',
icon: SoundCloudIcon,
},
spotify: {
name: 'Spotify',
icon: SpotifyIcon,
},
tumblr: {
name: 'Tumblr',
icon: TumblrIcon,
},
twitch: {
name: 'Twitch',
icon: TwitchIcon,
},
twitter: {
name: 'Twitter',
icon: TwitterIcon,
},
vimeo: {
name: 'Vimeo',
icon: VimeoIcon,
},
vk: {
name: 'VK',
icon: VkIcon,
},
wordpress: {
name: 'WordPress',
icon: WordPressIcon,
},
yelp: {
name: 'Yelp',
icon: YelpIcon,
},
youtube: {
name: 'YouTube',
icon: YouTubeIcon,
},
};
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

export default socialList;
/**
* Internal dependencies
*/
import variations from './variations';
import { ChainIcon } from './icons';

/**
* Retrieves the social service's icon component.
*
* @param {string} site key for a social service (lowercase slug)
* @param {string} name key for a social service (lowercase slug)
*
* @return {WPComponent} Icon component for social service.
*/
export const getIconBySite = ( site ) => {
return socialList[ site ].icon;
export const getIconBySite = ( name ) => {
const variation = find( variations, { name } );
return variation ? variation.icon : ChainIcon;
};

/**
* Retrieves the display name for the social service.
*
* @param {string} site key for a social service (lowercase slug)
* @param {string} name key for a social service (lowercase slug)
*
* @return {string} Display name for social service
*/
export const getNameBySite = ( site ) => {
return socialList[ site ].name;
export const getNameBySite = ( name ) => {
const variation = find( variations, { name } );
return variation ? variation.title : __( 'Social Icon' );
};
Loading