From 8e0d20bcb50aa3e2982ca8ae831ecdd8b6073fea Mon Sep 17 00:00:00 2001
From: zerolab <dan@zerolab.org>
Date: Tue, 28 Jan 2025 17:54:34 +0000
Subject: [PATCH] Use the Wagtail-preview aware cache tag

---
 wagtailio/navigation/models.py                |  4 +-
 .../patterns/includes/menu_footer.html        | 64 +++++++-------
 .../patterns/includes/menu_main.html          | 86 +++++++++----------
 3 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/wagtailio/navigation/models.py b/wagtailio/navigation/models.py
index 1df36a582..80905c8ab 100644
--- a/wagtailio/navigation/models.py
+++ b/wagtailio/navigation/models.py
@@ -97,8 +97,8 @@ def save(self, **kwargs):
             fragment_key_seeds = ["primarynav", "footernav"]
         keys = [
             # The fragment cache varies on:
-            # the current site pk, whether used in preview, or in the pattern library
-            make_template_fragment_key(key, vary_on=[self.site.pk, False, False])
+            # the current site pk, whether it is used in the pattern library
+            make_template_fragment_key(key, vary_on=[self.site.pk, False])
             for key in fragment_key_seeds
         ]
         cache.delete_many(keys)
diff --git a/wagtailio/project_styleguide/templates/patterns/includes/menu_footer.html b/wagtailio/project_styleguide/templates/patterns/includes/menu_footer.html
index c72d8683c..f922a7aa5 100644
--- a/wagtailio/project_styleguide/templates/patterns/includes/menu_footer.html
+++ b/wagtailio/project_styleguide/templates/patterns/includes/menu_footer.html
@@ -1,38 +1,38 @@
-{% load wagtailcore_tags cache %}
+{% load wagtailcore_tags wagtail_cache %}
 {% if footer_navigation %}
     {% wagtail_site as current_site %}
-    {% cache 900 footernav current_site.pk request.is_preview is_pattern_library %}
-        <nav class="footer-menu" aria-label="Footer menu">
-            <div class="footer-menu__grid grid">
-                {% for section in footer_navigation.sections %}
-                    {% with section.value as menu_section %}
-                        <div class="footer-menu__column" data-footer-menu-column>
-                            <div class="footer-menu__column-header">
-                                <button class="footer-menu__toggle" aria-label="Open the {{ menu_section.heading }} menu" aria-expanded="false" aria-controls="{{ menu_section.heading|lower }}-menu" data-footer-menu-toggle>
-                                    <svg class="footer-menu__icon footer-menu__icon--open" aria-hidden="true" data-footer-menu-open-icon>
-                                        <use xlink:href="#plus-in-circle"></use>
-                                    </svg>
-                                    <svg class="footer-menu__icon footer-menu__icon--close" aria-hidden="true" data-footer-menu-close-icon>
-                                        <use xlink:href="#minus-in-circle"></use>
-                                    </svg>
+    {% wagtail_cache 900 footernav current_site.pk is_pattern_library %}
+    <nav class="footer-menu" aria-label="Footer menu">
+        <div class="footer-menu__grid grid">
+            {% for section in footer_navigation.sections %}
+                {% with section.value as menu_section %}
+                    <div class="footer-menu__column" data-footer-menu-column>
+                        <div class="footer-menu__column-header">
+                            <button class="footer-menu__toggle" aria-label="Open the {{ menu_section.heading }} menu" aria-expanded="false" aria-controls="{{ menu_section.heading|lower }}-menu" data-footer-menu-toggle>
+                                <svg class="footer-menu__icon footer-menu__icon--open" aria-hidden="true" data-footer-menu-open-icon>
+                                    <use xlink:href="#plus-in-circle"></use>
+                                </svg>
+                                <svg class="footer-menu__icon footer-menu__icon--close" aria-hidden="true" data-footer-menu-close-icon>
+                                    <use xlink:href="#minus-in-circle"></use>
+                                </svg>
 
-                                    <span class="footer-menu__column-heading footer-menu__column-heading--collapsible">{{ menu_section.heading }}</span>
-                                </button>
+                                <span class="footer-menu__column-heading footer-menu__column-heading--collapsible">{{ menu_section.heading }}</span>
+                            </button>
 
-                                <p class="footer-menu__column-heading">{{ menu_section.heading }}</p>
-                            </div>
-
-                            <ul class="footer-menu__list" id="{{ menu_section.heading|lower }}-menu" data-footer-menu-list>
-                                {% for menu_item in menu_section.links %}
-                                    <li class="footer-menu__item">
-                                        <a class="footer-menu__link" href="{% if menu_item.cta_url %}{{ menu_item.cta_url }}{% elif menu_item.cta_page %}{% pageurl menu_item.cta_page %}{% endif %}">{{ menu_item.text }}</a>
-                                    </li>
-                                {% endfor %}
-                            </ul>
+                            <p class="footer-menu__column-heading">{{ menu_section.heading }}</p>
                         </div>
-                    {% endwith %}
-                {% endfor %}
-            </div>
-        </nav>
-    {% endcache %}
+
+                        <ul class="footer-menu__list" id="{{ menu_section.heading|lower }}-menu" data-footer-menu-list>
+                            {% for menu_item in menu_section.links %}
+                                <li class="footer-menu__item">
+                                    <a class="footer-menu__link" href="{% if menu_item.cta_url %}{{ menu_item.cta_url }}{% elif menu_item.cta_page %}{% pageurl menu_item.cta_page %}{% endif %}">{{ menu_item.text }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endwith %}
+            {% endfor %}
+        </div>
+    </nav>
+{% endcache %}
 {% endif %}
