wagtail/docs/releases/4.2.md

Wagtail 4.2 release notes - IN DEVELOPMENT

Unreleased

---
local:
depth: 1
---

What's new

StreamField data migration helpers

Wagtail now provides a set of utilities for creating data migrations on StreamField data. For more information, see StreamField data migrations. This feature was developed by Sandil Ranasinghe, initially as the wagtail-streamfield-migration-toolkit add-on package, as part of the Google Summer of Code 2022 initiative, with support from Jacob Topp-Mugglestone, Joshua Munn and Karl Hobley.

Locking for snippets

Snippets can now be locked by users to prevent other users from editing, through the use of the LockableMixin. For more details, see .

This feature was developed by Sage Abdullah.

fullpageurl template tag

Wagtail now provides a fullpageurl template tag (for both Django templates and Jinja2) to output a page's full URL including the domain. For more details, see .

This feature was developed by Jake Howard.

Rich text improvements

Following feedback from Wagtail users on rich text UI improvements in Wagtail 4.0, we have further refined the behavior of rich text fields to cater for different scenarios:

• Users can now choose between an “inline” floating toolbar, and a fixed toolbar at the top of the editor. Both toolbars display all formatting options.
• The ‘/’ command palette and block picker in rich text fields now contain all formatting options except text styles.
• The ‘/’ command palette and block picker are now always available no matter where the cursor is placed, to support inserting content at any point within text, transforming existing content, and splitting StreamField blocks in the middle of a paragraph when needed.

Thank you to all who provided feedback, participants to our usability testing sessions, and to Nick Lee and Thibaud Colas for the implementation.

Multiple chooser panel

A new panel type is available. This is a variant of InlinePanel which improves the editor experience when adding large numbers of linked item - rather than creating and populating each sub-form individually, a chooser modal is opened allowing multiple objects to be selected at once.

This feature was developed by Matt Westcott, and sponsored by YouGov.

Other features

• Test assertion WagtailPageTestCase.assertCanCreate now supports the kwarg publish=True to check publish redirection (Harry Percival, Akua Dokua Asiedu)
• Ensure that the rebuild_references_index command can run without console output if called with --verbosity 0 (Omerzahid Ali, Aman Pandey)
• Add full support for secondary buttons with icons in the Wagtail design system - button bicolor button--icon button-secondary including the button-small variant (Seremba Patrick)
• Add purge_embeds management command to delete all the cached embed objects in the database (Aman Pandey)
• Make it possible to resize the page editor’s side panels (Sage Abdullah)
• Add ability to include form_fields as an APIField on FormPage (Sævar Öfjörð Magnússon, Suyash Singh, LB (Ben) Johnston)
• Ensure that images listings are more consistently aligned when there are fewer images uploaded (Theresa Okoro)
• Add more informative validation error messages for non-unique slugs within the admin interface and for programmatic page creation (Benjamin Bach)
• Always show the page editor title field’s border when the field is empty (Thibaud Colas)
• Snippet models extending DraftStateMixin now automatically define a "Publish" permission type (Sage Abdullah)
• Users now remain on the edit page after saving a snippet as draft (Sage Abdullah)
• Base project template now populates the meta description tag from the search description field (Aman Pandey)
• Added support for azure-mgmt-cdn version >= 10 and azure-mgmt-frontdoor version >= 1 in the frontend cache invalidator (Sylvain Fankhauser)
• Add a system check to warn when a django-storages backend is configured to allow overwriting (Rishabh jain)
• Update admin focus outline color to have higher contrast against white backgrounds (Thibaud Colas)
• Implement latest design for the admin dashboard header (Thibaud Colas, Steven Steinwand)
• Add base Axe accessibility checker integration within userbar, with error count (Albina Starykova)
• Allow configuring Axe accessibility checker integration via construct_wagtail_userbar hook (Sage Abdullah)

Bug fixes

• Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
• Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
• Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)
• Ensure ChooserBlock.extract_references uses the model class, not the model string (Alex Tomkins)
• Incorrectly formatted link in the documentation for Wagtail community support (Bolarinwa Comfort Ajayi)
• Ensure logo shows correctly on log in page in Windows high-contrast mode (Loveth Omokaro)
• Comments notice background overflows its container (Yekasumah)
• Ensure links within help blocks meet colour contrast guidelines for accessibility (Theresa Okoro)
• Ensure the skip link (used for keyboard control) meets colour contrast guidelines for accessibility (Dauda Yusuf)
• Ensure tag fields correctly show in both dark and light Windows high-contrast modes (Albina Starykova)
• Ensure new tooltips & tooltip menus have visible borders and tip triangle in Windows high-contrast mode (Juliet Adeboye)
• Ensure there is a visual difference of 'active/current link' vs normal links in Windows high-contrast mode (Mohammad Areeb)
• Avoid issues where trailing whitespace could be accidentally removed in translations for new page & snippet headers (Florian Vogt)
• Make sure minimap error indicators follow the minimap scrolling (Thibaud Colas)
• Remove the ability to view or add comments to InlinePanel inner fields to avoid lost or incorrectly linked comments (Jacob Topp-Mugglestone)
• Use consistent heading styles on top-level fields in the page editor (Sage Abdullah)
• Allow button labels to wrap onto two lines in dropdown buttons (Coen van der Kamp)
• Remove spurious horizontal resize handle from text areas (Matt Westcott)
• Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields (Theresa Okoro)
• Support text resizing in workflow steps cards (Ivy Jeptoo)
• Ignore images added via fixtures when using WAGTAILIMAGES_FEATURE_DETECTION_ENABLED to avoid errors for images that do not exist (Aman Pandey)
• Restore ability to perform JSONField query operations against StreamField when running against the Django 4.2 development branch (Sage Abdullah)
• Ensure there is correct grammar and pluralisation for Tab error counts shown to screen readers (Aman Pandey)
• Pass through expected expected cc, bcc and reply_to to the Django mail helper from wagtail.admin.mail.send_mail (Ben Gosney)
• Allow reviewing or reverting to a Page's initial revision (Andy Chosak)
• Use the correct padding for autocomplete block picker (Umar Farouk Yunusa)
• Ensure that short content pages (such as editing snippets) do not show an inconsistent background (Sage Abdullah)
• Fix horizontal positioning of rich text inline toolbar (Thibaud Colas)
• Ensure that DecimalBlock correctly handles None, when required=False, values (Natarajan Balaji)
• Close the userbar when clicking its toggle (Albina Starykova)
• Add a border around the userbar menu in Windows high-contrast mode so it can be identified (Albina Starykova)
• Make sure browser font resizing applies to the userbar (Albina Starykova)
• Fix check for delete_url_name attribute in generic DeleteView (Alex Simpson)
• Re-implement design system colors so HSL values exactly match the desired RGB (Albina Starykova)
• Resolve issue where workflow and other notification emails would not include the correct tab URL for account notification management (LB (Ben) Johnston)
• Use consistent spacing above and below page headers (Thibaud Colas)
• Use the correct icon sizes and spacing in slim header (Thibaud Colas)
• Use the correct color for placeholders in rich text fields (Thibaud Colas)
• Prevent obstructing the outline around rich text fields (Thibaud Colas)
• Page editor dropdowns now use indigo backgrounds like elsewhere in the admin interface (Thibaud Colas)

Documentation

• Wagtail's documentation (v2.9 to v4.0) has been updated on Dash user contributions for Dash or Zeal offline docs applications (Damilola Oladele, Mary Ayobami, Elizabeth Bassey)
• Wagtail's documentation (v2 to v4.0) has been added to DevDocs which has offline support and is easily accessible in any browser (Vallabh Tiwari)
• Add custom permissions section to permissions documentation page (Dan Hayden)
• Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
• Officially recommend fnm over nvm in development documentation (LB (Ben) Johnston)
• Mention the importance of passing request and current_site to get_url on the performance documentation page (Jake Howard)
• Add documentation for register_user_listing_buttons hook (LB (Ben Johnston))
• Add development (contributing to Wagtail) documentation notes for development on Windows (Akua Dokua Asiedu)
• Mention Wagtail’s usage of Django’s default user model by default (Temidayo Azeez)
• Add links to treebeard documentation for relevant methods (Temidayo Azeez)
• Add clarification on where to register entity plugins (Mark McOsker)
• Fix logo in README not being visible in high-contrast mode (Benita Anawonah)
• Improve 'first wagtail site' tutorial (Akua Dokua Asiedu)
• Grammatical adjustments of page models usage guide (Damilola Oladele)
• Add class inheritance information to StreamField block sreference (Temidayo Azeez)
• Document the hook register_image_operations and add an example of a custom Image filter (Coen van der Kamp)
• Fix incorrect example code for StreamField migration of RichTextField (Matt Westcott)
• Set up Stimulus application initialisation according to RFC 78 (LB (Ben) Johnston)
• Refactor submit-on-change search filters for image and document listings to use Stimulus (LB (Ben) Johnston)
• Document the policy needed to create invalidations in CloudFront (Jake Howard)
• Document how to add permission restriction to a report view (Rishabh jain)

Maintenance

