Skip to content

Commit

Permalink
Social Link: group all variations under one block type
Browse files Browse the repository at this point in the history
  • Loading branch information
mcsf committed Feb 3, 2020
1 parent 8512930 commit 7ef5c7b
Show file tree
Hide file tree
Showing 9 changed files with 365 additions and 260 deletions.
2 changes: 1 addition & 1 deletion packages/block-library/src/index.js
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
6 changes: 3 additions & 3 deletions packages/block-library/src/social-link/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
} );

// Import icon.
const IconComponent = getIconBySite( site );
const socialLinkName = getNameBySite( site );
const IconComponent = site ? getIconBySite( site ) : null;
const socialLinkName = site ? getNameBySite( site ) : '';

return (
<Fragment>
Expand All @@ -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
46 changes: 18 additions & 28 deletions packages/block-library/src/social-link/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,30 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import edit from './edit';
import socialList from './social-list';
import variations from './variations';

const commonAttributes = {
export const name = 'core/social-link';

export const settings = {
title: __( 'Social Icon' ),
category: 'widgets',
parent: [ 'core/social-links' ],
supports: {
reusable: false,
html: false,
},
edit,
};

// 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',
},
},
description: __( 'Create a link to the wider Web' ),
attributes: {
url: {
type: 'string',
},
site: {
type: 'string',
},
};
} );
label: {
type: 'string',
},
},
variations,
};
18 changes: 18 additions & 0 deletions packages/block-library/src/social-link/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,24 @@ function register_block_core_social_link() {
)
);
}

register_block_type(
'core/social-link',
array(
'attributes' => array(
'url' => array(
'type' => 'string',
),
'site' => array(
'type' => 'string',
),
'label' => array(
'type' => 'string',
),
),
'render_callback' => 'render_core_social_link',
)
);
}
add_action( 'init', 'register_block_core_social_link' );

Expand Down
220 changes: 12 additions & 208 deletions packages/block-library/src/social-link/social-list.js
Original file line number Diff line number Diff line change
@@ -1,227 +1,31 @@
/**
* 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';

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,
},
};
import { find } from 'lodash';

export default socialList;
/**
* Internal dependencies
*/
import variations from './variations';

/**
* 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 ) => {
return find( variations, { name } ).icon;
};

/**
* 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 ) => {
return find( variations, { name } ).title;
};
Loading

0 comments on commit 7ef5c7b

Please sign in to comment.