Add WhatsNewInWagtailVersionPanel to home dashboard

Can be disabled via WAGTAIL_ENABLE_WHATS_NEW_BANNER setting.

We need to update the link and content in the next release if necessary.

client/scss/components/_dismissible.scss

@@ -0,0 +1,31 @@
+@keyframes pulse-warning {
+  0% {
+    box-shadow: 0 0 0 0
+      hsla(
+        var(--w-color-warning-100-hue),
+        var(--w-color-warning-100-saturation),
+        var(--w-color-warning-100-lightness),
+        0.7
+      );
+  }
+
+  25% {
+    box-shadow: 0 0 0 10px
+      hsla(
+        var(--w-color-warning-100-hue),
+        var(--w-color-warning-100-saturation),
+        var(--w-color-warning-100-lightness),
+        0
+      );
+  }
+
+  50% {
+    box-shadow: 0 0 0 0
+      hsla(
+        var(--w-color-warning-100-hue),
+        var(--w-color-warning-100-saturation),
+        var(--w-color-warning-100-lightness),
+        0
+      );
+  }
+}

client/scss/components/_whats-new.scss

@@ -0,0 +1,72 @@
+.w-whats-new {
+  @include nice-padding();
+  margin-bottom: theme('spacing.16');
+
+  &.w-dismissible--dismissed {
+    display: none;
+  }
+
+  &__banner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: theme('borderRadius.md');
+    padding: theme('spacing.6');
+    background-color: theme('colors.warning.50');
+    border: 5px solid transparent;
+  }
+
+  &__main-icon {
+    .icon {
+      color: theme('colors.warning.100');
+      width: theme('spacing.10');
+      height: theme('spacing.10');
+      margin-inline-end: theme('spacing.4');
+      border-radius: theme('borderRadius.full');
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: pulse-warning 5s 5;
+      }
+    }
+  }
+
+  &__heading {
+    @apply w-h3;
+    color: theme('colors.grey.600');
+    margin-top: 0;
+    margin-bottom: theme('spacing.2');
+  }
+
+  &__details {
+    @apply w-body-text-large;
+    margin-bottom: 0;
+  }
+
+  &__link {
+    font-weight: theme('fontWeight.bold');
+    color: theme('colors.secondary.400');
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+  }
+
+  &__dismiss {
+    @apply -w-top-3 -w-right-3;
+    position: absolute;
+    padding: 0;
+    background-color: transparent;
+
+    .icon {
+      border-radius: theme('borderRadius.full');
+      width: theme('spacing.6');
+      height: theme('spacing.6');
+      background-color: theme('colors.white.DEFAULT');
+      color: theme('colors.primary.DEFAULT');
+
+      @media (forced-colors: active) {
+        background-color: Canvas;
+        color: CanvasText;
+      }
+    }
+  }
+}

client/scss/core.scss

@@ -129,6 +129,7 @@ These are classes for components.
 @import 'components/tabs';
 @import 'components/panel';
 @import 'components/dialog';
+@import 'components/dismissible';
 @import 'components/dropdown';
 @import 'components/dropdown.legacy';
 @import 'components/help-block';
@@ -145,6 +146,7 @@ These are classes for components.
 @import 'components/search-bar';
 @import 'components/progressbar';
 @import 'components/summary';
+@import 'components/whats-new';
 @import 'components/tooltips';
 @import 'components/grid.legacy';
 @import 'components/footer';

wagtail/admin/templates/wagtailadmin/home/whats_new_in_wagtail_version.html

@@ -0,0 +1,28 @@
+{% load i18n wagtailadmin_tags wagtailcore_tags %}
+
+<section class="w-whats-new w-dismissible" aria-labelledby="whats-new-heading" data-wagtail-dismissible-id="{{ dismissible_id }}">
+    <div class="w-whats-new__banner">
+        <button class="w-whats-new__dismiss" type="button" data-wagtail-dismissible-toggle>
+            {% icon name="circle-xmark" %}
+            <span class="w-sr-only">{% trans "Close" %}</span>
+        </button>
+        <div class="w-whats-new__main-icon">
+            {% icon name="help" %}
+        </div>
+        <div class="w-whats-new__content">
+            <h2 id="whats-new-heading" class="w-whats-new__heading">
+                {% blocktrans trimmed %}
+                    Things in Wagtail {{ version }} have changed!
+                {% endblocktrans %}
+            </h2>
+            <p class="w-whats-new__details">
+                {% wagtail_feature_release_editor_guide_link as editor_guide_link %}
+                {% blocktrans trimmed %}
+                    Don't worry, we've got your back. Check out the
+                    <a class="w-whats-new__link" href="{{ editor_guide_link }}" target="_blank" rel="noreferrer">Wagtail Editor Guide</a>
+                    to get the low down on what's changed and some exciting new features!
+                {% endblocktrans %}
+            </p>
+        </div>
+    </div>
+</section>

wagtail/admin/templates/wagtailadmin/icons/circle-xmark.svg

@@ -0,0 +1 @@
+<svg id="icon-circle-xmark" viewBox="0 0 512 512"><path d="M175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175V175zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>

wagtail/admin/templates/wagtailadmin/icons/help.svg

