What’s New in Wagtail CMS | Release 5.0 | AI Prompts, Streamfield Migration & More

This video is from Wagtail CMS 2023 .

What’s New in Wagtail CMS | Release 5.0 | AI Prompts, Streamfield Migration & More
0:56:47
Published July 19, 2023
2,509 views

We provide a sneak peek at Wagtail 5.0 CMS, how we’re using AI LLM in Wgatil as well as key updates you’ve asked for.

💻 Wagtail is the easiest open-source Python CMS to use:
Install the demo and start building your first site in 10 minutes: https://github.com/wagtail/bakerydemo

In this Wagtail CMS update video we’ll highlight the following changes and benefits, all based on our user feedback requests.

⇢ Multiple Chooser Panel

Watch as we show you how to use the chooser panel in Wagtail CMS and how easy it is to manage multiple choosers

⇢ StreamField Migration

We answer your questions about StreamField migration n Wagtail CMS and provide a quick tutorial

⇢ Locking and Workflows for Snippets

You asked for it! We know provide locking for snippets and workflows for snippets

⇢ Rich Text Enhancements

Enhance your content with the newly introduced rich text features and we show you how to use Streamfield Blocks

⇢ Outreachy Update

Get the latest news on Wagtail's collaboration with Outreachy and how it can benefit Wagtail CMS users

⇢ Accessibility Checker

The new accessibility checker in Wagtail CMS helps you understand how to make your content more accessible with the new built-in checker.

⇢ Editor Guide

Our new Editor Guide allows you to create content that resonates with your audience whilst improving writing styles, grammar and content structure
⇢ Addressing Technical Debt

Wagtail CMS helps you address your technical debt. Learn about the steps we’ve taken to reduce technical debt, making your system faster and freeing up space you need!

SNEAK PEEKS:

⇢ Live Demo of Wagtail AI

Get a live demo of how we’re using the artificial intelligence within Wagtail CMS which will be rolling out very soon!

Timestamps:

0:00 Introductions & speakers
2:11 How to use chooser panels in Wagtail CMS 4.2
7:28 Wagtail CMS StreamField migration
10:31 Q1: Can I use StreamField migration toolkit in Wagtail 4.1
11:02 Q2: Unnecessary auto migrations on Django StreamField tweaks
12:13 How does Wagtail compress images for SEO?
13:23 Locking and workflows for snippets in Wagtail CMS tutorial
19:52 Q1: Can you use the same workflow and tasks?
20:24 Q2: Future of model admin vs Snippets in Wagtail 5.0 - editing Django models
21:13 Q3: What happens with the Comment feature?
21:54 UX improvements in Wagtail: ​​Rich text enhancements, minimap UI refinements, inline toolbar & Streamfield Blocks
28:48 Q1: How to merge heading blocks and paragraph blocks into a single Rich Text block in Wagtail CMS
30:00 Using Outreachy in Wagtail CMS
31:08 How to use Accessibility Checker in Wagtail CMS
34:23 Ignoring eros in accessibility checker - false positives
35:08 Does accessibility checker work to WCAAG 2.1 standards in Wagtail CMS
36:00 Editor Guide - writing style guides, grammar, content structure
37:37 Concept section in Wagtail CMS
38:38 Reducing technical debt - solving remote storage problems
42:21 Maintaining 3rd party packages in Wagtail CMS
44:00 Introducing Wagtail 5.0 - highlights & future releases
48:58 Using AI & LLM in Wagtail CMS 5.0
54:11 Blocking AI feature in Wagtail CMS
55:00 Showing changes made by AI in Wagtail CMS

📹 Related Videos To Watch Next:

â–¶ Set up dark mode in Wagtail https://www.youtube.com/watch?v=v0kRzIh_YkE
â–¶ A complete guide to Stimulus in Wagtail https://www.youtube.com/watch?v=5WS7B8R0x0U
â–¶ A beginners video tour of Wagtail https://www.youtube.com/watch?v=Js8dIRxwSRY&t=11s

Wagtail future proofs your CMS system, as it’s open source, continuously updated and built on Python, one of the most popular global programming languages, used widely in machine learning and big data. So you’re always ahead of the curve when it comes to CMS platforms

Wagtail is the #1 choice for accessibility, is scalable and most importantly, secure.

👉 Get started with a FREE Wagtail CMS TRIAL: https://github.com/wagtail/bakerydemo and see how easy it is to build a website that works for you.

📊 Read why Google, NASA, and the British NHS, are powering their digital estates with Wagtail: https://wagtail.org/about-wagtail/

🎥 More Wagtail Videos: https://www.youtube.com/watch?v=cne2kxemMAQ&list=PLfwZ-fob20cPvSQ_v1hkjto8BAPN21tLJ

📣 Follow us on social:

#wagtail #wagtailcms #opensource

Summary

Wagtail 4.2 adds multiple chooser panels for selecting many images or snippets at once, StreamField data migration support, locking and workflows for snippets, richer editor feedback, and an accessibility checker based on axe. The speakers also explain that Wagtail 5.0 is mainly a cleanup release that removes deprecated fallback code, while the roadmap includes better snippets, accessibility improvements, SVG support, search enhancements, page-editor refinements, and dark mode with high contrast. They also highlight improvements to the editor guide and describe how community feedback and Outreachy contributions are shaping the project.

Key takeaways

  • Multiple chooser panels let editors select many images or other chooser-based items in one modal while retaining captions, ordering and deletion controls.
  • StreamField migrations can now update existing JSON data when block structures change, with a separate toolkit offering limited automatic migration generation.
  • Snippets can use locking and the same workflows as pages, including moderation, comments, approval and publishing.
  • Wagtail 4.2 improves the editor with a pinnable rich-text toolbar, slash commands, unified StreamField and rich-text menus, and resizable side panels.
  • The new accessibility checker uses axe to identify content-related WCAG issues such as empty headings and incorrect heading hierarchy, with more rules and editor integration planned.
  • Wagtail 5.0 is intended to remove accumulated deprecated compatibility code; its roadmap includes SVG images, improved search, page-editor refinements, accessibility updates and dark mode.

Summarised automatically from the transcript.

