From 45b527d7ae17b2dbd6d6e9a9d3e4f83018adf21a Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 12 Apr 2024 12:49:59 +0100
Subject: [PATCH] Add: View button to the post card panel.

---
 .../src/components/post-actions/actions.js    | 17 +++++++++++---
 .../src/components/post-card-panel/index.js   | 23 +++++++++++++++++++
 .../src/components/post-card-panel/style.scss |  4 ++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 8dded54a6a756..315aace884c7a 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/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 ];
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 757040f6336b6..f3ce9c4b99718 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/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';
@@ -30,6 +31,24 @@ import {
 } 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 {
@@ -40,11 +59,13 @@ export default function PostCardPanel( { className, actions } ) {
 		postType,
 		postContent,
 		isPostsPage,
+		post,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
 			getCurrentPostType,
 			getCurrentPostId,
+			getCurrentPost,
 			__experimentalGetTemplateInfo,
 		} = select( editorStore );
 		const { getEditedEntityRecord, getEntityRecord } = select( coreStore );
@@ -64,6 +85,7 @@ export default function PostCardPanel( { className, actions } ) {
 			} ),
 			isPostsPage: +_id === siteSettings?.page_for_posts,
 			postContent: getEditedPostAttribute( 'content' ),
+			post: getCurrentPost(),
 		};
 	}, [] );
 	const description = templateInfo?.description;
@@ -100,6 +122,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">
diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
index 78c0ab55e6c1f..3ad0c07c157fc 100644
--- a/packages/editor/src/components/post-card-panel/style.scss
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -29,4 +29,8 @@
 			color: inherit;
 		}
 	}
+
+	&__header > button {
+		margin-top: -$grid-unit-05;
+	}
 }