diff --git a/inc/render/class-review-block.php b/inc/render/class-review-block.php index b12b07ce2..f682983e7 100644 --- 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 .= ' ' . esc_html( $link['label'] ) . ''; + $html .= ' ' . esc_html( $link['label'] ) . ''; } $html .= ' '; $html .= ' '; diff --git a/src/blocks/blocks/review/block.json b/src/blocks/blocks/review/block.json index 5c1935128..653b7c894 100644 --- 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 index 6ce9e5350..c91a00753 100644 --- 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 } /> + + ) ) } @@ -630,6 +636,12 @@ const Inspector = ({ checked={ link.isSponsored } onChange={ () => onChangeLink({ action: 'update', index, value: { isSponsored: ! link.isSponsored }}) } /> + + onChangeLink({ action: 'update', index, value: { target: '_blank' === link.target || undefined === link.target ? '_self' : '_blank' }}) } + /> ) ) } diff --git a/src/blocks/test/e2e/blocks/product-review.spec.js b/src/blocks/test/e2e/blocks/product-review.spec.js index bf98655df..83257b186 100644 --- 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' ); + + }); });