diff --git a/packages/block-editor/src/components/html-element-control/index.js b/packages/block-editor/src/components/html-element-control/index.js new file mode 100644 index 00000000000000..3024301f19eaee --- /dev/null +++ b/packages/block-editor/src/components/html-element-control/index.js @@ -0,0 +1,109 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + SelectControl, + Notice, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import { htmlElementMessages } from './messages'; + +/** + * Renders a SelectControl for choosing HTML elements with validation + * to prevent duplicate
elements. + * + * @param {Object} props Component props. + * @param {string} props.tagName The current HTML tag name. + * @param {Function} props.onChange Function to call when the tag is changed. + * @param {string} props.clientId The client ID of the current block. + * @param {Array} props.options SelectControl options (optional). + * + * @return {Component} The HTML element select control with validation. + */ +export default function HTMLElementControl( { + tagName, + onChange, + clientId, + options = [ + { label: __( 'Default (
)' ), value: 'div' }, + { label: '
', value: 'header' }, + { label: '
', value: 'main' }, + { label: '
', value: 'section' }, + { label: '
', value: 'article' }, + { label: '