{{#social_accounts}} v6.38.0 - helper for theme social rendering

Contributing to Ghost
1

While testing the new {{#social_accounts}} helper in Ghost 6.38, I found some inconsistent behavior that may help other theme developers.

The helper works correctly with:

{{#social_accounts @site}} and inside author.hbs with: {{#social_accounts this}}

However, the helper still returns legacy provider keys internally. For example, it returns:
twitter instead of: x

This caused 500 errors in dynamic partials like:
{{> (concat "icons/" type) }} → because my theme had x.hbs but not twitter.hbs.

Creating a twitter.hbs icon fixed the issue immediately. :check_box_with_check:

Another inconsistency is that {{#has}} already recognizes the new naming:
{{#has any="x, facebook"}}

So currently:

  • has accepts x
  • social_accounts still returns twitter

Also, social_accounts seems to throw a 500 error if no social accounts exist, so wrapping it in {{#has}} is still necessary.

1 Like
2

I believe has would work with twitter as well. So, always using twitter as the type, could be the best approach. Because in many other places inside Ghost codebase, it’s still named as “twitter”.

3

Yes, has also works with Twitter.

4

However, the helper still returns legacy provider keys internally. For example, it returns:
twitter instead of: x

I’m looking at fixing this so that the type output is ‘x’ not ‘twitter’.

Also, social_accounts seems to throw a 500 error if no social accounts exist, so wrapping it in {{#has}} is still necessary.

Can you help me reproduce this? Is it no socials on an author or site, or both?

To be clear, you must call {{#social_accounts [something]}}{{/social_accounts}} - where something is @site or an author - that is expected.

5

I tested it in the context of author.hbs

The code below, without being enclosed in {{#has}}, generated a 500 error, even though the social fields were filled in the admin section of the author’s profile.

{{!-- Profile Links --}}

{{#author}}
{{#has any="twitter, facebook, linkedin, bluesky, threads, mastodon, tiktok, youtube, instagram, website, location"}}
{{#social_accounts this}}
<a href="{{href}}" target="_blank" rel="noopener noreferrer" aria-label="{{name}}">
{{> (concat "icons/social/" type)}}
</a>
{{/social_accounts}}
{{/has}}
{{/author}}

6

I have fixed the type issue so that {{#social_accounts}} will output x as the type for twitter/x. That fix will go out in 6.39 today.

As for the 500 error I’ve tried both myself and using AI and cannot reproduce an error with this code if partials aren’t involved. So I think it’s roughly the same missing partial / type error (fixed in main).

Do you have an error message landing with the 500 http code? Or can you tell me how you’re adding the code? Are you editing locally or uploading a zip etc.

If I run the codeblock you gave through gscan using the new inline theme editor, I get this error from gscan:

Oops! You seemed to have used invalid Handlebars syntax. This mostly happens when you use a helper that is not supported.
See the full list of available helpers here.
Affected files:
author.hbs: Inlined dynamic partials like {{> (dynamicPartial) }} can result in page errors if the partial does not exist, use block dynamic partials instead.

Now that error message is admittedly about as much use as a chocolate teapot… but it’s pointing to the fact that if you use a dynamic partial name you’ll get unpredictable page errors if the partial is missing (which is exactly what you hit)… and that the way to work around it it is to use a block partial and a fallback:

{{#author}}
  {{#social_accounts this}}
    <a href="{{href}}" target="_blank" rel="noopener noreferrer" aria-label="{{name}}">
      {{#> (concat "icons/social/" type)}}
         ## Your fallback goes here...
      {{/undefined}}
    </a>
  {{/social_accounts}}
{{/author}}

I think you can use this to also write code that works for both the old and new type versions…

{{#author}}
  {{#social_accounts this}}
    <a href="{{href}}" target="_blank" rel="noopener noreferrer" aria-label="{{name}}">
      {{#> (concat "icons/social/" type)}}
         {{#match type "twitter"}}
            {{> "icons/social/x"}}
         {{else}}
             ## Generic fallback
         {{/match}}
      {{/undefined}}
    </a>
  {{/social_accounts}}
{{/author}}

Hopefully this helps.

I’m gonna look at the unhelpful error messages and also the {{/undefined}} syntax when I get a minute to see if I can smooth all of that out a bit.

7

I’m editing locally, but the 500 error only appears when {{#social_accounts}} is not enclosed within the {{#has}} helper.

No message appears alongside the 500 error locally, but when I ran the .zip file through GScan, it returned the same message you mentioned.

I’ll test the code you sent after the update.

image
image907×520 13.9 KB