Merge branch 'main' into fix/11592-remove-trailing-slash-from-void-el…

…ements

.github/workflows/visual-regression-testing.yml

@@ -58,7 +58,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-python@v4
         with:
-          python-version: 3.9.9
+          python-version: 3.11
           cache: "pip"
       - uses: actions/setup-node@v3
         with:

docs/upgrading.md

@@ -19,3 +19,10 @@ A pages types usage report has been added on `networkapi.reports.views`, which w
 ### Localisation utility
 
 The `localize_queryset` utility function on `networkapi.wagtailpages.utils` has been incorporated [into core](https://github.com/wagtail/wagtail/pull/11274). Once that has been released, the implementation here should be removed in favour of the core one.
+
+
+## wagtail-ab-testing
+
+In order to make `wagtail-ab-testing` compatible with our CSP, the main script and template tag had to be overwritten. The script on `templates/wagtail_ab_testing/script.html` was modified to pass values through a `json_script` tag (as [Django recommends](https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-script)) and a `nonce` was added to the scripts.
+
+The `wagtail_ab_testing_script` template tag was rewritten at `networkapi.wagtailcustomization.templatetags.wagtailcustom_tags` to pass the request to the script so that it can pick up the `nonce` value from `request` (`request.csp_nonce`).

maintenance/maintenance.html

@@ -28,11 +28,6 @@
         <div class="takeover"></div>
         <div class="wrapper">
             <div class="sticky-top">
-                <div class="wrapper-join-us">
-                    <div class="container">
-                        <div class="join-us" id="join-us"></div>
-                    </div>
-                </div>
                 <div id="primary-nav-container">
                     <div class="wrapper-burger">
                         <div class="menu-container">

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -53,8 +53,10 @@
     {% block secondary_nav %}{% endblock %}
 
     {# Single column layout #}
-    <div class="cms mozfest-content mb-3 {% if page.use_wide_template %} wide {% endif %}{% block mozfest_content_classes %}{% endblock mozfest_content_classes %}">
-        {% include "partials/streamfield.html" %}
+    <div class="cms mozfest-content {% if page.use_wide_template %} wide {% endif %}{% block mozfest_content_classes %}{% endblock mozfest_content_classes %}">
+        {% block streamfield %}
+            {% include "partials/streamfield.html" %}
+        {% endblock streamfield %}
     </div>
 
 {% endblock %}

network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html

@@ -15,6 +15,10 @@
     {% include "partials/primary_hero.html" with page=page %}
 {% endblock %}
 
+{% block streamfield %}
+    {% include "partials/streamfield_spacer.html" %}
+{% endblock streamfield %}
+
 {% block bootstrap_width %}col-lg-12{% endblock bootstrap_width %}
 
 {% block footer_block %}

network-api/networkapi/mozfest/templates/mozfest/mozfest_landing_page.html

@@ -15,6 +15,10 @@
     {% include "partials/primary_hero.html" with page=page %}
 {% endblock hero_guts %}
 
+{% block streamfield %}
+    {% include "partials/streamfield_spacer.html" %}
+{% endblock streamfield %}
+
 {% block bootstrap_width %}col-lg-12{% endblock bootstrap_width %}
 
 {% block footer_block %}

network-api/networkapi/mozfest/templates/partials/primary_hero.html

@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 
 {% image page.banner fill-1500x620 as hero_image %}
-<div class="tw-relative tw-dark tw-w-full tw-h-[470px] large:tw-h-[620px] tw-bg-center tw-bg-cover tw-mb-16 large:tw-mb-18 after:tw-opacity-70 after:tw-bottom-0 after:tw-absolute after:tw-content-[''] after:tw-bg-gradient-to-t after:tw-from-50% after:tw-from-black after:tw-to-transparent after:tw-h-[200px] after:tw-w-full" style="background-image:url('{{ hero_image.url }}')">
+<div class="tw-relative tw-dark tw-w-full tw-h-[470px] large:tw-h-[620px] tw-bg-center tw-bg-cover after:tw-opacity-70 after:tw-bottom-0 after:tw-absolute after:tw-content-[''] after:tw-bg-gradient-to-t after:tw-from-50% after:tw-from-black after:tw-to-transparent after:tw-h-[200px] after:tw-w-full" style="background-image:url('{{ hero_image.url }}')">
     <div class="tw-bg-gradient-to-t tw-from-black tw-via-black tw-to-festival-purple-200 tw-inset-0 tw-absolute tw-opacity-50"></div>
     <div class="tw-container">
         <div class="tw-row">

network-api/networkapi/mozfest/templates/partials/streamfield.html

@@ -1,5 +1,12 @@
 {% load wagtailcore_tags %}
 
 {% for block in page.body %}
+    {# optionally render a pre and post paragraph spacer for landing_page / homepage page types with dark sections #}
+    {% if block.block_type == 'paragraph' %}
+        {% block pre_paragraph_spacer %}{% endblock pre_paragraph_spacer %}
+    {% endif %}
     {% include_block block with parent_page=page %}
-{% endfor %}
+    {% if block.block_type == 'paragraph' %}
+        {% block post_paragraph_spacer %}{% endblock post_paragraph_spacer %}
+    {% endif %}
+{% endfor %}

network-api/networkapi/mozfest/templates/partials/streamfield_spacer.html

@@ -0,0 +1,9 @@
+{% extends "./streamfield.html" %}
+
+{% block pre_paragraph_spacer %}
+    <div class="tw-mt-16 large:tw-mt-18"></div>
+{% endblock pre_paragraph_spacer %}
+
+{% block post_paragraph_spacer %}
+    <div class="tw-mt-8 large:tw-mt-10"></div>
+{% endblock post_paragraph_spacer %}

network-api/networkapi/templates/fragments/buyersguide/pni_mobile_nav.html

@@ -8,7 +8,7 @@
                 <div class="dropdown-nav">
                     <div>
                         <button class="expander d-flex justify-content-between">
-                            <span class="active-link-label d-inline-block multipage-link active">
+                            <span class="active-link-label multipage-link active">
                                 {% if current_category.parent %}
                                     {{ current_category.parent.name }}
                                 {% elif current_category %}
@@ -17,7 +17,7 @@
                                     {% trans "All Categories" %}
                                 {% endif %}
                             </span>
-                            <span class="d-inline-block align-self-center control"></span>
+                            <span class="align-self-center control"></span>
                         </button>
                     </div>
                     <div>

network-api/networkapi/templates/fragments/buyersguide/related_product.html

@@ -13,7 +13,7 @@
             >
         </div>
         <p class="tw-body-small mt-3 mb-1">{{ related_product.company }}</p>
-        <p>{{ related_product.title }}</p>
+        <p class="product-title">{{ related_product.title }}</p>
     </a>
 
     {% include "fragments/buyersguide/privacy_ding.html" with product=related_product %}

network-api/networkapi/templates/fragments/buyersguide/related_products_section.html

@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<section id="related-products" class="tw-col-span-full medium:tw-col-span-2 large:tw-col-start-2">
+    <div class="tw-flex tw-flex-col medium:tw-items-center large:tw-items-baseline medium:tw-flex-row-reverse medium:tw-gap-12">
+        {% include "fragments/buyersguide/wavy_line.html" %}
+        <h2 class="tw-h3-heading tw-mt-4 large:tw-mt-0 tw-shrink-0">{% trans "Related products" %}</h2>
+    </div>
+    <div class="tw-grid tw-grid-cols-2 medium:tw-grid-cols-4 tw-gap-16">
+        {% for related_product_page in related_products %}
+            {% include "fragments/buyersguide/related_product.html" with related_product=related_product_page %}
+        {% endfor %}
+    </div>
+</section>

network-api/networkapi/templates/fragments/footer.html

@@ -89,7 +89,7 @@
                             {% endif %}
                             <div class="tw-row">
                                 <div class="tw-w-full tw-px-8">
-                                    <hr class="tw-mt-24 tw-mb-8" />
+                                    <hr class="tw-mt-24 tw-mb-8">
                                     <p class="tw-dark tw-body-small tw-mb-0">
                                         {% blocktrans with foundation_website_url='https://foundation.mozilla.org' foundation_website='foundation.mozilla.org' cc_website_url='https://foundation.mozilla.org/about/website-licensing/' %}Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at <a href="{{ foundation_website_url }}">{{ foundation_website }}</a>. Most content available under a <a href="{{ cc_website_url }}">Creative Commons license</a>.{% endblocktrans %}
                                     </p>

network-api/networkapi/templates/pages/base.html

@@ -1,4 +1,4 @@
-{% load wagtailmetadata_tags i18n localization settings_value wagtailuserbar static mofo_common %}
+{% load wagtailmetadata_tags i18n localization settings_value wagtailuserbar static mofo_common wagtailcustom_tags %}
 
 {% get_current_language as lang_code %}
 
@@ -58,6 +58,8 @@
             })(window,document,'script','FundraiseUp','ADCYPWMX');</script>
         {% endblock %}
 
+        {% wagtail_ab_testing_script %}
+
         {% block commento_meta %}{% endblock %}
 
         {% block stylesheets %}

network-api/networkapi/templates/pages/buyersguide/product_page.html

@@ -168,21 +168,14 @@ <h2 class="tw-h3-heading">{% trans "Tips to protect yourself" %}</h2>
                 {% endif %}
             {% endwith %}
 
-            {% with related_products=product.localized_related_products %}
-                {% if related_products %}
-                    <section id="related-products" class="tw-col-span-full medium:tw-col-span-2 large:tw-col-start-2">
-                        <div class="tw-flex tw-flex-col medium:tw-items-center large:tw-items-baseline medium:tw-flex-row-reverse medium:tw-gap-12">
-                            {% include "fragments/buyersguide/wavy_line.html" %}
-                            <h2 class="tw-h3-heading tw-mt-4 large:tw-mt-0 tw-shrink-0">{% trans "Related products" %}</h2>
-                        </div>
-                        <div class="tw-grid tw-grid-cols-2 medium:tw-grid-cols-4 tw-gap-16">
-                            {% for related_product_page in related_products %}
-                                {% include "fragments/buyersguide/related_product.html" with related_product=related_product_page %}
-                            {% endfor %}
-                        </div>
-                    </section>
-                {% endif %}
-            {% endwith %}
+            {% block related_products %}
+                {% with related_products=product.localized_related_products %}
+                    {% if related_products %}
+                        {% include "fragments/buyersguide/related_products_section.html" with related_products=related_products %}
+                    {% endif %}
+                {% endwith %}
+            {% endblock related_products %}
+
         </div>
 
         {% if use_commento %}

network-api/networkapi/templates/partials/intro_and_content_divider.html

@@ -1,5 +1,5 @@
 <div class="container {{ wrapper_class }}">
     <div class="row">
-        <div class="col-12"><hr class="intro-and-content-divider" /></div>
+        <div class="col-12"><hr class="intro-and-content-divider"></div>
     </div>
 </div>

network-api/networkapi/templates/previews/buyersguide/product_page.html

@@ -0,0 +1,11 @@
+{# This template is only used for CMS previews of ProductPages. #}
+
+{% extends "pages/buyersguide/product_page.html" %}
+
+{% block related_products %}
+    {% with related_products=product.preview_related_products %}
+        {% if related_products %}
+            {% include "fragments/buyersguide/related_products_section.html" with related_products=related_products %}
+        {% endif %}
+    {% endwith %}
+{% endblock related_products %}

network-api/networkapi/templates/wagtail_ab_testing/script.html

@@ -0,0 +1,67 @@
+{% load static %}
+
+{% if track %}
+    {# Is this a Wagtail Page? #}
+    {% if page %}
+        {# This value is used to check if a goal has been reached #}
+        {{ page.id|json_script:"abtesting-page-id" }}
+    {% endif %}
+
+    {# Is there a test running on the current page? #}
+    {% if test and version %}
+        {{ test.id|json_script:"abtesting-test-id" }}
+        {{ version|json_script:"abtesting-version" }}
+        {{ test.goal_event|json_script:"abtesting-goal-event" }}
+        {% if test.goal_page %}
+            {{ test.goal_page.id|json_script:"abtesting-goal-page-id" }}
+        {% else %}
+            {{ None|json_script:"abtesting-goal-page-id" }}
+        {% endif %}
+    {% endif %}
+
+    {# URLs #}
+    {% url 'wagtail_ab_testing:register_participant' as register_participant_url %}
+    {{ register_participant_url|json_script:"abtesting-register-participant-url" }}
+    {% url 'wagtail_ab_testing:goal_reached' as goal_reached_url %}
+    {{ goal_reached_url|json_script:"abtesting-goal-reached-url" }}
+
+    <script nonce="{{ request.csp_nonce }}">
+        // Read values from the DOM
+        const registerParticipantUrl = JSON.parse(document.getElementById('abtesting-register-participant-url').textContent);
+        const goalReachedUrl = JSON.parse(document.getElementById('abtesting-goal-reached-url').textContent);
+
+        window.wagtailAbTesting = {
+            urls :{
+                registerParticipant: registerParticipantUrl,
+                goalReached: goalReachedUrl
+            }
+        };
+
+        if (document.getElementById('abtesting-page-id')) {
+            const pageId = JSON.parse(document.getElementById('abtesting-page-id').textContent);
+            window.wagtailAbTesting.pageId = pageId;
+        }
+
+        let testId = null;
+        let version = null;
+
+        if (document.getElementById('abtesting-test-id')) {
+            testId = JSON.parse(document.getElementById('abtesting-test-id').textContent);
+        }
+
+        if (document.getElementById('abtesting-version')) {
+            version = JSON.parse(document.getElementById('abtesting-version').textContent);
+        }
+
+        if (testId && version) {
+            const goalEvent = JSON.parse(document.getElementById('abtesting-goal-event').textContent);
+            const goalPageId = JSON.parse(document.getElementById('abtesting-goal-page-id').textContent);
+            window.wagtailAbTesting.testId = testId;
+            window.wagtailAbTesting.version = version;
+            window.wagtailAbTesting.goalEvent = goalEvent;
+            window.wagtailAbTesting.goalPageId = goalPageId;
+        }
+    </script>
+
+    <script nonce="{{ request.csp_nonce }}" src="{% static 'wagtail_ab_testing/js/tracker.js' %}" defer async></script>
+{% endif %}

network-api/networkapi/utility/orderables.py

@@ -4,12 +4,18 @@
     from django.db import models
 
 
-def get_related_items(queryset: "models.QuerySet", related_item_field: str) -> list["models.Model"]:
+def get_related_items(
+    queryset: "models.QuerySet", related_item_field: str, order_by: str | None = None
+) -> list["models.Model"]:
     """
     Return list of the related items from the queryset.
 
     For each item in the queryset, the related item stored in `related_item_field` is
     returned.
 
     """
+    # Apply ordering if needed
+    if order_by:
+        queryset = queryset.order_by(order_by)
+
     return [getattr(relation, related_item_field) for relation in queryset.select_related(related_item_field)]

network-api/networkapi/wagtailcustomization/static/wagtailadmin/css/max-length-field.css

@@ -1,6 +1,5 @@
 .max-length-countdown {
   text-align: right;
-  color: #000000;
 }
 
 .max-length-countdown.warning {

network-api/networkapi/wagtailcustomization/templatetags/wagtailcustom_tags.py

@@ -6,6 +6,8 @@
 from django.utils.safestring import SafeText
 from django.utils.text import slugify
 from wagtail.rich_text import RichText
+from wagtail_ab_testing.models import AbTest
+from wagtail_ab_testing.utils import request_is_trackable
 
 # We don't actually register any tags: the idea is to tap into
 # the richtext filter, but that won't let us change _all_ the
@@ -85,6 +87,20 @@ def with_heading_ids(self):
     return re.sub(heading_re, add_id_attribute, html)
 
 
+@register.inclusion_tag("wagtail_ab_testing/script.html", takes_context=True)
+def wagtail_ab_testing_script(context):
+    request = context["request"]
+    serving_variant = getattr(request, "wagtail_ab_testing_serving_variant", False)
+
+    return {
+        "request": request,
+        "track": request_is_trackable(request),
+        "page": context.get("page", None),
+        "test": getattr(request, "wagtail_ab_testing_test", None),
+        "version": AbTest.VERSION_VARIANT if serving_variant else AbTest.VERSION_CONTROL,
+    }
+
+
 # Rebind the RichText's html serialization function such that
 # the output is still entirely functional as far as wagtail
 # can tell, except with headings enriched with fragment ids.

network-api/networkapi/wagtailpages/pagemodels/buyersguide/products.py

@@ -682,6 +682,9 @@ def get_meta_image_url(self, request):
         except Exception:
             return static("_images/buyers-guide/evergreen-social.png")
 
+    def get_preview_template(self, request, mode_name):
+        return "previews/buyersguide/product_page.html"
+
     content_panels = Page.content_panels + [
         FieldPanel("company"),
         MultiFieldPanel(
@@ -835,6 +838,17 @@ def localized_related_products(self):
         related_products = localize_queryset(related_products, preserve_order=True)
         return related_products.specific()
 
+    @property
+    def preview_related_products(self) -> list:
+        """
+        Fetches related product updates for CMS page previews.
+        """
+        related_products = orderables.get_related_items(
+            self.related_product_pages.all(), "related_product", order_by="sort_order"
+        )
+
+        return related_products
+
     @property
     def local_categories(self):
         categories = BuyersGuideProductCategory.objects.filter(product_pages__product=self)

network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html

@@ -27,11 +27,6 @@
         <div class="takeover"></div>
         <div class="wrapper">
             <div class="sticky-top">
-                <div class="wrapper-join-us">
-                    <div class="container">
-                        <div class="join-us" id="join-us"></div>
-                    </div>
-                </div>
                 <div id="primary-nav-container">
                     <div class="wrapper-burger">
                         <div class="menu-container">