Fix: setting a preset color on pullquote default style makes the bloc…

…k invalid (#18194)

* Fix: setting a preset color on pullquote default style makes the block invalid.

* Updated deprecation to keep the colors

packages/block-library/src/pullquote/deprecated.js

@@ -48,7 +48,113 @@ const blockAttributes = {
 	},
 };
 
+function parseBorderColor( styleString ) {
+	if ( ! styleString ) {
+		return;
+	}
+	const matches = styleString.match( /border-color:([^;]+)[;]?/ );
+	if ( matches && matches[ 1 ] ) {
+		return matches[ 1 ];
+	}
+}
+
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			// figureStyle is an attribute that never existed.
+			// We are using it as a way to access the styles previously applied to the figure.
+			figureStyle: {
+				source: 'attribute',
+				selector: 'figure',
+				attribute: 'style',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				mainColor,
+				customMainColor,
+				textColor,
+				customTextColor,
+				value,
+				citation,
+				className,
+				figureStyle,
+			} = attributes;
+
+			const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+			let figureClasses, figureStyles;
+
+			// Is solid color style
+			if ( isSolidColorStyle ) {
+				const backgroundClass = getColorClassName( 'background-color', mainColor );
+
+				figureClasses = classnames( {
+					'has-background': ( backgroundClass || customMainColor ),
+					[ backgroundClass ]: backgroundClass,
+				} );
+
+				figureStyles = {
+					backgroundColor: backgroundClass ? undefined : customMainColor,
+				};
+			// Is normal style and a custom color is being used ( we can set a style directly with its value)
+			} else if ( customMainColor ) {
+				figureStyles = {
+					borderColor: customMainColor,
+				};
+			// If normal style and a named color are being used, we need to retrieve the color value to set the style,
+			// as there is no expectation that themes create classes that set border colors.
+			} else if ( mainColor ) {
+				// Previously here we queried the color settings to know the color value
+				// of a named color. This made the save function impure and the block was refactored,
+				// because meanwhile a change in the editor made it impossible to query color settings in the save function.
+				// Here instead of querying the color settings to know the color value, we retrieve the value
+				// directly from the style previously serialized.
+				const borderColor = parseBorderColor( figureStyle );
+				figureStyles = {
+					borderColor,
+				};
+			}
+
+			const blockquoteTextColorClass = getColorClassName( 'color', textColor );
+			const blockquoteClasses = ( textColor || customTextColor ) && classnames( 'has-text-color', {
+				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+			} );
+
+			const blockquoteStyles = blockquoteTextColorClass ? undefined : { color: customTextColor };
+
+			return (
+				<figure className={ figureClasses } style={ figureStyles }>
+					<blockquote className={ blockquoteClasses } style={ blockquoteStyles } >
+						<RichText.Content value={ value } multiline />
+						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+					</blockquote>
+				</figure>
+			);
+		},
+		migrate( { className, figureStyle, mainColor, ...attributes } ) {
+			const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+			// If is the default style, and a main color is set,
+			// migrate the main color value into a custom color.
+			// The custom color value is retrived by parsing the figure styles.
+			if ( ! isSolidColorStyle && mainColor && figureStyle ) {
+				const borderColor = parseBorderColor( figureStyle );
+				if ( borderColor ) {
+					return {
+						...attributes,
+						className,
+						customMainColor: borderColor,
+					};
+				}
+			}
+			return {
+				className,
+				mainColor,
+				...attributes,
+			};
+		},
+	},
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {

packages/block-library/src/pullquote/edit.js

@@ -32,12 +32,20 @@ class PullQuoteEdit extends Component {
 	}
 
 	pullQuoteMainColorSetter( colorValue ) {
-		const { colorUtils, textColor, setTextColor, setMainColor, className } = this.props;
+		const { colorUtils, textColor, setAttributes, setTextColor, setMainColor, className } = this.props;
 		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
 		const needTextColor = ! textColor.color || this.wasTextColorAutomaticallyComputed;
 		const shouldSetTextColor = isSolidColorStyle && needTextColor && colorValue;
 
-		setMainColor( colorValue );
+		if ( isSolidColorStyle ) {
+			// If we use the solid color style, set the color using the normal mechanism.
+			setMainColor( colorValue );
+		} else {
+			// If we use the default style, set the color as a custom color to force the usage of an inline style.
+			// Default style uses a border color for which classes are not available.
+			setAttributes( { customMainColor: colorValue } );
+		}
+
 		if ( shouldSetTextColor ) {
 			this.wasTextColorAutomaticallyComputed = true;
 			setTextColor( colorUtils.getMostReadableColor( colorValue ) );
@@ -50,6 +58,23 @@ class PullQuoteEdit extends Component {
 		this.wasTextColorAutomaticallyComputed = false;
 	}
 
+	componentDidUpdate( prevProps ) {
+		const {
+			attributes,
+			className,
+			mainColor,
+			setAttributes,
+		} = this.props;
+		// If the block includes a named color and we switched from the
+		// solid color style to the default style.
+		if ( attributes.mainColor && ! includes( className, SOLID_COLOR_CLASS ) && includes( prevProps.className, SOLID_COLOR_CLASS ) ) {
+			// Remove the named color, and set the color as a custom color.
+			// This is done because named colors use classes, in the default style we use a border color,
+			// and themes don't set classes for border colors.
+			setAttributes( { mainColor: undefined, customMainColor: mainColor.color } );
+		}
+	}
+
 	render() {
 		const {
 			attributes,

packages/block-library/src/pullquote/save.js

@@ -2,19 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import {
 	getColorClassName,
 	RichText,
-	getColorObjectByAttributeValues,
 } from '@wordpress/block-editor';
-import {
-	select,
-} from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -53,14 +49,6 @@ export default function save( { attributes } ) {
 		figureStyles = {
 			borderColor: customMainColor,
 		};
-	// If normal style and a named color are being used, we need to retrieve the color value to set the style,
-	// as there is no expectation that themes create classes that set border colors.
-	} else if ( mainColor ) {
-		const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
-		const colorObject = getColorObjectByAttributeValues( colors, mainColor );
-		figureStyles = {
-			borderColor: colorObject.color,
-		};
 	}
 
 	const blockquoteTextColorClass = getColorClassName( 'color', textColor );

packages/e2e-tests/fixtures/block-transforms.js

@@ -368,6 +368,13 @@ export const EXPECTED_TRANSFORMS = {
 			'Group',
 		],
 	},
+	'core__pullquote__main-color': {
+		originalBlock: 'Pullquote',
+		availableTransforms: [
+			'Quote',
+			'Group',
+		],
+	},
 	'core__pullquote__multi-paragraph': {
 		originalBlock: 'Pullquote',
 		availableTransforms: [

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.html

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"mainColor":"accent","textColor":"secondary"} -->
+<figure class="wp-block-pullquote" style="border-color:#cd2653"><blockquote class="has-text-color has-secondary-color"><p>pullquote</p></blockquote></figure>
+<!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.json

@@ -0,0 +1,15 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/pullquote",
+        "isValid": true,
+        "attributes": {
+            "value": "<p>pullquote</p>",
+            "citation": "",
+            "customMainColor": "#cd2653",
+            "textColor": "secondary"
+        },
+        "innerBlocks": [],
+        "originalContent": "<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.parsed.json

@@ -0,0 +1,23 @@
+[
+    {
+        "blockName": "core/pullquote",
+        "attrs": {
+            "mainColor": "accent",
+            "textColor": "secondary"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>\n",
+        "innerContent": [
+            "\n<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"customMainColor":"#cd2653","textColor":"secondary"} -->
+<figure class="wp-block-pullquote" style="border-color:#cd2653"><blockquote class="has-text-color has-secondary-color"><p>pullquote</p></blockquote></figure>
+<!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__main-color.html

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"customMainColor":"#2207d0","textColor":"subtle-background","className":"has-background is-style-default"} -->
+<figure class="wp-block-pullquote has-background is-style-default" style="border-color:#2207d0"><blockquote class="has-text-color has-subtle-background-color"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>
+<!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__main-color.json

@@ -0,0 +1,16 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/pullquote",
+        "isValid": true,
+        "attributes": {
+            "value": "<p>Pullquote custom color</p>",
+            "citation": "my citation",
+            "customMainColor": "#2207d0",
+            "textColor": "subtle-background",
+            "className": "has-background is-style-default"
+        },
+        "innerBlocks": [],
+        "originalContent": "<figure class=\"wp-block-pullquote has-background is-style-default\" style=\"border-color:#2207d0\"><blockquote class=\"has-text-color has-subtle-background-color\"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__main-color.parsed.json

@@ -0,0 +1,24 @@
+[
+    {
+        "blockName": "core/pullquote",
+        "attrs": {
+            "customMainColor": "#2207d0",
+            "textColor": "subtle-background",
+            "className": "has-background is-style-default"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<figure class=\"wp-block-pullquote has-background is-style-default\" style=\"border-color:#2207d0\"><blockquote class=\"has-text-color has-subtle-background-color\"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>\n",
+        "innerContent": [
+            "\n<figure class=\"wp-block-pullquote has-background is-style-default\" style=\"border-color:#2207d0\"><blockquote class=\"has-text-color has-subtle-background-color\"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__main-color.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"customMainColor":"#2207d0","textColor":"subtle-background","className":"has-background is-style-default"} -->
+<figure class="wp-block-pullquote has-background is-style-default" style="border-color:#2207d0"><blockquote class="has-text-color has-subtle-background-color"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>
+<!-- /wp:pullquote -->

packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap

@@ -432,6 +432,12 @@ exports[`Block transforms correctly transform block Pullquote in fixture core__p
 <!-- /wp:quote -->"
 `;
 
+exports[`Block transforms correctly transform block Pullquote in fixture core__pullquote__main-color into the Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>Pullquote custom color</p><cite>my citation</cite></blockquote>
+<!-- /wp:quote -->"
+`;
+
 exports[`Block transforms correctly transform block Pullquote in fixture core__pullquote__multi-paragraph into the Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p>Paragraph <strong>one</strong></p><p>Paragraph two</p><cite>by whomever</cite></blockquote>