Add linkTarget and set it to an empty string for the remove op

WordPress · Jan 24, 2024 · 0f31eaf · 0f31eaf
1 parent af12257
commit 0f31eaf
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/lib/experimental/block-bindings/sources/pattern.php b/lib/experimental/block-bindings/sources/pattern.php
@@ -16,8 +16,11 @@
 		}
 		switch ( $attribute_override[0] ) {
 			case 0: // remove
-				// This currently skip this attribute instead of removing it until the binding API supports different operations.
-				return null;
+				/**
+				 * TODO: This currently doesn't remove the attribute, but only set it to an empty string.
+				 * It's a temporary solution until the block binding API supports different operations.
+				 */
+				return '';
 			case 1: // replace
 				return $attribute_override[1];
 			default:

diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php
@@ -101,7 +101,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' ),
 			);
 
 			// If the block doesn't have the bindings property or isn't one of the allowed block types, return.

diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
@@ -27,6 +27,7 @@ export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
 	'core/button': {
 		text: __( 'Text' ),
 		url: __( 'URL' ),
+		linkTarget: __( 'Link Target' ),
 	},
 	'core/image': {
 		url: __( 'URL' ),

diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -263,4 +263,66 @@ test.describe( 'Pattern Overrides', () => {
 			},
 		] );
 	} );
+
+	test( 'Supports `undefined` attribute values in patterns', async ( {
+		page,
+		admin,
+		editor,
+		requestUtils,
+	} ) => {
+		const buttonId = 'button-id';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern with overrides',
+			content: `<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"metadata":{"id":"${ buttonId }","bindings":{"text":{"source":{"name":"pattern_attributes"}},"url":{"source":{"name":"pattern_attributes"}},"linkTarget":{"source":{"name":"pattern_attributes"}}}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://wp.org" target="_blank" rel="noreferrer noopener">wp.org</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		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' );
+
+		const openInNewTabCheckbox = page.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+		await expect( openInNewTabCheckbox ).toBeChecked();
+
+		await openInNewTabCheckbox.setChecked( false );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/block',
+				attributes: {
+					ref: id,
+					overrides: {
+						[ buttonId ]: {
+							linkTarget: [ 0 ],
+						},
+					},
+				},
+			},
+		] );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		const link = page.getByRole( 'link', { name: 'wp.org' } );
+		await expect( link ).toHaveAttribute( 'href', 'http://wp.org' );
+		await expect( link ).toHaveAttribute( 'target', '' );
+	} );
 } );