Merge pull request #1846 from Codeinwp/feat/review-link-option

Open in new tab for Review Block links
Codeinwp · Sep 12, 2023 · 3d002a8 · 3d002a8
2 parents 6949658 + 1664bc1
commit 3d002a8
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/inc/render/class-review-block.php b/inc/render/class-review-block.php
@@ -193,7 +193,7 @@ function() use ( $attributes, $post_id ) {
 
 			foreach ( $attributes['links'] as $link ) {
 				$rel   = ( isset( $link['isSponsored'] ) && true === $link['isSponsored'] ) ? 'sponsored' : 'nofollow';
-				$html .= '	<a href="' . esc_url( $link['href'] ) . '" rel="' . $rel . '" target="_blank">' . esc_html( $link['label'] ) . '</a>';
+				$html .= '	<a href="' . esc_url( $link['href'] ) . '" rel="' . $rel . '" target="' . ( empty( $link['target'] ) ? '_blank' : $link['target'] ) . '">' . esc_html( $link['label'] ) . '</a>';
 			}
 			$html .= '		</div>';
 			$html .= '	</div>';

diff --git a/src/blocks/blocks/review/block.json b/src/blocks/blocks/review/block.json
@@ -70,16 +70,18 @@
 		"links": {
 			"type": "array",
 			"default": [
-			{
-				"label": "Buy on Amazon",
-				"href": "",
-				"isSponsored": false
-			},
-			{
-				"label": "Buy on eBay",
-				"href": "",
-				"isSponsored": false
-			}
+				{
+					"label": "Buy on Amazon",
+					"href": "",
+					"isSponsored": false,
+					"target": "_blank"
+				},
+				{
+					"label": "Buy on eBay",
+					"href": "",
+					"isSponsored": false,
+					"target": "_blank"
+				}
 			]
 		},
 		"prosLabel": {

diff --git a/src/blocks/blocks/review/inspector.js b/src/blocks/blocks/review/inspector.js
@@ -598,6 +598,12 @@ const Inspector = ({
 									checked={ link.isSponsored }
 									disabled={ attributes.product }
 								/>
+
+								<ToggleControl
+									label={ __( 'Open in New Tab', 'otter-blocks' ) }
+									checked={ '_blank' === link.target }
+									disabled={ attributes.product }
+								/>
 							</PanelItem>
 						) ) }
 
@@ -630,6 +636,12 @@ const Inspector = ({
 											checked={ link.isSponsored }
 											onChange={ () => onChangeLink({ action: 'update', index, value: { isSponsored: ! link.isSponsored }}) }
 										/>
+
+										<ToggleControl
+											label={ __( 'Open in New Tab', 'otter-blocks' ) }
+											checked={ undefined === link.target || '_blank' === link.target }
+											onChange={ () => onChangeLink({ action: 'update', index, value: { target: '_blank' === link.target || undefined === link.target ? '_self' : '_blank' }}) }
+										/>
 									</PanelItem>
 								) ) }
 

diff --git a/src/blocks/test/e2e/blocks/product-review.spec.js b/src/blocks/test/e2e/blocks/product-review.spec.js
@@ -81,5 +81,26 @@ test.describe( 'Product Review Block', () => {
 		await expect( await page.getByRole( 'document', { name: 'Block: Product Review' }).getByText( FEATURE_DESCRIPTION, { exact: true }) ).toBeVisible();
 	});
 
+	test( 'open in new tab', async({ editor, page }) => {
+		await editor.insertBlock({ name: 'themeisle-blocks/review' });
+
+		await page.getByRole( 'button', { name: 'Buttons' }).click({ clickCount: 1 });
+
+		await page.getByRole( 'button', { name: 'Add Links' }).click();
+
+		await page.getByRole( 'button', { name: 'Buy Now' }).click();
+
+		await page.getByPlaceholder( 'Button label' ).fill( 'Buy Now in same tab' );
+		await page.getByLabel( 'Open in New Tab' ).click();
 
+		await page.getByRole( 'button', { name: 'Add Links' }).click();
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${postId}` );
+
+		await expect( page.getByRole( 'link', { name: 'Buy Now in same tab' }) ).toHaveAttribute( 'target', '_self' );
+		await expect( page.getByRole( 'link', { name: 'Buy Now', exact: true }) ).toHaveAttribute( 'target', '_blank' );
+
+	});
 });