Post Publish Panel: Open view post links in a new tab (#70127)

yogeshbhutkar · yogeshbhutkar · Mamaduka · web-flow · commit 381b6238a39a · 2025-05-21T15:48:40.000+09:00
* Post Publish Panel: Open view post in new tab

* chore: fix import order

* chore: update unit test snapshots

* chore: update e2e tests

* chore: update e2e test

* fix: let the button stack up if the text is large

* chore: update `publishPost` to use a11y locators

* fix: simplify visiting published post logic

* fix: remove rel attribute

* chore: update snapshots

Co-authored-by: yogeshbhutkar &lt;yogeshbhutkar@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: carolinan &lt;poena@git.wordpress.org&gt;
Co-authored-by: HILAYTRIVEDI &lt;hilayt24@git.wordpress.org&gt;
diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -34,9 +34,12 @@ export async function publishPost( this: Editor ) {
 	}
 
 	// Handle saving just the post.
-	await this.page.click(
-		'role=region[name="Editor publish"i] >> role=button[name="Publish"i]'
-	);
+	await this.page
+		.getByRole( 'region', {
+			name: 'Editor publish',
+		} )
+		.getByRole( 'button', { name: 'Publish', exact: true } )
+		.click();
 
 	await this.page
 		.getByRole( 'button', { name: 'Dismiss this notice' } )
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -1,14 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, Button, TextControl } from '@wordpress/components';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	ExternalLink,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -118,9 +125,9 @@ export default function PostPublishPanelPostpublish( {
 	return (
 		<div className="post-publish-panel__postpublish">
 			<PanelBody className="post-publish-panel__postpublish-header">
-				<a ref={ postLinkRef } href={ link }>
+				<ExternalLink ref={ postLinkRef } href={ link }>
 					{ decodeEntities( post.title ) || __( '(no title)' ) }
-				</a>{ ' ' }
+				</ExternalLink>{ ' ' }
 				{ postPublishNonLinkHeader }
 			</PanelBody>
 			<PanelBody>
@@ -153,8 +160,17 @@ export default function PostPublishPanelPostpublish( {
 							variant="primary"
 							href={ link }
 							__next40pxDefaultSize
+							icon={ external }
+							iconPosition="right"
+							target="_blank"
 						>
 							{ viewPostLabel }
+							<VisuallyHidden as="span">
+								{
+									/* translators: accessibility text */
+									__( '(opens in a new tab)' )
+								}
+							</VisuallyHidden>
 						</Button>
 					) }
 					<Button
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -138,9 +138,11 @@
 	flex-wrap: wrap;
 	gap: $grid-unit-20;
 
-	.components-button {
+	.components-button,
+	.components-button.has-icon {
 		justify-content: center;
 		flex: 1;
+		min-width: unset;
 	}
 
 	.components-clipboard-button {
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -27,7 +27,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -87,9 +87,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -143,9 +156,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="https://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -164,7 +199,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
@@ -219,7 +254,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -239,7 +274,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -279,9 +314,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -335,9 +383,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="https://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -356,7 +426,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -76,9 +76,7 @@ test.describe( 'Comments', () => {
 		}
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// We check that there is a previous comments page link.
 		await expect(
@@ -130,9 +128,7 @@ test.describe( 'Comments', () => {
 		}
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// We check that there are no comments page link.
 		await expect(
@@ -195,9 +191,7 @@ test.describe( 'Comments', () => {
 		} );
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check that the Comment Template block (an inner block) is rendered.
 		await expect(
@@ -226,9 +220,7 @@ test.describe( 'Comments', () => {
 		} );
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check that the Comment Template block (an inner block) is NOT rendered.
 		await expect(
diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
@@ -22,11 +22,9 @@ test.describe( 'Compatibility with classic editor', () => {
 		await page.keyboard.type( 'Random Link' );
 		await page.keyboard.type( '</a> ' );
 		// Publish Post
-		await editor.publishPost();
+		const postId = await editor.publishPost();
 		// View Post
-		await page.click(
-			'role=region[name="Editor publish"i] >> role=link[name="View post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check the content doesn't contain <p> tags.
 		// No accessible selector for now.
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -207,19 +207,8 @@ test.describe( 'Pattern Overrides', () => {
 				},
 			] );
 
-			await page
-				.getByRole( 'region', { name: 'Editor top bar' } )
-				.getByRole( 'button', { name: 'Publish' } )
-				.click();
-			const editorPublishPanel = page.getByRole( 'region', {
-				name: 'Editor publish',
-			} );
-			await editorPublishPanel
-				.getByRole( 'button', { name: 'Publish', exact: true } )
-				.click();
-			await editorPublishPanel
-				.getByRole( 'link', { name: 'View post' } )
-				.click();
+			const postId = await editor.publishPost();
+			await page.goto( `/?p=${ postId }` );
 
 			await expect( page.locator( 'p' ) ).toContainText( [
 				'I would word it this way',
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -90,7 +90,7 @@ test.describe( 'Post publish panel', () => {
 			page
 				.getByRole( 'region', { name: 'Editor publish' } )
 				.locator( ':focus' )
-		).toHaveText( 'Test Post' );
+		).toContainText( 'Test Post' );
 	} );
 
 	test( 'should retain focus within the panel', async ( {
