From 6dadae1da53ff900c1a744dbfdb0edbb5dd192a5 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 4 May 2021 09:47:06 +0300
Subject: [PATCH] [Block Library - Query]: Add semantic wrapper element
 (#31421)

* [Block Library - Query]: Add semantic wrapper element

* update fixtures
---
 packages/block-library/src/query/block.json   |  4 ++++
 .../block-library/src/query/edit/index.js     | 24 ++++++++++++++++---
 packages/block-library/src/query/save.js      |  6 ++---
 .../fixtures/blocks/core__query.json          |  1 +
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index 6b063a41c16198..90536472ac5b91 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -27,6 +27,10 @@
 				"inherit": true
 			}
 		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		},
 		"layout": {
 			"type": "object",
 			"default": {
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index c64acc48b2f41c..3771625ea20987 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -6,11 +6,14 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import {
 	BlockControls,
+	InspectorAdvancedControls,
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -22,7 +25,7 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 
 const TEMPLATE = [ [ 'core/query-loop' ] ];
 export function QueryContent( { attributes, setAttributes } ) {
-	const { queryId, query, layout } = attributes;
+	const { queryId, query, layout, tagName: TagName = 'div' } = attributes;
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -81,9 +84,24 @@ export function QueryContent( { attributes, setAttributes } ) {
 					setLayout={ updateLayout }
 				/>
 			</BlockControls>
-			<div { ...blockProps }>
+			<InspectorAdvancedControls>
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorAdvancedControls>
+			<TagName { ...blockProps }>
 				<div { ...innerBlocksProps } />
-			</div>
+			</TagName>
 		</>
 	);
 }
diff --git a/packages/block-library/src/query/save.js b/packages/block-library/src/query/save.js
index 4705f671580c5a..bf172ce2a40b4d 100644
--- a/packages/block-library/src/query/save.js
+++ b/packages/block-library/src/query/save.js
@@ -3,10 +3,10 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function QuerySave() {
+export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
 	return (
-		<div { ...useBlockProps.save() }>
+		<Tag { ...useBlockProps.save() }>
 			<InnerBlocks.Content />
-		</div>
+		</Tag>
 	);
 }
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json
index 91150a3fdba46b..c16fb97abab18e 100644
--- a/packages/e2e-tests/fixtures/blocks/core__query.json
+++ b/packages/e2e-tests/fixtures/blocks/core__query.json
@@ -19,6 +19,7 @@
 				"sticky": "",
 				"inherit": true
 			},
+			"tagName": "div",
 			"layout": {
 				"type": "list"
 			}