Add a hook to run some JS to replace the labels of the ThemedColorBlo…

…ck select...

with approriate human-friendly labels that fit the active theme for the site.

birdbox/common/wagtail_hooks.py

@@ -0,0 +1,44 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+from django.templatetags.static import static
+from django.utils.html import format_html_join
+from django.utils.safestring import mark_safe
+
+from wagtail import hooks
+
+
+@hooks.register("insert_editor_js")
+def patch_in_dynamic_theme_color_names():
+    # Each theme has a set of custom/specific colors associated with it,
+    # sharing the same CSS classnames, but varying based on theme.
+    # microsite.blocks.ColorThemBlock has values which are the CSS classes to use
+    # and, by default, the _label_ for each option is, basically, the CSS class
+    # name. To make the editor experience better, we swap in theme-specific
+    # human-friendly labels when the editing UI is rendered, based on the
+    # theme selected for the birdbox site
+
+    from microsite.models import MicrositeSettings
+
+    try:
+        settings = MicrositeSettings.objects.first()
+        theme_name = settings.site_theme
+    except AttributeError:
+        theme_name = "mozilla"
+
+    js_files = [
+        "js/color-theme-block-labels.js",
+    ]
+    js_includes = format_html_join("\n", '<script src="{0}"></script>', ((static(filename),) for filename in js_files))
+
+    return js_includes + mark_safe(
+        """
+        <script>
+            window.addEventListener("DOMContentLoaded", () => {
+                window.Birdbox.themeColorLabelFixup("%s");
+            });
+        </script>
+        """
+        % theme_name  # noqa: F522 F524  # Old-style formatting needed to avoid breaking hook rendering
+    )

src/js/theme-color-labels.js

@@ -0,0 +1,66 @@
+/*
+* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at https://mozilla.org/MPL/2.0/.
+*/
+
+/* These mappings let us give descriptive names to CSS classes
+* when we surface them in the Wagtail editor. If you change the
+* value of the relevant class, you may need to update here, too
+*/
+
+const colorLabels = {
+    "mozilla": {
+        "mzp-t-light": "White",
+        "mzp-t-dark": "Black/Ink",
+        "bb-t-light-color-01": "Light Gray",
+        "bb-t-dark-color-01": "Dark Gray",
+        "bb-t-light-color-02": "Pink",
+        "bb-t-dark-color-02": "Red",
+        "bb-t-light-color-03": "Light Yellow",
+        "bb-t-dark-color-03": "Dark Yellow",
+        "bb-t-light-color-04": "Light Orange",
+        "bb-t-dark-color-04": "Dark Orange",
+        "bb-t-light-color-05": "Light Green",
+        "bb-t-dark-color-05": "Dark Green",
+        "bb-t-light-color-06": "Light Blue",
+        "bb-t-dark-color-06": "Dark Blue",
+        "bb-t-light-color-07": "Light Violet",
+        "bb-t-dark-color-07": "Dark Violet",
+    },
+    "firefox": {
+        "mzp-t-light": "White",
+        "mzp-t-dark": "Black/Ink",
+        "bb-t-light-color-01": "Light Gray",
+        "bb-t-dark-color-01": "Dark Gray",
+        "bb-t-light-color-02": "Pink",
+        "bb-t-dark-color-02": "Red",
+        "bb-t-light-color-03": "Light Yellow",
+        "bb-t-dark-color-03": "Dark Yellow",
+        "bb-t-light-color-04": "Light Orange",
+        "bb-t-dark-color-04": "Dark Orange",
+        "bb-t-light-color-05": "Light Green",
+        "bb-t-dark-color-05": "Dark Green",
+        "bb-t-light-color-06": "Light Blue",
+        "bb-t-dark-color-06": "Dark Blue",
+        "bb-t-light-color-07": "Light Violet",
+        "bb-t-dark-color-07": "Dark Violet",
+    },
+}
+
+var fixupHelper = function(themeName){
+    const themeColorOptionElements = document.querySelectorAll("[data-contentpath='color_theme'] option");
+    const newLabels = colorLabels[themeName];
+    Array.from(themeColorOptionElements).forEach(
+        item => {
+            if (newLabels.hasOwnProperty(item.label)){
+                item.label=newLabels[item.label]
+            }
+        }
+    )
+};
+
+
+window.Birdbox = window.Birdbox || {};
+
+window.Birdbox.themeColorLabelFixup = fixupHelper

webpack.config.js

@@ -19,6 +19,7 @@ module.exports = {
         "protocol-global": "./src/js/protocol/global.js",
         "newsletter-form": "./src/js/newsletter/newsletter-init.js", // not protocol JS (yet)
         analytics: "./src/js/analytics.js",
+        "color-theme-block-labels": "./src/js/theme-color-labels.js",
 
         // CSS
         // base/core