Add headless userbar setup

laymonage · laymonage · commit 8e68267bbf95 · 2025-03-06T11:14:45.000Z
diff --git a/bakerydemo/base/wagtail_hooks.py b/bakerydemo/base/wagtail_hooks.py
@@ -35,6 +35,18 @@ def register_icons(icons):
 class CustomAccessibilityItem(AccessibilityItem):
     axe_run_only = None
 
+    def get_axe_spec(self, request):
+        spec = super().get_axe_spec(request)
+        spec["allowedOrigins"] = [
+            "<unsafe_all_origins>",
+            # Can also use specific origins like the following, but a browser
+            # warning will be shown in the console because Axe tries each origin
+            # in every layer.
+            # "http://localhost:3000",
+            # "http://127.0.0.1:8000",
+        ]
+        return spec
+
 
 @hooks.register("construct_wagtail_userbar")
 def replace_userbar_accessibility_item(request, items):
diff --git a/bakerydemo/headless.py b/bakerydemo/headless.py
@@ -1,4 +1,15 @@
+from django.views.generic import TemplateView
+from wagtail.admin.userbar import (
+    AccessibilityItem,
+    AddPageItem,
+    AdminItem,
+    EditPageItem,
+    ExplorePageItem,
+    apply_userbar_hooks,
+)
+from wagtail.models import Page, Revision
 from wagtail_headless_preview.models import HeadlessMixin
+from wagtail_headless_preview.settings import headless_preview_settings
 
 
 class CustomHeadlessMixin(HeadlessMixin):
@@ -11,3 +22,67 @@ def get_client_root_url(self, request):
         if getattr(request, "is_preview", False):
             return f"{root_url}/api/draft"
         return root_url
+
+
+def get_userbar_context(request, object, position):
+    # Extracted from wagtail.admin.templatetags.wagtailuserbar.wagtailuserbar
+
+    revision_id = getattr(request, "revision_id", None)
+    in_preview_panel = getattr(request, "in_preview_panel", False)
+
+    if in_preview_panel:
+        items = []
+    else:
+        items = [AdminItem()]
+
+    if isinstance(object, Page) and object.pk:
+        if revision_id:
+            revision = (
+                Revision.objects.for_instance(object)
+                .filter(id=revision_id)
+                .prefetch_related("content_object")
+                .first()
+            )
+            revision_object = revision.content_object if revision else None
+            items.append(ExplorePageItem(revision_object))
+            items.append(EditPageItem(revision_object))
+        else:
+            # Not a revision
+            items.append(ExplorePageItem(object))
+            items.append(EditPageItem(object))
+            items.append(AddPageItem(object))
+
+    items.append(AccessibilityItem())
+
+    apply_userbar_hooks(request, items, object)
+
+    # Render the items
+    rendered_items = [item.render(request) for item in items]
+
+    # Remove any unrendered items
+    rendered_items = [item for item in rendered_items if item]
+
+    # Render the userbar items
+    return {
+        "request": request,
+        "items": rendered_items,
+        "position": position,
+        "page": object,
+        "revision_id": revision_id,
+    }
+
+
+class UserbarView(TemplateView):
+    template_name = "wagtailadmin/userbar/base.html"
+    http_method_names = ["get"]
+
+    def dispatch(self, request, *args, **kwargs):
+        response = super().dispatch(request, *args, **kwargs)
+        client_url = headless_preview_settings.CLIENT_URLS["default"]
+        response["Access-Control-Allow-Origin"] = client_url
+        return response
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context.update(get_userbar_context(self.request, None, None))
+        return context
diff --git a/bakerydemo/templates/wagtail_headless_preview/preview.html b/bakerydemo/templates/wagtail_headless_preview/preview.html
@@ -0,0 +1,20 @@
+{% load wagtailuserbar %}
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            body, html {
+                margin: 0; padding: 0; height: 100%; overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe id="preview-iframe" title="Headless preview" src="{{ preview_url }}" width="100%" height="100%" style="border: none;"></iframe>
+        {% comment %}
+            Include the wagtail userbar so we can run Axe in the intermediate
+            iframe, but hide it so it's invisible.
+        {% endcomment %}
+        <div hidden>{% wagtailuserbar %}</div>
+    </body>
+</html>
diff --git a/bakerydemo/urls.py b/bakerydemo/urls.py
@@ -8,13 +8,15 @@
 from wagtail.documents import urls as wagtaildocs_urls
 from wagtail.images.views.serve import ServeView
 
+from bakerydemo.headless import UserbarView
 from bakerydemo.search import views as search_views
 
 from .api import api_router
 
 urlpatterns = [
     path("django-admin/", admin.site.urls),
     path("admin/", include(wagtailadmin_urls)),
+    path("userbar/", UserbarView.as_view(), name="userbar"),
     path("documents/", include(wagtaildocs_urls)),
     re_path(
         r"^images/([^/]*)/(\d*)/([^/]*)/[^/]*$",
