<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName
if ( ! defined( 'ABSPATH' ) ) {
// phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files.
class Jetpack_Widget_Social_Icons extends WP_Widget {
const ID_BASE = 'jetpack_widget_social_icons';
* Default widget options.
* @var array Default widget options.
public function __construct() {
'classname' => 'jetpack_widget_social_icons',
'description' => __( 'Add social-media icons to your site.', 'jetpack' ),
'show_instance_in_rest' => true,
'customize_selective_refresh' => true,
'jetpack_widget_social_icons',
/** This filter is documented in modules/widgets/facebook-likebox.php */
apply_filters( 'jetpack_widget_name', __( 'Social Icons', 'jetpack' ) ),
'title' => __( 'Follow Us', 'jetpack' ),
// Enqueue admin scrips and styles, only in the customizer or the old widgets page.
if ( is_customize_preview() || 'widgets.php' === $pagenow ) {
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
add_action( 'admin_print_footer_scripts', array( $this, 'render_admin_js' ) );
add_filter( 'widget_types_to_hide_from_legacy_widget_block', array( $this, 'hide_widget_in_block_editor' ) );
* Remove the "Social Icons" widget from the Legacy Widget block
* @param array $widget_types List of widgets that are currently removed from the Legacy Widget block.
* @return array $widget_types New list of widgets that will be removed.
public function hide_widget_in_block_editor( $widget_types ) {
$widget_types[] = self::ID_BASE;
* Script & styles for admin widget form.
public function enqueue_admin_scripts() {
'jetpack-widget-social-icons-script',
plugins_url( 'social-icons/social-icons-admin.js', __FILE__ ),
array( 'jquery', 'jquery-ui-sortable' ),
'jetpack-widget-social-icons-admin',
plugins_url( 'social-icons/social-icons-admin.css', __FILE__ ),
* Styles for front-end widget.
public function enqueue_icon_scripts() {
wp_enqueue_style( 'jetpack-widget-social-icons-styles', plugins_url( 'social-icons/social-icons.css', __FILE__ ), array(), '20170506' );
* JavaScript for admin widget form.
public function render_admin_js() {
<script type="text/html" id="tmpl-jetpack-widget-social-icons-template">
<?php self::render_icons_template(); ?>
* Add SVG definitions to the footer.
public function include_svg_icons() {
// Define SVG sprite file in Jetpack.
$svg_icons = dirname( __DIR__ ) . '/theme-tools/social-menu/social-menu.svg';
$svg_icons = class_exists( 'Automattic\Jetpack\Classic_Theme_Helper\Main' ) ? JETPACK__PLUGIN_DIR . 'jetpack_vendor/automattic/jetpack-classic-theme-helper/src/social-menu/social-menu.svg' : dirname( __DIR__ ) . '/theme-tools/social-menu/social-menu.svg';
// Define SVG sprite file in WPCOM.
if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
$svg_icons = class_exists( 'Automattic\Jetpack\Classic_Theme_Helper\Main' ) ? JETPACK__PLUGIN_DIR . 'jetpack_vendor/automattic/jetpack-classic-theme-helper/src/social-menu/social-menu.svg' : dirname( __DIR__ ) . '/social-menu/social-menu.svg';
// If it exists, include it.
if ( is_file( $svg_icons ) ) {
$svg_contents = file_get_contents( $svg_icons ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Only reading a local file.
if ( ! empty( $svg_contents ) ) {
echo wp_kses( $svg_contents, $allowed_tags );
* Front-end display of widget.
* @see WP_Widget::widget()
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
public function widget( $args, $instance ) {
$instance = wp_parse_args( $instance, $this->defaults );
// Enqueue front end assets.
$this->enqueue_icon_scripts();
add_action( 'wp_footer', array( $this, 'include_svg_icons' ), 9999 );
/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
$title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base );
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ( ! empty( $instance['icons'] ) ) :
// Get supported social icons.
$social_icons = $this->get_supported_icons();
$default_icon = $this->get_svg_icon( array( 'icon' => 'chain' ) );
<ul class="jetpack-social-widget-list size-<?php echo esc_attr( $instance['icon-size'] ); ?>">
<?php foreach ( $instance['icons'] as $icon ) : ?>
<?php if ( ! empty( $icon['url'] ) ) : ?>
<li class="jetpack-social-widget-item">
esc_url( $icon['url'], array( 'http', 'https', 'mailto', 'sms' ) ),
true === $instance['new-tab'] ?
'target="_blank" rel="noopener noreferrer"' :
foreach ( $social_icons as $social_icon ) {
foreach ( $social_icon['url'] as $url_fragment ) {
* url_fragment can be a URL host, or a regex, starting with #.
* Let's check for both scenarios.
str_starts_with( $url_fragment, '#' ) && str_ends_with( $url_fragment, '#' )
&& preg_match( $url_fragment, $icon['url'] )
// Then, regular host name.
|| str_contains( $icon['url'], $url_fragment )
'<span class="screen-reader-text">%1$s</span>%2$s',
esc_attr( $social_icon['label'] ),
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
'icon' => esc_attr( $social_icon['icon'] ),
echo $default_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
/** This action is documented in modules/widgets/gravatar-profile.php */
do_action( 'jetpack_stats_extra', 'widget_view', 'social_icons' );
* Sanitize widget form values as they are saved.
* @see WP_Widget::update()
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
* @return array Updated safe values to be saved.
public function update( $new_instance, $old_instance ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['icon-size'] = $this->defaults['icon-size'];
$instance['url-icons'] = array_key_exists( 'url-icons', $new_instance ) ? $new_instance['url-icons'] : array();
if ( in_array( $new_instance['icon-size'], array( 'small', 'medium', 'large' ), true ) ) {
$instance['icon-size'] = $new_instance['icon-size'];
$instance['new-tab'] = isset( $new_instance['new-tab'] ) ? (bool) $new_instance['new-tab'] : false;
$instance['icons'] = array();
if ( array_key_exists( 'url-icons', $new_instance ) ) {
foreach ( $new_instance['url-icons'] as $url ) {
$url = filter_var( $url, FILTER_SANITIZE_URL );
$instance['icons'][] = array(
* @param array $instance Previously saved values from database.
public function form( $instance ) {
$instance = wp_parse_args( $instance, $this->defaults );
$title = sanitize_text_field( $instance['title'] );
'small' => __( 'Small', 'jetpack' ),
'medium' => __( 'Medium', 'jetpack' ),
'large' => __( 'Large', 'jetpack' ),
$new_tab = isset( $instance['new-tab'] ) ? (bool) $instance['new-tab'] : false;
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'jetpack' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
<label for="<?php echo esc_attr( $this->get_field_id( 'icon-size' ) ); ?>"><?php esc_html_e( 'Size:', 'jetpack' ); ?></label>
<select class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'icon-size' ) ); ?>">
<?php foreach ( $sizes as $value => $label ) : ?>
<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, $instance['icon-size'] ); ?>><?php echo esc_attr( $label ); ?></option>
<div class="jetpack-social-icons-widget-list"
data-url-icon-id="<?php echo esc_attr( $this->get_field_id( 'url-icons' ) ); ?>"
data-url-icon-name="<?php echo esc_attr( $this->get_field_name( 'url-icons' ) ); ?>"
foreach ( $instance['icons'] as $icon ) {
self::render_icons_template(
'url-icon-id' => $this->get_field_id( 'url-icons' ),
'url-icon-name' => $this->get_field_name( 'url-icons' ),
'url-value' => $icon['url'],
<p class="jetpack-social-icons-widget add-button">
<button type="button" class="button jetpack-social-icons-add-button">
<?php esc_html_e( 'Add an icon', 'jetpack' ); ?>
$lang = strtolower( substr( get_locale(), 0, 2 ) );
$support = 'https://wordpress.com/es/support/wordpress-editor/blocks/social-icons-block/display-social-profiles/#iconos-sociales-compatibles';
$support = 'https://wordpress.com/pt-br/support/exibir-perfis-de-redes-sociais/#icones-de-redes-sociais-compativeis';
$support = 'https://wordpress.com/support/wordpress-editor/blocks/social-icons-block/display-social-profiles/#supported-social-icons';
<em><a href="<?php echo esc_url( $support ); ?>" target="_blank" rel="noopener noreferrer">
<?php esc_html_e( 'View available icons', 'jetpack' ); ?>
<input type="checkbox" class="checkbox" id="<?php echo esc_attr( $this->get_field_id( 'new-tab' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'new-tab' ) ); ?>" <?php checked( $new_tab ); ?> />
<label for="<?php echo esc_attr( $this->get_field_id( 'new-tab' ) ); ?>"><?php esc_html_e( 'Open link in a new tab', 'jetpack' ); ?></label>
* Generates template to add icons.
* @param array $args Template arguments.
private static function render_icons_template( $args = array() ) {
$args = wp_parse_args( $args, $defaults );
<div class="jetpack-social-icons-widget-item">
<div class="jetpack-social-icons-widget-item-wrapper">
<div class="handle"></div>
<p class="jetpack-widget-social-icons-url">
'<input class="widefat" id="%1$s" name="%2$s[]" type="text" placeholder="%3$s" value="%4$s"/>',
esc_attr( $args['url-icon-id'] ),
esc_attr( $args['url-icon-name'] ),
esc_attr__( 'Account URL', 'jetpack' ),
esc_url( $args['url-value'], array( 'http', 'https', 'mailto', 'sms' ) )
<p class="jetpack-widget-social-icons-remove-item">
<a class="jetpack-widget-social-icons-remove-item-button" href="javascript:;">
<?php esc_html_e( 'Remove', 'jetpack' ); ?>
* Parameters needed to display an SVG.
* @type string $icon Required SVG icon filename.
* @return string SVG markup.
public function get_svg_icon( $args = array() ) {
// Make sure $args are an array.
return esc_html__( 'Please define default parameters in the form of an array.', 'jetpack' );
$args = wp_parse_args( $args, $defaults );
if ( false === array_key_exists( 'icon', $args ) ) {
return esc_html__( 'Please define an SVG icon filename.', 'jetpack' );
$aria_hidden = ' aria-hidden="true"';
$svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . ' role="presentation">';
* The whitespace around `<use>` is intentional - it is a work around to a keyboard navigation bug in Safari 10.
* See https://core.trac.wordpress.org/ticket/38387.
$svg .= ' <use href="#icon-' . esc_html( $args['icon'] ) . '" xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> ';
* Returns an array of supported social links (URL, icon, and label).
* @return array $social_links_icons
public function get_supported_icons() {
$social_links_icons = array(
'url' => array( '500px.com' ),
'#https?:\/\/(www\.)?amazon\.(com|cn|in|fr|de|it|nl|es|co|ca)\/#',
'url' => array( 'apple.com' ),
'url' => array( 'itunes.com' ),