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

@@ -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 } /> }