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
WordPress · Sep 13, 2023 · a6a2809 · a6a2809
1 parent 3e497b3
commit a6a2809
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
 	);