Query: Add migration of colors to v2 deprecation (#46522)

WordPress · Dec 14, 2022 · 1d62d0d · 1d62d0d
1 parent a3db417
commit 1d62d0d
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 94 deletions.
diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
@@ -31,6 +31,95 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
+const migrateColors = ( attributes, innerBlocks ) => {
+	// Remove color style attributes from the Query block.
+	const { style, backgroundColor, gradient, textColor, ...newAttributes } =
+		attributes;
+
+	const hasColorStyles =
+		backgroundColor ||
+		gradient ||
+		textColor ||
+		style?.color ||
+		style?.elements?.link;
+
+	// If the query block doesn't currently have any color styles,
+	// nothing needs migrating.
+	if ( ! hasColorStyles ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	// Clean color values from style attribute object.
+	if ( style ) {
+		newAttributes.style = cleanEmptyObject( {
+			...style,
+			color: undefined,
+			elements: {
+				...style.elements,
+				link: undefined,
+			},
+		} );
+	}
+
+	// If the inner blocks are already wrapped in a single group
+	// block, add the color support styles to that group block.
+	if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+		const groupBlock = innerBlocks[ 0 ];
+
+		// Create new styles for the group block.
+		const hasStyles =
+			style?.color ||
+			style?.elements?.link ||
+			groupBlock.attributes.style;
+
+		const newStyles = hasStyles
+			? cleanEmptyObject( {
+					...groupBlock.attributes.style,
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+			  } )
+			: undefined;
+
+		// Create a new Group block from the original.
+		const updatedGroupBlock = createBlock(
+			'core/group',
+			{
+				...groupBlock.attributes,
+				backgroundColor,
+				gradient,
+				textColor,
+				style: newStyles,
+			},
+			groupBlock.innerBlocks
+		);
+
+		return [ newAttributes, [ updatedGroupBlock ] ];
+	}
+
+	// When we don't have a single wrapping group block for the inner
+	// blocks, wrap the current inner blocks in a group applying the
+	// color styles to that.
+	const newGroupBlock = createBlock(
+		'core/group',
+		{
+			backgroundColor,
+			gradient,
+			textColor,
+			style: cleanEmptyObject( {
+				color: style?.color,
+				elements: style?.elements?.link
+					? { link: style?.elements?.link }
+					: undefined,
+			} ),
+		},
+		innerBlocks
+	);
+
+	return [ newAttributes, [ newGroupBlock ] ];
+};
+
 const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
 	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
 
@@ -127,7 +216,10 @@ const v2 = {
 	},
 	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
 		categoryIds || tagIds,
-	migrate: migrateToTaxQuery,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		return migrateColors( withTaxQuery, innerBlocks );
+	},
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
 		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
@@ -196,99 +288,7 @@ const v3 = {
 			style?.elements?.link
 		);
 	},
-	migrate: ( attributes, innerBlocks ) => {
-		// Remove color style attributes from the Query block.
-		const {
-			style,
-			backgroundColor,
-			gradient,
-			textColor,
-			...newAttributes
-		} = attributes;
-
-		const hasColorStyles =
-			backgroundColor ||
-			gradient ||
-			textColor ||
-			style?.color ||
-			style?.elements?.link;
-
-		// If the query block doesn't currently have any color styles,
-		// nothing needs migrating.
-		if ( ! hasColorStyles ) {
-			return [ attributes, innerBlocks ];
-		}
-
-		// Clean color values from style attribute object.
-		if ( style ) {
-			newAttributes.style = cleanEmptyObject( {
-				...style,
-				color: undefined,
-				elements: {
-					...style.elements,
-					link: undefined,
-				},
-			} );
-		}
-
-		// If the inner blocks are already wrapped in a single group
-		// block, add the color support styles to that group block.
-		if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
-			const groupBlock = innerBlocks[ 0 ];
-
-			// Create new styles for the group block.
-			const hasStyles =
-				style?.color ||
-				style?.elements?.link ||
-				groupBlock.attributes.style;
-
-			const newStyles = hasStyles
-				? cleanEmptyObject( {
-						...groupBlock.attributes.style,
-						color: style?.color,
-						elements: style?.elements?.link
-							? { link: style?.elements?.link }
-							: undefined,
-				  } )
-				: undefined;
-
-			// Create a new Group block from the original.
-			const updatedGroupBlock = createBlock(
-				'core/group',
-				{
-					...groupBlock.attributes,
-					backgroundColor,
-					gradient,
-					textColor,
-					style: newStyles,
-				},
-				groupBlock.innerBlocks
-			);
-
-			return [ newAttributes, [ updatedGroupBlock ] ];
-		}
-
-		// When we don't have a single wrapping group block for the inner
-		// blocks, wrap the current inner blocks in a group applying the
-		// color styles to that.
-		const newGroupBlock = createBlock(
-			'core/group',
-			{
-				backgroundColor,
-				gradient,
-				textColor,
-				style: cleanEmptyObject( {
-					color: style?.color,
-					elements: style?.elements?.link
-						? { link: style?.elements?.link }
-						: undefined,
-				} ),
-			},
-			innerBlocks
-		);
-
-		return [ newAttributes, [ newGroupBlock ] ];
-	},
+	migrate: migrateColors,
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
 		const innerBlocksProps = useInnerBlocksProps.save( blockProps );

diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
@@ -0,0 +1,6 @@
+<!-- wp:query {"queryId":19,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[3,5],"tagIds":[6],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}},"textColor":"pale-cyan-blue"} -->
+<div class="wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
@@ -0,0 +1,72 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 19,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false,
+				"taxQuery": {
+					"category": [ 3, 5 ],
+					"post_tag": [ 6 ]
+				}
+			},
+			"tagName": "div",
+			"displayLayout": {
+				"type": "list"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/group",
+				"isValid": true,
+				"attributes": {
+					"tagName": "div",
+					"textColor": "pale-cyan-blue",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"innerBlocks": [
+					{
+						"name": "core/post-template",
+						"isValid": true,
+						"attributes": {},
+						"innerBlocks": [
+							{
+								"name": "core/post-title",
+								"isValid": true,
+								"attributes": {
+									"level": 2,
+									"isLink": false,
+									"rel": "",
+									"linkTarget": "_self"
+								},
+								"innerBlocks": []
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json
@@ -0,0 +1,59 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 19,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"categoryIds": [ 3, 5 ],
+				"tagIds": [ 6 ],
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"style": {
+				"color": {
+					"background": "#284d5f"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|luminous-vivid-amber"
+						}
+					}
+				}
+			},
+			"textColor": "pale-cyan-blue"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/post-template",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/post-title",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n",
+				"innerContent": [ "\n", null, "\n" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
@@ -0,0 +1,7 @@
+<!-- wp:query {"queryId":19,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"category":[3,5],"post_tag":[6]}},"displayLayout":{"type":"list"}} -->
+<div class="wp-block-query"><!-- wp:group {"textColor":"pale-cyan-blue","style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}}} -->
+<div class="wp-block-group has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query -->