• Switch to using Willow instead of Pillow for images (Darrel O'Pry)
• Remove unsquashed testapp migrations (Matt Westcott)
• Upgrade to Node 18 for frontend build tooling (LB (Ben) Johnston)
• Run Python tests with coverage and upload coverage data to codecov (Sage Abdullah)
• Clean up duplicate JavaScript for the escapeHtml function (Jordan Rob)
• Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
• Migrated initButtonSelects from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
• Migrated initSkipLink util to TypeScript and add JSDoc & unit tests (Juliet Adeboye)
• Clean up some unused utility classes and migrate unlist to Tailwind utility class w-list-none (Loveth Omokaro)
• Clean up linting on legacy code and add shared util hasOwn in TypeScript (Loveth Omokaro)
• Remove unnecessary box-sizing: border-box declarations in SCSS (Albina Starykova)
• Migrated initTooltips to TypeScript add JSDoc and unit tests (Fatuma Abdullahi)
• Migrated initTagField from core.js to own TypeScript file and add unit tests (Chisom Okeoma)
• Added unit tests & JSDoc to initDissmisibles (Yekasumah)
• Standardise on classname for passing HTML class attributes (LB (Ben Johnston))
• Clean up expanding formset and InlinePanel JavaScript initialisation code and adopt a class approach (Matt Westcott)
• Extracted revision and draft state logic from generic views into mixins (Sage Abdullah)
• Extracted generic lock / unlock views from page lock / unlock views (Sage Abdullah)
• Move identity JavaScript util into shared utils folder (LB (Ben Johnston))
• Remove unnecessary declaration of function to determine URL query params, instead use URLSearchParams (Loveth Omokaro)
• Update tsconfig to better support modern TypeScript development and clean up some code quality issues via Eslint (Loveth Omokaro)
• Switch userbar to initialise a Web Component to avoid styling clashes (Albina Starykova)
• Refactor userbar stylesheets to use the same CSS loading as the rest of the admin (Albina Starykova)
• Remove unused search-bar and button-filter styles (Thibaud Colas)
• Use util method to construct dummy requests in tests (Jake Howard)
• Remove unused dev-only react-axe integration (Thibaud Colas)
• Migrate accessible Skip Link implementation to a Stimulus controller (Loveth Omokaro)
• Split up wagtail.admin.panels into submodules, existing exports have been preserved (Matt Westcott)
• Refactor userbar styles to use the same stylesheet as other components (Thibaud Colas)
• Add deprecation warnings for wagtail.core and other imports deprecated in Wagtail 3.0 (Matt Westcott)
• Migrate admin upgrade notification message implementation to a Stimulus controller (Loveth Omokaro)
• Migrate workflow and workflow tasks enable action and lock/unlock actions to a Stimulus controller (Loveth Omokaro)
• Pull out icon sprite setup function from inline script to its own TypeScript file & add unit tests (Loveth Omokaro)
• Upgraded Transifex configuration to v3 (Loic Teixeira)

Upgrade considerations

Wagtail-specific image field (WagtailImageField)

The AbstractImage and AbstractRendition models use a Wagtail-specific WagtailImageField which extends Django's ImageField to use Willow for image file handling. This will generate a new migration if you are using a custom image model.

Comments within InlinePanel not supported

When the commenting system was introduced, support for InlinePanel fields was incorrectly added. This has led to issues where comments can be lost on save, or in most cases will be added to the incorrect item within the InlinePanel. The ability to add comments here has now been removed and as such any existing comments that were added will no longer show.

See https://github.com/wagtail/wagtail/issues/9685 for tracking of adding this back officially in the future.

Adoption of classname convention for some template tags & includes

Some undocumented Wagtail admin template tags and includes have been refactored to adopt a more consistent naming of classname.

If these are used within packages or customisations they will need to be updated to the new variable naming convention.

Name	New (classname)	Old (various)
dialog_toggle	{% dialog_toggle classname='...' %}	{% dialog_toggle class_name='...' %}
paginate	{% paginate pages classname="..." %}	{% paginate pages classnames="..." %}
tab_nav_link	{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with classname="..." %}	{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with classes="..." %}
side_panel_button	{% include 'wagtailadmin/shared/side_panels/includes/side_panel_button.html' with classname="..." %}	{% include 'wagtailadmin/shared/side_panels/includes/side_panel_button.html' with classes="..." %}

InlinePanel JavaScript function is now a class

The (internal, undocumented) InlinePanel JavaScript function, used to initialise client-side behaviour for inline panels, has been converted to a class. Any user code that calls this function should now replace InlinePanel(...) calls with new InlinePanel(...). Additionally, child form controls are now initialised automatically, and so it is no longer necessary to call initChildControls, updateChildCount, updateMoveButtonDisabledStates or updateAddButtonState.

Python code that uses the InlinePanel panel type is not affected by this change.

WAGTAILADMIN_GLOBAL_PAGE_EDIT_LOCK setting is now WAGTAILADMIN_GLOBAL_EDIT_LOCK

The WAGTAILADMIN_GLOBAL_PAGE_EDIT_LOCK setting has been renamed to WAGTAILADMIN_GLOBAL_EDIT_LOCK.

Wagtail userbar as a web component

The wagtailuserbar template tag now initialises the userbar as a Web Component, with a wagtail-userbar custom element using shadow DOM to apply styles without any collisions with the host page.

For any site customising the position of the userbar, target the styles to wagtail-userbar::part(userbar) instead of .wagtail-userbar. For example:

wagtail-userbar::part(userbar) {
    bottom: 30px;
}

Support for legacy versions of azure-mgmt-cdn and azure-mgmt-frontdoor packages will be dropped

If you are using the front-end cache invalidator module (wagtail.contrib.frontend_cache) with Azure CDN or Azure Front Door, the following packages need to be updated:

• For Azure CDN: upgrade azure-mgmt-cdn to version 10 or above
• For Azure Front Door: upgrade azure-mgmt-frontdoor to version 1 or above

Support for older versions will be dropped in a future release.