Add backports for 5.7 RC 2

packages/block-library/src/buttons/editor.scss

@@ -27,6 +27,34 @@ $blocks-block__margin: 0.5em;
 			box-shadow: none;
 		}
 	}
+
+	// Back compat: Inner button blocks previously had their own alignment
+	// options. Forcing them to 100% width in the flex container replicates
+	// that these were block level elements that took up the full width.
+	//
+	// This back compat rule is ignored if the user decides to use the
+	// newer justification options on the button block, hence the :not.
+	//
+	// Disable the stylelint rule, otherwise this selector is ugly!
+	/* stylelint-disable indentation */
+	&:not(
+		.is-content-justification-space-between,
+		.is-content-justification-right,
+		.is-content-justification-left,
+		.is-content-justification-center
+	) .wp-block[data-align="center"] {
+	/* stylelint-enable indentation */
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 0;
+		width: 100%;
+
+		.wp-block-button {
+			// Some margin hacks are needed, since margin doesn't seem to
+			// collapse in the same way when a parent layout it flex.
+			margin-bottom: 0;
+		}
+	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {

packages/block-library/src/buttons/style.scss

@@ -66,7 +66,11 @@ $blocks-block__margin: 0.5em;
 		}
 	}
 
-	// Kept for backward compatibiity.
+	&.is-content-justification-space-between {
+		justify-content: space-between;
+	}
+
+	// Kept for backward compatibility.
 	&.aligncenter {
 		text-align: center;
 	}
@@ -92,4 +96,26 @@ $blocks-block__margin: 0.5em;
 			margin-left: 0;
 		}
 	}
+
+	// Back compat: Inner button blocks previously had their own alignment
+	// options. Forcing them to 100% width in the flex container replicates
+	// that these were block level elements that took up the full width.
+	//
+	// This back compat rule is ignored if the user decides to use the
+	// newer justification options on the button block, hence the :not.
+	//
+	// Disable the stylelint rule, otherwise this selector is ugly!
+	/* stylelint-disable indentation */
+	&:not(
+		.is-content-justification-space-between,
+		.is-content-justification-right,
+		.is-content-justification-left,
+		.is-content-justification-center
+	) .wp-block-button.aligncenter {
+	/* stylelint-enable indentation */
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: $blocks-block__margin;
+		width: 100%;
+	}
 }

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

@@ -17,7 +17,9 @@
 		}
 	},
 	"usesContext": [
-		"openInNewTab"
+		"openInNewTab",
+		"iconColorValue",
+		"iconBackgroundColorValue"
 	],
 	"supports": {
 		"reusable": false,

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>

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 );
+}

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

@@ -30,7 +30,9 @@
 		}
 	},
 	"providesContext": {
-		"openInNewTab": "openInNewTab"
+		"openInNewTab": "openInNewTab",
+		"iconColorValue": "iconColorValue",
+		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {
 		"align": [

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;

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,
 								} );

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,
 };

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>
 	);

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 {

packages/blocks/src/api/registration.js

@@ -4,10 +4,11 @@
  * External dependencies
  */
 import {
-	get,
+	camelCase,
 	isFunction,
 	isNil,
 	isPlainObject,
+	mapKeys,
 	omit,
 	pick,
 	pickBy,
@@ -149,7 +150,7 @@ const LEGACY_CATEGORY_MAPPING = {
 	layout: 'design',
 };
 
-export let serverSideBlockDefinitions = {};
+export const serverSideBlockDefinitions = {};
 
 /**
  * Sets the server side block definition of blocks.
@@ -158,10 +159,17 @@ export let serverSideBlockDefinitions = {};
  */
 // eslint-disable-next-line camelcase
 export function unstable__bootstrapServerSideBlockDefinitions( definitions ) {
-	serverSideBlockDefinitions = {
-		...serverSideBlockDefinitions,
-		...definitions,
-	};
+	for ( const blockName of Object.keys( definitions ) ) {
+		// Don't overwrite if already set. It covers the case when metadata
+		// was initialized from the server.
+		if ( serverSideBlockDefinitions[ blockName ] ) {
+			continue;
+		}
+		serverSideBlockDefinitions[ blockName ] = mapKeys(
+			pickBy( definitions[ blockName ], ( value ) => ! isNil( value ) ),
+			( value, key ) => camelCase( key )
+		);
+	}
 }
 
 /**
@@ -186,10 +194,7 @@ export function registerBlockType( name, settings ) {
 		supports: {},
 		styles: [],
 		save: () => null,
-		...pickBy(
-			get( serverSideBlockDefinitions, name, {} ),
-			( value ) => ! isNil( value )
-		),
+		...serverSideBlockDefinitions?.[ name ],
 		...settings,
 	};