From 98f1181bd167ac096b855f23053da2f44b7df1bf Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 10 Sep 2021 15:31:53 +0100
Subject: [PATCH] Add information about selected element types for Group Block
 (#33976)

* Add messages about element types

* Use select element 's built in help instead

* Refactor to use object and remove unwanted elements and styles

* Remove unwanted newline
---
 packages/block-library/src/group/edit.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index f30a7482bc3d8..f4d1659fe9234 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -13,6 +13,27 @@ import {
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const htmlElementMessages = {
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only. '
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+	article: __(
+		'The <article> element should represent a self contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+};
+
 function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -63,6 +84,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ TagName ] }
 				/>
 			</InspectorControls>
 			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }