Add <ViewLink> component (#50260)

Displays a button with an external icon to open
a new window with the published post type

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 }

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"
+		/>
+	);
+}