Support button's link settings for Pattern Overrides (#58587)

Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

lib/compat/wordpress-6.5/blocks.php

@@ -163,7 +163,7 @@ function gutenberg_process_block_bindings( $block_content, $block, $block_instan
 		'core/paragraph' => array( 'content' ),
 		'core/heading'   => array( 'content' ),
 		'core/image'     => array( 'url', 'title', 'alt' ),
-		'core/button'    => array( 'url', 'text' ),
+		'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
 	);
 
 	// If the block doesn't have the bindings property or isn't one of the allowed block types, return.

packages/block-library/src/block/edit.js

@@ -147,10 +147,13 @@ function getContentValuesFromInnerBlocks( blocks, defaultValues ) {
 				defaultValues[ blockId ][ attributeKey ]
 			) {
 				content[ blockId ] ??= { values: {} };
-				// TODO: We need a way to represent `undefined` in the serialized overrides.
-				// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
 				content[ blockId ].values[ attributeKey ] =
-					block.attributes[ attributeKey ];
+					block.attributes[ attributeKey ] === undefined
+						? // TODO: We use an empty string to represent undefined for now until
+						  // we support a richer format for overrides and the block binding API.
+						  // Currently only the `linkTarget` attribute of `core/button` is affected.
+						  ''
+						: block.attributes[ attributeKey ];
 			}
 		}
 	}

packages/patterns/src/constants.js

@@ -27,6 +27,8 @@ export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
 	'core/button': {
 		text: __( 'Text' ),
 		url: __( 'URL' ),
+		linkTarget: __( 'Link Target' ),
+		rel: __( 'Link Relationship' ),
 	},
 	'core/image': {
 		url: __( 'URL' ),

test/e2e/specs/editor/various/pattern-overrides.spec.js

@@ -263,4 +263,115 @@ test.describe( 'Pattern Overrides', () => {
 			},
 		] );
 	} );
+
+	test( "handles button's link settings", async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+		context,
+	} ) => {
+		const buttonId = 'button-id';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Button with target',
+			content: `<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"metadata":{"id":"${ buttonId }","bindings":{"text":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"linkTarget":{"source":"core/pattern-overrides"},"rel":{"source":"core/pattern-overrides"}}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://wp.org" target="_blank" rel="noreferrer noopener nofollow">Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Focus the button, open the link popup.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Button' } )
+			.getByRole( 'textbox', { name: 'Button text' } )
+			.focus();
+		await expect(
+			page.getByRole( 'link', { name: 'wp.org' } )
+		).toContainText( 'opens in a new tab' );
+
+		// The link popup doesn't have a role which is a bit unfortunate.
+		// These are the buttons in the link popup.
+		const advancedPanel = page.getByRole( 'button', {
+			name: 'Advanced',
+			exact: true,
+		} );
+		const editLinkButton = page.getByRole( 'button', {
+			name: 'Edit',
+			exact: true,
+		} );
+		const saveLinkButton = page.getByRole( 'button', {
+			name: 'Save',
+			exact: true,
+		} );
+
+		await editLinkButton.click();
+		if (
+			( await advancedPanel.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await advancedPanel.click();
+		}
+
+		const openInNewTabCheckbox = page.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+		const markAsNoFollowCheckbox = page.getByRole( 'checkbox', {
+			name: 'Mark as nofollow',
+		} );
+		// Both checkboxes are checked.
+		await expect( openInNewTabCheckbox ).toBeChecked();
+		await expect( markAsNoFollowCheckbox ).toBeChecked();
+
+		// Check only the "open in new tab" checkbox.
+		await markAsNoFollowCheckbox.setChecked( false );
+		await saveLinkButton.click();
+
+		const postId = await editor.publishPost();
+		const previewPage = await context.newPage();
+		await previewPage.goto( `/?p=${ postId }` );
+		const buttonLink = previewPage.getByRole( 'link', { name: 'Button' } );
+
+		await expect( buttonLink ).toHaveAttribute( 'target', '_blank' );
+		await expect( buttonLink ).toHaveAttribute(
+			'rel',
+			'noreferrer noopener'
+		);
+
+		// Uncheck both checkboxes.
+		await editLinkButton.click();
+		await openInNewTabCheckbox.setChecked( false );
+		await saveLinkButton.click();
+
+		// Update the post.
+		const updateButton = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Update' } );
+		await updateButton.click();
+		await expect( updateButton ).toBeDisabled();
+
+		await previewPage.reload();
+		await expect( buttonLink ).toHaveAttribute( 'target', '' );
+		await expect( buttonLink ).toHaveAttribute( 'rel', '' );
+
+		// Check only the "mark as nofollow" checkbox.
+		await editLinkButton.click();
+		await markAsNoFollowCheckbox.setChecked( true );
+		await saveLinkButton.click();
+
+		// Update the post.
+		await updateButton.click();
+		await expect( updateButton ).toBeDisabled();
+
+		await previewPage.reload();
+		await expect( buttonLink ).toHaveAttribute( 'target', '' );
+		await expect( buttonLink ).toHaveAttribute( 'rel', /^\s*nofollow\s*$/ );
+	} );
 } );