Publish flow improvements and bug fixes (#20824)

ref DES-731

- improved mobile styles for the social buttons in the modal
- fixed the flow for publishing/scheduling pages
- redirect to post list only when a post doesn't involve any email

ghost/admin/app/components/editor/modals/publish-flow/confirm.js

@@ -95,15 +95,29 @@ export default class PublishFlowOptions extends Component {
             yield this.args.saveTask.perform();
             if (this.feature.publishFlowEndScreen) {
                 if (this.args.publishOptions.isScheduled) {
-                    localStorage.setItem('ghost-last-scheduled-post', this.args.publishOptions.post.id);
+                    localStorage.setItem('ghost-last-scheduled-post', JSON.stringify({
+                        id: this.args.publishOptions.post.id,
+                        type: this.args.publishOptions.post.displayName
+                    }));
+                    if (this.args.publishOptions.post.displayName !== 'page') {
                         this.router.transitionTo('posts');
                     } else {
-                    localStorage.setItem('ghost-last-published-post', this.args.publishOptions.post.id);
-                    if (this.args.publishOptions.post.emailOnly) {
+                        this.router.transitionTo('pages');
+                    }
+                } else {
+                    localStorage.setItem('ghost-last-published-post', JSON.stringify({
+                        id: this.args.publishOptions.post.id,
+                        type: this.args.publishOptions.post.displayName
+                    }));
+                    if (this.args.publishOptions.post.displayName !== 'page') {
+                        if (this.args.publishOptions.post.hasEmail) {
                             this.router.transitionTo('posts.analytics', this.args.publishOptions.post.id);
                         } else {
                             this.router.transitionTo('posts');
                         }
+                    } else {
+                        this.router.transitionTo('pages');
+                    }
                 }
             }
         } catch (e) {

ghost/admin/app/components/modal-post-success.hbs

@@ -12,6 +12,7 @@
                     {{/if}}
                 </span>
                 <span>
+                    {{#if this.post.isPost}}
                         {{#if this.post.emailOnly}}
                             Your email has been sent.
                         {{else}}
@@ -21,6 +22,9 @@
                                 Spread the word!
                             {{/if}}
                         {{/if}}
+                    {{else}}
+                        Your page is published.
+                    {{/if}}
                 </span>
             {{/if}}
         </h1>
@@ -32,7 +36,11 @@
         {{#if this.post.isSent}}
             It
         {{else}}
-            {{if this.post.emailOnly "Your email" "Your post"}}
+            {{#if this.post.emailOnly}}
+                Your email
+            {{else}}
+                Your {{this.post.displayName}}
+            {{/if}}
         {{/if}}
         {{if this.post.isScheduled "will be" "was"}}
         {{#if this.post.emailOnly}}
@@ -116,7 +124,7 @@
             {{#if (get-setting "title")}}
                 <div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
             {{/if}}
-                <div class="gh-post-bookmark-authors">{{this.authorNames}}</div>
+                <div class="gh-post-bookmark-authors">{{post-author-names this.post}}</div>
             </div>
         </div>
 

ghost/admin/app/components/modal-post-success.js

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
-import {authorNames} from '../helpers/author-names';
 import {capitalize} from '@ember/string';
 import {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
@@ -39,10 +38,6 @@ export default class PostSuccessModal extends Component {
         return encodeURIComponent(`${this.post.title} ${this.post.url}`);
     }
 
-    get authorNames() {
-        return authorNames([this.post.authors]);
-    }
-
     @task
     *handleCopyLink() {
         copyTextToClipboard(this.post.url);

ghost/admin/app/components/posts-list/list.js

@@ -48,13 +48,15 @@ export default class PostsList extends Component {
 
     @task
     *getLatestScheduledPost() {
-        const result = yield this.store.query('post', {filter: `id:${localStorage.getItem('ghost-last-scheduled-post')}`, limit: 1});
+        const post = JSON.parse(localStorage.getItem('ghost-last-scheduled-post'));
+        const result = yield this.store.query(post.type, {filter: `id:${post.id}`, limit: 1});
         this.latestScheduledPost = result.toArray()[0];
     }
 
     @task
     *getlatestPublishedPost() {
-        const result = yield this.store.query('post', {filter: `id:${localStorage.getItem('ghost-last-published-post')}`, limit: 1});
+        const post = JSON.parse(localStorage.getItem('ghost-last-published-post'));
+        const result = yield this.store.query(post.type, {filter: `id:${post.id}`, limit: 1});
         this.latestPublishedPost = result.toArray()[0];
     }
 

ghost/admin/app/styles/components/publishmenu.css

@@ -977,10 +977,13 @@
     white-space: nowrap;
 }
 
+.modal-post-success .modal-body .gh-post-bookmark-authors::before {
+    margin-left: 4px;
+}
+
 .modal-post-success .modal-body .gh-post-bookmark-site-icon {
     width: 24px;
     height: 24px;
-    
 }
 
 .modal-post-success .modal-body strong.nowrap {
@@ -1008,8 +1011,8 @@
 }
 
 .modal-post-success .modal-footer .share-buttons {
-    display: flex;
-    justify-content: space-evenly;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     align-items: center;
     gap: 16px;
 }
@@ -1085,8 +1088,22 @@
         flex-direction: column;
     }
 
+    .modal-post-success .modal-footer .share-buttons {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
     .modal-post-success .modal-footer .copy-link,
     .modal-post-success .modal-footer .copy-preview-link {
         width: 100%!important;
     }
 }
+
+@media (max-width: 600px) {
+    .modal-post-success .modal-footer:has(.share-buttons) {
+        flex-direction: column;
+    }
+
+    .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
+        width: auto;
+    }
+}