From 5cc3d943f247d20fb80fc41519f97da42836f1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Wed, 28 Aug 2024 12:08:25 +0200
Subject: [PATCH] Made the post preview card a link (#20846)

The modal in the new publish flow has a post preview card, which did not
link to the post itself. It does now (except when it's an email).
---
 .../app/components/modal-post-success.hbs     | 62 ++++++++++---------
 .../app/styles/components/publishmenu.css     | 11 +++-
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-success.hbs b/ghost/admin/app/components/modal-post-success.hbs
index 44e9d6dc88..c97df2a9e4 100644
--- a/ghost/admin/app/components/modal-post-success.hbs
+++ b/ghost/admin/app/components/modal-post-success.hbs
@@ -100,41 +100,43 @@
     <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
 
     {{#unless this.post.emailOnly}}
-    <div class="gh-post-card">
-        {{#if this.post.featureImage}}
-            <figure class="modal-image">
-                <img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
-            </figure>
-        {{else if this.post.twitterImage}}
-            <figure class="modal-image">
-                <img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
-            </figure>
-        {{else if this.post.ogImage}}
-            <figure class="modal-image">
-                <img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
-            </figure>
-        {{/if}}
-
-        <div class="modal-body">
-            <h2>{{this.post.title}}</h2>
-            {{#if this.post.excerpt}}
-                <p class="post-excerpt">{{this.post.excerpt}}</p>
+    <a href="{{this.post.url}}" target="_blank" rel="noopener noreferrer" title="View post: {{this.post.title}}">
+        <div class="gh-post-card">
+            {{#if this.post.featureImage}}
+                <figure class="modal-image">
+                    <img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
+                </figure>
+            {{else if this.post.twitterImage}}
+                <figure class="modal-image">
+                    <img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
+                </figure>
+            {{else if this.post.ogImage}}
+                <figure class="modal-image">
+                    <img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
+                </figure>
             {{/if}}
 
-            <div class="gh-post-details">
-             {{#if (get-setting "icon")}}
-                <div class="gh-post-bookmark-site-icon">
-                    <img src={{get-setting "icon"}} alt="" role="presentation" />
+            <div class="modal-body">
+                <h2>{{this.post.title}}</h2>
+                {{#if this.post.excerpt}}
+                    <p class="post-excerpt">{{this.post.excerpt}}</p>
+                {{/if}}
+
+                <div class="gh-post-details">
+                {{#if (get-setting "icon")}}
+                    <div class="gh-post-bookmark-site-icon">
+                        <img src={{get-setting "icon"}} alt="" role="presentation" />
+                    </div>
+                {{/if}}
+
+                {{#if (get-setting "title")}}
+                    <div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
+                {{/if}}
+                    <div class="gh-post-bookmark-authors">{{post-author-names this.post}}</div>
                 </div>
-            {{/if}}
-
-            {{#if (get-setting "title")}}
-                <div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
-            {{/if}}
-                <div class="gh-post-bookmark-authors">{{post-author-names this.post}}</div>
             </div>
         </div>
-    </div>
+    </a>
 
     <footer class="modal-footer">
         {{#if (and this.post.isPublished (not this.post.emailOnly))}}
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index 8646ab73f0..a664a91268 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -895,6 +895,15 @@
     border-radius: var(--radius);
 }
 
+.modal-post-success a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.modal-post-success a:hover .gh-post-card {
+    background: var(--whitegrey-l2);
+}
+
 .modal-post-success .gh-post-card {
     border-radius: 8px;
     border: 1px solid var(--lightgrey-l1);
@@ -1054,7 +1063,7 @@
 }
 
 .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {
-    background: var(--whitegrey-l1);
+    background: var(--whitegrey-l2);
 }
 
 .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) span {