Query: Remove color block supports

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

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,

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"

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,7 +31,151 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
+const colorSupportedInnerBlocks = [
+	'core/post-template',
+	'core/query-pagination',
+	'core/query-no-results',
+];
+
 const deprecated = [
+	// Version with color support prior to moving it to the PostTemplate block.
+	{
+		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: [],
+				},
+			},
+			tagName: {
+				type: 'string',
+				default: 'div',
+			},
+			displayLayout: {
+				type: 'object',
+				default: {
+					type: 'list',
+				},
+			},
+			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 ];
+			}
+
+			if ( style ) {
+				newAttributes.style = cleanEmptyObject( {
+					...style,
+					color: undefined,
+					elements: {
+						...style.elements,
+						link: undefined,
+					},
+				} );
+			}
+
+			// Apply the color styles and attributes to the inner PostTemplate,
+			// Query Pagination, and Query No Results blocks.
+			const updatedInnerBlocks = innerBlocks.map( ( innerBlock ) => {
+				if ( ! colorSupportedInnerBlocks.includes( innerBlock.name ) ) {
+					return innerBlock;
+				}
+
+				const hasStyles =
+					style?.color ||
+					style?.elements?.link ||
+					innerBlock.attributes.style;
+
+				const newStyles = hasStyles
+					? cleanEmptyObject( {
+							...innerBlock.attributes.style,
+							color: style?.color,
+							elements: style?.elements?.link
+								? { link: style?.elements?.link }
+								: undefined,
+					  } )
+					: undefined;
+
+				return createBlock(
+					innerBlock.name,
+					{
+						...innerBlock.attributes,
+						backgroundColor,
+						gradient,
+						textColor,
+						style: newStyles,
+					},
+					innerBlock.innerBlocks
+				);
+			} );
+
+			return [ newAttributes, updatedInnerBlocks ];
+		},
+		save( { attributes: { tagName: Tag = 'div' } } ) {
+			const blockProps = useBlockProps.save();
+			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+			return <Tag { ...innerBlocksProps } />;
+		},
+	},
 	// Version with `categoryIds and tagIds`.
 	{
 		attributes: {

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

test/integration/fixtures/blocks/core__query__deprecated-3.json

@@ -0,0 +1,151 @@
+[
+	{
+		"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/post-template",
+				"isValid": true,
+				"attributes": {
+					"textColor": "pale-cyan-blue",
+					"fontSize": "large",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"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",
+					"textColor": "pale-cyan-blue",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"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": {
+					"textColor": "pale-cyan-blue",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"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": []
+					}
+				]
+			}
+		]
+	}
+]