Transcript

9,066 words · auto-generated Show

Automatically transcribed, so expect mistakes in names and technical terms.

0:00

Speaker 1: Okay, right. We've got quite a lot of people here and we've got quite a lot of get to get through as well. So I'm gonna kick things off. So Thanks everybody for joining us. I'm glad that you've made it at the right time because the clocks have gone back, gone forwards in the US and they don't spring forward here for another week. So it's always a bit confusing. Well I find it confusing anyway. I'm really glad that you've all made it and I hope you're excited to hear what's new in Wagtail. So I'm Lisa, I'm head of marketing at Torchbox and I'm delighted to introduce our speakers and what we're covering today. So we're going to be showing you features in the and updates in the latest 4. 2 release. We're going to be telling you why we're moving to Wagtail 5. 0 next. We're going to give a sneak peek at what's ahead on the roadmap. And we've got a couple of other golden nuggets thrown in that weren't on the agenda.

0:47

Speaker 1: So it's worth sticking around to the end if you can. And your speakers today are, I'd like you to give a little wave, when I mention your name, please. We've got Tebo, who's Senior Frontend Developer and Wagtail Consultant. We have Albina and Damalola, who are Outreachy participants. We'll be telling you more about the Outreachy program. And we've got Matthew, Senior Dev and Wagtail Consultant. We've got Sage, who's Wagtail Developer, Ian, our Wagtail Director, and Tom Dyson, who's Torchbox co-founder and technical director. So this is a webinar, so you can see us, but we can't see you. But we would love it to be interactive. So please use the Q<unk>A for any questions that you have and we'll answer some via the chat as we go. We'll ask some live as well. And we have got a bit of time at the end.

1:33

Speaker 1: to ask some more questions to our speakers live. And I am recording the session so that I can send it to you afterwards. And live transcripts have been enabled if you'd like to use them. So we're going to be finished at six o'clock UK time and then hopefully you're going to leave armed with loads of new and exciting ideas for your Wagtail projects. And on that note, I'm going to hand over to Tom Dyson

1:55

Speaker 2: Thank you, Lisa. I was going to give a summary of what's coming up, but I think you've covered that beautifully. So I think I'm just going to hand over to Matthew, who you will all know I think from Slack also as as Gasman on GitHub. Matthew's going to talk to us about chooser panels.

2:11

Speaker 3: Yeah. So today I'm going to show you the multiple chooser panel, which is a user experience enhancement that was sponsored by UGO. that's been uh introduced in the uh 4. 2 release. So here we have a blog post with an image gallery um which is based on an inline panel uh where each item is an image with a caption and um so On a page like this, there might be sort of a couple of dozen images on here. And to uh to add one, you would uh sort of click here and then there's yeah there's kind of a lot of clicking involved what if to to add to

2:56

Speaker 3: large numbers of images here. And it's not really a great user experience for editors. So multiple chooser panel is a drop-in replacement for inline panel in this common case where you've got uh uh one of the fields uh in the inline panel being uh chooser. So we've got an image chooser here And as I say it's a drop-in replacement, so we can just change that to a multiple chooser panel. And then there is just one addition which is chooser field name. And because here the image , they choose a field is called image, that's what we put here So if you just wait a moment for that to reload

3:42

Speaker 3: and then if I refresh that page. Initially it uh looks the same, but this time when we click add gallery image, then we immediately get the uh the the pop-up image chooser Allowing us to select multiple images and then when I sort of confirm and close this, that has populated the panel with as many images as I chose. So From here, um it works just the same way as a standard inline panel would. I can proceed to fill in They caption and reorder things, delete them, just as you would with a standard image chooser. So this is a fairly

4:29

Speaker 3: unassuming looking change that will have a big impact on the editor experience. And this is made possible through various other pieces of work that we've covered. here in the past um because it this isn't just for image choosers um here I've also set this up for the sort the author snippets so we can sort of select multiple authors here and have them immediately added. And this is possible through Telepath, which was introduced in two point Eleven or ten as a way of creating and populating fields programmatically in a standardized way And now we're able to use that outside of Screenfield 2, because since all of our sort of chooser widgets implement this common API for how they are

5:18

Speaker 3: how we get data in and out of them, we're able to populate those programmatically and be sure that it will always work the same way across all choosers. And also the work that we did in 4. 0 to bring all of our chooser modals under a common base implementation means that the work to add this multiple chooser mode was only really had to be done once and now that has become a standard feature of all of our choosers. So this is really a great example of how the work that we've invested into infrastructure improvements in the cobase. can give real benefits further down the line

6:04

Speaker 3: uh to end users for the long term.

6:11

Speaker 2: Thanks, Matthew. I know that's going to be a big help to a lot of people, including many users of uh sites that we build here at Torchbox. Um it solves a kind of precise problem that I've seen that can come up a few times. There's a question come in here. Will the multiple chooser panel allow uploading multiple images directly into an image gallery?

6:32

Speaker 3: Not right now, so that that is uh yeah, that would be a really good addition and it wouldn't uh hopefully wouldn't be a huge uh addition fr from uh from this point. Um there I suppose there would be uh uh yeah uh some sort of design considerations in how you would fill in things like the uh the alt text as you're uploading. But the there was uh uh uh an existing add-on package that was doing that. um I think I think it is called um multiple image chooser or something like that. And um so and I think that was a bit of a an inspiration for for this feature. And I think now that we have this infrastructure in Whittail, we'll be able to support that sort of use case a lot better, more stably.

7:19

Speaker 2: Great. Thanks, Matthew. Uh and then if you're ready, perhaps you could continue to talk about Streamfield migration.

7:27

Speaker 3: Yeah. Okay, so um so yeah, um as uh many of you probably know, Stream Fuel gives you uh a lot more freedom for managing and arranging a content than you would normally get within the constraints of a database structure And um that's possible because the uh the the stream data is stored all as one big JSON bundle. rather than across many database fields. And the trade-off there is that if uh yeah, whenever you change the data structure within a stream field For example, here we've got an image plus caption. And maybe when you started outbuilding this, you just had an image field on its own. And then in order to add these extra fields, then you have to

