Social Icons: Add icon & background color options (#28084)

* Add icon and bg color options to social links
WordPress · Jan 19, 2021 · f6129f6 · f6129f6
1 parent d914ff9
commit f6129f6
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 8 deletions.
diff --git a/docs/designers-developers/developers/themes/theme-json.md b/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 Links | 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).

diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -3,6 +3,24 @@
 	"name": "core/social-links",
 	"category": "widgets",
 	"attributes": {
+		"iconColor": {
+			"type": "string"
+		},
+		"customIconColor": {
+			"type": "string"
+		},
+		"iconColorValue": {
+			"type": "string"
+		},
+		"iconBackgroundColor": {
+			"type": "string"
+		},
+		"customIconBackgroundColor": {
+			"type": "string"
+		},
+		"iconBackgroundColorValue": {
+			"type": "string"
+		},
 		"openInNewTab": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/social-links/edit.js b/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,34 @@ const sizeOptions = [
 
 export function SocialLinksEdit( props ) {
 	const {
-		attributes: { size, openInNewTab },
+		attributes,
+		iconBackgroundColor,
+		iconColor,
 		setAttributes,
+		setIconBackgroundColor,
+		setIconColor,
 	} = props;
 
+	const {
+		iconBackgroundColorValue,
+		iconColorValue,
+		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 ) {
+			setAttributes( {
+				iconBackgroundColor: undefined,
+				customIconBackgroundColor: undefined,
+				iconBackgroundColorValue: undefined,
+			} );
+		}
+	}, [ logosOnly, setAttributes ] );
+
 	const SocialPlaceholder = (
 		<div className="wp-block-social-links__social-placeholder">
 			<div className="wp-social-link"></div>
@@ -53,8 +80,21 @@ export function SocialLinksEdit( props ) {
 		</div>
 	);
 
-	const className = classNames( size );
-	const blockProps = useBlockProps( { className } );
+	// Fallback color values are used maintain selections in case switching
+	// themes and named colors in palette do not match.
+	const className = classNames( size, {
+		'has-icon-color': iconColor.color || iconColorValue,
+		'has-icon-background-color':
+			iconBackgroundColor.color || iconBackgroundColorValue,
+	} );
+
+	const style = {
+		'--wp--social-links--icon-color': iconColor.color || iconColorValue,
+		'--wp--social-links--icon-background-color':
+			iconBackgroundColor.color || iconBackgroundColorValue,
+	};
+
+	const blockProps = useBlockProps( { className, style } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
@@ -127,10 +167,55 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color settings' ) }
+					colorSettings={ [
+						{
+							// Use custom attribute as fallback to prevent loss of named color selection when
+							// switching themes to a new theme that does not have a matching named color.
+							value: iconColor.color || iconColorValue,
+							onChange: ( colorValue ) => {
+								setIconColor( colorValue );
+								// Set explicit color value used to add CSS variable in save.js
+								setAttributes( { iconColorValue: colorValue } );
+							},
+							label: __( 'Icon color' ),
+						},
+						! logosOnly && {
+							// Use custom attribute as fallback to prevent loss of named color selection when
+							// switching themes to a new theme that does not have a matching named color.
+							value:
+								iconBackgroundColor.color ||
+								iconBackgroundColorValue,
+							onChange: ( colorValue ) => {
+								setIconBackgroundColor( colorValue );
+								// Set explicit color value used to add CSS variable in save.js
+								setAttributes( {
+									iconBackgroundColorValue: colorValue,
+								} );
+							},
+							label: __( 'Icon background color' ),
+						},
+					] }
+				/>
+				{ ! logosOnly && (
+					<ContrastChecker
+						{ ...{
+							textColor: iconColorValue,
+							backgroundColor: iconBackgroundColorValue,
+						} }
+						isLargeText={ false }
+					/>
+				) }
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
 		</Fragment>
 	);
 }
 
-export default SocialLinksEdit;
+const iconColorAttributes = {
+	iconColor: 'icon-color',
+	iconBackgroundColor: 'icon-background-color',
+};
+
+export default withColors( iconColorAttributes )( SocialLinksEdit );
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
@@ -10,13 +10,21 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
-		attributes: { size },
+		attributes: { iconBackgroundColorValue, iconColorValue, size },
 	} = props;
 
-	const className = classNames( size );
+	const className = classNames( size, {
+		'has-icon-color': iconColorValue,
+		'has-icon-background-color': iconBackgroundColorValue,
+	} );
+
+	const style = {
+		'--wp--social-links--icon-color': iconColorValue,
+		'--wp--social-links--icon-background-color': iconBackgroundColorValue,
+	};
 
 	return (
-		<ul { ...useBlockProps.save( { className } ) }>
+		<ul { ...useBlockProps.save( { className, style } ) }>
 			<InnerBlocks.Content />
 		</ul>
 	);

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
@@ -68,6 +68,19 @@
 	&.alignright {
 		justify-content: flex-end;
 	}
+
+	// Ensure user color selections are applied to inner Social Link blocks.
+	// Double selectors to increase specificity to avoid themes overwriting user selection.
+	&.has-icon-color.has-icon-color {
+		> .wp-social-link {
+			color: var(--wp--social-links--icon-color);
+		}
+	}
+	&.has-icon-background-color.has-icon-background-color {
+		> .wp-social-link {
+			background-color: var(--wp--social-links--icon-background-color);
+		}
+	}
 }
 
 .wp-social-link {