Wired up custom theme settings form to preview updates

refs https://github.com/TryGhost/Team/issues/1097

- added `customThemeSettings.keyValueObject` which returns a plain object with setting values assign to the setting keys on the object
- updated customize modal's preview data generation to use `customThemeSettings.keyValueObject` to assign a JSON-stringified version to the `custom` param on the `x-ghost-preview` header
- updated theme settings `<Select>` component to call the passed through `updatePreview()` action when the value changes

ghost/admin/app/components/custom-theme-settings/select.js

@@ -11,5 +11,6 @@ export default class CustomThemeSettingsSelectComponent extends Component {
     setSelection(changeEvent) {
         const value = changeEvent.target.value;
         this.args.setting.set('value', value);
+        this.args.onChange?.();
     }
 }

ghost/admin/app/components/modals/design/customize.js

@@ -24,6 +24,19 @@ export default class ModalsDesignCustomizeComponent extends Component {
         return this.customThemeSettings.settings;
     }
 
+    get previewData() {
+        const params = new URLSearchParams();
+
+        params.append('c', this.settings.get('accentColor') || '#ffffff');
+        params.append('icon', this.settings.get('icon'));
+        params.append('logo', this.settings.get('logo'));
+        params.append('cover', this.settings.get('coverImage'));
+
+        params.append('custom', JSON.stringify(this.customThemeSettings.keyValueObject));
+
+        return params.toString();
+    }
+
     @action
     changeTab(tab) {
         this.tab = tab;

ghost/admin/app/components/modals/design/customize/theme-settings.hbs

@@ -2,7 +2,7 @@
     <form>
         {{#each @themeSettings as |setting index|}}
             {{#if (eq setting.type "select")}}
-                <CustomThemeSettings::Select @setting={{setting}} @index={{index}} />
+                <CustomThemeSettings::Select @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
             {{/if}}
         {{/each}}
     </form>

ghost/admin/app/services/custom-theme-settings.js

@@ -14,6 +14,16 @@ export default class CustomThemeSettingsServices extends Service {
         return !!dirtySetting;
     }
 
+    get keyValueObject() {
+        const keyValue = {};
+
+        this.settings.forEach((setting) => {
+            keyValue[setting.key] = setting.value;
+        });
+
+        return keyValue;
+    }
+
     load() {
         return this.loadTask.perform();
     }