Pullquote: add block support

lib/experimental-default-theme.json

@@ -171,10 +171,10 @@
 				"units": [ "px", "em", "rem", "vh", "vw" ]
 			},
 			"border": {
-				"customColor": false,
-				"customRadius": false,
-				"customStyle": false,
-				"customWidth": false
+				"customColor": true,
+				"customRadius": true,
+				"customStyle": true,
+				"customWidth": true
 			}
 		}
 	}

packages/block-library/src/pullquote/block.json

@@ -15,17 +15,8 @@
 			"selector": "cite",
 			"default": ""
 		},
-		"mainColor": {
-			"type": "string"
-		},
-		"customMainColor": {
-			"type": "string"
-		},
 		"textColor": {
 			"type": "string"
-		},
-		"customTextColor": {
-			"type": "string"
 		}
 	},
 	"supports": {
@@ -35,7 +26,18 @@
 			"right",
 			"wide",
 			"full"
-		]
+		],
+		"color": {
+		  "gradients": true,
+		  "background": true,
+		  "link": true
+		},
+		"__experimentalBorder": {
+		  "color": true,
+		  "radius": true,
+		  "style": true,
+		  "width": true
+		}
 	},
 	"editorStyle": "wp-block-pullquote-editor",
 	"style": "wp-block-pullquote"

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

@@ -12,6 +12,7 @@ import {
 	getColorObjectByAttributeValues,
 	RichText,
 	store as blockEditorStore,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
 
@@ -57,7 +58,131 @@ function parseBorderColor( styleString ) {
 	}
 }
 
+// TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+		},
+		save( { attributes } ) {
+			const {
+				mainColor,
+				customMainColor,
+				customTextColor,
+				textColor,
+				value,
+				citation,
+				className,
+			} = 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,
+				};
+			}
+
+			const blockquoteTextColorClass = getColorClassName(
+				'color',
+				textColor
+			);
+			const blockquoteClasses =
+				( textColor || customTextColor ) &&
+				classnames( 'has-text-color', {
+					[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+				} );
+
+			const blockquoteStyles = blockquoteTextColorClass
+				? undefined
+				: { color: customTextColor };
+
+			return (
+				<figure
+					{ ...useBlockProps.save( {
+						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,
+			mainColor,
+			customMainColor,
+			customTextColor,
+			...attributes
+		} ) {
+			const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+			const style = {};
+			// Block supports: Set style.border.color if a deprecated block has a default style and a `customMainColor` attribute.
+			if ( ! isSolidColorStyle && customMainColor ) {
+				style.border = {
+					color: customMainColor,
+				};
+			}
+
+			// Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
+			if ( isSolidColorStyle && customMainColor ) {
+				style.color = {
+					background: customMainColor,
+				};
+			}
+
+			// Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
+			if ( customTextColor ) {
+				style.color = {
+					...style?.color,
+					text: customTextColor,
+				};
+			}
+
+			return {
+				className, // TODO: Do we need to filter out unnecessary classnames, e.g., `has-background` since block supports takes care of them?
+				backgroundColor: isSolidColorStyle ? mainColor : undefined,
+				borderColor: isSolidColorStyle ? undefined : mainColor,
+				style,
+				...attributes,
+				mainColor: undefined, // TODO: Do we need to do this?
+				customMainColor: undefined,
+				customTextColor: undefined,
+			};
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,
@@ -156,7 +281,7 @@ const deprecated = [
 			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.
+			// The custom color value is retrieved by parsing the figure styles.
 			if ( ! isSolidColorStyle && mainColor && figureStyle ) {
 				const borderColor = parseBorderColor( figureStyle );
 				if ( borderColor ) {