Social Links block: Add color classes so icon colors correctly reflect changes in Global Styles (#51020)

* Add color classes.

* Linting.

Author: ndiego

packages/block-library/src/social-link/block.json

@@ -24,7 +24,9 @@
 	"usesContext": [
 		"openInNewTab",
 		"showLabels",
+		"iconColor",
 		"iconColorValue",
+		"iconBackgroundColor",
 		"iconBackgroundColorValue"
 	],
 	"supports": {

packages/block-library/src/social-link/edit.js

@@ -92,10 +92,19 @@ const SocialLinkEdit = ( {
 	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
-	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
+	const {
+		showLabels,
+		iconColor,
+		iconColorValue,
+		iconBackgroundColor,
+		iconBackgroundColorValue,
+	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
+		[ `has-${ iconColor }-color` ]: iconColor,
+		[ `has-${ iconBackgroundColor }-background-color` ]:
+			iconBackgroundColor,
 	} );
 
 	// Use internal state instead of a ref to make sure that the component

packages/block-library/src/social-link/index.php

@@ -47,7 +47,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service,
+			'class' => 'wp-social-link wp-social-link-' . $service . block_core_social_link_get_color_classes( $block->context ),
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);
@@ -337,3 +337,24 @@ function block_core_social_link_get_color_styles( $context ) {
 
 	return implode( '', $styles );
 }
+
+/**
+ * Returns CSS classes for icon and icon background colors.
+ *
+ * @param array $context Block context passed to Social Sharing Link.
+ *
+ * @return string CSS classes for link's icon and background colors.
+ */
+function block_core_social_link_get_color_classes( $context ) {
+	$classes = array();
+
+	if ( array_key_exists( 'iconColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconColor'] . '-color';
+	}
+
+	if ( array_key_exists( 'iconBackgroundColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconBackgroundColor'] . '-background-color';
+	}
+
+	return ' ' . implode( ' ', $classes );
+}

packages/block-library/src/social-links/block.json

@@ -41,7 +41,9 @@
 	"providesContext": {
 		"openInNewTab": "openInNewTab",
 		"showLabels": "showLabels",
+		"iconColor": "iconColor",
 		"iconColorValue": "iconColorValue",
+		"iconBackgroundColor": "iconBackgroundColor",
 		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {