From a85f7cf0693d1e4735185e0fd1c0b57818348667 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:01:06 +0800
Subject: [PATCH 1/8] Rename button block attributes from url and text to href
 and content

---
 docs/reference-guides/core-blocks.md          |   2 +-
 packages/block-library/src/button/block.json  |   4 +-
 .../block-library/src/button/deprecated.js    | 208 ++++++++++++++++++
 packages/block-library/src/button/edit.js     |  56 ++---
 .../block-library/src/button/edit.native.js   |  28 +--
 .../src/button/get-updated-link-attributes.js |   6 +-
 packages/block-library/src/button/index.js    |   6 +-
 packages/block-library/src/button/save.js     |   8 +-
 .../test/get-updated-link-attributes.js       |  28 +--
 9 files changed, 278 insertions(+), 68 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 93ab0a031800f0..9a29fa1b4a6bbd 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -52,7 +52,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), interactivity (clientNavigation), shadow (), spacing (padding), splitting, typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
--	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, tagName, text, textAlign, textColor, title, type, url, width
+-	**Attributes:** backgroundColor, content, gradient, href, linkTarget, placeholder, rel, tagName, textAlign, textColor, title, type, width
 
 ## Buttons
 
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 740f3e50f84eee..6f11bd1b58b29a 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -21,7 +21,7 @@
 		"textAlign": {
 			"type": "string"
 		},
-		"url": {
+		"href": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
@@ -35,7 +35,7 @@
 			"attribute": "title",
 			"__experimentalRole": "content"
 		},
-		"text": {
+		"content": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "a,button",
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 8ab83e1b09518f..ea7478a1ef3a5d 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -14,6 +14,8 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 
@@ -132,6 +134,211 @@ const blockAttributes = {
 	},
 };
 