8:14

Speaker 3: change that into a struct block containing the image block and these additional fields. And when you make those sorts of changes, you can't take advantage of Django's migration framework to ensure that those changes in structure propagate to your existing data. Because from the database schemer's perspective, nothing has changed. It was a big bundle of JSON before, and it still is now. So this has been a notable missing piece for quite some time. And so last year for as part of the uh Google Summer of Code initiative uh Uh Sandil Ranasingh came up with this new feature to uh address that.

9:01

Speaker 3: And the idea is that alongside the schema migration generated when you change your stream field definition and run make migrations, you would add a data migration to update the JSON accordingly. and it's as you see it's all thoroughly documented and there are some various uh different helper functions um to putting your migrations to uh handle cases like m yeah modifying, adding, removing block types and and it's Yeah, and this is yeah, so it's really flexible. There's yeah, lots of power here. And in the current version shipped with Wagtail 4. 2, you would have to write these migrations yourself, but there's

9:46

Speaker 3: Also a separate package, Wagtail Streamfield Migration Toolkit, which was in fact the original output of Sandil's Google Summer of Code project before being incorporated into Wang Cell Core and this has limited support for auto-detecting the changes and generating those migrations for you. So this is something that's yeah still very much in active development. So it was a new release of this package in January. And so it's yeah, definitely something I would encourage you to try out, both the versioning Wagtel Core and uh the the uh the the Screenfield Migration Toolkit package and uh yeah you and your feedback will uh definitely help uh shape the uh direction of this in future

10:32

Speaker 2: Thanks, Matthew. A couple of questions here. One, which I think you just answered, is if we're stuck on Wagtail 4. 1, do we still have access to the Streamfield Migration Tools?

10:44

Speaker 3: Okay, so so yeah, the uh screenfield migration toolkits uh package that was um that would that was built against the four point one so yeah if you're on the long-term support release you can install that package and uh and that will be available to you as well.

11:00

Speaker 2: Great And from Josh, any changes planned to the current behavior of automatically generating useless Django migrations every time a stream field gets tweaked?

11:10

Speaker 3: Yeah. Okay, so yeah, this is this is uh yeah uh it's been a bit of a contentious one. Um uh I think yeah that there are sort of quite subtle reasons w Yeah, in favor of doing that. Um I know that yeah, but yeah, they yeah, i it's it's own only very niche uh uh circumstances that that that really comes into play when you're doing data migrations. I know there has been moves to change that. I can't quite remember what the status of it was. I think uh so Cohen posted a snippets. I think there is an op an open issue on the Wagtail GitHub about this. I think Cohen posted a snippet for disabling that behavior.

11:55

Speaker 3: Maybe it's a package. I can't don't know if anyone remembers. But uh yeah, I think it's something we're aware of and uh I think that there are workarounds for it. Well

12:05

Speaker 2: we'll dig that out and um and get the link and either share it now or in the information that Lisa will share with everybody after this webinar One more question uh not directly related to what Matthew's just been talking about from Louisa. How does Wagtail compress images uh in terms of size and weight for SEO, does this new gallery improve for that? So this this this new gallery, the the the feature that Matthew showed doesn't change the Wagtail's image serving behavior. There is a lot of control over the format and the size and the compression on each image that you can apply either as a general level but also per image from the template. Nevertheless, this is something that we continue to work on. And

12:50

Speaker 2: I think maybe Thibaut might touch on this later, but if no, I think Ian's going to mention this in the roadmap. But yeah, just to say that there's already control but it's something that we are we we're continuing to work on to to uh optimize images and to reduce the bandwidth by uh by default on five tail sites With that, I'm going to move on and hand over to Sage, who's going to talk to us about snippets.

13:15

Speaker 4: All right. Thanks, Don. Hey everyone. Let me just share my screen. Okay. So um if you've been following Wagtail for a while, you may have noticed that We've been supercharging our snippets feature with new functionalities that help you manage your smaller bits of content. And in Wagtail 4. 2, we are excited to bring you even more of those features This time we have locking and workflows for snippets. This feature is optional and can be enabled by adding the in newly introduced mixins to your models. And to demonstrate, I have the lovely Bakery demo website here.

14:02

Speaker 4: And I'm going to enable the locking feature. um to the person model. So to do that, I add an import from white coded models. Um I import the lockable mix in and I add it to one of the superclasses for the person model. And since this mixin' adds some database fields, we 'll have to rerun the migrations. And then I restart the server. After enabling the mixin, if I go to settings

14:48

Speaker 4: groups and I'm going to edit the moderators group. I can now see the lock and unlock permissions for the person model. So I'm going to give those permissions to the moderators group. Hit save. And before I proceed, I would like to let you know that I will be using multiple different users. I have an editor user, I have a moderator user, and an admin user. So I will be switching between different browser windows and I suggest that you pay attention to the lower left corner of the screen that tells you which user I'm currently acting at as. And so I'm going to switch over to the moderator user.

15:36

Speaker 4: And if I try to edit one of the people snippet. I now have the information that this snippet is currently unlocked and I can unlock uh I can lock this snippet. And if I do so, it says that it was locked by me and I have the option to unlock it. And what happens is that if I now switch over to the editor user Right here, and I try to edit the same snippet, I will not be able to do so. And it says that it's locked by moderator. And yeah, I I cannot make any changes. However, if I am acting as another user

16:22

Speaker 4: who um has the unlock permission So at first I will not be able to edit the snippet, but I have the option to unlock it. And if I unlock this, I will now be able to edit the snippet normally. So this is how locking has always worked for pages, and it's just that we have now brought the feature to snippets. And the next feature is the workflows that you can enable by adding workflow mixin. So I'm going to add that. And since this mixin does not add any database fields, I can go ahead and continue.

17:11

Speaker 4: By going to settings and workflows. Here I'm using the default moderators approval that White Tell gives you, but of course you can use any other workflows that you have configured on your website. And if I scroll down, I now have the option to assign the workflow to snippets and it will show you the list of models with workflow mixin enabled And in here I'm going to enable the workflow to the person model. I hit save. And now what happens is that if I switch to the user, um the editor user, and I reload the page. I try to make changes to the snippet.

