Add check for text before rendering button block (#29717)

WordPress · Mar 10, 2021 · 2304e70 · 2304e70
1 parent 587134c
commit 2304e70
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 12 deletions.
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
@@ -10,9 +10,15 @@ import classnames from 'classnames';
 import {
 	RichText,
 	getColorClassName,
+	useBlockProps,
 	__experimentalGetGradientClass,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import getColorAndStyleProps from './color-props';
+
 const migrateCustomColorsAndGradients = ( attributes ) => {
 	if (
 		! attributes.customTextColor &&
@@ -81,6 +87,100 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		supports: {
+			anchor: true,
+			align: true,
+			alignWide: false,
+			color: {
+				__experimentalSkipSerialization: true,
+			},
+			reusable: false,
+			__experimentalSelector: '.wp-block-button__link',
+		},
+		attributes: {
+			...blockAttributes,
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'target',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'rel',
+			},
+			placeholder: {
+				type: 'string',
+			},
+			borderRadius: {
+				type: 'number',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			gradient: {
+				type: 'string',
+			},
+			style: {
+				type: 'object',
+			},
+			width: {
+				type: 'number',
+			},
+		},
+		save( { attributes, className } ) {
+			const {
+				borderRadius,
+				linkTarget,
+				rel,
+				text,
+				title,
+				url,
+				width,
+			} = attributes;
+			const colorProps = getColorAndStyleProps( attributes );
+			const buttonClasses = classnames(
+				'wp-block-button__link',
+				colorProps.className,
+				{
+					'no-border-radius': borderRadius === 0,
+				}
+			);
+			const buttonStyle = {
+				borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+				...colorProps.style,
+			};
+
+			// The use of a `title` attribute here is soft-deprecated, but still applied
+			// if it had already been assigned, for the sake of backward-compatibility.
+			// A title will no longer be assigned for new or updated button block links.
+
+			const wrapperClasses = classnames( className, {
+				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			} );
+
+			return (
+				<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+					<RichText.Content
+						tagName="a"
+						className={ buttonClasses }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+						target={ linkTarget }
+						rel={ rel }
+					/>
+				</div>
+			);
+		},
+	},
 	{
 		supports: {
 			align: true,

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -45,17 +45,19 @@ export default function save( { attributes, className } ) {
 	} );
 
 	return (
-		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
-			<RichText.Content
-				tagName="a"
-				className={ buttonClasses }
-				href={ url }
-				title={ title }
-				style={ buttonStyle }
-				value={ text }
-				target={ linkTarget }
-				rel={ rel }
-			/>
-		</div>
+		text && (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ linkTarget }
+					rel={ rel }
+				/>
+			</div>
+		)
 	);
 }