Social Icons: Add icon & background color options

docs/designers-developers/developers/themes/theme-json.md

@@ -348,6 +348,7 @@ These are the current color properties supported by blocks:
 | Post Title | Yes | Yes | - | Yes |
 | Site Tagline | Yes | Yes | - | Yes |
 | Site Title | Yes | Yes | - | Yes |
+| Social Link | Yes | - | - | Yes |
 | Template Part | Yes | Yes | Yes | Yes |
 
 [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).

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

@@ -17,9 +17,14 @@
 		}
 	},
 	"usesContext": [
-		"openInNewTab"
+		"openInNewTab",
+		"iconColor",
+		"customIconColor",
+		"iconBackgroundColor",
+		"customIconBackgroundColor"
 	],
 	"supports": {
+		"color": true,
 		"reusable": false,
 		"html": false
 	},

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

@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment, useEffect, useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -27,13 +27,51 @@ import { keyboardReturn } from '@wordpress/icons';
  */
 import { getIconBySite, getNameBySite } from './social-list';
 
-const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
-	const { url, service, label } = attributes;
+const SocialLinkEdit = ( {
+	attributes,
+	context,
+	isSelected,
+	setAttributes,
+} ) => {
+	const { url, service, label, style } = attributes;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
+	const {
+		iconColor,
+		customIconColor,
+		iconBackgroundColor,
+		customIconBackgroundColor,
+	} = context;
+
+	useEffect( () => {
+		setAttributes( {
+			textColor: iconColor,
+			style: {
+				...style,
+				color: {
+					...style?.color,
+					text: customIconColor,
+				},
+			},
+		} );
+	}, [ iconColor, customIconColor, setAttributes ] );
+
+	useEffect( () => {
+		setAttributes( {
+			backgroundColor: iconBackgroundColor,
+			style: {
+				...style,
+				color: {
+					...style?.color,
+					background: customIconBackgroundColor,
+				},
+			},
+		} );
+	}, [ iconBackgroundColor, customIconBackgroundColor, setAttributes ] );
+
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
 	const blockProps = useBlockProps( { className: classes } );

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

@@ -3,6 +3,18 @@
 	"name": "core/social-links",
 	"category": "widgets",
 	"attributes": {
+		"iconColor": {
+			"type": "string"
+		},
+		"customIconColor": {
+			"type": "string"
+		},
+		"iconBackgroundColor": {
+			"type": "string"
+		},
+		"customIconBackgroundColor": {
+			"type": "string"
+		},
 		"openInNewTab": {
 			"type": "boolean",
 			"default": false
@@ -12,7 +24,11 @@
 		}
 	},
 	"providesContext": {
-		"openInNewTab": "openInNewTab"
+		"openInNewTab": "openInNewTab",
+		"iconColor": "iconColor",
+		"customIconColor": "customIconColor",
+		"iconBackgroundColor": "iconBackgroundColor",
+		"customIconBackgroundColor": "customIconBackgroundColor"
 	},
 	"supports": {
 		"align": [

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

@@ -7,13 +7,16 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 
-import { Fragment } from '@wordpress/element';
+import { Fragment, useEffect } from '@wordpress/element';
 
 import {
 	BlockControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
+	ContrastChecker,
+	PanelColorSettings,
+	withColors,
 } from '@wordpress/block-editor';
 import {
 	DropdownMenu,
@@ -38,10 +41,25 @@ const sizeOptions = [
 
 export function SocialLinksEdit( props ) {
 	const {
-		attributes: { size, openInNewTab },
+		attributes,
+		iconBackgroundColor,
+		iconColor,
 		setAttributes,
+		setIconBackgroundColor,
+		setIconColor,
 	} = props;
 
+	const { openInNewTab, size } = attributes;
+
+	// Remove icon background color if logos only style selected.
+	const logosOnly =
+		attributes.className?.indexOf( 'is-style-logos-only' ) >= 0;
+	useEffect( () => {
+		if ( logosOnly ) {
+			setIconBackgroundColor();
+		}
+	}, [ logosOnly, setIconBackgroundColor ] );
+
 	const SocialPlaceholder = (
 		<div className="wp-block-social-links__social-placeholder">
 			<div className="wp-social-link"></div>
@@ -53,7 +71,10 @@ export function SocialLinksEdit( props ) {
 		</div>
 	);
 
-	const className = classNames( size );
+	const className = classNames( size, {
+		'has-icon-color': iconColor.color,
+		'has-icon-background-color': iconBackgroundColor.color,
+	} );
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
@@ -127,10 +148,39 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color settings' ) }
+					colorSettings={ [
+						{
+							value: iconColor.color,
+							onChange: setIconColor,
+							label: __( 'Icon color' ),
+						},
+						! logosOnly && {
+							value: iconBackgroundColor.color,
+							onChange: setIconBackgroundColor,
+							label: __( 'Icon background color' ),
+						},
+					] }
+				/>
+				{ ! logosOnly && (
+					<ContrastChecker
+						{ ...{
+							textColor: iconColor.color,
+							backgroundColor: iconBackgroundColor.color,
+						} }
+						isLargeText={ false }
+					/>
+				) }
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
 		</Fragment>
 	);
 }
 
-export default SocialLinksEdit;
+const iconColorAttributes = {
+	iconColor: 'icon-color',
+	iconBackgroundColor: 'icon-background-color',
+};
+
+export default withColors( iconColorAttributes )( SocialLinksEdit );

packages/block-library/src/social-links/save.js

@@ -10,10 +10,20 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
-		attributes: { size },
+		attributes: {
+			customIconBackgroundColor,
+			customIconColor,
+			iconBackgroundColor,
+			iconColor,
+			size,
+		},
 	} = props;
 
-	const className = classNames( size );
+	const className = classNames( size, {
+		'has-icon-color': iconColor || customIconColor,
+		'has-icon-background-color':
+			iconBackgroundColor || customIconBackgroundColor,
+	} );
 
 	return (
 		<ul { ...useBlockProps.save( { className } ) }>

packages/block-library/src/social-links/style.scss

@@ -102,8 +102,10 @@
 
 // Provide colors for a range of icons.
 .wp-block-social-links:not(.is-style-logos-only) {
-	// Generic items such as mail, feed, etc.
-	@import "../social-link/socials-with-bg.scss";
+	&:not(.has-icon-color):not(.has-icon-background-color) {
+		// Generic items such as mail, feed, etc.
+		@import "../social-link/socials-with-bg.scss";
+	}
 }
 
 // Treatment for logos only style.
@@ -115,7 +117,9 @@
 		padding: 4px;
 	}
 
-	@import "../social-link/socials-without-bg.scss";
+	&:not(.has-icon-color) {
+		@import "../social-link/socials-without-bg.scss";
+	}
 }
 
 // Treatment for pill shape style.