From a6a28094e5dfa46fb9cae68fbc2b69fdd0b08beb Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 13 Sep 2023 14:52:09 +0300
Subject: [PATCH] Code-quality improvements to the button block

* Add isLinkTag const to avoid code duplication

* Add `enum` to the tagName definition in `block.json`

* Add isButtonTag const to avoid code duplication
---
 packages/block-library/src/button/block.json | 1 +
 packages/block-library/src/button/edit.js    | 9 +++++----
 packages/block-library/src/button/save.js    | 9 +++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 28c72d4d22ab0..eec327b4ca48e 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -11,6 +11,7 @@
 	"attributes": {
 		"tagName": {
 			"type": "string",
+			"enum": [ "a", "button" ],
 			"default": "a"
 		},
 		"type": {
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index a6c9c035e5bc1..0c1892c6e4c70 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -139,6 +139,7 @@ function ButtonEdit( props ) {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
 	const opensInNewTab = linkTarget === '_blank';
+	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
 		event.preventDefault();
@@ -220,7 +221,7 @@ function ButtonEdit( props ) {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ ! isURLSet && 'a' === TagName && (
+				{ ! isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -229,7 +230,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && 'a' === TagName && (
+				{ isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -240,7 +241,7 @@ function ButtonEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			{ 'a' === TagName && isSelected && ( isEditingURL || isURLSet ) && (
+			{ isLinkTag && isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
 					placement="bottom"
 					onClose={ () => {
@@ -279,7 +280,7 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				{ 'a' === TagName && (
+				{ isLinkTag && (
 					<TextControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link rel' ) }
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 6403c0e5800e6..a7f286270f8fc 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -35,6 +35,7 @@ export default function save( { attributes, className } ) {
 	}
 
 	const TagName = tagName || 'a';
+	const isButtonTag = 'button' === TagName;
 	const buttonType = type || 'button';
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
@@ -70,14 +71,14 @@ export default function save( { attributes, className } ) {
 		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
 				tagName={ TagName }
-				type={ 'button' === TagName ? buttonType : null }
+				type={ isButtonTag ? buttonType : null }
 				className={ buttonClasses }
-				href={ 'button' === TagName ? null : url }
+				href={ isButtonTag ? null : url }
 				title={ title }
 				style={ buttonStyle }
 				value={ text }
-				target={ 'button' === TagName ? null : linkTarget }
-				rel={ 'button' === TagName ? null : rel }
+				target={ isButtonTag ? null : linkTarget }
+				rel={ isButtonTag ? null : rel }
 			/>
 		</div>
 	);