From ba3d6ed1c6302cb4d9548be51bb5c1ae3158bd02 Mon Sep 17 00:00:00 2001 From: Dave Smith <getdavemail@gmail.com> Date: Thu, 9 Sep 2021 17:02:48 +0100 Subject: [PATCH] Use select element 's built in help instead --- packages/block-library/src/group/edit.js | 72 +++++++++++------------- 1 file changed, 33 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 82293aca6421e..bf793cecf74d8 100644 --- 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;