+// v12: Some attributes were renamed.
+// - `url` attribute was renamed to `href`.
+// - `title` attribute was renamed to `content`.
+const v12 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			enum: [ 'a', 'button' ],
+			default: 'a',
+		},
+		type: {
+			type: 'string',
+			default: 'button',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a,button',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		content: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'a,button',
+			__experimentalRole: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+			__experimentalRole: 'content',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		splitting: true,
+		align: false,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button .wp-block-button__link',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	migrate( attributes ) {
+		// `url` has changed name to `href`.
+		if ( attributes.url ) {
+			attributes.href = attributes.url;
+			delete attributes.url;
+		}
+
+		// `text` has changed name to `content`.
+		if ( attributes.text ) {
+			attributes.content = attributes.text;
+			delete attributes.text;
+		}
+
+		return attributes;
+	},
+	save( { attributes, className } ) {
+		const {
+			tagName,
+			type,
+			textAlign,
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		const TagName = tagName || 'a';
+		const isButtonTag = 'button' === TagName;
+		const buttonType = type || 'button';
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+		const buttonClasses = clsx(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				[ `has-text-align-${ textAlign }` ]: textAlign,
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			},
+			__experimentalGetElementClassName( 'button' )
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+			...shadowProps.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 = clsx( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName={ TagName }
+					type={ isButtonTag ? buttonType : null }
+					className={ buttonClasses }
+					href={ isButtonTag ? null : url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ isButtonTag ? null : linkTarget }
+					rel={ isButtonTag ? null : rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v11 = {
 	attributes: {
 		url: {
@@ -399,6 +606,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v12,
 	v11,
 	v10,
 	{
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index e5bd5e6b5f0643..318b25936c3c07 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -165,8 +165,8 @@ function ButtonEdit( props ) {
 		placeholder,
 		rel,
 		style,
-		text,
-		url,
+		content,
+		href,
 		width,
 		metadata,
 	} = attributes;
@@ -198,43 +198,43 @@ function ButtonEdit( props ) {
 	} );
 	const blockEditingMode = useBlockEditingMode();
 
-	const [ isEditingURL, setIsEditingURL ] = useState( false );
-	const isURLSet = !! url;
+	const [ isEditingHref, setIsEditingHref ] = useState( false );
+	const isHrefSet = !! href;
 	const opensInNewTab = linkTarget === NEW_TAB_TARGET;
 	const nofollow = !! rel?.includes( NOFOLLOW_REL );
 	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
 		event.preventDefault();
-		setIsEditingURL( true );
+		setIsEditingHref( true );
 	}
 
 	function unlink() {
 		setAttributes( {
-			url: undefined,
+			href: undefined,
 			linkTarget: undefined,
 			rel: undefined,
 		} );
-		setIsEditingURL( false );
+		setIsEditingHref( false );
 	}
 
 	useEffect( () => {
 		if ( ! isSelected ) {
-			setIsEditingURL( false );
+			setIsEditingHref( false );
 		}
 	}, [ isSelected ] );
 
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
 	const linkValue = useMemo(
-		() => ( { url, opensInNewTab, nofollow } ),
-		[ url, opensInNewTab, nofollow ]
+		() => ( { href, opensInNewTab, nofollow } ),
+		[ href, opensInNewTab, nofollow ]
 	);
 
-	const useEnterRef = useEnter( { content: text, clientId } );
+	const useEnterRef = useEnter( { content, clientId } );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
-	const { lockUrlControls = false } = useSelect(
+	const { lockHrefControls = false } = useSelect(
 		( select ) => {
 			if ( ! isSelected ) {
 				return {};
@@ -242,19 +242,19 @@ function ButtonEdit( props ) {
 
 			const blockBindingsSource = unlock(
 				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			).getBlockBindingsSource( metadata?.bindings?.href?.source );
 
 			return {
-				lockUrlControls:
-					!! metadata?.bindings?.url &&
+				lockHrefControls:
+					!! metadata?.bindings?.href &&
 					! blockBindingsSource?.canUserEditValue( {
 						select,
 						context,
-						args: metadata?.bindings?.url?.args,
+						args: metadata?.bindings?.href?.args,
 					} ),
 			};
 		},
-		[ isSelected, metadata?.bindings?.url ]
+		[ isSelected, metadata?.bindings?.href ]
 	);
 
 	return (
@@ -271,10 +271,10 @@ function ButtonEdit( props ) {
 					ref={ mergedRef }
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
-					value={ text }
+					value={ content }
 					onChange={ ( value ) =>
 						setAttributes( {
-							text: removeAnchorTag( value ),
+							content: removeAnchorTag( value ),
 						} )
 					}
 					withoutInteractiveFormatting
@@ -311,7 +311,7 @@ function ButtonEdit( props ) {
 						} }
 					/>
 				) }
-				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
+				{ ! isHrefSet && isLinkTag && ! lockHrefControls && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -320,7 +320,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && isLinkTag && ! lockUrlControls && (
+				{ isHrefSet && isLinkTag && ! lockHrefControls && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -333,30 +333,30 @@ function ButtonEdit( props ) {
 			</BlockControls>
 			{ isLinkTag &&
 				isSelected &&
-				( isEditingURL || isURLSet ) &&
-				! lockUrlControls && (
+				( isEditingHref || isHrefSet ) &&
+				! lockHrefControls && (
 					<Popover
 						placement="bottom"
 						onClose={ () => {
-							setIsEditingURL( false );
+							setIsEditingHref( false );
 							richTextRef.current?.focus();
 						} }
 						anchor={ popoverAnchor }
-						focusOnMount={ isEditingURL ? 'firstElement' : false }
+						focusOnMount={ isEditingHref ? 'firstElement' : false }
 						__unstableSlotName="__unstable-block-tools-after"
 						shift
 					>
 						<LinkControl
 							value={ linkValue }
 							onChange={ ( {
-								url: newURL,
+								href: newHref,
 								opensInNewTab: newOpensInNewTab,
 								nofollow: newNofollow,
 							} ) =>
 								setAttributes(
 									getUpdatedLinkAttributes( {
 										rel,
-										url: newURL,
+										href: newHref,
 										opensInNewTab: newOpensInNewTab,
 										nofollow: newNofollow,
 									} )
@@ -366,7 +366,7 @@ function ButtonEdit( props ) {
 								unlink();
 								richTextRef.current?.focus();
 							} }
-							forceIsEditingLink={ isEditingURL }
+							forceIsEditingLink={ isEditingHref }
 							settings={ LINK_SETTINGS }
 						/>
 					</Popover>
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index 26509a93de6864..ecbf11c4c71cef 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -241,9 +241,9 @@ function ButtonEdit( props ) {
 		);
 	}
 
-	function onChangeText( value ) {
+	function onChangeContent( value ) {
 		const { setAttributes } = props;
-		setAttributes( { text: value } );
+		setAttributes( { content: value } );
 	}
 
 	function onChangeBorderRadius( newRadius ) {
@@ -293,7 +293,7 @@ function ButtonEdit( props ) {
 		const { setAttributes } = props;
 
 		setAttributes( {
-			url: '',
+			href: '',
 			rel: '',
 			linkTarget: '',
 		} );
@@ -368,11 +368,13 @@ function ButtonEdit( props ) {
 		return (
 			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
-				url={ attributes.url }
+				url={ attributes.href }
 				rel={ attributes.rel }
 				linkTarget={ attributes.linkTarget }
 				onClose={ dismissSheet }
-				setAttributes={ setAttributes }
+				setAttributes={ ( { url, ...restAttrs } ) =>
+					setAttributes( { href: url, ...restAttrs } )
+				}
 				withBottomSheet={ ! isCompatibleWithSettings }
 				hasPicker
 				actions={ linkSettingsActions }
@@ -417,9 +419,9 @@ function ButtonEdit( props ) {
 	} = props;
 	const {
 		placeholder,
-		text,
+		content,
 		style: buttonStyle,
-		url,
+		href,
 		align = 'center',
 		width,
 	} = attributes;
@@ -448,7 +450,7 @@ function ButtonEdit( props ) {
 	// value at least on 1 when `RichText` is focused or when is not focused, but `RichText` value is
 	// different than empty string.
 	let minWidth =
-		isButtonFocused || ( ! isButtonFocused && text && text !== '' )
+		isButtonFocused || ( ! isButtonFocused && content && content !== '' )
 			? MIN_WIDTH
 			: placeholderTextWidth;
 	if ( width ) {
@@ -461,7 +463,7 @@ function ButtonEdit( props ) {
 	// a `placeholder` as an empty string when `RichText` is focused,
 	// because `AztecView` is calculating a `minWidth` based on placeholder text.
 	const placeholderText =
-		isButtonFocused || ( ! isButtonFocused && text && text !== '' )
+		isButtonFocused || ( ! isButtonFocused && content && content !== '' )
 			? ''
 			: placeholder || __( 'Add text…' );
 
@@ -496,14 +498,14 @@ function ButtonEdit( props ) {
 				<RichText
 					ref={ onSetRef }
 					placeholder={ placeholderText }
-					value={ text }
-					onChange={ onChangeText }
+					value={ content }
+					onChange={ onChangeContent }
 					style={ textStyles }
 					textAlign={ align }
 					placeholderTextColor={
 						style?.color || styles.placeholderTextColor.color
 					}
-					identifier="text"
+					identifier="content"
 					tagName="p"
 					minWidth={ minWidth } // The minimum Button size.
 					maxWidth={ isFixedWidth ? minWidth : maxWidth } // The width of the screen.
@@ -529,7 +531,7 @@ function ButtonEdit( props ) {
 								title={ __( 'Edit link' ) }
 								icon={ link }
 								onClick={ onShowLinkSettings }
-								isActive={ url }
+								isActive={ href }
 							/>
 						</ToolbarGroup>
 					</BlockControls>
diff --git a/packages/block-library/src/button/get-updated-link-attributes.js b/packages/block-library/src/button/get-updated-link-attributes.js
index 97b837a8be20bd..c6483e9e9e719b 100644
--- a/packages/block-library/src/button/get-updated-link-attributes.js
+++ b/packages/block-library/src/button/get-updated-link-attributes.js
@@ -13,13 +13,13 @@ import { prependHTTP } from '@wordpress/url';
  *
  * @param {Object}  attributes               The current block attributes.
  * @param {string}  attributes.rel           The current link rel attribute.
- * @param {string}  attributes.url           The current link url.
+ * @param {string}  attributes.href          The current link href.
  * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
  * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
  */
 export function getUpdatedLinkAttributes( {
 	rel = '',
-	url = '',
+	href = '',
 	opensInNewTab,
 	nofollow,
 } ) {
@@ -47,7 +47,7 @@ export function getUpdatedLinkAttributes( {
 	}
 
 	return {
-		url: prependHTTP( url ),
+		url: prependHTTP( href ),
 		linkTarget: newLinkTarget,
 		rel: updatedRel || undefined,
 	};
diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
index 2b05b280028abd..1cf48b4648da74 100644
--- a/packages/block-library/src/button/index.js
+++ b/packages/block-library/src/button/index.js
@@ -22,15 +22,15 @@ export const settings = {
 	example: {
 		attributes: {
 			className: 'is-style-fill',
-			text: __( 'Call to Action' ),
+			content: __( 'Call to Action' ),
 		},
 	},
 	edit,
 	save,
 	deprecated,
-	merge: ( a, { text = '' } ) => ( {
+	merge: ( a, { content = '' } ) => ( {
 		...a,
-		text: ( a.text || '' ) + text,
+		content: ( a.content || '' ) + content,
 	} ),
 };
 
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 8cb9da6fbfbc18..e0e096bd353b8c 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -25,9 +25,9 @@ export default function save( { attributes, className } ) {
 		linkTarget,
 		rel,
 		style,
-		text,
+		content,
 		title,
-		url,
+		href,
 		width,
 	} = attributes;
 
@@ -72,10 +72,10 @@ export default function save( { attributes, className } ) {
 				tagName={ TagName }
 				type={ isButtonTag ? buttonType : null }
 				className={ buttonClasses }
-				href={ isButtonTag ? null : url }
+				href={ isButtonTag ? null : href }
 				title={ title }
 				style={ buttonStyle }
-				value={ text }
+				value={ content }
 				target={ isButtonTag ? null : linkTarget }
 				rel={ isButtonTag ? null : rel }
 			/>
diff --git a/packages/block-library/src/button/test/get-updated-link-attributes.js b/packages/block-library/src/button/test/get-updated-link-attributes.js
index af0c3da332110c..d60fe6d6aab8c3 100644
--- a/packages/block-library/src/button/test/get-updated-link-attributes.js
+++ b/packages/block-library/src/button/test/get-updated-link-attributes.js
@@ -6,35 +6,35 @@ import { getUpdatedLinkAttributes } from '../get-updated-link-attributes';
 describe( 'getUpdatedLinkAttributes method', () => {
 	it( 'should correctly handle unassigned rel', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: true,
 			nofollow: false,
 		};
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
 		expect( result.rel ).toEqual( 'noreferrer noopener' );
 	} );
 
 	it( 'should return empty rel value as undefined', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: false,
 			nofollow: false,
 		};
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( undefined );
 		expect( result.rel ).toEqual( undefined );
 	} );
 
 	it( 'should correctly handle rel with existing values', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: true,
 			nofollow: true,
 			rel: 'rel_value',
@@ -42,7 +42,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
 		expect( result.rel ).toEqual(
 			'rel_value noreferrer noopener nofollow'
@@ -51,7 +51,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 	it( 'should correctly update link attributes with opensInNewTab', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: true,
 			nofollow: false,
 			rel: 'rel_value',
@@ -59,14 +59,14 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
 		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
 	} );
 
 	it( 'should correctly update link attributes with nofollow', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: false,
 			nofollow: true,
 			rel: 'rel_value',
@@ -74,14 +74,14 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( undefined );
 		expect( result.rel ).toEqual( 'rel_value nofollow' );
 	} );
 
 	it( 'should correctly handle rel with existing nofollow values and remove duplicates', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: true,
 			nofollow: true,
 			rel: 'rel_value nofollow',
@@ -89,7 +89,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
 		expect( result.rel ).toEqual(
 			'rel_value nofollow noreferrer noopener'
@@ -98,7 +98,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 	it( 'should correctly handle rel with existing new tab values and remove duplicates', () => {
 		const options = {
-			url: 'example.com',
+			href: 'example.com',
 			opensInNewTab: true,
 			nofollow: false,
 			rel: 'rel_value noreferrer noopener',
@@ -106,7 +106,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		const result = getUpdatedLinkAttributes( options );
 
-		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.href ).toEqual( 'http://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
 		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
 	} );

From cc3e30684415b5f3d5c33caa7a3f2e0498961852 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:09:15 +0800
Subject: [PATCH 2/8] Fix: use `url` as the property for the `LinkControl` api

---
 packages/block-library/src/button/edit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 318b25936c3c07..7d934955543e93 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -227,7 +227,7 @@ function ButtonEdit( props ) {
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
 	const linkValue = useMemo(
-		() => ( { href, opensInNewTab, nofollow } ),
+		() => ( { url: href, opensInNewTab, nofollow } ),
 		[ href, opensInNewTab, nofollow ]
 	);
 
@@ -349,7 +349,7 @@ function ButtonEdit( props ) {
 						<LinkControl
 							value={ linkValue }
 							onChange={ ( {
-								href: newHref,
+								url: newHref,
 								opensInNewTab: newOpensInNewTab,
 								nofollow: newNofollow,
 							} ) =>

From 299661fbb04b77189b5b1becb88eb11f60f1437d Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:21:40 +0800
Subject: [PATCH 3/8] Update other API calls that define button block
 attributes

---
 lib/compat/wordpress-6.5/blocks.php           |  2 +-
 lib/compat/wordpress-6.6/blocks.php           |  2 +-
 .../src/hooks/use-bindings-attributes.js      |  2 +-
 .../block-library/src/buttons/transforms.js   | 10 +--
 .../src/navigation-link/transforms.js         |  4 +-
 packages/patterns/src/constants.js            |  2 +-
 test/e2e/specs/editor/blocks/buttons.spec.js  |  8 +--
 .../editor/various/block-bindings.spec.js     | 70 +++++++++----------
 .../editor/various/copy-cut-paste.spec.js     |  4 +-
 9 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php
index b91e89103faa02..0b85b8242c4589 100644
--- a/lib/compat/wordpress-6.5/blocks.php
+++ b/lib/compat/wordpress-6.5/blocks.php
@@ -161,7 +161,7 @@ function gutenberg_process_block_bindings( $block_content, $parsed_block, $block
 			'core/paragraph' => array( 'content' ),
 			'core/heading'   => array( 'content' ),
 			'core/image'     => array( 'id', 'url', 'title', 'alt' ),
-			'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
+			'core/button'    => array( 'href', 'content', 'linkTarget', 'rel' ),
 		);
 
 		// If the block doesn't have the bindings property or isn't one of the supported block types, return.
diff --git a/lib/compat/wordpress-6.6/blocks.php b/lib/compat/wordpress-6.6/blocks.php
index 0d8805a489d9cb..7a551053f2ef1c 100644
--- a/lib/compat/wordpress-6.6/blocks.php
+++ b/lib/compat/wordpress-6.6/blocks.php
@@ -18,7 +18,7 @@ function gutenberg_replace_pattern_override_default_binding( $parsed_block ) {
 		'core/paragraph' => array( 'content' ),
 		'core/heading'   => array( 'content' ),
 		'core/image'     => array( 'id', 'url', 'title', 'alt' ),
-		'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
+		'core/button'    => array( 'href', 'content', 'linkTarget', 'rel' ),
 	);
 
 	$bindings = $parsed_block['attrs']['metadata']['bindings'] ?? array();
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 7bd5df05d31eb4..a9896e54fb3bf0 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -26,7 +26,7 @@ const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
 	'core/image': [ 'id', 'url', 'title', 'alt' ],
-	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+	'core/button': [ 'href', 'content', 'linkTarget', 'rel' ],
 };
 
 const DEFAULT_ATTRIBUTE = '__default';
diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js
index 9848299f3a99f9..8033bced2ab641 100644
--- a/packages/block-library/src/buttons/transforms.js
+++ b/packages/block-library/src/buttons/transforms.js
@@ -41,19 +41,19 @@ const transforms = {
 						const { content, metadata } = attributes;
 						const element = createElement( document, content );
 						// Remove any HTML tags.
-						const text = element.innerText || '';
+						const innerText = element.innerText || '';
 						// Get first url.
 						const link = element.querySelector( 'a' );
-						const url = link?.getAttribute( 'href' );
+						const href = link?.getAttribute( 'href' );
 						// Create singular button in the buttons block.
 						return createBlock( 'core/button', {
-							text,
-							url,
+							content: innerText,
+							href,
 							metadata: getTransformedMetadata(
 								metadata,
 								'core/button',
 								( { content: contentBinding } ) => ( {
-									text: contentBinding,
+									content: contentBinding,
 								} )
 							),
 						} );
diff --git a/packages/block-library/src/navigation-link/transforms.js b/packages/block-library/src/navigation-link/transforms.js
index ff38589b926877..d018efdb15879a 100644
--- a/packages/block-library/src/navigation-link/transforms.js
+++ b/packages/block-library/src/navigation-link/transforms.js
@@ -118,8 +118,8 @@ const transforms = {
 			transform: ( { label, url, rel, title, opensInNewTab } ) => {
 				return createBlock( 'core/buttons', {}, [
 					createBlock( 'core/button', {
-						text: label,
-						url,
+						content: label,
+						href: url,
 						rel,
 						title,
 						linkTarget: opensInNewTab ? '_blank' : undefined,
diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
index 99563a1a16787f..b7251fb82d8048 100644
--- a/packages/patterns/src/constants.js
+++ b/packages/patterns/src/constants.js
@@ -19,7 +19,7 @@ export const PATTERN_SYNC_TYPES = {
 export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
-	'core/button': [ 'text', 'url', 'linkTarget', 'rel' ],
+	'core/button': [ 'content', 'href', 'linkTarget', 'rel' ],
 	'core/image': [ 'id', 'url', 'title', 'alt' ],
 };
 
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index f62732470d9747..32524ab9f83625 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -212,8 +212,8 @@ test.describe( 'Buttons', () => {
 					{
 						name: 'core/button',
 						attributes: {
-							text: 'WordPress',
-							url: 'https://www.wordpress.org/',
+							content: 'WordPress',
+							href: 'https://www.wordpress.org/',
 							rel: 'noreferrer noopener',
 							linkTarget: '_blank',
 						},
@@ -246,8 +246,8 @@ test.describe( 'Buttons', () => {
 					{
 						name: 'core/button',
 						attributes: {
-							text: 'WordPress',
-							url: 'https://www.wordpress.org/',
+							content: 'WordPress',
+							href: 'https://www.wordpress.org/',
 							rel: 'noreferrer noopener nofollow',
 							linkTarget: '_blank',
 						},
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
index 222004c7c1bccc..3fdedd8a642ec8 100644
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ b/test/e2e/specs/editor/various/block-bindings.spec.js
@@ -286,11 +286,11 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
@@ -317,11 +317,11 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
@@ -379,11 +379,11 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'plugin/undefined-source',
 											args: { key: 'text_custom_field' },
 										},
@@ -441,11 +441,11 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										url: {
+										href: {
 											source: 'core/post-meta',
 											args: { key: 'url_custom_field' },
 										},
@@ -501,11 +501,11 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										url: {
+										href: {
 											source: 'plugin/undefined-source',
 											args: { key: 'url_custom_field' },
 										},
@@ -561,15 +561,15 @@ test.describe( 'Block bindings', () => {
 						{
 							name: 'core/button',
 							attributes: {
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
-										url: {
+										href: {
 											source: 'core/post-meta',
 											args: { key: 'url_custom_field' },
 										},
@@ -1484,11 +1484,11 @@ test.describe( 'Block bindings', () => {
 							name: 'core/button',
 							attributes: {
 								anchor: 'button-text-binding',
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
@@ -1533,11 +1533,11 @@ test.describe( 'Block bindings', () => {
 							name: 'core/button',
 							attributes: {
 								anchor: 'button-url-binding',
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										url: {
+										href: {
 											source: 'core/post-meta',
 											args: { key: 'url_custom_field' },
 										},
@@ -1570,15 +1570,15 @@ test.describe( 'Block bindings', () => {
 							name: 'core/button',
 							attributes: {
 								anchor: 'button-multiple-bindings',
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
-										url: {
+										href: {
 											source: 'core/post-meta',
 											args: { key: 'url_custom_field' },
 										},
@@ -1614,11 +1614,11 @@ test.describe( 'Block bindings', () => {
 							name: 'core/button',
 							attributes: {
 								anchor: 'button-text-binding',
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										text: {
+										content: {
 											source: 'core/post-meta',
 											args: { key: 'text_custom_field' },
 										},
@@ -2022,11 +2022,11 @@ test.describe( 'Block bindings', () => {
 							name: 'core/button',
 							attributes: {
 								anchor: 'button-url-binding',
-								text: 'button default text',
-								url: '#default-url',
+								content: 'button default text',
+								href: '#default-url',
 								metadata: {
 									bindings: {
-										url: {
+										href: {
 											source: 'core/post-meta',
 											args: { key: 'url_custom_field' },
 										},
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index 4951f99fb6b5b2..520c00519004bb 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -145,7 +145,7 @@ test.describe( 'Copy/cut/paste', () => {
 			innerBlocks: [
 				{
 					name: 'core/button',
-					attributes: { text: 'Click' },
+					attributes: { content: 'Click' },
 				},
 			],
 		} );
@@ -199,7 +199,7 @@ test.describe( 'Copy/cut/paste', () => {
 			innerBlocks: [
 				{
 					name: 'core/button',
-					attributes: { text: 'Click' },
+					attributes: { content: 'Click' },
 				},
 			],
 		} );

From cd2e05ed2be22f31d100792c4ad99059379e724c Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:55:06 +0800
Subject: [PATCH 4/8] Update deprecations, so that each one runs the migrate
 function. Add fixtures.

---
 .../block-library/src/button/deprecated.js    | 261 ++++++++++++++----
 ...__button__border_radius__deprecated-2.json |   4 +-
 ...re__button__border_radius__deprecated.json |   4 +-
 .../core__button__center__deprecated.json     |   6 +-
 .../blocks/core__button__deprecated-v10.json  |   4 +-
 .../blocks/core__button__squared.json         |   2 +-
 .../fixtures/blocks/core__buttons.json        |   8 +-
 .../blocks/core__buttons__deprecated-1.json   |   4 +-
 .../blocks/core__buttons__deprecated-2.json   |   4 +-
 .../blocks/core__buttons__deprecated-v11.html |  19 ++
 .../blocks/core__buttons__deprecated-v11.json |  55 ++++
 .../core__buttons__deprecated-v11.parsed.json |  66 +++++
 ...e__buttons__deprecated-v11.serialized.html |  17 ++
 .../blocks/core__form-submit-button.json      |   2 +-
 .../fixtures/blocks/core__form.json           |   2 +-
 .../core_buttons__simple__deprecated.json     |   4 +-
 16 files changed, 381 insertions(+), 81 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-v11.html
 create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-v11.json
 create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-v11.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-v11.serialized.html

diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index ea7478a1ef3a5d..face5b5c087af1 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -99,6 +99,22 @@ const migrateCustomColorsAndGradients = ( attributes ) => {
 	};
 };
 
+function migrateAttributeNames( attributes ) {
+	// `url` has changed name to `href`.
+	if ( attributes.url ) {
+		attributes.href = attributes.url;
+		delete attributes.url;
+	}
+
+	// `text` has changed name to `content`.
+	if ( attributes.text ) {
+		attributes.content = attributes.text;
+		delete attributes.text;
+	}
+
+	return attributes;
+}
+
 const oldColorsMigration = ( attributes ) => {
 	const { color, textColor, ...restAttributes } = {
 		...attributes,
@@ -114,30 +130,11 @@ const oldColorsMigration = ( attributes ) => {
 	return migrateCustomColorsAndGradients( restAttributes );
 };
 
-const blockAttributes = {
-	url: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'a',
-		attribute: 'href',
-	},
-	title: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'a',
-		attribute: 'title',
-	},
-	text: {
-		type: 'string',
-		source: 'html',
-		selector: 'a',
-	},
-};
-
 // v12: Some attributes were renamed.
 // - `url` attribute was renamed to `href`.
 // - `title` attribute was renamed to `content`.
 const v12 = {
+	migrate: migrateAttributeNames,
 	attributes: {
 		tagName: {
 			type: 'string',
@@ -256,21 +253,7 @@ const v12 = {
 			clientNavigation: true,
 		},
 	},
-	migrate( attributes ) {
-		// `url` has changed name to `href`.
-		if ( attributes.url ) {
-			attributes.href = attributes.url;
-			delete attributes.url;
-		}
 
-		// `text` has changed name to `content`.
-		if ( attributes.text ) {
-			attributes.content = attributes.text;
-			delete attributes.text;
-		}
-
-		return attributes;
-	},
 	save( { attributes, className } ) {
 		const {
 			tagName,
@@ -340,6 +323,7 @@ const v12 = {
 };
 
 const v11 = {
+	migrate: migrateAttributeNames,
 	attributes: {
 		url: {
 			type: 'string',
@@ -599,7 +583,7 @@ const v10 = {
 			</div>
 		);
 	},
-	migrate: migrateFontFamily,
+	migrate: compose( migrateFontFamily, migrateAttributeNames ),
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -626,7 +610,23 @@ const deprecated = [
 			__experimentalSelector: '.wp-block-button__link',
 		},
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			linkTarget: {
 				type: 'string',
 				source: 'attribute',
@@ -713,7 +713,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateFontFamily,
+			migrateBorderRadius,
+			migrateAttributeNames
+		),
 	},
 	{
 		supports: {
@@ -727,7 +731,23 @@ const deprecated = [
 			__experimentalSelector: '.wp-block-button__link',
 		},
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			linkTarget: {
 				type: 'string',
 				source: 'attribute',
@@ -801,7 +821,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateFontFamily,
+			migrateBorderRadius,
+			migrateAttributeNames
+		),
 	},
 	{
 		supports: {
@@ -815,7 +839,23 @@ const deprecated = [
 			__experimentalSelector: '.wp-block-button__link',
 		},
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			linkTarget: {
 				type: 'string',
 				source: 'attribute',
@@ -889,7 +929,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateFontFamily,
+			migrateBorderRadius,
+			migrateAttributeNames
+		),
 	},
 	{
 		supports: {
@@ -898,7 +942,23 @@ const deprecated = [
 			color: { gradients: true },
 		},
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			linkTarget: {
 				type: 'string',
 				source: 'attribute',
@@ -953,7 +1013,7 @@ const deprecated = [
 				/>
 			);
 		},
-		migrate: migrateBorderRadius,
+		migrate: compose( migrateBorderRadius, migrateAttributeNames ),
 	},
 	{
 		supports: {
@@ -961,7 +1021,23 @@ const deprecated = [
 			alignWide: false,
 		},
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			linkTarget: {
 				type: 'string',
 				source: 'attribute',
@@ -1007,7 +1083,8 @@ const deprecated = [
 		migrate: compose(
 			migrateBorderRadius,
 			migrateCustomColorsAndGradients,
-			migrateAlign
+			migrateAlign,
+			migrateAttributeNames
 		),
 		save( { attributes } ) {
 			const {
@@ -1076,7 +1153,23 @@ const deprecated = [
 	},
 	{
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			align: {
 				type: 'string',
 				default: 'none',
@@ -1122,13 +1215,15 @@ const deprecated = [
 					.replace( /is-style-squared[\s]?/, '' )
 					.trim();
 			}
-			return migrateBorderRadius(
-				migrateCustomColorsAndGradients( {
-					...attributes,
-					className: newClassName ? newClassName : undefined,
-					borderRadius: 0,
-				} )
-			);
+			return compose(
+				migrateBorderRadius,
+				migrateCustomColorsAndGradients,
+				migrateAttributeNames
+			)( {
+				...attributes,
+				className: newClassName ? newClassName : undefined,
+				borderRadius: 0,
+			} );
 		},
 		save( { attributes } ) {
 			const {
@@ -1181,7 +1276,23 @@ const deprecated = [
 	},
 	{
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			align: {
 				type: 'string',
 				default: 'none',
@@ -1199,7 +1310,7 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( oldColorsMigration, migrateAttributeNames ),
 		save( { attributes } ) {
 			const {
 				url,
@@ -1247,7 +1358,23 @@ const deprecated = [
 	},
 	{
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			color: {
 				type: 'string',
 			},
@@ -1282,11 +1409,27 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( oldColorsMigration, migrateAttributeNames ),
 	},
 	{
 		attributes: {
-			...blockAttributes,
+			url: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'href',
+			},
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'title',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: 'a',
+			},
 			color: {
 				type: 'string',
 			},
@@ -1316,7 +1459,7 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( oldColorsMigration, migrateAttributeNames ),
 	},
 ];
 
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.json b/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.json
index 6be42ef319f65d..a91afd27970ea5 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.json
@@ -3,7 +3,6 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
-			"text": "Where We Are",
 			"className": "is-style-outline",
 			"style": {
 				"border": {
@@ -12,7 +11,8 @@
 				"color": {
 					"text": "#1b9b6c"
 				}
-			}
+			},
+			"content": "Where We Are"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
index 35a26785fb4218..781ff157c9b8d1 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
@@ -3,12 +3,12 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
-			"text": "My button",
 			"style": {
 				"border": {
 					"radius": "25px"
 				}
-			}
+			},
+			"content": "My button"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__button__center__deprecated.json b/test/integration/fixtures/blocks/core__button__center__deprecated.json
index 458eebb841b877..3598be2e3c3c4d 100644
--- a/test/integration/fixtures/blocks/core__button__center__deprecated.json
+++ b/test/integration/fixtures/blocks/core__button__center__deprecated.json
@@ -3,9 +3,9 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
-			"url": "https://github.com/WordPress/gutenberg",
-			"text": "Help build Gutenberg",
-			"className": "aligncenter"
+			"className": "aligncenter",
+			"href": "https://github.com/WordPress/gutenberg",
+			"content": "Help build Gutenberg"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.json b/test/integration/fixtures/blocks/core__button__deprecated-v10.json
index a856e2b851b162..adef987063ba4b 100644
--- a/test/integration/fixtures/blocks/core__button__deprecated-v10.json
+++ b/test/integration/fixtures/blocks/core__button__deprecated-v10.json
@@ -3,8 +3,8 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
-			"text": "My button",
-			"fontFamily": "cambria-georgia"
+			"fontFamily": "cambria-georgia",
+			"content": "My button"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__button__squared.json b/test/integration/fixtures/blocks/core__button__squared.json
index ef629c91d4be93..fb67f4f97a60d6 100644
--- a/test/integration/fixtures/blocks/core__button__squared.json
+++ b/test/integration/fixtures/blocks/core__button__squared.json
@@ -5,7 +5,7 @@
 		"attributes": {
 			"tagName": "a",
 			"type": "button",
-			"text": "My button",
+			"content": "My button",
 			"style": {
 				"border": {
 					"radius": 0
diff --git a/test/integration/fixtures/blocks/core__buttons.json b/test/integration/fixtures/blocks/core__buttons.json
index 74d0c140360609..28aaeb28dca438 100644
--- a/test/integration/fixtures/blocks/core__buttons.json
+++ b/test/integration/fixtures/blocks/core__buttons.json
@@ -16,7 +16,7 @@
 				"attributes": {
 					"tagName": "a",
 					"type": "button",
-					"text": "My button 1"
+					"content": "My button 1"
 				},
 				"innerBlocks": []
 			},
@@ -26,7 +26,7 @@
 				"attributes": {
 					"tagName": "a",
 					"type": "button",
-					"text": "My button 2"
+					"content": "My button 2"
 				},
 				"innerBlocks": []
 			},
@@ -36,7 +36,7 @@
 				"attributes": {
 					"tagName": "a",
 					"type": "button",
-					"text": "My button 3"
+					"content": "My button 3"
 				},
 				"innerBlocks": []
 			},
@@ -46,7 +46,7 @@
 				"attributes": {
 					"tagName": "button",
 					"type": "button",
-					"text": "My button 4"
+					"content": "My button 4"
 				},
 				"innerBlocks": []
 			}
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-1.json b/test/integration/fixtures/blocks/core__buttons__deprecated-1.json
index ecd87558676944..ed3c5112b1e527 100644
--- a/test/integration/fixtures/blocks/core__buttons__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-1.json
@@ -13,7 +13,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 1"
+					"content": "My button 1"
 				},
 				"innerBlocks": []
 			},
@@ -21,7 +21,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 2"
+					"content": "My button 2"
 				},
 				"innerBlocks": []
 			}
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-2.json b/test/integration/fixtures/blocks/core__buttons__deprecated-2.json
index 480552cc4b2411..4719521b56374c 100644
--- a/test/integration/fixtures/blocks/core__buttons__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-2.json
@@ -15,7 +15,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 1"
+					"content": "My button 1"
 				},
 				"innerBlocks": []
 			},
@@ -23,7 +23,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 2"
+					"content": "My button 2"
 				},
 				"innerBlocks": []
 			}
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-v11.html b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.html
new file mode 100644
index 00000000000000..e130ce79258c7f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.html
@@ -0,0 +1,19 @@
+<!-- wp:buttons {"align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons alignwide">
+	<!-- wp:button -->
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
+	<!-- /wp:button -->
+
+	<!-- 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__deprecated-v11.json b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.json
new file mode 100644
index 00000000000000..28aaeb28dca438
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.json
@@ -0,0 +1,55 @@
+[
+	{
+		"name": "core/buttons",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"layout": {
+				"type": "flex",
+				"justifyContent": "center"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "a",
+					"type": "button",
+					"content": "My button 1"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "a",
+					"type": "button",
+					"content": "My button 2"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "a",
+					"type": "button",
+					"content": "My button 3"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "button",
+					"type": "button",
+					"content": "My button 4"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-v11.parsed.json b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.parsed.json
new file mode 100644
index 00000000000000..849adbaf491fcb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.parsed.json
@@ -0,0 +1,66 @@
+[
+	{
+		"blockName": "core/buttons",
+		"attrs": {
+			"align": "wide",
+			"layout": {
+				"type": "flex",
+				"justifyContent": "center"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/button",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 1</a></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 1</a></div>\n\t"
+				]
+			},
+			{
+				"blockName": "core/button",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 2</a></div>\n\t",
+				"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\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__deprecated-v11.serialized.html b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.serialized.html
new file mode 100644
index 00000000000000..452f3e167e78d8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__buttons__deprecated-v11.serialized.html
@@ -0,0 +1,17 @@
+<!-- wp:buttons {"align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons alignwide"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
+<!-- /wp:button -->
+
+<!-- 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 -->
diff --git a/test/integration/fixtures/blocks/core__form-submit-button.json b/test/integration/fixtures/blocks/core__form-submit-button.json
index eca9cbb3f1a5d8..fc6fbe57a4c464 100644
--- a/test/integration/fixtures/blocks/core__form-submit-button.json
+++ b/test/integration/fixtures/blocks/core__form-submit-button.json
@@ -15,7 +15,7 @@
 						"attributes": {
 							"tagName": "button",
 							"type": "submit",
-							"text": "Submit"
+							"content": "Submit"
 						},
 						"innerBlocks": []
 					}
diff --git a/test/integration/fixtures/blocks/core__form.json b/test/integration/fixtures/blocks/core__form.json
index d1dd3738a5801b..4fb8f0151cb462 100644
--- a/test/integration/fixtures/blocks/core__form.json
+++ b/test/integration/fixtures/blocks/core__form.json
@@ -75,7 +75,7 @@
 								"attributes": {
 									"tagName": "button",
 									"type": "submit",
-									"text": "Submit"
+									"content": "Submit"
 								},
 								"innerBlocks": []
 							}
diff --git a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json
index fa8332d1ac6d37..93674ec8475208 100644
--- a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json
+++ b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json
@@ -8,7 +8,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 1"
+					"content": "My button 1"
 				},
 				"innerBlocks": []
 			},
@@ -16,7 +16,7 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
-					"text": "My button 2"
+					"content": "My button 2"
 				},
 				"innerBlocks": []
 			}

From a57ad6eab68dfb87ddfb66d9e3ced13279a9097b Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:57:16 +0800
Subject: [PATCH 5/8] Also migrate bindings

---
 packages/block-library/src/button/deprecated.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index face5b5c087af1..fc9296691de1d1 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -105,12 +105,21 @@ function migrateAttributeNames( attributes ) {
 		attributes.href = attributes.url;
 		delete attributes.url;
 	}
+	if ( attributes.metadata?.bindings?.url ) {
+		attributes.metadata.bindings.href = attributes.metadata.bindings.url;
+		delete attributes.metadata.bindings.url;
+	}
 
 	// `text` has changed name to `content`.
 	if ( attributes.text ) {
 		attributes.content = attributes.text;
 		delete attributes.text;
 	}
+	if ( attributes.metadata?.bindings?.text ) {
+		attributes.metadata.bindings.content =
+			attributes.metadata.bindings.text;
+		delete attributes.metadata.bindings.text;
+	}
 
 	return attributes;
 }

From e7b5285ea127b03c6f416dcfe24fef32bb087b01 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 15:58:06 +0800
Subject: [PATCH 6/8] Update comment

---
 packages/block-library/src/button/deprecated.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index fc9296691de1d1..c43f326ffd46e5 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -139,7 +139,7 @@ const oldColorsMigration = ( attributes ) => {
 	return migrateCustomColorsAndGradients( restAttributes );
 };
 
-// v12: Some attributes were renamed.
+// v12: Attributes were renamed.
 // - `url` attribute was renamed to `href`.
 // - `title` attribute was renamed to `content`.
 const v12 = {

From 0074f4dadcaf8e7dc839317b758e2a75ff244170 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Jun 2024 16:18:46 +0800
Subject: [PATCH 7/8] Fix getUpdatedLinkAttributes

---
 .../block-library/src/button/get-updated-link-attributes.js     | 2 +-
 .../src/button/test/get-updated-link-attributes.js              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/get-updated-link-attributes.js b/packages/block-library/src/button/get-updated-link-attributes.js
index c6483e9e9e719b..25363b31d8598b 100644
--- a/packages/block-library/src/button/get-updated-link-attributes.js
+++ b/packages/block-library/src/button/get-updated-link-attributes.js
@@ -47,7 +47,7 @@ export function getUpdatedLinkAttributes( {
 	}
 
 	return {
-		url: prependHTTP( href ),
+		href: prependHTTP( href ),
 		linkTarget: newLinkTarget,
 		rel: updatedRel || undefined,
 	};
diff --git a/packages/block-library/src/button/test/get-updated-link-attributes.js b/packages/block-library/src/button/test/get-updated-link-attributes.js
index d60fe6d6aab8c3..08b371d34bce8a 100644
--- a/packages/block-library/src/button/test/get-updated-link-attributes.js
+++ b/packages/block-library/src/button/test/get-updated-link-attributes.js
@@ -3,7 +3,7 @@
  */
 import { getUpdatedLinkAttributes } from '../get-updated-link-attributes';
 
-describe( 'getUpdatedLinkAttributes method', () => {
+describe( 'getUpdatedLinkAttributes function', () => {
 	it( 'should correctly handle unassigned rel', () => {
 		const options = {
 			href: 'example.com',

From 88c556de12a34e6f9df4b0afc19f696df1cc6e02 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 18 Jun 2024 17:08:15 +0800
Subject: [PATCH 8/8] Update e2e test

---
 test/e2e/specs/editor/blocks/buttons.spec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index 32524ab9f83625..23aeed3e5470d7 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -419,7 +419,9 @@ test.describe( 'Buttons', () => {
 				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
 					.innerBlocks[ 0 ];
 				expect( buttonBlock.name ).toBe( 'core/button' );
-				expect( buttonBlock.attributes.text ).toBe( 'initial content' );
+				expect( buttonBlock.attributes.content ).toBe(
+					'initial content'
+				);
 			} );
 
 			test( 'should preserve the metadata attribute', async ( {
@@ -471,7 +473,7 @@ test.describe( 'Buttons', () => {
 				expect(
 					buttonBlock.attributes.metadata.bindings
 				).toMatchObject( {
-					text: {
+					content: {
 						source: 'core/post-meta',
 						args: {
 							key: 'custom_field',