Move the "HTML element" control to a block editor component

packages/block-editor/README.md

@@ -473,6 +473,21 @@ _Returns_
 
 -   `string`: returns the cssUnit value in a simple px format.
 
+### HtmlElementControl
+
+Control for selecting the block tagname.
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.onChange_ `Function`: Callback to handle onChange.
+-   _props.options_ `Object`: Tagnames to be used in the select control.
+-   _props.value_ `string`: Selected tag value.
+
+_Returns_
+
+-   `WPElement`: Control for selecting the block tagname.
+
 ### InnerBlocks
 
 _Related_

packages/block-editor/src/components/html-element/README.MD

@@ -0,0 +1,68 @@
+# HtmlElementControl
+
+Allow users to select the HTML tag used by the block.
+
+## Usage
+
+```jsx
+import { HtmlElementControl } from '@wordpress/block-editor';
+
+const Example = () => (
+	<HtmlElementControl
+		value={ TagName }
+		onChange={ ( value ) =>
+			setAttributes( { tagName: value } )
+		}
+	/>
+);
+```
+
+## Props
+
+The component accepts the following props:
+
+### options
+
+An array of tag names and labels. Should be of the format:
+
+```js
+[
+	{ label: __( 'Default (<div>)' ), value: 'div' },
+	{ label: '<header>', value: 'header' },
+	...
+]
+```
+
+If not provided, the default selection of tags are shown.
+
+-   Type: `Array`
+-   Required: No
+
+Default:
+
+```js
+[
+	{ label: '<div>', value: 'div' },
+	{ label: '<header>', value: 'header' },
+	{ label: '<main>', value: 'main' },
+	{ label: '<section>', value: 'section' },
+	{ label: '<article>', value: 'article' },
+	{ label: '<aside>', value: 'aside' },
+	{ label: '<footer>', value: 'footer' },
+	{ label: '<nav>', value: 'nav' },
+];
+```
+
+### value
+
+The selected value from the select list.
+
+-   Type: `String`
+-   Required: Yes
+
+### onChange
+
+The function called when the tag changes.
+
+-   Type: `Function`
+-   Required: Yes

packages/block-editor/src/components/html-element/index.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+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.).'
+	),
+	nav: __(
+		'The <nav> element should represent a navigation element (e.g. a list of links).'
+	),
+};
+
+const DEFAULT_OPTIONS = [
+	{ label: '<div>', value: 'div' },
+	{ label: '<header>', value: 'header' },
+	{ label: '<main>', value: 'main' },
+	{ label: '<section>', value: 'section' },
+	{ label: '<article>', value: 'article' },
+	{ label: '<aside>', value: 'aside' },
+	{ label: '<footer>', value: 'footer' },
+	{ label: '<nav>', value: 'nav' },
+];
+
+/**
+ * Control for selecting the block tagname.
+ *
+ * @param {Object}   props          Component props.
+ * @param {Function} props.onChange Callback to handle onChange.
+ * @param {Object}   props.options  Tagnames to be used in the select control.
+ * @param {string}   props.value    Selected tag value.
+ *
+ * @return {WPElement}              Control for selecting the block tagname.
+ */
+
+export default function HtmlElementControl( {
+	onChange,
+	options = DEFAULT_OPTIONS,
+	value,
+} ) {
+	return (
+		<SelectControl
+			label={ __( 'HTML element' ) }
+			options={ options }
+			value={ value }
+			onChange={ onChange }
+			help={ htmlElementMessages[ value ] }
+		/>
+	);
+}

packages/block-editor/src/components/index.js

@@ -56,6 +56,7 @@ export {
 	ImageEditingProvider as __experimentalImageEditingProvider,
 } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
+export { default as HtmlElementControl } from './html-element';
 export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,

packages/block-library/src/comments/edit/comments-inspector-controls.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, HtmlElementControl } from '@wordpress/block-editor';
 
 export default function CommentsInspectorControls( {
 	attributes: { TagName },
@@ -12,8 +11,7 @@ export default function CommentsInspectorControls( {
 	return (
 		<InspectorControls>
 			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
+				<HtmlElementControl
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },

packages/block-library/src/group/edit.js

@@ -9,30 +9,8 @@ import {
 	useInnerBlocksProps,
 	useSetting,
 	store as blockEditorStore,
+	HtmlElementControl,
 } from '@wordpress/block-editor';
-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(
@@ -72,22 +50,11 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	return (
 		<>
 			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<header>', value: 'header' },
-						{ label: '<main>', value: 'main' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<article>', value: 'article' },
-						{ label: '<aside>', value: 'aside' },
-						{ label: '<footer>', value: 'footer' },
-					] }
+				<HtmlElementControl
 					value={ TagName }
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
-					help={ htmlElementMessages[ TagName ] }
 				/>
 			</InspectorControls>
 			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }

packages/block-library/src/query/edit/index.js

@@ -14,13 +14,9 @@ import {
 	useInnerBlocksProps,
 	__experimentalGetMatchingVariation as getMatchingVariation,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
+	HtmlElementControl,
 } from '@wordpress/block-editor';
-import {
-	Button,
-	SelectControl,
-	Placeholder,
-	Modal,
-} from '@wordpress/components';
+import { Button, Placeholder, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -116,8 +112,7 @@ export function QueryContent( {
 				/>
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
+				<HtmlElementControl
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<main>', value: 'main' },

packages/block-library/src/template-part/edit/advanced-controls.js

@@ -4,7 +4,7 @@
 import { useEntityProp } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, HtmlElementControl } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
 export function TemplatePartAdvancedControls( {
@@ -65,8 +65,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 				</>
 			) }
-			<SelectControl
-				label={ __( 'HTML element' ) }
+			<HtmlElementControl
 				options={ [
 					{
 						label: sprintf(