17:57

Speaker 4: I now have the option to submit to moderators approval. And if I do so and try to edit again. I cannot because it's currently in moderation and only reviewers for the task can edit. And the only option that I have is to cancel the workflow And I can see the status side panel. It tells you that it's currently in moderation and it shows you current stage and you can get a link to the full history of the workflow And what I'm going to do next is I'm going to switch to the moderator user and let me just reload the page. Okay, I can edit this snippet because I'm a moderator.

18:42

Speaker 4: And in addition to the normal actions that I have, I now have the action to request changes, to approve and publish, and approve with comment and publish. And before I do any of those actions, I will just show you. So this snippet is currently used on this mince meat chart page. And if I look at the live page um it shows that the snippet has not been updated because the changes that I made um it was still in draft it was still in the workflow And now if I hit approve and publish, I can see that the changes are now live.

19:30

Speaker 4: And if I reload the page, You can see that the changes have been reflected to the snippet and thus the live page as well. So yeah, that's workflows for snippets. It's basically how workflows has Been working for pages, but we've brought the feature to snippets as well. Thank you.

19:50

Speaker 2: Thank you, Tibet. Thank you, Sage. I've got a couple of questions about snippets. First is can you reuse the same workflow and tasks for both pages and snippets?

20:01

Speaker 4: Yes, definitely. So we we are using the same workflow object that we've been uh that we have always had for pages and it's and now you can assign the same workflow to snippets, but you have to check um the instance of the object, whether it's a page or a snippet, if if you would like to handle it differently, otherwise you can just be using the same way.

20:24

Speaker 2: Great. And another, what's the future of model admin versus snippets?

20:30

Speaker 4: That's something that we would like to address in the 5. 0 release. We will the introducing features that we have in model admin to snippets. So hopefully you can further customize the snippets like the menu items and the URLs. And yeah, hopefully one step has been brought to snippets. Snippets can be the definitive way for you to edit Django models in the admin.

20:58

Speaker 2: There's a discussion about this or an RC, which I will maybe one of the team here can find a link and we'll share it in the chat because it's that that answers That question is answered pretty comprehensively there. Question from Bethany, does the comment feature just send a comment to the editor user?

21:20

Speaker 4: Um so the commenting feature is You will be able to see the comments in the status of the workflow. So every if all users can who can see the snippet will be able to see the comment. But you can also customize the uh how the comment is displayed by using custom task as well.

21:46

Speaker 2: Thanks, Sage. With that we're gonna have to move on and I'm gonna hand over to Thiba, who's gonna talk about UX feedback.

21:53

Speaker 5: Thank you, Tom. Hi everyone, I'm Thibaut. I'll switch over to my screen share and yes, I'm going to talk about uh UX feedback, how we've handled this over the last year or so and um specific improvements we've made in the very last release or the 4. 2. So right now we're looking at uh the page editor UI in the very last release for a blog page on our Bakery demo website, which sure is getting you hungry already. I'll switch over to a version of this page from about a year ago in Wagtail 2016. And I think There's quite a stark contrast in the interface. And essentially over the last, yeah, about a year or so, as part of our page editor 2022 project, we have been working on iteratively improving this user experience.

22:43

Speaker 5: focusing on the page editor in particular. I'll switch over to what I'd free a lot now and you'll see some of the gradual improvements we brought. There's quite a few themes on here about user customization, how much of this we've been able to change thanks to investments we made into the technical depths, resolving that in our UI code base. And a strong theme as well, in my opinion, is how much feedback we've gotten from people to help us shape those releases. So I'll now switch over back to the very last version of this with written 4. 2. I'll be demonstrating the rich text features on there shortly, but we're gonna also take a quick look at some of the features we have on there the side panels, having a live preview that's been an often requested feature in the CMS, having a way to resize this panel as well has been something that people came back to us to request those changes

23:40

Speaker 5: And we definitely try and make the most of that feedback and be as open with our visual design and UX process as we are with the Python and Django changes of the code base So what does it mean to give feedback practically? Well, I had mentioned the page editor project we had been running for quite a while with this GitHub discussions thread. This has been our most active discussion on GitHub ever. And I think that's great. And I really hope that we get to bring that kind of transparency to all our UX changes in the future. Closer to what we're working on at the moment , we have a feedback thread about minimap UI refinements. So the minimap is one of those new components we brought

24:26

Speaker 5: a couple releases ago that allows people to navigate the page more easily section by section to the right here. I believe quite a few people who are here today actually have contributed to the different items on these specific tickets, uh thinking of Tim and Ryan in particular. And yeah, just for people who have this awareness of GitHub, going through those discussions on GitHub issues, adding their comments. that's invaluable for us. And for those that don't, we also have this specific feedback thread that's called editor experience feedback, where we collate issue issues and comments and any any notes that people want to relay from their editor team. So again, very invaluable to us. I will share this specific thread in the chat

25:12

Speaker 5: so everyone can take a look and uh yeah at their comments about the recent versions. And uh back to rich text specifically. So rich text is an area I've spent quite a lot of time on myself. And in the last few releases, we've made uh Further tweaks to the change we had made in White 4. 0. So quite a few people here will have already seen our inline toolbar, which we had introduced a few releases ago. And uh we did believe that in lots of contexts for lots of users, this inline toolbar make quite a lot of sense. But we heard you loud and clear, very loud and very clear and have reintroduced a way to pin it to the very top of the editor. I actually believe this as well is something that quite a few people in this specific webinar have discussed with us and it's definitely helped us

26:04

Speaker 5: uh shape this change in in UX. So the toolbar is now pinnable. When it is pinned, it will be at the top of all of the editors on the page, not just this one. So I don't have to click this every time. And the toolbar now also contains all of the rich text options you'd have expected from past releases. And we didn't stop at just this toolbar, so we had to use quite a few other rich text UX changes. One of those that I'm really happy with is those those slash commands. So if you press slash in editor, you get this interface that displays both rich text and stream field options. We actually see this as a way to eventually bridge the gap between rich text and stream field so that as far as editors are aware

26:52

