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';
@@ -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">

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

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