Allow using a button element for button blocks (#54206)

* Allow using a button element for button blocks * update tests / fixtures * Add "type" attribute for buttons
WordPress · Sep 7, 2023 · b7fba01 · b7fba01 · github-actions · Sep 7, 2023
1 parent 1ab8aa6
commit b7fba01
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 19 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -53,7 +53,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu
 -	**Category:** design
 -	**Parent:** core/buttons
 -	**Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
--	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width
+-	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, tagName, text, textAlign, textColor, title, type, url, width
 
 ## Buttons
 

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -9,6 +9,14 @@
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"attributes": {
+		"tagName": {
+			"type": "string",
+			"default": "a"
+		},
+		"type": {
+			"type": "string",
+			"default": "button"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -22,14 +30,14 @@
 		"title": {
 			"type": "string",
 			"source": "attribute",
-			"selector": "a",
+			"selector": "a,button",
 			"attribute": "title",
 			"__experimentalRole": "content"
 		},
 		"text": {
 			"type": "string",
 			"source": "html",
-			"selector": "a",
+			"selector": "a,button",
 			"__experimentalRole": "content"
 		},
 		"linkTarget": {

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -78,8 +78,19 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
-		attributes;
+	const {
+		tagName,
+		textAlign,
+		linkTarget,
+		placeholder,
+		rel,
+		style,
+		text,
+		url,
+		width,
+	} = attributes;
+
+	const TagName = tagName || 'a';
 
 	function onToggleOpenInNewTab( value ) {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -209,7 +220,7 @@ function ButtonEdit( props ) {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ ! isURLSet && (
+				{ ! isURLSet && 'a' === TagName && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -218,7 +229,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && (
+				{ isURLSet && 'a' === TagName && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -229,7 +240,7 @@ function ButtonEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			{ isSelected && ( isEditingURL || isURLSet ) && (
+			{ 'a' === TagName && isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
 					placement="bottom"
 					onClose={ () => {
@@ -268,12 +279,16 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
-					value={ rel || '' }
-					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
-				/>
+				{ 'a' === TagName && (
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ ( newRel ) =>
+							setAttributes( { rel: newRel } )
+						}
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -17,6 +17,8 @@ import {
 
 export default function save( { attributes, className } ) {
 	const {
+		tagName,
+		type,
 		textAlign,
 		fontSize,
 		linkTarget,
@@ -32,6 +34,8 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
+	const TagName = tagName || 'a';
+	const buttonType = type || 'button';
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
@@ -65,14 +69,15 @@ export default function save( { attributes, className } ) {
 	return (
 		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
-				tagName="a"
+				tagName={ TagName }
+				type={ 'button' === TagName ? buttonType : null }
 				className={ buttonClasses }
-				href={ url }
+				href={ 'button' === TagName ? null : url }
 				title={ title }
 				style={ buttonStyle }
 				value={ text }
-				target={ linkTarget }
-				rel={ rel }
+				target={ 'button' === TagName ? null : linkTarget }
+				rel={ 'button' === TagName ? null : rel }
 			/>
 		</div>
 	);

diff --git a/test/integration/fixtures/blocks/core__button__squared.json b/test/integration/fixtures/blocks/core__button__squared.json
@@ -3,6 +3,8 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
+			"tagName": "a",
+			"type": "button",
 			"text": "My button",
 			"style": {
 				"border": {

diff --git a/test/integration/fixtures/blocks/core__buttons.html b/test/integration/fixtures/blocks/core__buttons.html
@@ -7,5 +7,13 @@
 	<!-- wp:button -->
 	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
 	<!-- /wp:button -->
+
+	<!-- wp:button {"tagName":"a"} -->
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
+	<!-- /wp:button -->
+
+	<!-- wp:button {"tagName":"button"} -->
+	<div class="wp-block-button"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
+	<!-- /wp:button -->
 </div>
 <!-- /wp:buttons -->
diff --git a/test/integration/fixtures/blocks/core__buttons.json b/test/integration/fixtures/blocks/core__buttons.json
@@ -14,6 +14,8 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
+					"tagName": "a",
+					"type": "button",
 					"text": "My button 1"
 				},
 				"innerBlocks": []
@@ -22,9 +24,31 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
+					"tagName": "a",
+					"type": "button",
 					"text": "My button 2"
 				},
 				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "a",
+					"type": "button",
+					"text": "My button 3"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "button",
+					"type": "button",
+					"text": "My button 4"
+				},
+				"innerBlocks": []
 			}
 		]
 	}

diff --git a/test/integration/fixtures/blocks/core__buttons.parsed.json b/test/integration/fixtures/blocks/core__buttons.parsed.json
@@ -26,14 +26,40 @@
 				"innerContent": [
 					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 2</a></div>\n\t"
 				]
+			},
+			{
+				"blockName": "core/button",
+				"attrs": {
+					"tagName": "a"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 3</a></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 3</a></div>\n\t"
+				]
+			},
+			{
+				"blockName": "core/button",
+				"attrs": {
+					"tagName": "button"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><button type=\"button\" class=\"wp-block-button__link wp-element-button\">My button 4</button></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><button type=\"button\" class=\"wp-block-button__link wp-element-button\">My button 4</button></div>\n\t"
+				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-buttons alignwide\">\n\t\n\n\t\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-buttons alignwide\">\n\t\n\n\t\n\n\t\n\n\t\n</div>\n",
 		"innerContent": [
 			"\n<div class=\"wp-block-buttons alignwide\">\n\t",
 			null,
 			"\n\n\t",
 			null,
+			"\n\n\t",
+			null,
+			"\n\n\t",
+			null,
 			"\n</div>\n"
 		]
 	}

diff --git a/test/integration/fixtures/blocks/core__buttons.serialized.html b/test/integration/fixtures/blocks/core__buttons.serialized.html
@@ -5,5 +5,13 @@
 
 <!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"tagName":"button"} -->
+<div class="wp-block-button"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->