From 888d015bf6e179f0caadb47e5ff15b86053c7433 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 28 May 2025 21:57:00 +0400
Subject: [PATCH 1/4] Social: Allow custom link icons using block variations

---
 .../block-library/src/social-link/edit.js     | 23 ++++++++----
 .../src/social-link/social-list.js            | 35 ++++++++-----------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 7ed423b54edc42..830ea4970acf3e 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -7,8 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { useDispatch } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
@@ -20,6 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useState, useRef } from '@wordpress/element';
 import {
+	Icon,
 	Button,
 	Dropdown,
 	TextControl,
@@ -31,11 +31,12 @@ import {
 import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SocialLinkURLPopover = ( {
@@ -108,6 +109,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 	clientId,
+	name,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -138,8 +140,17 @@ const SocialLinkEdit = ( {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
-	const IconComponent = getIconBySite( service );
-	const socialLinkName = getNameBySite( service );
+	const { activeVariation } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation } = select( blocksStore );
+			return {
+				activeVariation: getActiveBlockVariation( name, attributes ),
+			};
+		},
+		[ name, attributes ]
+	);
+
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 	// The initial label (ie. the link text) is an empty string.
 	// We want to prevent empty links so that the link text always fallbacks to
 	// the social name, even when users enter and save an empty string or only
@@ -258,7 +269,7 @@ const SocialLinkEdit = ( {
 				 */
 				/* eslint-disable jsx-a11y/no-redundant-roles */ }
 				<button aria-haspopup="dialog" { ...blockProps } role="button">
-					<IconComponent />
+					<Icon icon={ icon } />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 909e9b90a54c5c..e180120b58e120 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -6,29 +6,24 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import variations from './variations';
 import { ChainIcon } from './icons';
 
 /**
- * Retrieves the social service's icon component.
+ * Retrieves the social service's icon component and label.
  *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {Component} Icon component for social service.
+ * @param {Object} variation The object of the social service variation
+ * @return {Object} An object containing the Icon component for social service and label.
  */
-export const getIconBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.icon : ChainIcon;
-};
+export function getSocialService( variation ) {
+	if ( ! variation?.name ) {
+		return {
+			icon: ChainIcon,
+			label: __( 'Social Icon' ),
+		};
+	}
 
-/**
- * Retrieves the display name for the social service.
- *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {string} Display name for social service
- */
-export const getNameBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.title : __( 'Social Icon' );
-};
+	return {
+		icon: variation?.icon ?? ChainIcon,
+		label: variation?.title ?? __( 'Social Icon' ),
+	};
+}

From 9e6c0c4a9193fb1ae980b281872a6813913156f7 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 28 May 2025 22:02:39 +0400
Subject: [PATCH 2/4] Introduce a new 'block_core_social_link_services' filter

---
 packages/block-library/src/social-link/index.php    | 13 +++++++++++++
 .../block-library/src/social-link/social-list.js    |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index e758163ae4792d..64afb91b38c9c6 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -335,6 +335,19 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 	);
 
+	/**
+	 * Filter the list of available social service.
+	 *
+	 * This can be used to change icons or add custom icons (additionally to variations in the editor).
+	 * Icons should be directly renderable - therefore SVGs work best.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param array $services_data The list of services. Each item is an array containing a 'name' and 'icon' key.
+	 * @return array The list of social services.
+	 */
+	$services_data = apply_filters( 'block_core_social_link_services', $services_data );
+
 	if ( ! empty( $service )
 		&& ! empty( $field )
 		&& isset( $services_data[ $service ] )
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index e180120b58e120..7f8f7ff17662b1 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -11,7 +11,7 @@ import { ChainIcon } from './icons';
 /**
  * Retrieves the social service's icon component and label.
  *
- * @param {Object} variation The object of the social service variation
+ * @param {Object} variation The object of the social service variation.
  * @return {Object} An object containing the Icon component for social service and label.
  */
 export function getSocialService( variation ) {

From a8f1871d57b936a6ca1ef463e303eb3051db2537 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 29 May 2025 15:02:18 +0400
Subject: [PATCH 3/4] Update React native files and fix failing unit tests

---
 .../block-library/src/social-link/edit.native.js   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index 0b4b6b0ac7d4bd..cfc2fa8ecab328 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -20,10 +20,12 @@ import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import styles from './editor.scss';
 
 const DEFAULT_ACTIVE_ICON_STYLES = {
@@ -54,6 +56,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	onFocus,
 	name,
+	activeVariation,
 } ) => {
 	const { url, service = name } = attributes;
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
@@ -64,8 +67,7 @@ const SocialLinkEdit = ( {
 		DEFAULT_ACTIVE_ICON_STYLES;
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
-	const IconComponent = getIconBySite( service )();
-	const socialLinkName = getNameBySite( service );
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 
 	// When new social icon is added link sheet is opened automatically.
 	useEffect( () => {
@@ -190,7 +192,7 @@ const SocialLinkEdit = ( {
 				>
 					<Icon
 						animated
-						icon={ IconComponent }
+						icon={ icon() }
 						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
@@ -202,12 +204,16 @@ const SocialLinkEdit = ( {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const { getBlock } = select( blockEditorStore );
+		const { getActiveBlockVariation } = select( blocksStore );
 
 		const block = getBlock( clientId );
 		const name = block?.name.substring( 17 );
 
 		return {
 			name,
+			activeVariation: block
+				? getActiveBlockVariation( block.name, block.attributes )
+				: undefined,
 		};
 	} ),
 ] )( SocialLinkEdit );

From fce49cba6d34e63e0a7d9477126b30c24db14373 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 11 Jun 2025 15:04:18 +0400
Subject: [PATCH 4/4] Change the filter name

---
 packages/block-library/src/social-link/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 64afb91b38c9c6..888d6cff902285 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -346,7 +346,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 	 * @param array $services_data The list of services. Each item is an array containing a 'name' and 'icon' key.
 	 * @return array The list of social services.
 	 */
-	$services_data = apply_filters( 'block_core_social_link_services', $services_data );
+	$services_data = apply_filters( 'block_core_social_link_get_services', $services_data );
 
 	if ( ! empty( $service )
 		&& ! empty( $field )