From 698d39d42984eb62f08b0789b09626c0ec9a7912 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:09:46 +0800
Subject: [PATCH] Query: Remove color block supports
---
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 | 150 +++++++++++++++++
.../blocks/core__query__deprecated-3.html | 23 +++
.../blocks/core__query__deprecated-3.json | 151 ++++++++++++++++++
.../core__query__deprecated-3.parsed.json | 128 +++++++++++++++
.../core__query__deprecated-3.serialized.html | 23 +++
8 files changed, 485 insertions(+), 10 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 e3601a1f0a5093..d2d66fc0d12de3 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 380b6d55f71fad..bc9910b47d1dc5 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 cd09e22ee57f75..1974761962ec91 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 42ac3dc4f1c49d..fae25b485ab974 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,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
No results found.
+ +No results found.
\n", + "innerContent": [ "\nNo results found.
\n" ] + } + ], + "innerHTML": "\n\n", + "innerContent": [ "\n", null, "\n" ] + } + ], + "innerHTML": "\nNo results found.
+ +