🐛 Fixed incorrect locale loading when changing themes

closes #12271

- When previous active theme did not have locale data for certain language, loading a theme which has such data did not result in correct locale being loaded
- Underlying issue was in settings cache being outdated during theme change related i18n initialization
- Fix focuses on removing settings cache dependency and and rely on most up to date data about currently active theme
- The benefit of this approach is reduced coupling with settings cache

core/frontend/services/themes/activate.js

@@ -16,7 +16,7 @@ function activate(loadedTheme, checkedTheme, error) {
         active.set(loadedTheme, checkedTheme, error);
         const currentGhostAPI = active.get().engine('ghost-api');
 
-        events.emit('services.themes.activated');
+        events.emit('services.themes.activated', loadedTheme.name);
 
         if (previousGhostAPI !== undefined && (previousGhostAPI !== currentGhostAPI)) {
             events.emit('services.themes.api.changed');

core/frontend/services/themes/i18n.js

@@ -3,7 +3,7 @@ const {i18n, events} = require('../../../server/lib/common');
 const logging = require('../../../shared/logging');
 const settingsCache = require('../../../server/services/settings/cache');
 const config = require('../../../shared/config');
-
+const active = require('./active');
 const jp = require('jsonpath');
 
 const isNil = require('lodash/isNil');
@@ -16,11 +16,12 @@ class ThemeI18n extends i18n.I18n {
     /**
      * Setup i18n support for themes:
      *  - Load correct language file into memory
+     *
+     * @param {String} activeTheme - name of the currently loaded theme
      */
-    init() {
+    init(activeTheme) {
         // This function is called during theme initialization, and when switching language or theme.
         const currentLocale = this._loadLocale();
-        const activeTheme = settingsCache.get('active_theme');
 
         // Reading file for current locale and active theme and keeping its content in memory
         if (activeTheme) {
@@ -101,15 +102,15 @@ let themeI18n = new ThemeI18n();
 //  *  1. you override a theme, which is already active
 //  *  2. The data has not changed, no event is triggered.
 //  */
-events.on('services.themes.activated', function () {
-    themeI18n.init();
+events.on('services.themes.activated', function (activeTheme) {
+    themeI18n.init(activeTheme);
 });
 
 /**
  * When locale changes, we reload theme translations
  */
 events.on('settings.lang.edited', function () {
-    themeI18n.init();
+    themeI18n.init(active.get().name);
 });
 
 module.exports = themeI18n;

core/frontend/services/themes/index.js

@@ -19,7 +19,7 @@ module.exports = {
     init: function initThemes() {
         const activeThemeName = settingsCache.get('active_theme');
 
-        i18n.init();
+        i18n.init(activeThemeName);
 
         debug('init themes', activeThemeName);
 

test/unit/helpers/t_spec.js

@@ -7,7 +7,6 @@ const configUtils = require('../../utils/configUtils');
 
 describe('{{t}} helper', function () {
     beforeEach(function () {
-        settingsCache.set('active_theme', {value: 'casper'});
         configUtils.set('paths:contentPath', path.join(__dirname, '../../utils/fixtures/'));
     });
 
@@ -18,7 +17,7 @@ describe('{{t}} helper', function () {
 
     it('theme translation is DE', function () {
         settingsCache.set('lang', {value: 'de'});
-        themeI18n.init();
+        themeI18n.init('casper');
 
         let rendered = helpers.t.call({}, 'Top left Button', {
             hash: {}
@@ -29,7 +28,7 @@ describe('{{t}} helper', function () {
 
     it('theme translation is EN', function () {
         settingsCache.set('lang', {value: 'en'});
-        themeI18n.init();
+        themeI18n.init('casper');
 
         let rendered = helpers.t.call({}, 'Top left Button', {
             hash: {}
@@ -40,7 +39,7 @@ describe('{{t}} helper', function () {
 
     it('[fallback] no theme translation file found for FR', function () {
         settingsCache.set('lang', {value: 'fr'});
-        themeI18n.init();
+        themeI18n.init('casper');
 
         let rendered = helpers.t.call({}, 'Top left Button', {
             hash: {}
@@ -50,9 +49,8 @@ describe('{{t}} helper', function () {
     });
 
     it('[fallback] no theme files at all, use key as translation', function () {
-        settingsCache.set('active_theme', {value: 'casper-1.4'});
         settingsCache.set('lang', {value: 'de'});
-        themeI18n.init();
+        themeI18n.init('casper-1.4');
 
         let rendered = helpers.t.call({}, 'Top left Button', {
             hash: {}