Merge branch 'main' into fix/11607-refactor-PNI-sort-dropdown

.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">
@@ -149,7 +144,7 @@ <h5 class="tw-h5-heading">More about us</h5>
                             </div>
                             <div class="row">
                                 <div class="col-12">
-                                    <hr class="mt-5 mb-3" />
+                                    <hr class="mt-5 mb-3">
                                     <p class="dark-theme tw-body-small mb-0">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="https://foundation.mozilla.org">foundation.mozilla.org</a>. Most content available under a <a href="https://foundation.mozilla.org/about/website-licensing/">Creative Commons license</a>.</p>
                                 </div>
                             </div>

network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html

@@ -30,7 +30,7 @@
                         <div class="tw-absolute tw-bg-black tw-opacity-25 tw-inset-0 tw-w-full tw-h-full"></div>
                         {# Play Icon #}
                         <img src="{% static "_images/mozfest/play-circle-grey.svg" %}"
-                             class="group-hover:tw--translate-y-2 tw-relative tw-z-10 tw-transition tw-w-[75px] tw-h-[75px] medium:tw-w-[108px] medium:tw-h-[108px]" alt=""/>
+                             class="group-hover:tw--translate-y-2 tw-relative tw-z-10 tw-transition tw-w-[75px] tw-h-[75px] medium:tw-w-[108px] medium:tw-h-[108px]" alt="">
                     </span>
                 </button>
 

network-api/networkapi/mozfest/templates/fragments/mixed_content_card.html

@@ -6,7 +6,7 @@
         {% if card.link_page or card.link_url %}
             <a href="{% if card.link_page %}{% pageurl card.link_page %}{% elif card.link_url %}{{ card.link_url }}{% endif %}" aria-label="{{ card.title }}">
         {% endif %}
-        <img width="720" height="405" src="{{ img.url }}" alt="{{ card.alt_text }}"/>
+        <img width="720" height="405" src="{{ img.url }}" alt="{{ card.alt_text }}">
         {% if card.link_page or card.link_url %}
             </a>
         {% endif %}

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/buyersguide/fragments/consumer_creepometer_page_2023/best_and_worst_products.html

@@ -4,7 +4,7 @@
   <div id="best-and-worst-products" class="tw-bg-gradient-to-b tw-from-white tw-via-red-05 tw-to-white">
     <div class="tw-container tw-relative {{ wrapper_class }}">
       <div class="tw-absolute tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-[120px] tw-w-[120px] tw-h-[120px] medium:tw-w-[330px] medium:tw-h-[330px] medium:-tw-top-[190px] medium:-tw-left-10 medium:tw-translate-x-0 medium:tw-translate-y-0">
-        <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-4.svg" %}" />
+        <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-4.svg" %}">
         {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[15%] tw-h-[15%]" left_eye_class="tw-top-[54%] tw-left-[30%]" right_eye_class="tw-top-[53%] tw-left-[53%]" %}
       </div>
       <div class="tw-row tw-px-8 tw-mt-8 medium:tw-mt-0">

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/big_picture_trends.html

@@ -19,13 +19,13 @@ <h3 class="{{ h2_class }} tw-mb-9">Products are getting more secure, but also a
         <div class="tw-col-span-2 medium:tw-col-span-1 tw-flex tw-flex-col tw-justify-between">
           <p class="{{ body_large_class }} tw-font-light">The mental health app BetterHelp shares your data with advertisers, social media platforms, and sister companies.</p>
           <a class="{{ logo_class }} tw-mb-9 medium:tw-mb-0" href="https://foundation.mozilla.org/privacynotincluded/betterhelp/" target="_blank" aria-label="read more about BetterHelp">
-            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/BetterHelp.png' %}" alt="BetterHelp logo" />
+            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/BetterHelp.png' %}" alt="BetterHelp logo">
           </a>
         </div>
         <div class="tw-col-span-2 medium:tw-col-span-1 tw-flex tw-flex-col tw-justify-between">
           <p class="{{ body_large_class }} tw-font-light">The Japanese car manufacturer Nissan collects a wide range of information, including sexual activity, health diagnosis data, and genetic information — but doesn’t specify how. </p>
           <a class="{{ logo_class }} tw-mb-9 medium:tw-mb-0" href="https://foundation.mozilla.org/privacynotincluded/nissan/" target="_blank" aria-label="read more about Nissan">
-            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Nissan.png' %}" alt="Nissan logo" />
+            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Nissan.png' %}" alt="Nissan logo">
           </a>
         </div>
       </div>
@@ -40,7 +40,7 @@ <h3 class="{{ h2_class }} tw-mb-9">An increasing number of products can’t be u
           <p class="{{ body_large_class }} tw-font-bold tw-mb-9">For example:</p>
           <p class="{{ body_large_class }} tw-font-light">The Verizon GizmoWatch is a product for kids, but all of its features — even simple to-do lists — require an internet connection.</p>
           <a class="{{ logo_class }} tw-mb-9 medium:tw-mb-0" href="https://foundation.mozilla.org/privacynotincluded/verizon-gizmowatch/" target="_blank" >
-            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Verizon_Gizmowatch.png' %}" alt="Verizon Gizmowatch" />
+            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Verizon_Gizmowatch.png' %}" alt="Verizon Gizmowatch">
           </a>
         </div>
       </div>
@@ -53,7 +53,7 @@ <h3 class="{{ h2_class }} tw-mb-9">Privacy policies are getting ridiculous.</h3>
           <p class="{{ body_large_class }} tw-font-bold tw-mb-9">For example:</p>
           <p class="{{ body_large_class }} tw-font-light">Car manufacturer Toyota has more than 10 different privacy policy documents — an unreasonable number for consumers to engage with.</p>
           <a class="{{ logo_class }} medium:tw-mb-0" href="https://foundation.mozilla.org/privacynotincluded/toyota/" target="_blank" aria-label="read more about Toyota" >
-            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Toyota.png' %}" alt="Toyota logo" />
+            <img width="100%" height="100%" src="{% static '_images/buyers-guide/consumer-creepometer/products/Toyota.png' %}" alt="Toyota logo">
           </a>
         </div>
       </div>

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/by_the_numbers.html

@@ -4,7 +4,7 @@
   <div id="by-the-numbers" class="tw-bg-gradient-to-b tw-from-white tw-via-blue-10 tw-to-white">
     <div class="tw-container tw-relative {{ wrapper_class }}">
       <div class="tw-absolute tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-[140px] tw-w-[130px] tw-h-[130px] medium:tw-w-[280px] medium:tw-h-[280px] medium:-tw-top-[160px] medium:tw-left-[85%] medium:tw-translate-x-0 medium:tw-translate-y-0">
-        <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-5.svg" %}" />
+        <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-5.svg" %}">
         {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[21%] tw-h-[21%]" left_eye_class="tw-top-[39%] tw-left-[22%]" right_eye_class="tw-top-[39%] tw-left-[56%]" %}
       </div>
       <div class="tw-row tw-px-8 tw-mt-8 medium:tw-mt-0">

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/hero.html

@@ -4,7 +4,7 @@
   <div class="tw-container tw-relative tw-pt-40 medium:tw-pt-0 tw-mt-[15px] medium:tw-mt-[60px]">
     <div class="tw-absolute tw-top-0 medium:tw-bottom-0 medium:tw-left-0 medium:tw-right-0 tw-right-4 tw-w-[83px] tw-h-[79px] medium:tw-w-[327px] medium:tw-h-[313px] large:tw-w-[383px] large:tw-h-[367px]">
       <div class="tw-relative medium:tw-left-[162%] large:tw-left-[200%] xlarge:tw-left-[250%]">
-        <img width="100%" height="auto" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-1.svg" %}" />
+        <img width="100%" height="auto" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-1.svg" %}">
         {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[14%] tw-h-[14%]" left_eye_class="tw-top-[42%] tw-left-[33%]" right_eye_class="tw-top-[42%] tw-left-[54%]" %}
       </div>
     </div>
@@ -23,7 +23,7 @@ <h2 class="tw-font-light tw-font-zilla tw-text-[24px] tw-leading-[28px] medium:t
       </div>
       <div class="tw-container">
         <div class="{{ face_container_class }} tw-relative">
-          <img class="tw-relative tw-z-[2]" width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/creepy-score.svg" %}" />
+          <img class="tw-relative tw-z-[2]" width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/creepy-score.svg" %}">
           <div class="tw-z-[-1] {{ face_container_class }} tw-absolute tw-transform tw-top-1/2 tw-translate-x-[5px] -tw-translate-y-[calc(50%-8px)] tw-scale-[85%] tw-rounded-full tw-bg-gray-20"></div>
           {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[20%] tw-h-[20%]" left_eye_class="tw-top-[37%] tw-left-[22%]" right_eye_class="tw-top-[37%] tw-left-[57%]" %}
         </div>

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/quiz.html

@@ -7,7 +7,7 @@
   <div id="share-progress-em" class="sp_227930 sp_em_large tw-hidden"></div>
   <div class="tw-container">
     <div class="tw-relative tw-mt-[-130px] tw-w-[130px] tw-h-[130px] medium:tw-ml-[-45px] medium:tw-mt-[-235px] medium:tw-w-[235px] medium:tw-h-[235px]">
-      <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-2.svg" %}" />
+      <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-2.svg" %}">
       {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[15%] tw-h-[15%]" left_eye_class="tw-top-[42%] tw-left-[33%]" right_eye_class="tw-top-[42%] tw-left-[56%]" %}
     </div>
     <div class="tw-flex tw-flex-col medium:tw-gap-8 medium:tw-flex-row">

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/stay_in_control.html

@@ -2,7 +2,7 @@
 
 <div class="tw-container tw-relative {{ wrapper_class }}">
   <div class="tw-absolute tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-[120px] tw-w-[120px] tw-h-[120px] medium:tw-w-[260px] medium:tw-h-[260px] large:tw-w-[305px] large:tw-h-[305px] tw-top-48 medium:-tw-top-48 medium:-tw-left-64 medium:tw-translate-x-0 medium:tw-translate-y-0">
-    <img width="100%" height="auto" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-6.svg" %}" />
+    <img width="100%" height="auto" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-6.svg" %}">
     {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[14%] tw-h-[14%]" left_eye_class="tw-top-[41%] tw-left-[37%]" right_eye_class="tw-top-[41%] tw-left-[56%]" %}
   </div>
   <div class="tw-row tw-px-8 tw-mt-28 medium:tw-mt-0">

network-api/networkapi/templates/buyersguide/fragments/consumer_creepometer_page_2023/sub_nav.html

@@ -2,7 +2,7 @@
 <div class="{{ wrapper_class }} tw-container">
   <div class="tw-row tw-px-8 tw-justify-center tw-text-center">
     <div class="tw-relative tw-mx-auto tw-mb-10 tw-mt-[-100px] tw-w-[130px] tw-h-[130px] medium:tw-mb-0 medium:tw-mt-[-200px] medium:tw-w-[235px] medium:tw-h-[235px]">
-      <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-3.svg" %}" />
+      <img width="100%" height="100%" alt="" src="{% static "_images/buyers-guide/consumer-creepometer/face-3.svg" %}">
       {% include "../consumer_creepometer_page_2023/animated-eyes.html" with eye_base_class="tw-w-[20%] tw-h-[20%]" left_eye_class="tw-top-[37%] tw-left-[24%]" right_eye_class="tw-top-[37%] tw-left-[56%]" %}
     </div>
     <h2 class="{{ h2_class }} tw-w-5/6 tw-mb-12 medium:tw-mb-20">Mozilla’s Annual Consumer Creep-O-Meter distills what’s good, what’s bad, and what’s just plain creepy in the world of consumer tech.</h2>

network-api/networkapi/templates/fragments/blocks/card_grid_block.html

@@ -37,7 +37,7 @@
                                 <source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
                                 <source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
                                 <source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
-                                <img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
+                                <img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}">
                             </picture>
                         </div>
 

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

@@ -28,7 +28,7 @@ <h1 class="tw-h4-heading medium:tw-h1-heading medium:tw-text-[34px] tw-mt-2 tw-m
                         <source src="{{ video_url }}" type="video/mp4">
                     </video>
                     <div class="tw-absolute tw-top-0 tw-left-0 tw-min-h-full tw-min-w-full tw-flex tw-justify-center tw-place-items-center">
-                        <img class="play-button tw-h-32 tw-w-32 tw-opacity-75 hover:tw-opacity-100" src="{% static "_images/video_play_button.svg" %}" alt="{% trans "Play Button" context "icon description for screen readers" %}" />
+                        <img class="play-button tw-h-32 tw-w-32 tw-opacity-75 hover:tw-opacity-100" src="{% static "_images/video_play_button.svg" %}" alt="{% trans "Play Button" context "icon description for screen readers" %}">
                     </div>
                 </div>
             {% else %}

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

@@ -19,7 +19,7 @@
                         <a href="{% pageurl article %}" class="tw-text-black tw-flex hover:tw-text-blue-40 tw-items-center tw-no-underline">
                             {% if show_images %}
                                 {% image article.get_meta_image fill-156x156 as img %}
-                                <img src="{{ img.url }}" alt="{{ img.alt }}" class="tw-w-[78px] tw-h-[78px] tw-rounded-2xl tw-mr-8"/>
+                                <img src="{{ img.url }}" alt="{{ img.alt }}" class="tw-w-[78px] tw-h-[78px] tw-rounded-2xl tw-mr-8">
                             {% endif %}
 
                             <span class="tw-font-sans tw-font-bold tw-text-lg tw-leading-5">{{ article.title }}</span>

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

@@ -41,7 +41,7 @@ <h2 class="tw-mb-0 tw-font-zilla tw-text-[40px] tw-leading-[48px] tw-w-max">{% t
                 {% include "./arrow_link.html" with link_href=link_href link_text=link_text extra_classes="tw-text-xl" %}
             </div>
         </div>
-        <img src="{% static "_images/buyers-guide/emoji-eyes.png" %}" class="tw-absolute tw-bottom-0 tw-right-12 tw-hidden large:tw-block" />
+        <img src="{% static "_images/buyers-guide/emoji-eyes.png" %}" class="tw-absolute tw-bottom-0 tw-right-12 tw-hidden large:tw-block">
 
     </div>
 </div>