[Enhancement] Introduce Link Target in Button Block

packages/block-editor/src/components/url-input/index.js

@@ -223,17 +223,27 @@ class URLInput extends Component {
 		this.inputRef.current.focus();
 	}
 
+	static getDerivedStateFromProps( { showSuggestionsOverride }, { showSuggestions } ) {
+		return {
+			showSuggestions: showSuggestionsOverride !== undefined ? showSuggestionsOverride : showSuggestions,
+		};
+	}
+
 	render() {
-		const { value = '', autoFocus = true, instanceId, className } = this.props;
+		const { value = '', autoFocus = true, instanceId, className, id, isFullWidth, hasBorder } = this.props;
 		const { showSuggestions, suggestions, selectedSuggestion, loading } = this.state;
 
 		const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;
 		const suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${ instanceId }`;
 
 		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
-			<div className={ classnames( 'editor-url-input block-editor-url-input', className ) }>
+			<div className={ classnames( 'editor-url-input block-editor-url-input', className, {
+				'is-full-width': isFullWidth,
+				'has-border': hasBorder,
+			} ) }>
 				<input
+					id={ id }
 					autoFocus={ autoFocus }
 					type="text"
 					aria-label={ __( 'URL' ) }
@@ -254,9 +264,17 @@ class URLInput extends Component {
 				{ ( loading ) && <Spinner /> }
 
 				{ showSuggestions && !! suggestions.length &&
-					<Popover position="bottom" noArrow focusOnMount={ false }>
+					<Popover
+						position="bottom"
+						noArrow
+						focusOnMount={ false }
+					>
 						<div
-							className="editor-url-input__suggestions block-editor-url-input__suggestions"
+							className={ classnames(
+								'editor-url-input__suggestions',
+								'block-editor-url-input__suggestions',
+								`${ className }__suggestions`
+							) }
 							id={ suggestionsListboxId }
 							ref={ this.autocompleteRef }
 							role="listbox"

packages/block-editor/src/components/url-input/style.scss

@@ -31,6 +31,23 @@ $input-size: 300px;
 		}
 	}
 
+	&.has-border input[type="text"] {
+		border: 1px solid $dark-gray-500;
+		border-radius: 4px;
+	}
+
+	&.is-full-width {
+		width: 100%;
+
+		input[type="text"] {
+			width: 100%;
+		}
+
+		&__suggestions {
+			width: 100%;
+		}
+	}
+
 	.components-spinner {
 		position: absolute;
 		right: $input-padding;

packages/block-library/src/button/block.json

@@ -30,6 +30,18 @@
 		},
 		"customTextColor": {
 			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "target"
+		},
+		"rel": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "rel"
 		}
 	}
 }

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

@@ -2,11 +2,15 @@
  * External dependencies
  */
 import { omit } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	getColorClassName,
+} from '@wordpress/block-editor';
 
 const colorsMigration = ( attributes ) => {
 	return omit( {
@@ -37,6 +41,67 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			align: {
+				type: 'string',
+				default: 'none',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				url,
+				text,
+				title,
+				backgroundColor,
+				textColor,
+				customBackgroundColor,
+				customTextColor,
+			} = attributes;
+
+			const textClass = getColorClassName( 'color', textColor );
+			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+			const buttonClasses = classnames( 'wp-block-button__link', {
+				'has-text-color': textColor || customTextColor,
+				[ textClass ]: textClass,
+				'has-background': backgroundColor || customBackgroundColor,
+				[ backgroundClass ]: backgroundClass,
+			} );
+
+			const buttonStyle = {
+				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+				color: textClass ? undefined : customTextColor,
+			};
+
+			return (
+				<div>
+					<RichText.Content
+						tagName="a"
+						className={ buttonClasses }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+					/>
+				</div>
+			);
+		},
+		migrate: colorsMigration,
+	},
 	{
 		attributes: {
 			...blockAttributes,