Speaker 5: uh they feel like one and the same. They feel very cohesive. So for example on here I can see both my rich text heading two and my stream field heading block quotes and so on. And this being a rich text experience, I can press the slash and then further type in the editor and automatically for me selects the specific option in the rich text field that's the most relevant I can press enter and move on. So that's one of the ways in this specific case that I can I can add a list item, but again, I can also do so with the toolbar at the very top I can also do so with my inline toolbar. Should I prefer to work this way? And we really see this versatility as a net positive for ourselves.

27:38

Speaker 5: uh being able to cater both to power users and people who have never ever seen white tail before. And also from an XVD standpoint, it's really important for us that this works equally as well. for keyboard, screen reader, mouse, voice control software, users, hence all of the options. So one of the keep the feedback and and questions coming by the way in the chat or try and address them at the very end, if not during um one of the other changes we've made again with this idea of uh combining rich text and stream field is bringing this same rich text menu over to stream field. So now if I go into the plus option in between blocks, I see the same menu that has filterable options.

28:25

Speaker 5: And um yeah, I believe this would be quite natural once people get to try this for themselves. And uh again, I really encourage everyone here to take a look at this and uh yeah, like let us know if any feedback you have on those features. And um yeah, I believe we have a couple minutes for questions now.

28:45

Speaker 2: Thanks, TV. I don't think any particular question. Oh no, there is a question in from Tim. Is there an easy way to merge heading blocks and paragraph blocks into a single rich text block?

28:56

Speaker 5: That's a good question, Tim. I believe this is exactly the type of feature we'd eventually like to have if we're able to merge uh rich text and and stream feel further so the specific challenge here is that the the data model between the two is is quite different But that's only due to the history of how those features have been brought to Wagtail. There's no underlying reason why this isn't possible So I believe eventually you'd get to the experience where you might be able to copy-paste, copy, say a sequence of stream field or rich text blocks and paste them and have that be the kind of interaction you use to merge the blocks.

29:35

Speaker 2: Great. And not questions, but certainly enthusiasm from Matthew on thank you for the pinnable toolbar and from Jeremy saying it's a great idea to blur the distinction between stream fields and rich text. There's a question about bakery demo from Eagle, but because we're running short of time, I think I'm going to let Sage answer that in text and move back to you, Thibaut, to talk about outreach.

29:59

Speaker 5: Yes, Artwitchy. So for people who might not have heard of it yet, RTC is one of those open source outreach programs Wattel has taken part in, just like Google Summer of Code in the past. So just like Google Summer of Code, ArtReachy is an internship program for people who are underrepresented in technology and open source in particular. And uh we were we were super keen to participate to this and honestly just humbled that we were allowed to participate into those programs. And um today we have we have two of the participants. Actually we might have a uh Love as well with us in uh chat, I believe So our participants are there, Albina and Damilola, to take you through the projects they've been working on over the last three months

30:47

Speaker 5: and uh yeah, just share reports of what their internship has been like and what changes they've made in Wagtail.

30:55

Speaker 6: Hi everyone, my name is Albina and I'm an outreach intern at WagTail. I'm excited to be here and talk about the new feature we introduced in InVactale 4. 2 and accessibility checker. Uh but before we dive into it, let's take a moment and talk about accessibility. We all know that accessibility is important, right? But it's actually more than just a moral or legal obligation. It's an opportunity to tap into a large and often overlooked market. Just think about it. There are 1. 3 billion people with significant disabilities out there. And disabled adults in US alone have a disposable annual income of half a trillion dollars. What's not to like about all that?

31:41

Speaker 6: But here is a kicker. Shocking 96% of all of the world's top 1 million home pages still have basic accessibility issues, with an average number of 50 errors per page. We may ask ourselves why is this happening? And one of the reasons is that unlike JavaScript or CSS bugs, accessibility bugs are often traceable and happen without any warning. And even if we address accessibility issues during website development, it can still mean that accessibility they can be present in the content. So we at WegTale decided to address this and help our authors to identify and fix accessibility errors. So without further ado, let's meet our brand new accessibility checker

32:30

Speaker 6: built right into the user bar. It scans the page for errors and shows results like this. Here you can see the total number of issues found, the list of violations on the page, and the selectors for inaccessible element. Our checker is based on AX , world's most popular accessibility testing engine, making it powerful and precise with close to zero false positives. We initially added some of the most common violations for content authors like empty headings, incorrect heading hierarchy, misusing paragraphs as headings. But we didn't stop there. And in fact, in the latest version of the checker, we added more rules and also outlines

33:16

Speaker 6: to highlight the elements, the inaccessible elements on the page. Our future plans for the checker include integrating it into the page editor so you can see the changes instantly and make adjustments when necessary. We do believe that our checker is a significant step forward in making sure that website development is more inclusive for everyone. And in fact, uh according to the audit conducted by my colleagues, Accessibility Audit, there are hundreds of uh Wegtail-based uh websites with exactly the same rule violations we are checking for with our checker And for some of them there are thousands. So we encourage you to give our checker

34:03

Speaker 6: a try, to check your pages and feel that excitement. upon publishing a page and seeing uh zero accessibility issues found by the checker. Um thank you

34:16

Speaker 2: Thank you, Albina, for your presentation or for also for your excellent work on this. We have a question from Patricia who asks, what version of Wagtail is accessibility checker in?

34:29

Speaker 6: Uh it's uh 4. 0. So

34:32

Speaker 2: 4. 2. Um and also for Albina or Thibaut, does the accessibility checker have a way to ignore errors that aren't relevant?

34:42

Speaker 5: And that would indeed be super important. So the the short answer is in 4. 2 specifically, it doesn't because we're very keen to meet that release deadline. So we built the checker with very few checks that we are almost guaranteed have no uh false positives when when they do run. Um in the next release we're hoping to introduce a way to uh um dismiss errors that aren't relevant.

35:08

Speaker 2: Thanks, Tivo. And maybe you can also answer this one. Does your checker work to WCAG 2. 1 standards?

35:15

Speaker 5: So the short answer is yes, it definitely does. It's using the AX checking engine, which is one of the most popular ways to check for this specific standard. Technically, we have the checker configured to only validate content-focused aspects of those standards, so not the coding, not the visual design. But it does work against this standard and can be extended to cover other standards as well.

