Replaced Twitter with X in editor and tags (#18415)

No ref

ghost/admin/app/components/editor/modals/preview.hbs

@@ -14,7 +14,7 @@
                         <button type="button" class="gh-btn {{if (eq this.tab "email") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "email")}} data-test-button="email-preview"><span>{{svg-jar "email-unread"}}</span></button>
                     {{/if}}
                 {{/if}}
-                <button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "twitter"}}</span></button>
+                <button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "facebook-logo"}}</span></button>
             </div>
         </div>
         <div class="right">

ghost/admin/app/components/editor/modals/preview/social.hbs

@@ -114,7 +114,7 @@
 
             <div class="gh-social-twitter-container">
                 <div class="flex ma4">
-                    <span>{{svg-jar "social-twitter" class="social-icon"}}</span>
+                    <span>{{svg-jar "social-x" class="social-icon"}}</span>
                     <div>
                         <span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
                         <span class="gh-social-og-time">12 hrs</span>

ghost/admin/app/components/gh-post-settings-menu.hbs

@@ -199,7 +199,7 @@
                         </li>
                         <li class="nav-list-item">
                             <button type="button"  {{action "showSubview" "twitter-data"}} data-test-button="twitter-data">
-                                <span>{{svg-jar "twitter-logo"}} Twitter card</span>
+                                <span>{{svg-jar "x-logo"}} X (formerly Twitter) card</span>
                             </button>
                             {{svg-jar "arrow-right" class="arrow-right"}}
                         </li>
@@ -300,7 +300,7 @@
                     {{#if (eq this.subview "twitter-data")}}
                         <div class="settings-menu-header subview">
                             <button aria-label="Close Twitter card panel" class="back settings-menu-header-action" data-test-button="close-psm-subview" type="button" {{action "closeSubview"}}>{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
-                            <h4>Twitter card</h4>
+                            <h4>X card</h4>
                             <div style="width:23px;"></div>
                         </div>
 
@@ -309,13 +309,13 @@
                             <form {{action "discardEnter" on="submit"}} class="gh-post-settings" aria-label="Twitter card settings">
                                 <GhImageUploaderWithPreview
                                     @image={{this.post.twitterImage}}
-                                    @text="Add Twitter image"
+                                    @text="Add X image"
                                     @allowUnsplash={{true}}
                                     @update={{action "setTwitterImage"}}
                                     @remove={{action "clearTwitterImage"}}
                                 />
                                 <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="twitterTitle">
-                                    <label for="twitter-title">Twitter title</label>
+                                    <label for="twitter-title">X title</label>
                                     <GhTextInput
                                         @class="post-setting-twitter-title"
                                         @id="twitter-title"
@@ -330,7 +330,7 @@
                                 </GhFormGroup>
 
                                 <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="twitterDescription">
-                                    <label for="twitter-description">Twitter description</label>
+                                    <label for="twitter-description">X description</label>
                                     <GhTextarea
                                         @class="post-setting-twitter-description"
                                         @id="twitter-description"
@@ -345,7 +345,7 @@
                                 </GhFormGroup>
 
                                 <div class="form-group">
-                                    <label>Twitter preview</label>
+                                    <label>X preview</label>
                                     <div class="gh-social-twitter-post-preview">
                                         {{#if this.twitterImage}}
                                             <div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>

ghost/admin/app/components/tags/tag-form.hbs

@@ -189,8 +189,8 @@
     <div class="gh-expandable-block">
         <div class="gh-expandable-header">
             <div>
-                <h4 class="gh-expandable-title">Twitter card</h4>
-                <p class="gh-expandable-description">Customized structured data for Twitter.</p>
+                <h4 class="gh-expandable-title">X (formerly Twitter) card</h4>
+                <p class="gh-expandable-description">Customized structured data for X.</p>
             </div>
             <button type="button" class="gh-btn gh-btn-expand" {{on "click" (toggle "twitterMetadataOpen" this)}}><span>{{if this.twitterMetadataOpen "Close" "Expand"}}</span></button>
         </div>
@@ -201,10 +201,10 @@
                 <div class="gh-twitter-settings">
                     <div class="gh-twitter-settings-left flex-basis-1-2-m flex-basis-2-3-l">
                         <GhFormGroup class="gh-tag-image-uploader" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterImage">
-                            <label for="twitter-image">Twitter image</label>
+                            <label for="twitter-image">X image</label>
                             <GhImageUploaderWithPreview
                                 @image={{@tag.twitterImage}}
-                                @text="Add Twitter image"
+                                @text="Add X image"
                                 @allowUnsplash={{true}}
                                 @update={{fn this.setTagProperty "twitterImage"}}
                                 @remove={{fn this.setTagProperty "twitterImage" ""}}
@@ -212,7 +212,7 @@
                         </GhFormGroup>
 
                         <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterTitle">
-                            <label for="twitter-title">Twitter title</label>
+                            <label for="twitter-title">X title</label>
                             <input
                                 type="text"
                                 id="twitter-title"
@@ -228,7 +228,7 @@
                         </GhFormGroup>
 
                         <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterDesctiption">
-                            <label for="twitter-description">Twitter description</label>
+                            <label for="twitter-description">X description</label>
                             <textarea
                                 id="twitter-description"
                                 name="twitterDescription"
@@ -243,10 +243,10 @@
                     </div>
 
                     <div class="flex-basis-1-2-m flex-basis-1-3-l">
-                        <label>Twitter preview</label>
+                        <label>X preview</label>
                         <div class="gh-twitter-container">
                             <div class="flex ma4">
-                                <span>{{svg-jar "social-twitter" class="social-icon"}}</span>
+                                <span>{{svg-jar "social-x" class="social-icon"}}</span>
                                 <div class="w-100">
                                     <span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
                                     <span class="gh-social-og-time">12 hrs</span>

ghost/admin/public/assets/icons/facebook-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>facebook-logo</title>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.651 8.34h-3.7V6.68a.868.868 0 0 1 .868-.955h2.606V2.25h-3.761c-3.415 0-4.058 2.606-4.058 4.222V8.34H7v3.475h2.606v9.991h4.344v-9.99h3.345l.356-3.476Z"/>
+</svg>

ghost/admin/public/assets/icons/social-x.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
+    <title>social-x</title>
+    <circle cx="20" cy="20" r="20" fill="#000"/>
+    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M24.518 29 11 11h4.482L29 29h-4.482Zm3.846-18-7.126 7.667M11.636 29l7.12-7.661"/>
+</svg>

ghost/admin/public/assets/icons/x-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <title>x-logo</title>
+    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.769 21.5 2.5 2.5h4.731l14.269 19h-4.731Zm4.06-19-7.522 8.093M3.171 21.5l7.516-8.087"/>
+</svg>