Add: View button to the post card panel.

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

@@ -21,7 +21,12 @@ 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,
+} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
@@ -365,13 +370,19 @@ 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,
+			].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';
@@ -26,14 +27,33 @@ import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import TemplateAreas from '../template-areas';
+import { viewPostAction } from '../post-actions/actions';
+
+function ActionTrigger( { action, item } ) {
+	if ( ! action.isEligible( item ) ) {
+		return null;
+	}
+	return (
+		<Button
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ async () => {
+				await action.callback( [ item ] );
+			} }
+		/>
+	);
+}
 
 export default function PostCardPanel( { className, actions } ) {
-	const { modified, title, templateInfo, icon, postType } = useSelect(
+	const { modified, title, templateInfo, icon, postType, post } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostAttribute,
 				getCurrentPostType,
 				getCurrentPostId,
+				getCurrentPost,
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
 			const { getEditedEntityRecord } = select( coreStore );
@@ -51,6 +71,7 @@ export default function PostCardPanel( { className, actions } ) {
 				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 					area: _record?.area,
 				} ),
+				post: getCurrentPost(),
 			};
 		}
 	);
@@ -86,6 +107,7 @@ export default function PostCardPanel( { className, actions } ) {
 					>
 						{ title ? decodeEntities( title ) : __( 'No Title' ) }
 					</Text>
+					<ActionTrigger item={ post } action={ viewPostAction } />
 					{ 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;
+	}
 }