35:41

Speaker 2: Great. Thanks everyone. And I'm going to move on to Damolola, who's going to talk about his work on the editor guide.

35:50

Speaker 7: Hello everyone, my name is Damola Ladeli and I was an outro chain 10. I worked on improving the editor 's guide for work the CMS. I mean for most organizations they actually don't prioritize their documentation and for this reason it affects the way users perceive their products. So We as WACTA we've decided to gradually make improvements to our documentations, and this time around, we've made some major improvements to the uh editor's guard for Wacte CMS. So one of the major improvements is the uh Try to share my screen now. One of the improvements is the implementation of a writing style guide. So we conducted the gap analysis earlier on, which

36:35

Speaker 7: clearly showed that uh there were some inconsistencies in the grammar and tone of the work of the editor's guard, and for this reason We introduce the Google Developers Documentation Style Guide. For instance, if we check the various headings and sub-eddings within the editors guide, you can see that they are short-term mode direct now. Of course, and on the face of it, they tell you what their content is all about. For instance, find your way around Clearly tells you how to find your way around the CMS. Uh then moving on to the second major change or improvements is the is the structural ones for the main sections, uh for instance for the For the first main section of the editor's guide, we've changed the title from tutorials to getting started because obviously it didn't have a tutorial within it. Now you have a getting started

37:20

Speaker 7: section and within it you have an overview subsection which kind of uh introduces users to what work the CMS is all about. We plan to subsequently add more subsections to this section in the future And moving on to the to the final major improvements, we have the new concept section, which clearly has uh the various concepts used in the other sections of the of the editor's guide. For instance, if you go to find your way around, you can see one of the concepts is an interface. If you click on it, it's going to take you a page that has the Explanation for what the interface or new interface is about. And if you go to manage users, another concept is the users interface.

38:05

Speaker 7: And there you go, you have the explanation for what's uh users interfaces. Um hopefully uh that's it for now hopefully before the what's next and what they would have made some other major improvements our editors guard and uh the developer 's documentation so uh we really hope you stick around there thank you

38:27

Speaker 2: Thank you, Tamil, and thank you for all your excellent work on this. It's a huge improvement and I know already people are appreciating the improved editor guide We're running a bit short of time, so I'm going to move straight on back to Matthew, who's going to talk about technical debt.

38:46

Speaker 3: Yep, so um we've talked a lot about the some of the more visible user-facing changes in the last couple of releases, but there is of course a lot of less obvious work behind the scenes to address technical debt and solve some uh long-running bugbears. And one in particular that I will uh sort of I'll highlight Because uh it's the sort of thing that so ninety-nine percent of people will probably won't run into, but the one percent will be oh yeah Uh finally this has been fixed, it sh which is um this is uh a quirk when uploading a new document to replace an old one. where it would uh the the new document would be given a new file name and in some cases where you have a remote storage backend that isn't configured correctly

39:34

Speaker 3: then that can lead to uh to documents being deleted. And this has been this was quite a tough one to to crack because as well as having to deal with like remote storages. It also touches on issues of how caching should work. But this is uh what one of uh many sort of tiny things that has been fixed in 4. 2 And uh the subject of changes under the hood brings us on to the uh next release. So there have been Quite a few updates uh over the course of the 3. x and 4. x releases um requiring changes to user code. Um and where possible we've tried to give people a smooth upgrade path. So to take as an example the change

40:21

Speaker 3: of the module paths so that rather than importing from wagtail. core. models, now it's just wagtail. models Uh we've left the old code paths in place so that things don't immediately break on upgrading, but you have a window of time to update your code. And this means that over time we've had this steady accumulation of fallback code, making the Wagtail code base more difficult to maintain. And with that in mind, we've chosen the next release as the right time to drop that fallback code. And as a consequence, we intend to make the next release version 5. 0. And I know that people have mixed feelings about uh a major version bump like this, whether it's, oh, lots of exciting new features or

41:08

Speaker 3: Oh no, more disruption. I'm going to have to change all of my code to to to d do the upgrade. And really it's neither of those because um As as I think we may have mentioned in a previous session, we've uh recently adopted semantic versioning, which means that the version number isn't really a marketing term or an indication of uh that this is an exciting new release, but it's more a tool for communicating the extent of breaking changes. And these are changes that if you've done things right, you will have made already So looking over the the changes that that have required these deprecations over the last couple of re of releases

41:53

Speaker 3: It's was clear to us that the majority of the ones that would affect ordinary Wagtail sites happened in 3. 0. So by the time the uh five point oh release happens in May, then these will be things that have been on your radar for a full year and hopefully you've had that time to upgrade these so that there really is sort of nothing new to do for the 5. 0. Um the place where there might be some potential friction is with uh third-party packages. Um there is the sort of eternal issue with uh open source of people not having the resources to maintain things for the long term. So so so uh quite often packages might have been put out and they haven't been kept up to date with all of these uh

42:41

Speaker 3: incremental changes that have happened over the last year. Um so that that does mean that um that that we those uh that those have the potential all to be left behind unless people have applied these uh necessary changes. And this is something we've uh tried to address with, amongst other things, the uh Wagtail Nest um git GitHub organization. So this is an organization that is taking on uh maintainership of some of the more popular packages and this is one of the ways that we're ensuring that uh that things are getting the uh necessary changes to work with uh four point two, five point zero and beyond So in conclusion, the motivation for this 5.

43:27

Speaker 3: 0 release, it's not about big bombastic changes, but it's really taking an opportunity to clean up some of the cruft in the project at a moment when that will minimize disruption. Which is not to say that there won't also be notable new features in 5. 0, but that's a different story which Ian will be talking about in a moment.

43:50

Speaker 2: Thank you very much, Matthew. And I think you've done my segue for me. And I'm going to hand straight over to Ian to talk about 5. 0.

44:00

