context['openInNewTab'] ) ? $block->context['openInNewTab'] : false;
$service = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
$url = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : sprintf(
/* translators: %1$s: Social-network name. %2$s: URL. */
__( '%1$s: %2$s', 'gutenberg' ),
block_core_social_link_get_name( $service ),
$url
);
$class_name = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;
// Don't render a link if there is no URL set.
if ( ! $url ) {
return '';
}
$attribute = '';
if ( $open_in_new_tab ) {
$attribute = 'rel="noopener nofollow" target="_blank"';
}
$icon = block_core_social_link_get_icon( $service );
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => 'wp-social-link wp-social-link-' . $service . $class_name,
'style' => block_core_social_link_get_color_styles( $block->context ),
)
);
return ' ' . $icon . '';
}
/**
* Registers the `core/social-link` blocks.
*/
function register_block_core_social_link() {
register_block_type_from_metadata(
__DIR__ . '/social-link',
array(
'render_callback' => 'render_block_core_social_link',
)
);
}
add_action( 'init', 'register_block_core_social_link' );
/**
* Returns the SVG for social link.
*
* @param string $service The service icon.
*
* @return string SVG Element for service icon.
*/
function block_core_social_link_get_icon( $service ) {
$services = block_core_social_link_services();
if ( isset( $services[ $service ] ) && isset( $services[ $service ]['icon'] ) ) {
return $services[ $service ]['icon'];
}
return $services['share']['icon'];
}
/**
* Returns the brand name for social link.
*
* @param string $service The service icon.
*
* @return string Brand label.
*/
function block_core_social_link_get_name( $service ) {
$services = block_core_social_link_services();
if ( isset( $services[ $service ] ) && isset( $services[ $service ]['name'] ) ) {
return $services[ $service ]['name'];
}
return $services['share']['name'];
}
/**
* Returns the SVG for social link.
*
* @param string $service The service slug to extract data from.
* @param string $field The field ('name', 'icon', etc) to extract for a service.
*
* @return array|string
*/
function block_core_social_link_services( $service = '', $field = '' ) {
$services_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' => '',
),
'patreon' => array(
'name' => 'Patreon',
'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' => '',
),
'telegram' => array(
'name' => 'Telegram',
'icon' => '',
),
'tiktok' => array(
'name' => 'TikTok',
'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' => '',
),
);
if ( ! empty( $service )
&& ! empty( $field )
&& isset( $services_data[ $service ] )
&& ( 'icon' === $field || 'name' === $field )
) {
return $services_data[ $service ][ $field ];
} elseif ( ! empty( $service ) && isset( $services_data[ $service ] ) ) {
return $services_data[ $service ];
}
return $services_data;
}
/**
* Returns CSS styles for icon and icon background colors.
*
* @param array $context Block context passed to Social Link.
*
* @return string Inline CSS styles for link's icon and background colors.
*/
function block_core_social_link_get_color_styles( $context ) {
$styles = array();
if ( array_key_exists( 'iconColorValue', $context ) ) {
$styles[] = 'color: ' . $context['iconColorValue'] . '; ';
}
if ( array_key_exists( 'iconBackgroundColorValue', $context ) ) {
$styles[] = 'background-color: ' . $context['iconBackgroundColorValue'] . '; ';
}
return implode( '', $styles );
}