Add wrapper in Query block and align support (#30804)

* Add wrapper in Query block * fix fixtures * remove unneeded await * update GB Query patterns
WordPress · Apr 28, 2021 · 2bf257a · 2bf257a
1 parent e54afb8
commit 2bf257a
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 14 deletions.
diff --git a/lib/block-patterns.php b/lib/block-patterns.php
@@ -16,6 +16,7 @@
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'query' ),
 		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
+						<div class="wp-block-query">
 						<!-- wp:query-loop -->
 						<!-- wp:post-title {"isLink":true} /-->
 						<!-- wp:post-featured-image  {"isLink":true,"align":"wide"} /-->
@@ -25,6 +26,7 @@
 						<!-- /wp:separator -->
 						<!-- wp:post-date /-->
 						<!-- /wp:query-loop -->
+						</div>
 						<!-- /wp:query -->',
 	)
 );
@@ -36,6 +38,7 @@
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'query' ),
 		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
+						<div class="wp-block-query">
 						<!-- wp:query-loop -->
 						<!-- wp:columns {"align":"wide"} -->
 						<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
@@ -47,6 +50,7 @@
 						<!-- /wp:column --></div>
 						<!-- /wp:columns -->
 						<!-- /wp:query-loop -->
+						</div>
 						<!-- /wp:query -->',
 	)
 );
@@ -58,6 +62,7 @@
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'query' ),
 		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
+						<div class="wp-block-query">
 						<!-- wp:query-loop -->
 						<!-- wp:columns {"verticalAlignment":"center"} -->
 						<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
@@ -68,6 +73,7 @@
 						<!-- /wp:column --></div>
 						<!-- /wp:columns -->
 						<!-- /wp:query-loop -->
+						</div>
 						<!-- /wp:query -->',
 	)
 );
@@ -79,13 +85,15 @@
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'query' ),
 		'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":true},"layout":{"type":"flex","columns":3}} -->
+						<div class="wp-block-query">
 						<!-- wp:query-loop -->
 						<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
 						<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
 						<!-- wp:post-excerpt {"wordCount":20} /-->
 						<!-- wp:post-date /--></div>
 						<!-- /wp:group -->
 						<!-- /wp:query-loop -->
+						</div>
 						<!-- /wp:query -->',
 	)
 );
@@ -98,7 +106,7 @@
 		'categories' => array( 'query' ),
 		'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
 						<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
-						<!-- wp:query-loop -->
+						<div class="wp-block-query"><!-- wp:query-loop -->
 						<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
 						<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
 						<!-- /wp:separator -->
@@ -112,7 +120,7 @@
 						<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>
 						<!-- /wp:column --></div>
 						<!-- /wp:columns -->
-						<!-- /wp:query-loop -->
+						<!-- /wp:query-loop --></div>
 						<!-- /wp:query --></div>
 						<!-- /wp:group -->',
 	)
@@ -128,26 +136,26 @@
 						<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
 						<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
 						<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"layout":{"type":"list"}} -->
-						<!-- wp:query-loop -->
+						<div class="wp-block-query"><!-- wp:query-loop -->
 						<!-- wp:post-featured-image /-->
 						<!-- wp:post-title /-->
 						<!-- wp:post-date /-->
 						<!-- wp:spacer {"height":200} -->
 						<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
 						<!-- /wp:spacer -->
-						<!-- /wp:query-loop -->
+						<!-- /wp:query-loop --></div>
 						<!-- /wp:query --></div>
 						<!-- /wp:column -->
 						<!-- wp:column {"width":"50%"} -->
 						<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"layout":{"type":"list"}} -->
-						<!-- wp:query-loop -->
+						<div class="wp-block-query"><!-- wp:query-loop -->
 						<!-- wp:spacer {"height":200} -->
 						<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
 						<!-- /wp:spacer -->
 						<!-- wp:post-featured-image /-->
 						<!-- wp:post-title /-->
 						<!-- wp:post-date /-->
-						<!-- /wp:query-loop -->
+						<!-- /wp:query-loop --></div>
 						<!-- /wp:query --></div>
 						<!-- /wp:column --></div>
 						<!-- /wp:columns --></main>

diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json
@@ -4,6 +4,7 @@
 	"category": "design",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
+		"align": true,
 		"reusable": false,
 		"html": false
 	},

diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
@@ -37,6 +37,7 @@
 		"layout": "layout"
 	},
 	"supports": {
+		"align": [ "wide", "full" ],
 		"html": false
 	},
 	"editorStyle": "wp-block-query-editor"

diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const deprecated = [
+	// 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',
+				},
+			},
+		},
+		supports: {
+			html: false,
+		},
+		save() {
+			return <InnerBlocks.Content />;
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/query/index.js b/packages/block-library/src/query/index.js
@@ -11,6 +11,7 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import variations from './variations';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -22,4 +23,5 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	deprecated,
 };
diff --git a/packages/block-library/src/query/save.js b/packages/block-library/src/query/save.js
@@ -1,8 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function QuerySave() {
-	return <InnerBlocks.Content />;
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
 }
diff --git a/packages/e2e-tests/experimental-features.js b/packages/e2e-tests/experimental-features.js
@@ -131,7 +131,7 @@ export const siteEditor = {
 	},
 
 	async getEditedPostContent() {
-		return await page.evaluate( async () => {
+		return page.evaluate( async () => {
 			const postId = window.wp.data
 				.select( 'core/edit-site' )
 				.getEditedPostId();

diff --git a/packages/e2e-tests/fixtures/blocks/core__query.html b/packages/e2e-tests/fixtures/blocks/core__query.html
@@ -1 +1,3 @@
-<!-- wp:query /-->
+<!-- wp:query -->
+<div class="wp-block-query"></div>
+<!-- /wp:query -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json
@@ -24,6 +24,6 @@
 			}
 		},
 		"innerBlocks": [],
-		"originalContent": ""
+		"originalContent": "<div class=\"wp-block-query\"></div>"
 	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query.parsed.json
@@ -3,7 +3,9 @@
 		"blockName": "core/query",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "",
-		"innerContent": []
+		"innerHTML": "\n<div class=\"wp-block-query\"></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query\"></div>\n"
+		]
 	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query.serialized.html
@@ -1 +1,3 @@
-<!-- wp:query /-->
+<!-- wp:query -->
+<div class="wp-block-query"></div>
+<!-- /wp:query -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.html b/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.html
@@ -0,0 +1 @@
+<!-- wp:query /-->
diff --git a/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.json b/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.json
@@ -0,0 +1,29 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"query": {
+				"perPage": null,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"categoryIds": [],
+				"tagIds": [],
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": true
+			},
+			"layout": {
+				"type": "list"
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.parsed.json
@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:query {"query":{"perPage":null,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"type":"list"}} -->
+<div class="wp-block-query"></div>
+<!-- /wp:query -->