Replace CSS variables with block context approach (#29330)

kses are stripping out the CSS variable inline style for roles without unfiltered_html capabilities. This changes the approach to pass the colors via block context to the inner blocks to be rendered as normal inline color & background-color styles.
WordPress · Mar 1, 2021 · 51613ca · 51613ca
1 parent ff0d663
commit 51613ca
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 33 deletions.
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
@@ -17,7 +17,9 @@
 		}
 	},
 	"usesContext": [
-		"openInNewTab"
+		"openInNewTab",
+		"iconColorValue",
+		"iconBackgroundColorValue"
 	],
 	"supports": {
 		"reusable": false,

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -27,16 +27,28 @@ import { keyboardReturn } from '@wordpress/icons';
  */
 import { getIconBySite, getNameBySite } from './social-list';
 
-const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
+const SocialLinkEdit = ( {
+	attributes,
+	context,
+	isSelected,
+	setAttributes,
+} ) => {
 	const { url, service, label } = attributes;
+	const { iconColorValue, iconBackgroundColorValue } = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
-	const blockProps = useBlockProps( { className: classes } );
+	const blockProps = useBlockProps( {
+		className: classes,
+		style: {
+			color: iconColorValue,
+			backgroundColor: iconBackgroundColorValue,
+		},
+	} );
 
 	return (
 		<Fragment>

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
@@ -33,7 +33,12 @@ 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_name ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => 'wp-social-link wp-social-link-' . $service . $class_name,
+			'style' => block_core_social_link_get_color_styles( $block->context ),
+		)
+	);
 
 	return '<li ' . $wrapper_attributes . '><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '" ' . $attribute . ' class="wp-block-social-link-anchor"> ' . $icon . '</a></li>';
 }
@@ -280,3 +285,24 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 
 	return $services_data;
 }
+
+/**
+ * Returns CSS styles for icon and icon background colors.
+ *
+ * @param array $context Block context passed to Social Link.
+ *
+ * @return string Inline CSS styles for link's icon and background colors.
+ */
+function block_core_social_link_get_color_styles( $context ) {
+	$styles = array();
+
+	if ( array_key_exists( 'iconColorValue', $context ) ) {
+		$styles[] = 'color: ' . $context['iconColorValue'] . '; ';
+	}
+
+	if ( array_key_exists( 'iconBackgroundColorValue', $context ) ) {
+		$styles[] = 'background-color: ' . $context['iconBackgroundColorValue'] . '; ';
+	}
+
+	return implode( '', $styles );
+}
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -30,7 +30,9 @@
 		}
 	},
 	"providesContext": {
-		"openInNewTab": "openInNewTab"
+		"openInNewTab": "openInNewTab",
+		"iconColorValue": "iconColorValue",
+		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {
 		"align": [

diff --git a/packages/block-library/src/social-links/deprecated.js b/packages/block-library/src/social-links/deprecated.js
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+// Social Links block deprecations.
+const deprecated = [
+	// V1. Remove CSS variable use for colors.
+	{
+		attributes: {
+			iconColor: {
+				type: 'string',
+			},
+			customIconColor: {
+				type: 'string',
+			},
+			iconColorValue: {
+				type: 'string',
+			},
+			iconBackgroundColor: {
+				type: 'string',
+			},
+			customIconBackgroundColor: {
+				type: 'string',
+			},
+			iconBackgroundColorValue: {
+				type: 'string',
+			},
+			openInNewTab: {
+				type: 'boolean',
+				default: false,
+			},
+			size: {
+				type: 'string',
+			},
+		},
+		providesContext: {
+			openInNewTab: 'openInNewTab',
+		},
+		supports: {
+			align: [ 'left', 'center', 'right' ],
+			anchor: true,
+		},
+		save: ( props ) => {
+			const {
+				attributes: {
+					iconBackgroundColorValue,
+					iconColorValue,
+					itemsJustification,
+					size,
+				},
+			} = props;
+
+			const className = classNames( size, {
+				'has-icon-color': iconColorValue,
+				'has-icon-background-color': iconBackgroundColorValue,
+				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+			} );
+
+			const style = {
+				'--wp--social-links--icon-color': iconColorValue,
+				'--wp--social-links--icon-background-color': iconBackgroundColorValue,
+			};
+
+			return (
+				<ul { ...useBlockProps.save( { className, style } ) }>
+					<InnerBlocks.Content />
+				</ul>
+			);
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -88,13 +88,7 @@ export function SocialLinksEdit( props ) {
 			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 blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
@@ -176,7 +170,6 @@ export function SocialLinksEdit( props ) {
 							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' ),
@@ -189,7 +182,6 @@ export function SocialLinksEdit( props ) {
 								iconBackgroundColorValue,
 							onChange: ( colorValue ) => {
 								setIconBackgroundColor( colorValue );
-								// Set explicit color value used to add CSS variable in save.js
 								setAttributes( {
 									iconBackgroundColorValue: colorValue,
 								} );

diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js
@@ -7,6 +7,7 @@ import { share as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -54,4 +55,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
@@ -18,13 +18,8 @@ export default function save( props ) {
 		'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, style } ) }>
+		<ul { ...useBlockProps.save( { className } ) }>
 			<InnerBlocks.Content />
 		</ul>
 	);

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
@@ -68,19 +68,6 @@
 	&.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 {