From 0dd1da54fa122fb06192ba29333b2ddfcb39e5e9 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Dec 2022 13:11:41 +0800
Subject: [PATCH] Query: Remove color block supports (#46147)

---
 docs/reference-guides/core-blocks.md          |   4 +-
 .../src/post-template/block.json              |   8 +
 packages/block-library/src/query/block.json   |   8 -
 .../block-library/src/query/deprecated.js     | 345 +++++++++++++-----
 .../blocks/core__query__deprecated-3.html     |  23 ++
 .../blocks/core__query__deprecated-3.json     | 133 +++++++
 .../core__query__deprecated-3.parsed.json     | 128 +++++++
 .../core__query__deprecated-3.serialized.html |  25 ++
 8 files changed, 577 insertions(+), 97 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.html
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e3601a1f0a509..d2d66fc0d12de 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -572,7 +572,7 @@ Contains the block elements used to render a post, like the title, date, feature
 
 -	**Name:** core/post-template
 -	**Category:** theme
--	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Post Terms
@@ -617,7 +617,7 @@ An advanced block that allows displaying post types based on different query par
 
 -	**Name:** core/query
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
+-	**Supports:** align (full, wide), ~~html~~
 -	**Attributes:** displayLayout, namespace, query, queryId, tagName
 
 ## No results
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index 380b6d55f71fa..bc9910b47d1dc 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -22,6 +22,14 @@
 		"__experimentalLayout": {
 			"allowEditing": false
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index cd09e22ee57f7..1974761962ec9 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -50,14 +50,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
 		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"
diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
index 42ac3dc4f1c49..d38ab3328559b 100644
--- a/packages/block-library/src/query/deprecated.js
+++ b/packages/block-library/src/query/deprecated.js
@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import cleanEmptyObject from '../utils/clean-empty-object';
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +31,271 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
-const deprecated = [
-	// Version with `categoryIds and tagIds`.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
+const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
+	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
+
+// Version with NO wrapper `div` element.
+const v1 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			tagName: {
-				type: 'string',
-				default: 'div',
+		},
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		},
+	},
+	supports: {
+		html: false,
+	},
+	migrate( attributes ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		return {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};
+
+// Version with `categoryIds and tagIds`.
+const v2 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
 		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			__experimentalLayout: true,
 		},
-		isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
-			categoryIds || tagIds,
-		migrate: migrateToTaxQuery,
-		save( { attributes: { tagName: Tag = 'div' } } ) {
-			const blockProps = useBlockProps.save();
-			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-			return <Tag { ...innerBlocksProps } />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
 		},
+		__experimentalLayout: true,
 	},
-	// Version with NO wrapper `div` element.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
-			},
-			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate: migrateToTaxQuery,
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+// Version with color support prior to moving it to the PostTemplate block.
+const v3 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
 			},
 		},
-		supports: {
-			html: false,
+		tagName: {
+			type: 'string',
+			default: 'div',
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		save() {
-			return <InnerBlocks.Content />;
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		__experimentalLayout: true,
 	},
-];
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			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 ] ];
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.html b/test/integration/fixtures/blocks/core__query__deprecated-3.html
new file mode 100644
index 0000000000000..9da20c78184e2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.html
@@ -0,0 +1,23 @@
+<!-- wp:query {"queryId":3,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide","style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}},"textColor":"pale-cyan-blue"} -->
+<div class="wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template {"fontSize":"large"} -->
+<!-- wp:post-title /-->
+
+<!-- wp:post-date /-->
+
+<!-- wp:post-excerpt /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p>No results found.</p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json
new file mode 100644
index 0000000000000..bb1478cd676f2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -0,0 +1,133 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 3,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"tagName": "div",
+			"displayLayout": {
+				"type": "flex",
+				"columns": 3
+			},
+			"align": "wide"
+		},
+		"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": {
+							"fontSize": "large"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/post-title",
+								"isValid": true,
+								"attributes": {
+									"level": 2,
+									"isLink": false,
+									"rel": "",
+									"linkTarget": "_self"
+								},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/post-date",
+								"isValid": true,
+								"attributes": {
+									"isLink": false,
+									"displayType": "date"
+								},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/post-excerpt",
+								"isValid": true,
+								"attributes": {
+									"showMoreOnNewLine": true
+								},
+								"innerBlocks": []
+							}
+						]
+					},
+					{
+						"name": "core/query-pagination",
+						"isValid": true,
+						"attributes": {
+							"paginationArrow": "none"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/query-pagination-previous",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/query-pagination-numbers",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/query-pagination-next",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							}
+						]
+					},
+					{
+						"name": "core/query-no-results",
+						"isValid": true,
+						"attributes": {},
+						"innerBlocks": [
+							{
+								"name": "core/paragraph",
+								"isValid": true,
+								"attributes": {
+									"content": "No results found.",
+									"dropCap": false,
+									"placeholder": "Add text or blocks that will display when a query returns no results."
+								},
+								"innerBlocks": []
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
new file mode 100644
index 0000000000000..a26e573bac314
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
@@ -0,0 +1,128 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 3,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"displayLayout": {
+				"type": "flex",
+				"columns": 3
+			},
+			"align": "wide",
+			"style": {
+				"color": {
+					"background": "#284d5f"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|luminous-vivid-amber"
+						}
+					}
+				}
+			},
+			"textColor": "pale-cyan-blue"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/post-template",
+				"attrs": {
+					"fontSize": "large"
+				},
+				"innerBlocks": [
+					{
+						"blockName": "core/post-title",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/post-date",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/post-excerpt",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n\n\n\n\n",
+				"innerContent": [ "\n", null, "\n\n", null, "\n\n", null, "\n" ]
+			},
+			{
+				"blockName": "core/query-pagination",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/query-pagination-previous",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/query-pagination-numbers",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/query-pagination-next",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n\n\n\n\n",
+				"innerContent": [ "\n", null, "\n\n", null, "\n\n", null, "\n" ]
+			},
+			{
+				"blockName": "core/query-no-results",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {
+							"placeholder": "Add text or blocks that will display when a query returns no results."
+						},
+						"innerBlocks": [],
+						"innerHTML": "\n<p>No results found.</p>\n",
+						"innerContent": [ "\n<p>No results found.</p>\n" ]
+					}
+				],
+				"innerHTML": "\n\n",
+				"innerContent": [ "\n", null, "\n" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">\n\n\n\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">",
+			null,
+			"\n\n",
+			null,
+			"\n\n",
+			null,
+			"</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
new file mode 100644
index 0000000000000..edbf5b1a0557b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:query {"queryId":3,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
+<div class="wp-block-query alignwide"><!-- 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 {"fontSize":"large"} -->
+<!-- wp:post-title /-->
+
+<!-- wp:post-date /-->
+
+<!-- wp:post-excerpt /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p>No results found.</p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query -->