From 9046f21a960142d3e9e5590654155d2c18ff6b53 Mon Sep 17 00:00:00 2001
From: Matias Ventura <mv@matiasventura.com>
Date: Wed, 3 May 2023 17:26:11 +0200
Subject: [PATCH] Add <ViewLink> component (#50260)

Displays a button with an external icon to open
a new window with the published post type
---
 .../edit-post/src/components/header/index.js  |  2 +
 .../src/components/view-link/index.js         | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/edit-post/src/components/view-link/index.js

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index a7bdccbfe44d9..09a93424f6903 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
+import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
@@ -88,6 +89,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
+				<ViewLink />
 				<DevicePreview />
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }
diff --git a/packages/edit-post/src/components/view-link/index.js b/packages/edit-post/src/components/view-link/index.js
new file mode 100644
index 0000000000000..10b10d8af1ee3
--- /dev/null
+++ b/packages/edit-post/src/components/view-link/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export default function ViewLink() {
+	const { permalink, isPublished, label } = useSelect( ( select ) => {
+		// Grab post type to retrieve the view_item label.
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+
+		return {
+			permalink: select( editorStore ).getPermalink(),
+			isPublished: select( editorStore ).isCurrentPostPublished(),
+			label: postType?.labels.view_item,
+		};
+	}, [] );
+
+	// Only render the view button if the post is published and has a permalink.
+	if ( ! isPublished || ! permalink ) {
+		return null;
+	}
+
+	return (
+		<Button
+			icon={ external }
+			label={ label || __( 'View post' ) }
+			href={ permalink }
+			target="_blank"
+		/>
+	);
+}