diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js index 9f87e73d1ca8ba..68dce3d4e1cf70 100644 --- a/packages/block-library/src/social-link/edit.js +++ b/packages/block-library/src/social-link/edit.js @@ -6,18 +6,23 @@ import classNames from 'classnames'; /** * WordPress dependencies */ -import { URLPopover, URLInput } from '@wordpress/block-editor'; -import { useState } from '@wordpress/element'; -import { Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { InspectorControls, URLPopover, URLInput } from '@wordpress/block-editor'; +import { Fragment, useState } from '@wordpress/element'; +import { + Button, + PanelBody, + PanelRow, + TextControl, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import { getIconBySite } from './social-list'; +import { getIconBySite, getNameBySite } from './social-list'; const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { - const { url, site } = attributes; + const { url, site, label } = attributes; const [ showURLPopover, setPopover ] = useState( false ); const classes = classNames( 'wp-social-link', @@ -27,34 +32,51 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { // Import icon. const IconComponent = getIconBySite( site ); + const socialLinkName = getNameBySite( site ); return ( - + + + + + ); }; diff --git a/packages/block-library/src/social-link/icons/deviantart.js b/packages/block-library/src/social-link/icons/deviantart.js index 17b2c25f832fb4..f0724f09f6c45f 100644 --- a/packages/block-library/src/social-link/icons/deviantart.js +++ b/packages/block-library/src/social-link/icons/deviantart.js @@ -7,7 +7,7 @@ import { SVG, } from '@wordpress/components'; -export const DeviantartIcon = ( ) => ( +export const DeviantArtIcon = ( ) => ( diff --git a/packages/block-library/src/social-link/icons/github.js b/packages/block-library/src/social-link/icons/github.js index 4dfcd29a971c38..37a65e13d0beab 100644 --- a/packages/block-library/src/social-link/icons/github.js +++ b/packages/block-library/src/social-link/icons/github.js @@ -7,7 +7,7 @@ import { SVG, } from '@wordpress/components'; -export const GithubIcon = ( ) => ( +export const GitHubIcon = ( ) => ( diff --git a/packages/block-library/src/social-link/icons/linkedin.js b/packages/block-library/src/social-link/icons/linkedin.js index 98cec8a81ca0f7..41b287c19ab03b 100644 --- a/packages/block-library/src/social-link/icons/linkedin.js +++ b/packages/block-library/src/social-link/icons/linkedin.js @@ -7,7 +7,7 @@ import { SVG, } from '@wordpress/components'; -export const LinkedinIcon = ( ) => ( +export const LinkedInIcon = ( ) => ( diff --git a/packages/block-library/src/social-link/icons/soundcloud.js b/packages/block-library/src/social-link/icons/soundcloud.js index 9df4e0af59bc4c..558f52f547c2b9 100644 --- a/packages/block-library/src/social-link/icons/soundcloud.js +++ b/packages/block-library/src/social-link/icons/soundcloud.js @@ -7,7 +7,7 @@ import { SVG, } from '@wordpress/components'; -export const SoundcloudIcon = ( ) => ( +export const SoundCloudIcon = ( ) => ( diff --git a/packages/block-library/src/social-link/icons/youtube.js b/packages/block-library/src/social-link/icons/youtube.js index 0e822aa5b4f4da..35eca5e5d8af37 100644 --- a/packages/block-library/src/social-link/icons/youtube.js +++ b/packages/block-library/src/social-link/icons/youtube.js @@ -7,7 +7,7 @@ import { SVG, } from '@wordpress/components'; -export const YoutubeIcon = ( ) => ( +export const YouTubeIcon = ( ) => ( diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js index 692ff27f82fa5f..a6013644310250 100644 --- a/packages/block-library/src/social-link/index.js +++ b/packages/block-library/src/social-link/index.js @@ -38,6 +38,9 @@ export const sites = Object.keys( socialList ).map( type: 'string', default: site, }, + label: { + type: 'string', + }, }, }, }; diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php index 86d83b685e21e8..ae8b5e97bc952f 100644 --- a/packages/block-library/src/social-link/index.php +++ b/packages/block-library/src/social-link/index.php @@ -13,8 +13,9 @@ * @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; + $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 ); // Don't render a link if there is no URL set. if ( ! $url ) { @@ -22,7 +23,7 @@ function render_core_social_link( $attributes ) { } $icon = core_social_link_get_icon( $site ); - return '
  • ' . $icon . '
    • '; + return '
  • ' . $icon . '
    • '; } /** @@ -76,13 +77,16 @@ function register_block_core_social_link() { 'core/social-link-' . $site, array( 'attributes' => array( - 'url' => array( + 'url' => array( 'type' => 'string', ), - 'site' => array( + 'site' => array( 'type' => 'string', 'default' => $site, ), + 'label' => array( + 'type' => 'string', + ), ), 'render_callback' => 'render_core_social_link', ) @@ -100,128 +104,211 @@ function register_block_core_social_link() { * @return string SVG Element for site icon. */ function core_social_link_get_icon( $site ) { - switch ( $site ) { - - case 'fivehundredpx': - return ''; - - case 'amazon': - return ''; - - case 'bandcamp': - return ''; - - case 'behance': - return ''; - - case 'chain': - return ''; - - case 'codepen': - return ''; - - case 'deviantart': - return ''; - - case 'dribbble': - return ''; - - case 'dropbox': - return ''; - - case 'etsy': - return ''; - - case 'facebook': - return ''; - - case 'feed': - return ''; - - case 'flickr': - return ''; - - case 'foursquare': - return ''; - - case 'goodreads': - return ''; - - case 'google': - return ''; - - case 'github': - return ''; - - case 'instagram': - return ''; - - case 'lastfm': - return ''; - - case 'linkedin': - return ''; - - case 'mail': - return ''; - - case 'mastodon': - return ''; - - case 'meetup': - return ''; - - case 'medium': - return ''; - - case 'pinterest': - return ''; - - case 'pocket': - return ''; - - case 'reddit': - return ''; - - case 'skype': - return ''; - - case 'snapchat': - return ''; - - case 'soundcloud': - return ''; - - case 'spotify': - return ''; - - case 'tumblr': - return ''; - - case 'twitch': - return ''; - - case 'twitter': - return ''; - - case 'vimeo': - return ''; + $sites = core_social_link_sites(); + if ( isset( $sites[ $site ] ) && isset( $sites[ $site ]['icon'] ) ) { + return $sites[ $site ]['icon']; + } - case 'vk': - return ''; + return $sites['share']['icon']; +} - // phpcs:disable WordPress.WP.CapitalPDangit.Misspelled - case 'wordpress': - return ''; +/** + * Returns the brand name for social link. + * + * @param string $site The site icon. + * + * @return string Brand label. + */ +function core_social_link_get_name( $site ) { + $sites = core_social_link_sites(); + if ( isset( $sites[ $site ] ) && isset( $sites[ $site ]['name'] ) ) { + return $sites[ $site ]['name']; + } - case 'yelp': - return ''; + return $sites['share']['name']; +} - case 'youtube': - return ''; +/** + * Returns the SVG for social link. + * + * @param string $site The site slug to extract data from. + * @param string $field The field ('name', 'icon', etc) to extract for a site. + * + * @return array|string + */ +function core_social_link_sites( $site = '', $field = '' ) { + $sites_data = array( + 'fivehundredpx' => array( + 'name' => '500px', + 'icon' => '', + ), + 'amazon' => array( + 'name' => 'Amazon', + 'icon' => '', + ), + 'bandcamp' => array( + 'name' => 'Bandcamp', + 'icon' => '', + ), + 'behance' => array( + 'name' => 'Behance', + 'icon' => '', + ), + 'chain' => array( + 'name' => 'Link', + 'icon' => '', + ), + 'codepen' => array( + 'name' => 'CodePen', + 'icon' => '', + ), + 'deviantart' => array( + 'name' => 'DeviantArt', + 'icon' => '', + ), + 'dribbble' => array( + 'name' => 'Dribbble', + 'icon' => '', + ), + 'dropbox' => array( + 'name' => 'Dropbox', + 'icon' => '', + ), + 'etsy' => array( + 'name' => 'Etsy', + 'icon' => '', + ), + 'facebook' => array( + 'name' => 'Facebook', + 'icon' => '', + ), + 'feed' => array( + 'name' => 'RSS Feed', + 'icon' => '', + ), + 'flickr' => array( + 'name' => 'Flickr', + 'icon' => '', + ), + 'foursquare' => array( + 'name' => 'Foursquare', + 'icon' => '', + ), + 'goodreads' => array( + 'name' => 'Goodreads', + 'icon' => '', + ), + 'google' => array( + 'name' => 'Google', + 'icon' => '', + ), + 'github' => array( + 'name' => 'GitHub', + 'icon' => '', + ), + 'instagram' => array( + 'name' => 'Instagram', + 'icon' => '', + ), + 'lastfm' => array( + 'name' => 'Last.fm', + 'icon' => '', + ), + 'linkedin' => array( + 'name' => 'LinkedIn', + 'icon' => '', + ), + 'mail' => array( + 'name' => 'Mail', + 'icon' => '', + ), + 'mastodon' => array( + 'name' => 'Mastodon', + 'icon' => '', + ), + 'meetup' => array( + 'name' => 'Meetup', + 'icon' => '', + ), + 'medium' => array( + 'name' => 'Medium', + 'icon' => '', + ), + 'pinterest' => array( + 'name' => 'Pinterest', + 'icon' => '', + ), + 'pocket' => array( + 'name' => 'Pocket', + 'icon' => '', + ), + 'reddit' => array( + 'name' => 'Reddit', + 'icon' => '', + ), + 'skype' => array( + 'name' => 'Skype', + 'icon' => '', + ), + 'snapchat' => array( + 'name' => 'Snapchat', + 'icon' => '', + ), + 'soundcloud' => array( + 'name' => 'Soundcloud', + 'icon' => '', + ), + 'spotify' => array( + 'name' => 'Spotify', + 'icon' => '', + ), + 'tumblr' => array( + 'name' => 'Tumblr', + 'icon' => '', + ), + 'twitch' => array( + 'name' => 'Twitch', + 'icon' => '', + ), + 'twitter' => array( + 'name' => 'Twitter', + 'icon' => '', + ), + 'vimeo' => array( + 'name' => 'Vimeo', + 'icon' => '', + ), + 'vk' => array( + 'name' => 'VK', + 'icon' => '', + ), + 'wordpress' => array( + 'name' => 'WordPress', + 'icon' => '', + ), + 'yelp' => array( + 'name' => 'Yelp', + 'icon' => '', + ), + 'youtube' => array( + 'name' => 'YouTube', + 'icon' => '', + ), + 'share' => array( + 'name' => 'Share Icon', + 'icon' => '', + ), + ); - case 'share': - default: - return ''; + if ( ! empty( $site ) + && ! empty( $field ) + && isset( $sites_data[ $site ] ) + && ( 'icon' === $field || 'name' === $field ) + ) { + return $sites_data[ $site ][ $field ]; + } elseif ( ! empty( $site ) && isset( $sites_data[ $site ] ) ) { + return $sites_data[ $site ]; } + + return $sites_data; } diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js index 9cb8df0ef70ff3..47d598e643e141 100644 --- a/packages/block-library/src/social-link/social-list.js +++ b/packages/block-library/src/social-link/social-list.js @@ -7,7 +7,7 @@ import { BehanceIcon, ChainIcon, CodepenIcon, - DeviantartIcon, + DeviantArtIcon, DribbbleIcon, DropboxIcon, EtsyIcon, @@ -18,10 +18,10 @@ import { FoursquareIcon, GoodreadsIcon, GoogleIcon, - GithubIcon, + GitHubIcon, InstagramIcon, LastfmIcon, - LinkedinIcon, + LinkedInIcon, MailIcon, MastodonIcon, MeetupIcon, @@ -31,7 +31,7 @@ import { RedditIcon, SkypeIcon, SnapchatIcon, - SoundcloudIcon, + SoundCloudIcon, SpotifyIcon, TumblrIcon, TwitchIcon, @@ -40,7 +40,7 @@ import { VkIcon, WordPressIcon, YelpIcon, - YoutubeIcon, + YouTubeIcon, } from './icons'; const socialList = { @@ -70,7 +70,7 @@ const socialList = { }, deviantart: { name: 'DeviantArt', - icon: DeviantartIcon, + icon: DeviantArtIcon, }, dribbble: { name: 'Dribbble', @@ -110,7 +110,7 @@ const socialList = { }, github: { name: 'GitHub', - icon: GithubIcon, + icon: GitHubIcon, }, instagram: { name: 'Instagram', @@ -122,7 +122,7 @@ const socialList = { }, linkedin: { name: 'LinkedIn', - icon: LinkedinIcon, + icon: LinkedInIcon, }, mail: { name: 'Mail', @@ -161,8 +161,8 @@ const socialList = { icon: SnapchatIcon, }, soundcloud: { - name: 'Soundcloud', - icon: SoundcloudIcon, + name: 'SoundCloud', + icon: SoundCloudIcon, }, spotify: { name: 'Spotify', @@ -198,12 +198,30 @@ const socialList = { }, youtube: { name: 'YouTube', - icon: YoutubeIcon, + icon: YouTubeIcon, }, }; export default socialList; +/** + * Retrieves the social service's icon component. + * + * @param {string} site key for a social service (lowercase slug) + * + * @return {WPComponent} Icon component for social service. + */ export const getIconBySite = ( site ) => { return socialList[ site ].icon; }; + +/** + * Retrieves the display name for the social service. + * + * @param {string} site key for a social service (lowercase slug) + * + * @return {string} Display name for social service + */ +export const getNameBySite = ( site ) => { + return socialList[ site ].name; +};