Enjoy better UX with Wagtail 7.1
From more collapsible blocks to better image sorting, this release has a lot of things users will love
Anyone who has ever driven a car where the only USB connector is in the glove compartment for some bizarre reason knows that design makes a big difference for users. In our last release, we focused on making a lot of improvements under the hood of Wagtail so the engine would run more smoothly. In this release, our focus was on finding ways, big and small, to make Wagtail smoother and more pleasant for editors to use.
A lot of this work came out of our Google Summer of Code program as well as some excellent feedback and ideas generated by all the people contributing time to our UI team. Let's take a look at what you can do now to make user experiences in Wagtail even better.
Make more of your custom blocks collapsible
If your StreamField includes an option to add a call-to-action block or a related article block, these blocks most likely use a custom block type called StructBlock. This block type is great for making blocks where editors don't need a lot of flexibility in the order of the content. StructBlocks are great for blocks with fixed, repeatable patterns.
Before this release though, you could not make field groups in a StructBlock collapsible. So if you have a lot of optional settings or fields, they would take up a bunch of space on the editing page and increase the amount of clicking and scrolling that editors have to do to get their work done. With Wagtail 7.1, now you have the option to make field groups collapsible so editors can interact with them only if they need to. This option provides editors with a cleaner workspace and more control over the parts of the block they are looking at.
Choose your media library layout
When you're hunting for that photo you published of a board member with cake on their face at a conference five years ago, you're almost certainly not going to remember what the file name was. Even if you do remember something like the date you took the photo, there might be multiple files listed on that date, and you don't want to have to click open every one of them.
That's why we've given you even more options to search for images and other media files in Wagtail 7.1. Now image listings support both a grid view and a list view with a toggle to switch back and forth as you like. The new media listings also provide more metadata about your files and help you sort them, so you can narrow down your searches more easily. We added a usage count for documents too so that you can root out files that aren't being used and keep everything organized.
Get previews while changing your site settings
Currently, if you want to make changes to your site settings, you don't get the benefit of seeing page previews while you're making changes. If you're changing your permissions or other settings, now you can add a mixin to your models that will let you preview the effects of the changes you're making. One particularly useful scenario for this feature is previewing how changes to menus will look before publishing them so that you can see how well the labels work with your design.
Grant permissions on a per-site basis in multisite
Speaking of settings, you can also give non-superuser accounts full control over the settings and configuration of an individual site. So if you have a client or a collaborator who wants more control over their individual Wagtail website without giving them access to all of the other sites on your multisite setup, you can do that with Wagtail 7.1
Navigate your headless site better with improved user features
We reworked the live preview feature and the user bar for headless Wagtail websites so they provide a smoother experience for editors. You can now load previews from a cross-domain headless frontend (think of technologies like Next.js or Astro) with the wagtail-headless-preview package.
We also made the user bar a template component so that it can be loaded by your headless frontend. By making the user bar something that can be loaded independently, headless users now have a better preview experience as well as access to some of Wagtail's best editing features, including our accessibility checks and content metrics.
Get more things done with your keyboard
A lot of editors prefer keyboard shortcuts and some also use the keyboard it is more accessible for them than a mouse. With Wagtail 7.1, you can control more of Wagtail directly with your keyboard. You can toggle the main navigation sidebar on and off as well as the minimap. You can also disable the custom keyboard shortcuts if they are getting in the way or interfering with another keyboard tool you're using.
New documentation and things to watch out for as you upgrade
We're trying something new with our documentation to see if we can make components more reusable and help make it a bit easier for people to create customizations of the Wagtail admin. This documentation is very new and may be affected by breaking changes in a component's API. If you're keen to customize the admin, definitely have a look at that new section and let us know what you think.
As usual, there are some deprecations and changes to watch out for. One key one is some changes we've made to the way certain button classes work. If you have custom changes or hooks connected to buttons, have a look at that section of the release notes for sure.
To make your upgrade to Wagtail 7.1 as smooth as possible, we definitely recommend kicking back with a good beverage and giving our full release notes a read.