[Block Library - Query]: Add semantic wrapper element (#31421)

* [Block Library - Query]: Add semantic wrapper element * update fixtures
WordPress · May 4, 2021 · 6dadae1 · 6dadae1
1 parent 88fef8d
commit 6dadae1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -19,6 +19,7 @@
 				"sticky": "",
 				"inherit": true
 			},
+			"tagName": "div",
 			"layout": {
 				"type": "list"
 			}