Site Editor: Add View Link

packages/edit-post/src/components/header/index.js

@@ -37,12 +37,11 @@ import FullscreenModeClose from './fullscreen-mode-close';
 import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
-import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -189,7 +188,7 @@ function Header( {
 					className="edit-post-header__post-preview-button"
 					forceIsAutosaveable={ hasActiveMetaboxes }
 				/>
-				<ViewLink />
+				<PostViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					setEntitiesSavedStatesCallback={

packages/edit-site/src/components/header-edit-mode/index.js

@@ -42,7 +42,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
-const { PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
 export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const {
@@ -217,6 +217,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							/>
 						</div>
 					) }
+					<PostViewLink />
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

packages/editor/src/components/post-view-link/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostViewLink( { showIconLabels } ) {
+	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"
+			showTooltip={ ! showIconLabels }
+		/>
+	);
+}

packages/editor/src/private-apis.js

@@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import PostPanelRow from './components/post-panel-row';
+import PostViewLink from './components/post-view-link';
 import PreviewDropdown from './components/preview-dropdown';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 
@@ -16,6 +17,7 @@ lock( privateApis, {
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
 	PostPanelRow,
+	PostViewLink,
 	PreviewDropdown,
 	PluginPostExcerpt,