Speaker 8: Thank you, Tom and Matthew. I'm just going to share my screen so we can have a quick look at the public roadmap on GitHub. We've been doing lots of work on the Wagtail Roadmap in recent months, collaborating with the core team to make sure that the wider Wagtail community has greater visibility on what's coming down the track in future releases The public roadmap is going to be updated at least every three months in the last month of our quarterly release cycle. So look out for the next update. April. It's great to have this opportunity now to share a few highlights of the new features and enhancements we've got lined up for you. So as Matthew has said, our next release on the 2nd of May will be Wagtail 5. 0. Highlights include

44:46

Speaker 8: enhancements to snippets uh which Sage is working on. Um accessibility checker enhancements, as Albino and Thibaut have already mentioned, support for SVG images. Better auto-complete and boosting for search, furthering refinements to the page editor UE, and something I'm really pleased to share with you now, dark mode for the admin interface So dark mode, as well as being an increasingly popular user preference, can reduce energy consumption of OLED monitors by up to 50%. There'll also be a high contrast mode. And Dart Mode is part of a programme of sustainability work we're embarking on this year to make Wagel as environmentally sustainable as possible.

45:33

Speaker 8: Alongside Dart Mode, in this release, Tebo will also be producing documentation covering sustainability considerations for Wagtail sites. If we go back to the roadmap for a second and look further ahead, some upcoming highlights include a comprehensive overhaul of search. Support for right-to-left languages in the Wagtail admin, a raft of media optimizations as part of the sustainability program I mentioned. A little further ahead we've got autosave on the roadmap and a readability checker for editing. And you'll see that a number of these future features are tagged as needing sponsorship. Over the years, Wagsnell has benefited enormously from the very generous support of organizations including Google, Mozilla Foundation, Motley Fool, and UGov.

46:21

Speaker 8: This has meant we've been able to deliver significant features and enhancement Faster than would otherwise have been the case. So if your organization might be interested in sponsoring work in future releases, whether that's specific features that are on the roadmap or programs of work like sustainability or accessibility, we'd love to hear from you. One of the standout features we're planning to ship in an upcoming release is an optional treeless mode Treeless is really is is the idea behind Treeless is to help editors for whom Wagtail's tree-based explorer may not be the optimal way to find the content they want. work on. We're currently doing user needs analysis and have this early visual prototype to share. So you'll see in Triless a searchable, filterable and sortable flat listing of all pages

47:11

Speaker 8: In this example, we're looking at a relatively large instance of Wangtell with more than 32,000 pages. And I could filter by date range By site. This is a multi-site instance. I'll just filter by site A and I can filter by page type. So I'll select blog page. I've already selected Olivia as the author. And you can see I'm now now looking at a subset of pages, just 32 pages across the site. And because I work with this this subset of content on a regular basis, I can save this view and come back to it whenever I want to. We're confident that the addition of treeless mode will be a real efficiency boost for those of you with larger, more complex Wagtail site.

47:58

Speaker 8: And I'm now going to hand back to Tom for some exciting RD news.

48:03

Speaker 2: Thanks, Ian. Some some excitement about treeless. It's quite funny. Seeing this because uh Wagtail's tree capabilities were quite a big big part of its uh uh it's sort distinctiveness in the early days, uh having worked with some more uh treeless options in the past and found it confusing. So um uh so it's interesting that that kind of treeless is also attractive in some scenarios And I know there are many Wagtail users with huge collections of pages, hundreds of thousands or even millions, for whom the the hierarchy tree structure doesn't make so much sense and and and this kind of filtering particularly I think with that ability that you showed at the end to to say filters is going to be really valuable. Finally, I want to show

48:49

Speaker 2: this actually wasn't on the agenda, and it's something that's uh just come up in the last week, really, that that I was keen to squeeze in to this webinar And uh I'm sure none of you has uh uh has been able to ignore the explosion into public consciousness of artificial intelligence in general and um large language models like ChatGPT in particular. And we, while you know, sharing some of the concerns about these technologies around rights and around um accuracy, we're really keen to find ways that that we can use tools like ChatGPT and the API behind it to make the editor experience better. And

49:34

Speaker 2: in the last week, we've seen some really good development on this from uh Tom Asher, one of our colleagues here at Torchbox. And I'm going to try and show in a slightly risky live demo the work that Tom's been doing. So here's a new package from Tom Wagtail AI. And currently it's integrates with OpenAI 's APIs, but it's designed in a way that we can be flexible and use other APIs, large language models in the future And I'll share a link for this, but I'll just show you Wagtail AI in action. So here I have the simplest possible Wagtail site. with a single page and a body.

50:21

Speaker 2: And you can probably see here that I've I've made some mistakes. There's some mistakes of I mean the first one I've misspelled article and that would be an easy fix that my browser spell checker has already noticed. But then there's also this word sum, which is uh you know a correct spelling, although not correct in this context And a little grammatical error with the space before the full stop. So now I'm able to select it and then choose from these two options, so AI correction or AI completion. I'm going to choose correction And immediately it's come back and you see it's it's fixed the spending mistake, but it's also worked out that I was using the wrong version of sum in that case, and it's fixed the the the this punctuation error Let me try something else. So this is a mistake that I have certainly made in the past.

51:10

Speaker 2: Again, the word principle here is correctly spelt, but it's very unlikely that that's the sort of principle I meant to use. So that's something that would be hard for a spell checker or grammar checker to pick up. But if we ask OpenAI, uh, and you we get an immediate correction, so we're now using that the correct spelling of principle So that's correction. But the latest change to Wagtail AI allows us to create, Wagtail developers to create their own prompts. So if I switch to my editor now, I've got some prompts that I prepared in advance. I don't know how clearly you can see this, but I'm just in my settings adding. to the default prompts that are provided. Here's a simplify one and also a couple of uh translations.

51:59

Speaker 2: So I save that and it'll reload in my local developer environment. and uh select that text and then uh I need to refresh this page so I'll select that church and reload it And let's use that new line. And now I go to the uh AI menu and we can see our additional options. So If I wanted to translate it to French, I'd probably ask Thibaut. I'd have a go myself and then Thiba would correct me. But if I wanted to convert to Arabic, then I might find it a bit harder to find someone. near me so but this way I can choose it and uh come straight back and uh with it with an Arabic translation provided by ChatGPT.

52:45

