Add: View button to the post card panel.

packages/editor/src/components/post-actions/actions.js

@@ -21,7 +21,13 @@ import {
 /**
  * Internal dependencies
  */
-import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
@@ -365,13 +371,20 @@ function useRestorePostAction() {
 	);
 }
 
-const viewPostAction = {
+export const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
 	isPrimary: true,
 	icon: external,
 	isEligible( post ) {
-		return post.status !== 'trash';
+		return (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				PATTERN_POST_TYPE,
+				NAVIGATION_POST_TYPE,
+			].includes( post.type ) && post.status !== 'trash'
+		);
 	},
 	callback( posts, onActionPerformed ) {
 		const post = posts[ 0 ];

packages/editor/src/components/post-card-panel/index.js

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	PanelBody,
+	Button,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -31,15 +32,34 @@ import {
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import TemplateAreas from '../template-areas';
+import { viewPostAction } from '../post-actions/actions';
+
+function ViewPostLink( { post } ) {
+	if ( ! viewPostAction.isEligible( post ) ) {
+		return null;
+	}
+	return (
+		<Button
+			label={ viewPostAction.label }
+			icon={ viewPostAction.icon }
+			isDestructive={ viewPostAction.isDestructive }
+			size="small"
+			onClick={ () => {
+				viewPostAction.callback( [ post ] );
+			} }
+		/>
+	);
+}
 
 export default function PostCardPanel( { className, actions } ) {
-	const { modified, title, templateInfo, icon, postType, isPostsPage } =
+	const { modified, title, templateInfo, icon, postType, isPostsPage, post } =
 		useSelect( ( select ) => {
 			const {
 				getEditedPostAttribute,
 				getCurrentPostType,
 				getCurrentPostId,
 				__experimentalGetTemplateInfo,
+				getCurrentPost,
 			} = select( editorStore );
 			const { getEditedEntityRecord, getEntityRecord } =
 				select( coreStore );
@@ -59,6 +79,7 @@ export default function PostCardPanel( { className, actions } ) {
 					area: _record?.area,
 				} ),
 				isPostsPage: +_id === siteSettings?.page_for_posts,
+				post: getCurrentPost(),
 			};
 		}, [] );
 	const description = templateInfo?.description;
@@ -95,6 +116,7 @@ export default function PostCardPanel( { className, actions } ) {
 					>
 						{ title ? decodeEntities( title ) : __( 'No Title' ) }
 					</Text>
+					<ViewPostLink post={ post } />
 					{ actions }
 				</HStack>
 				<VStack className="editor-post-card-panel__content">

packages/editor/src/components/post-card-panel/style.scss

@@ -29,4 +29,8 @@
 			color: inherit;
 		}
 	}
+
+	&__header > button {
+		margin-top: -$grid-unit-05;
+	}
 }

packages/editor/src/store/constants.js

@@ -21,6 +21,7 @@ export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
 export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
 export const PATTERN_POST_TYPE = 'wp_block';
+export const NAVIGATION_POST_TYPE = 'wp_navigation';
 export const TEMPLATE_ORIGINS = {
 	custom: 'custom',
 	theme: 'theme',