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 ); }