From 1d62d0ddfb1403b71ca28cabdf9d818f6c4b990f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 14 Dec 2022 20:21:44 +0800
Subject: [PATCH] Query: Add migration of colors to v2 deprecation (#46522)
---
.../block-library/src/query/deprecated.js | 188 +++++++++---------
...core__query__deprecated-2-with-colors.html | 6 +
...core__query__deprecated-2-with-colors.json | 72 +++++++
...uery__deprecated-2-with-colors.parsed.json | 59 ++++++
...__deprecated-2-with-colors.serialized.html | 7 +
5 files changed, 238 insertions(+), 94 deletions(-)
create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json
create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
index d38ab3328559be..b23455d50489b5 100644
--- 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
new file mode 100644
index 00000000000000..e85e61b5d7b144
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
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
new file mode 100644
index 00000000000000..82bc41a40fb1b5
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..73e4f9b6c18f4b
--- /dev/null
+++ 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\n
\n",
+ "innerContent": [
+ "\n",
+ null,
+ "\n
\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
new file mode 100644
index 00000000000000..f86b4f26ecc1d1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
@@ -0,0 +1,7 @@
+
+
+