Speaker 2: And finally, for my last test, I'm going to try some article generation. An article about vertical farming. This is something I'm quite interested in at the moment. And I'd like to write an article about it, but Just to kind of get me started, I'm gonna go into Wagtail and use Wagtail AI to stop this out for me. This one's gonna take a bit longer because uh It's measured on tokens, which are the um uh it's it's like a sort of proxy for words. So the the more tokens you need, the longer it takes. But you can see here now I have my article stubbed out around vertical farming. This is um this is not going to be you know the the the the perfect article and vertical farming. And I don't know how many of you are gonna be interested in this sort of content generation, but I think it can certainly

53:33

Speaker 2: provide uses around perhaps around summarization or the creation of descriptions or meta tags. So I think this is this is early stages. There are lots of ideas that we have for improving this. For example creating embedding a vector database within Wagtail so that we could detect similarity between documents and then we could say things like make me a summary of this article using the style of other articles in within Wagtail But it's early days of really interesting Europeans. I've seen a couple of questions coming up now, which I will attempt to answer. The first one says that they work for a security conscious organization. Will there be a way to block the AI feature? And I just want to be really clear about this 100%.

54:19

Speaker 2: This would only ever be an opt-in. feature of Wagtail. It's not part of Wagtail Core. It would be an a plugin package. And even then you need to supply. a key for the OpenAI API. And uh we are also conscious of uh you know that's the security and privacy concerns around this and uh would be very careful that Any tools that that we work on would be absolutely opt-in only. Any other questions coming in? Just uh WagTail AI is awesome. Thank you very much, Chinonzo. uh and uh a simplify this text would be great. So that's actually one of the examples that I've seen already. Erin some comments here that are interesting around uh the ability for the editor to highlight changes made made by the AI.

55:05

Speaker 2: This is actually something that someone suggested the last time I showed it. I think it's a really good idea. The basic version I just showed then. replaced my text with a fixed one, but I think it would be nice to uh to show what the changes were. And I I think we should we're trying to think about the best UI for achieving that. That is it for the AI demo, and indeed that brings our uh our webinar to an end. If you have any other questions, then ask them now or just send them on to Lisa, who will be following up with the links from today's webinar and anything that we missed today that we covered in the previous one. And with that, I think we're going to say goodbye and look forward to seeing you at the next episode of What's New and Wagel.

55:50

Speaker 1: Thank you to all our speakers as well. I just really appreciate it. So we do this twice. So we We did it yesterday for the UK EU time and then we do it again today. So I really appreciate it. Everyone's done such a brilliant job and kept the timings, which always makes me really happy. And thank you. We've had a really good turnout today as well. And thanks for all your brilliant questions. So like Tom says, we hope to see you again soon at another What's New Magtail.

56:14

Speaker 2: Thanks everyone. Bye-bye.

Questions this talk answers

How can I add multiple images to a Wagtail inline panel at once?

Replace the inline panel with a multiple chooser panel and specify the chooser field name. Editors can then select several images in one chooser dialog, which populates the panel while preserving captioning, reordering, and deletion.

Discussed at 2:56

How do I migrate existing Wagtail StreamField data after changing its block structure?

Create a data migration alongside the schema migration generated by Django, updating the StreamField’s JSON data. Wagtail 4.2 provides documented helper functions for adding, removing, or modifying block types; the separate Streamfield Migration Toolkit can help detect changes and generate migrations.

Discussed at 9:01

Can I use the Wagtail Streamfield Migration Toolkit with Wagtail 4.1?

Yes. The toolkit package was built to work with Wagtail 4.1, so sites remaining on that long-term-support release can install and use it.

Discussed at 10:44

How do I lock Wagtail snippets so other editors cannot change them?

Add the lockable mixin to the snippet model, run migrations, and grant the relevant users lock and unlock permissions. A locked snippet cannot be edited by ordinary editors, while users with unlock permission can release it.

Discussed at 14:02

How do I put Wagtail snippets through an editorial workflow?

Add the workflow mixin to the snippet model, assign an existing workflow to that model in Settings, and editors can submit changes for approval. Reviewers can request changes or approve and publish them, using the same workflow system as pages.

Discussed at 16:22

Can the same Wagtail workflow be used for both pages and snippets?

Yes. Pages and snippets use the same workflow object, although code can check whether the current object is a page or snippet if it needs to handle them differently.

Discussed at 20:01

How do I pin the rich text toolbar to the top in Wagtail?

Wagtail 4.2 lets editors pin the rich text toolbar so it stays at the top of all editors on the page. The pinned toolbar includes the full set of rich text options.

Discussed at 26:04

What are slash commands in the Wagtail editor?

Typing a slash in a rich text editor opens a searchable menu containing rich text and StreamField options. Editors can type further to filter an option and press Enter to insert it, providing keyboard-friendly access to formatting and blocks.

Discussed at 26:52

What does the Wagtail accessibility checker check?

The checker, built into the user bar and powered by axe, scans pages for content-focused accessibility problems such as empty headings, incorrect heading hierarchy, and paragraphs misused as headings. It reports violations and can outline the inaccessible elements.

Discussed at 32:30

Does Wagtail’s accessibility checker support WCAG 2.1?

Yes. It uses the axe testing engine and validates content-focused aspects of WCAG 2.1, rather than coding or visual-design aspects; the checks can also be extended to other standards.

Discussed at 35:15

Why is Wagtail moving to version 5.0?

Wagtail 5.0 removes fallback and deprecated code paths that accumulated while giving projects time to update imports and other APIs. The major version reflects the extent of breaking changes under semantic versioning, rather than a marketing claim about a completely different release.

Discussed at 40:21

What new features are planned for Wagtail 5.0?

The roadmap highlights improved snippets, accessibility checker enhancements, SVG image support, better search autocomplete and boosting, further page-editor refinements, and dark mode plus high-contrast mode for the admin interface.

Discussed at 44:46

Note: We understand that names change, people change, and bodies change. We respect each individual's journey and privacy. If you have any concerns about a video or need us to remove content, please don't hesitate to contact us. We will handle your request with care and promptly address any issues.

More videos from Wagtail CMS