feat: added HTML element messages and integrate HTMLElementControl for button block (WordPress#70139)

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: amberhinds <alh0319@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

Author: 6 people

packages/block-editor/src/components/html-element-control/messages.js

@@ -7,12 +7,18 @@ import { __ } from '@wordpress/i18n';
  * Messages providing helpful descriptions for HTML elements.
  */
 export const htmlElementMessages = {
+	a: __(
+		'The <a> element should be used for links that navigate to a different page or to a different section within the same page.'
+	),
 	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."
 	),
+	button: __(
+		'The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'
+	),
 	div: __(
 		'The <div> element should only be used if the block is a design element with no semantic meaning.'
 	),

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

@@ -10,6 +10,7 @@ import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -47,6 +48,7 @@ import {
 	useBlockEditingMode,
 	getTypographyClassesAndStyles as useTypographyProps,
 	useSettings,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -59,6 +61,8 @@ import {
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
 	{
@@ -456,6 +460,17 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
+					options={ [
+						{ label: __( 'Default (<a>)' ), value: 'a' },
+						{ label: '<button>', value: 'button' },
+					] }
+				/>
 				{ isLinkTag && (
 					<TextControl
 						__next40pxDefaultSize