diff --git a/wagtailio/project_styleguide/templates/patterns/includes/menu_main.html b/wagtailio/project_styleguide/templates/patterns/includes/menu_main.html
index 8d7ab422e..cf1b92a1b 100644
--- a/wagtailio/project_styleguide/templates/patterns/includes/menu_main.html
+++ b/wagtailio/project_styleguide/templates/patterns/includes/menu_main.html
@@ -1,45 +1,45 @@
-{% load wagtailcore_tags cache %}
+{% load wagtailcore_tags wagtail_cache %}
 {% wagtail_site as current_site %}
-{% cache 900 primarynav current_site.pk request.is_preview is_pattern_library %}
-    <nav class="primary-nav" aria-label="Primary">
-        <ul class="primary-nav__container" data-primary-nav>
-            {% for menu_section in menus %}
-                <li class="primary-nav__item primary-nav__item--is-parent" data-has-subnav>
-                    <button class="primary-nav__item-container" data-open-subnav aria-expanded="false">
-                        <span class="primary-nav__label">{{ menu_section.name }}</span>
-                        <svg class="primary-nav__icon" aria-hidden="true">
-                            <use xlink:href="#chevron" />
-                        </svg>
-                    </button>
-                    <ul class="sub-nav" data-subnav>
-                        <li class="sub-nav__item sub-nav__item--back">
-                            <button class="sub-nav__item-link sub-nav__item-link--back" data-subnav-back>&lsaquo; Back</button>
-                        </li>
-                        <li class="sub-nav__links">
-                            <h2 class="sub-nav__heading">{{ menu_section.name }}</h2>
-                            <ul class="sub-nav__links-container">
-                                {% for nav_item in menu_section.nav_items %}
-                                    <li class="sub-nav__item">
-                                        <a class="sub-nav__item-link" href="{% if nav_item.cta_url %}{{ nav_item.cta_url }}{% elif nav_item.cta_page %}{% pageurl nav_item.cta_page %}{% endif %}">
-                                            {% include "patterns/components/icon/icon.html" with icon=nav_item.icon classes="icon-link__svg sub-nav__item-icon icon--relative" %}
-                                            <div class="sub-nav__item-content">
-                                                <h3 class="sub-nav__item-heading">{{ nav_item.text }}</h3>
-                                                <span class="u-sr-only">-</span>
-                                                <p class="sub-nav__item-description">{{ nav_item.short_description }}</p>
-                                            </div>
-                                        </a>
-                                    </li>
-                                {% endfor %}
-                            </ul>
-                        </li>
-                        <li class="sub-nav__item sub-nav__item--cta">
-                            {% with menu_section.call_to_action as cta %}
-                                {% include "patterns/components/nav-cta/nav-cta.html" %}
-                            {% endwith %}
-                        </li>
-                    </ul>
-                </li>
-            {% endfor %}
-        </ul>
-    </nav>
+{% wagtailcache 900 primarynav current_site.pk is_pattern_library %}
+<nav class="primary-nav" aria-label="Primary">
+    <ul class="primary-nav__container" data-primary-nav>
+        {% for menu_section in menus %}
+            <li class="primary-nav__item primary-nav__item--is-parent" data-has-subnav>
+                <button class="primary-nav__item-container" data-open-subnav aria-expanded="false">
+                    <span class="primary-nav__label">{{ menu_section.name }}</span>
+                    <svg class="primary-nav__icon" aria-hidden="true">
+                        <use xlink:href="#chevron" />
+                    </svg>
+                </button>
+                <ul class="sub-nav" data-subnav>
+                    <li class="sub-nav__item sub-nav__item--back">
+                        <button class="sub-nav__item-link sub-nav__item-link--back" data-subnav-back>&lsaquo; Back</button>
+                    </li>
+                    <li class="sub-nav__links">
+                        <h2 class="sub-nav__heading">{{ menu_section.name }}</h2>
+                        <ul class="sub-nav__links-container">
+                            {% for nav_item in menu_section.nav_items %}
+                                <li class="sub-nav__item">
+                                    <a class="sub-nav__item-link" href="{% if nav_item.cta_url %}{{ nav_item.cta_url }}{% elif nav_item.cta_page %}{% pageurl nav_item.cta_page %}{% endif %}">
+                                        {% include "patterns/components/icon/icon.html" with icon=nav_item.icon classes="icon-link__svg sub-nav__item-icon icon--relative" %}
+                                        <div class="sub-nav__item-content">
+                                            <h3 class="sub-nav__item-heading">{{ nav_item.text }}</h3>
+                                            <span class="u-sr-only">-</span>
+                                            <p class="sub-nav__item-description">{{ nav_item.short_description }}</p>
+                                        </div>
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="sub-nav__item sub-nav__item--cta">
+                        {% with menu_section.call_to_action as cta %}
+                            {% include "patterns/components/nav-cta/nav-cta.html" %}
+                        {% endwith %}
+                    </li>
+                </ul>
+            </li>
+        {% endfor %}
+    </ul>
+</nav>
 {% endcache %}