Use select element 's built in help instead

WordPress · Sep 9, 2021 · ba3d6ed · ba3d6ed
1 parent e745d13
commit ba3d6ed
Showing 1 changed file with 33 additions and 39 deletions.
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -10,9 +10,40 @@ import {
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { SelectControl, Notice } from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+function getHTMLElementMessage( element ) {
+	const messages = {
+		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.).'
+		),
+	};
+
+	const msg = messages[ element ];
+
+	if ( ! msg ) {
+		return '';
+	}
+
+	return msg;
+}
+
 function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -64,8 +95,8 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 						onChange={ ( value ) =>
 							setAttributes( { tagName: value } )
 						}
+						help={ getHTMLElementMessage( TagName ) }
 					/>
-					<HTMLElementCheckerMessage element={ TagName } />
 				</div>
 			</InspectorControls>
 
@@ -81,41 +112,4 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	);
 }
 
-function HTMLElementCheckerMessage( { element } ) {
-	const messages = {
-		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.).'
-		),
-	};
-
-	const msg = messages[ element ];
-
-	if ( ! msg ) {
-		return null;
-	}
-
-	return (
-		<div className="block-library-group-block-html-element-control__notice">
-			<Notice status="warning" isDismissible={ false }>
-				{ msg }
-			</Notice>
-		</div>
-	);
-}
-
 export default GroupEdit;