@@ -1,3 +1 @@
-<svg id="icon-help" viewBox="0 0 16 16">
-    <path d="M7.912 1.086c1.904 0 3.516 0.645 4.893 1.963 1.348 1.318 2.051 2.93 2.109 4.834 0 1.904-0.645 3.545-1.992 4.893-1.318 1.377-2.93 2.080-4.834 2.139-1.904 0-3.545-0.645-4.893-1.992-1.377-1.318-2.080-2.93-2.109-4.834s0.615-3.545 1.963-4.893c1.348-1.377 2.959-2.080 4.863-2.109zM7.883 12.189c0.293 0 0.557-0.088 0.732-0.264 0.176-0.205 0.293-0.439 0.293-0.703 0-0.322-0.059-0.557-0.264-0.762-0.176-0.176-0.439-0.264-0.732-0.264 0 0-0.029 0-0.029 0-0.293 0-0.527 0.088-0.703 0.264-0.205 0.176-0.293 0.41-0.322 0.703 0 0.293 0.088 0.527 0.293 0.732 0.176 0.176 0.41 0.293 0.703 0.293 0 0 0.029 0 0.029 0zM10.373 7.268c0.264-0.322 0.381-0.703 0.381-1.172 0-0.762-0.264-1.348-0.791-1.729s-1.201-0.557-2.021-0.557c-0.645 0-1.172 0.117-1.553 0.381-0.703 0.41-1.055 1.143-1.084 2.197 0 0 0 0.059 0 0.059s1.641 0 1.641 0c0 0 0-0.059 0-0.059 0-0.264 0.088-0.527 0.234-0.82 0.176-0.234 0.439-0.352 0.82-0.352 0.41 0 0.674 0.088 0.791 0.293 0.146 0.205 0.234 0.41 0.234 0.674 0 0.176-0.088 0.381-0.234 0.586-0.088 0.117-0.205 0.234-0.322 0.293 0 0-0.088 0.059-0.088 0.059-0.059 0.059-0.117 0.117-0.234 0.176-0.088 0.059-0.205 0.146-0.293 0.234-0.117 0.059-0.205 0.146-0.322 0.234s-0.205 0.176-0.264 0.264c-0.117 0.205-0.205 0.586-0.264 1.172 0 0 0 0.117 0 0.117s1.641 0 1.641 0c0 0 0-0.059 0-0.059 0-0.117 0-0.264 0.059-0.41 0.059-0.205 0.176-0.381 0.41-0.557 0 0 0.41-0.264 0.41-0.264 0.469-0.352 0.732-0.586 0.85-0.762z"></path>
-</svg>
+<svg id="icon-help" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/></svg>

wagtail/admin/views/home.py

@@ -59,6 +59,37 @@ class UpgradeNotificationPanel(Component):
             return ""
 
 
+class WhatsNewInWagtailVersionPanel(Component):
+    name = "whats_new_in_wagtail_version"
+    template_name = "wagtailadmin/home/whats_new_in_wagtail_version.html"
+    order = 110
+    _version = "4"
+
+    def get_whats_new_banner_setting(self) -> Union[bool, str]:
+        return getattr(settings, "WAGTAIL_ENABLE_WHATS_NEW_BANNER", True)
+
+    def get_dismissible_id(self) -> str:
+        return f"{self.name}_{self._version}"
+
+    def get_context_data(self, parent_context: Mapping[str, Any]) -> Mapping[str, Any]:
+        return {"dismissible_id": self.get_dismissible_id(), "version": self._version}
+
+    def is_shown(self, parent_context: Mapping[str, Any] = None) -> bool:
+        if not self.get_whats_new_banner_setting():
+            return False
+
+        profile = getattr(parent_context["request"].user, "wagtail_userprofile", None)
+        if profile and profile.dismissibles.get(self.get_dismissible_id()):
+            return False
+
+        return True
+
+    def render_html(self, parent_context: Mapping[str, Any] = None) -> str:
+        if not self.is_shown(parent_context):
+            return ""
+        return super().render_html(parent_context)
+
+
 class PagesForModerationPanel(Component):
     name = "pages_for_moderation"
     template_name = "wagtailadmin/home/pages_for_moderation.html"
@@ -245,6 +276,7 @@ class HomeView(WagtailAdminTemplateMixin, TemplateView):
         request = self.request
         panels = [
             SiteSummaryPanel(request),
+            WhatsNewInWagtailVersionPanel(),
             UpgradeNotificationPanel(),
             WorkflowPagesToModeratePanel(),
             PagesForModerationPanel(),

wagtail/admin/wagtail_hooks.py

@@ -985,6 +985,7 @@ def register_icons(icons):
         "chevron-down.svg",
         "circle-check.svg",
         "circle-plus.svg",
+        "circle-xmark.svg",
         "clipboard-list.svg",
         "code.svg",
         "cog.svg",

wagtail/templatetags/wagtailcore_tags.py

@@ -93,6 +93,11 @@ def wagtail_release_notes_path():
     return "%s.html" % get_main_version(VERSION)
 
 
+@register.simple_tag
+def wagtail_feature_release_editor_guide_link():
+    return "https://wagtail.org/wagtail-4-1-editor-guide"
+
+
 @register.filter
 def richtext(value):
     if isinstance(value, RichText):