What’s New in Wagtail CMS | Release 4.0 | Redesigned Page Editor, Accessibility & More

Speaker 1: Okay, right, it's two minutes past ten. So welcome everybody to your seventh edition of What's New and Wagtail. It actually feels like it's more than seven, but I think that's the right amount, but we do usually host it twice, so that's probably why it feels like a few more to us. But we are very excited about today's because we are going to be sharing live demos of features in our biggest Some might say also our best release ever, which is Wagtail 4. 0. So for those of you who are new to what's new in Wagtail, I'm Lisa and I head up our events at Torchbox. And with me today we have Ollie And we've got Matthew, and we've got Tebow, Sage, Tom and Kyle all doing demos.

Speaker 1: And after each demo, we've got time for a couple of minutes for some questions. So please use the Q<unk>A facility for those if you can. It's quite handy for us to be able to keep on top of them that way. Use the chat as well for your feedback and comments too. And hopefully if everything's running smoothly we'll have a bit of time for more questions at the end as well But for any that we miss I can follow up with in the follow-up email. And this is a webinar, so you can see all of us, but we can't see you, so that's why we want to keep it interactive. with the chat and I think that's about it for me. Oh I'm recording it as well so I can share it with you all after two and that's it so I'm going to hand over to Tom who is your host today

Speaker 2: Thank you, Lisa. Hello, everybody. As Lisa said, this is uh WebTools 4 is a big release. Uh I always find it funny when, you know, their their Apple keynote. comes and they're they're they're announcing the new phone they say the the iPhone 24 is our best iPhone ever and uh it's coming with of course it is because you know they've had a year to work on it since the last one And it feels a bit like that with Wagtail. I mean, of course Wagtail 4 is our best release ever, but it is also our biggest, I think, in terms of lines of code, certainly in terms of kind of numbers of major features and changes. It's up there and um and I think you know that's just a demonstration of the uh how how how fast Wagtail is growing, how how much the can the community is contributing.

Speaker 2: And this general kind of accelerated progress, which is so exciting for us to to to watch and be part of. And we're going to hope to to show you some of this today. Some of the things that you you might have experienced a bit if you've uh bravely It's updated to the latest Wagtail, or perhaps you're starting out with Wagtail and you're seeing some of these things and you're not sure which bits are new. So we're going to be talking talking about those, also some of the things that are coming up, and also talking a bit about the community that's growing around Wagtail. And just before we start, I'm very, very happy to introduce to you all Ian. So and Ian will be a new face to many of you who have been watching Wagtail for a while. in 's not a new face to Torchbox uh and uh he was uh

Speaker 2: uh along with with with Ollie and and me um there right at the beginning of Torchbox. for a long time. Inexplicably he took a break from Torchbox, but uh very very happy to say he he's back now and he's he's heading up uh Torchbox's work on Wagtails so he's going to be an important figure in the community and uh I'm gonna hand over him to him briefly now

Speaker 3: Thanks, Tom. You're too kind. And hello everybody. It's great to be here for What's New in Wagtail. And it's great to be back at Torchbox after a break of six years. Which doesn't no longer seem like six years. It seems to have flown by. So as Wagtail Product Services Director, I'll be helping our team do their best work on Wagtail. and also developing the range of services that we offer to our Wagtail clients. So if you're interested in Wagtail consultancy, developer support, or indeed in sponsoring features or enhancements for future releases, Feel free to drop me a line after today's session or message me on Slack, whatever works for you. Please get in touch. Look forward to hearing from you Back to you, Tom.

Speaker 2: Thank you, Ian. And that is it for my intro. And I'm very happy to hand over to Ollie, who's going to talk to us about the page editor redesign.

Speaker 4: Thanks, Tom. Hi everybody. Yeah, I'm going to take you through the do a little quick demo of the new page editor, but before I do that, I wanted to quickly remind you about just some of the thinking that's brought us to uh to where we are. Um so So the UI, hopefully you can see the UI over here. The UI felt dated and it was inconsistent and it's something we built upon. bit by bit over a number of years. And so so that's something we wanted to address. Also, a lot of our users have very long content pages and finding it difficult to find content within those pages. And another motivation was that we were kind of a bit inspired by some of the more natural writing and editing experiences you get from

Speaker 4: new editors like Notion and Dropbox Paper and so on. Kind of that inspiration initially led us down a kind of route of trying to explore a really paired back interface. So something like this that would allow a more natural writing experience. pretty quickly became clear that it wasn't the right approach for us and one we rode back with. So while this kind of thing would work for creating blog or freeform content, most or many people use Wagtail for more complex structured content. So that and our kind of accessibility ambitions meant that we weren't going to get away from From fields and boxes and icons and labels and things.

Speaker 4: But still, we wanted to be true to our original aim. So in this redesign, we've simplified the interface to make the content the focus more. We've significantly reduced virtual space so you have to scroll less on large pages while still maintaining a kind of light, spacious feel We've updated the UI visually so everything is now consistent across the edit interface and the listing pages and so on. And we've reduced visual clutter. to help kind of simplify things. And we've also introduced a bunch of cool new editor features that we're really proud of, like Minimap, which you'll see a demo of towards the end of this session. And uh and when you first use the new interface, you might feel that some of the features that you use less often are a bit more hidden.

Speaker 4: We've thought hard about that and we've user tested the interface. So hopefully you'll find after a few sessions that we've found the right balance. So finally, this is a big kind of uh interface updates. So we've introduced a new help area in in the left-hand menu. And hopefully that will mean that new editors upgrading to This new interface will feel supported as they kind of experience it for the first time Okay, so what I'm going to do now is dive into the interface and just give you a quick demo of some of those new features. So the first thing that you'll notice is that we've got a sort of prettier new

Speaker 4: uh login page. And actually it's worth noticing that I'm demoing this on this uh white wagontail demo nightly thing. And if you just want to play around with the interface. This is the easiest place to do it. So take a note of that and just if you want to play around with the edit interface, it makes it quite easy to do it. So this interface, this login page is a bit easier, it's also a bit more accessible, but Thiba's going to talk a bit more about that in a minute. So the dashboard's been updated a bit. We hope to do a more significant update in the future, but uh the visual design's been updated, it's got some minor improvements. It's still got this uh the menu that you can contract and expand from Wagtail 3, which was well received, I think.

Speaker 4: And as you dive into the listings, you'll start to see a few more changes. So I'm going to go into this blog listing So the first thing uh here on the page listing interface for the blog is to note, I think, is that is the top of the page here. So this is where the page title is, which used to be a big green area. Now we've combined the title with this kind of expandable breadcrumb and all the page actions associated with this page are accessible from this three-dot kind of menu motif that you'll see around around the the um the different pages a little bit and hopefully get used to. So I'm just going to dive into this this page to have a have a play around with in this edit page.

Speaker 4: So lots of it is quite similar and familiar here. You know, content and promote tabs are still there as you would have expected. But there's also quite a bit of new stuff. So the first thing maybe to look at is the breadcrumb again at the top of the page, the same breadcrumb interface that you get on the listing page we've just seen, and the same Placing of the button to do the kind of key page actions. Then over on the uh the right-hand side, uh, you've got some important buttons here that give you significant controls over the page. So as we've lost the big kind of titled header areas. We've removed that. The status information about the page now kind of is accessed through this flyout here and there's

Speaker 4: These fly up is used for comments as well. And history actually links to its own page. And you can link to the live version here as you could do previously. But critically, we've also got this really significant feature, which is the live preview. which is a really exciting new feature. I'm not going to talk too much about live preview actually because Sage is going to talk about that in a minute So going into the interface, kind of the edit interface area, one of the things that I really like is that you can now contract the blocks here. You can collapse them all in one go actually, which gives you kind of a quick and easy way if you know your page a bit of diving into the kind of right bit of the page that you want to edit. And I'm going to dive into this bit here because it's a

Speaker 4: stream field and you can tell it's a stream field because this dotted lines sort of encapsulate the whole stream field area. If you don't know what stream field is stream field is a kind of type of block within Wagtail that allows editors to combine different block elements together and reorder them as they want to so it gives them a bit more kind of edit flexibility. So within the um the stream built block People who use Streamfield in in versions two and three will remember that the kind of plus icon for adding new blocks was in the middle. It's now over here on the left hand side, aligned with the uh the different kind of block types. So I can go in and add a block type here if I want to, like an image block. And you can see I've got the plus and then the block icon like type nicely aligned together

Speaker 4: there. You also will notice that we we've kind of, as I mentioned before, just sort of stepped back some of the controls to help with the overall kind of focus on the content. So as you hover over this you get the block controls over here for duplicating it, reordering it, and delete it. So I'm just going to remove that block there. And I'm going to dive into one of these, one of these content paragraph blocks to start fiddling around. So as normal, I can just edit in these content blocks. I'm going to add a title about red jokes. And now you can see if I highlight that I get a little contextual kind of contextual uh

Speaker 4: what's called formatting bar uh as you do in in some other tools these days so i'm going to make that into a a heading And then I can go on and do some more stuff in here. So another kind of interesting new way of formatting within rich text areas is to use this kind of slash approach which if you put a slash in at the beginning of the line you then have access to all of the formatting options. So in this case I'm going to use a numbered list and say Red is funny. Red is lucky, etc. Which is very cool. And it starts to mean that as a writer, you can just sort of write

Speaker 4: freely and fluidly through one of these text areas. It's also cool actually that from within a rich text area in a streamfield block, you can not just add formatting here, but you can actually add other block types as well. So I can stick another paragraph block in here and that splits these two blocks apart. I could add an image or whatever else. It splits these two blocks apart and allows you to to put new stuff in here. So red link to wiki. So I'm just going to demonstrate now another cool feature about how I can um embed a link straight away now uh in in Wagtail. I can just copy the link and paste it in. And as you would have seen in some editors, you now get that link pasted directly into

Speaker 4: into the text there. If I click on it, I can edit the link and change the link text or whatever I want to do. So that's that's pretty much it for me in terms of showcasing some of these features. There's lots of cool new stuff in here. I hope that's given you a kind of positive initial flavor of the of the 4. 0 interface and some of the features we've added and and you'll see more as we go through the demo. Okay, back to you Tom.

Speaker 2: Thanks, Oli. It's very exciting to see this. I hope some of you are able to try this out using the Wagto Nightly link that Ollie mentioned and that I've shared in the chat. Um the the username and password is admin and change me for these demo sites. And as uh LB, one of the core team contributors, has pointed out in the chat. Wagtail Nightly is is the is the site that tracks the very latest version in development on, so that's kind of tracking the the main branch on GitHub. So it might not be exactly what there is in the latest version. It could be slightly later than that, but it'll give you a good indication. So please try that out as a as a quick way of seeing some of these features. I don't think we have any questions for you, Olli, but lots of uh lots of very enthusiastic

Speaker 2: positive responses, which is great to see. If you do have questions or you think of something later on, please continue to ask them. Either use the chat feature or or the QA feature. Oh, I I've just seen actually there is something. There are a couple of things in the Q<unk>A. Sorry for missing that. So We have one from Ulrich. Are snippet links possible in rich text field? Or do I still need third-party apps? uh possibly not compatible with Wagtail 4. Um Matthew, looks like you might have an answer for that one.

Speaker 5: Uh yep, so uh the snippets links we don't have uh uh native support for that in Wagtail so that would still need a third party app. As far as I can think of, there aren't any recent changes to White Tail internals that would uh that would break the um third-party apps there. So I think that should still work. Fingers crossed.

Speaker 2: Thanks Matthew. All right, so uh please keep asking questions, but in the meantime, I'm going to hand over to Thibaut, who's going to talk about accessibility and unification.

Speaker 6: Thank you, Tom. Hi everyone. I hope you can hear me okay. I'll switch straight into my screen share to demo some of the accessibility improvements we made in those last few releases I just want to start by sharing our accessibility statements, which you can access at wide. org slash accessibility. This really is a topic that matters a lot to us and where we make consistent effort from release to release to make improvements, to fix the known issues, and also actually to spend time testing Wagtail with the people who rely on those improvements. the most. So just want to share this as a reminder that we care about this deeply and we follow very specific standards. And also there is quite a clear process on how we test this, should you want to know more about how

Speaker 6: we make it happen. And um today I thought I'd simply give you an example of two specific aspects of XPC we've spent a lot of time focusing on for this class release. As well as a look at some of the behind the scenes of how we make this happen. And I thought I'd cheekily start by sharing with you the Wagtail version 1. 13 interface. which um which has shown this age and I think I want to convey with this that the changes we've made in Wacat 3. 0 and then 4. 0 Are equally as big for accessibility as the visual changes you'll notice. And even though the UI in some respects might seem much more minimal in terms of features of how you navigate the page with a keyboard or a screen reader.

Speaker 6: it's much, much, much, much more that's available compared to the last few, the past releases. So now just for context, I'll switch over to the White Tail 3. 0 interface and we had made quite a few improvements then as well and finally the 4. 0 interface straight into the page editing UI. which is where I'll do the master of my screen reader and keyboard demos. And um Definitely, yeah, as we go through this, I'm very happy to answer any questions. I have an eye on the chat, might be able to pay attention to it as I go through this or just later on on Slack. in the QA and so on. So keyboard supports in WattL Fololo, I thought I'd simply show you how I navigate through the page

Speaker 6: top to bottom And I have my skip to main content link just so I can skip the navigation menu. And I'll use that now to switch straight to the breadcrumb. The breadcrumb you can uh reveal with the hover on your uh mouse or touchpad, but you can also obviously reveal it with keyboard supports. And honestly, the most important thing here is that it works just like someone who uses a keyboard or a screen reader expects. So it's all sequential one after the other. You can focus each of the interactive elements And I want to mention as well the actual style of how you focus on elements. That's something we've spent a great deal of time making sure it's consistently visible on all of those UI elements.

Speaker 6: This new actions menu you might have seen in the past release and in our recent demos. I want to highlight that this is actually a very important accessibility feature as well. It's really great for us that this is accessible and those actions are accessible towards the top of the page. So people don't have to tap their way through the whole of the content to access features such as deleting, unpublished, and so on. These are are definitely niche features we don't expect people to use often, but it's very important for keyboard users that this is accessible from the top rather than the bottom of the UI. And I can just dismiss this and reveal this like I could expect. Switching over to the side panels, I won't spend too much time on this, but just to say that they are um keyboard they support the keyboard interactions just like you'd expect you can tap through them top to bottom you can close them with the S key with the specific controls

Speaker 6: and I'll move over to the main form area of the page And um Ali had demoed this collapsing feature for the blocks. I just want to highlight that this is a big accessibility improvement for people to rely on the keyboard because they can then decide which blocks they just rather completely skip and be able to navigate straight to the following ones on the page. If you have a big page body section, it's definitely a bit annoying at times to have to scroll through this if you just want to look at the next field after. And as a keyboard user, it's even more important that you can just say, okay, I don't want to engage with this specific section. I'll just collapse it and then I'll be able to switch to the section after. And as well, this ability to link to a specific part of the page that you might have seen pop up as I tap through this.

Speaker 6: That's also a very important accessibility feature because it means that someone can get straight to the page, the part of the page they care about. rather than going through the whole of it. And I'll now switch over to another type of interaction with the page and another accessibility feature, which is called Windows High Contrast Mode. You might not have heard of this before, but it's just a specific theme, set of themes available in Windows, which allow people to take our default Wagtail theme. and customize all of the colors of it so that they have an easier time distinguishing the text. So keyboard usage, think of either a pro user or someone who has uh trouble with precise inputs on a mouse.

Speaker 6: and high contrast mode, think of someone who has low vision and needs the extra help to distinguish the text from the background. And if I now switch over to my high contrast mode version of these screenshots. I can see that the backgrounds are gone, most of the colors are gone actually, and the elements that still are colored are colored semantically So you know that if something something is blue, it's a link, something is black, it's a button. And um as a user of this type of uh activity feature, it's very important to you that the WattL UI reflects this. I spent quite a great deal of time working on this in the last release, partially through a Google Summer of Code project from Anuja Raj, who reviewed the whole of the UI with us. and make visual improvements to each and every one of the screens in Wagtail.

Speaker 6: This was quite a massive project, hence why I want to highlight it a bit more. And um yeah, it's high contrast mode with the light variant and also with the dark variants. And personally, this does make me wish for a dark mode feature in a future release, which we might or might not see. And um I'm just showing you this in Figma, so it's kind of the behind the scenes of how we improve the accessibility of Wagtail. We make big audits like these and then review the features without access. Back to keyboard support for a second, we do the exact same thing where we review consistently how people navigate through the page top to bottom, visualize this, and we are able to check that it does work as we'd expect. Finally, I want to highlight another Google Summer of Code project

Speaker 6: from PARF. I see that we have LB in the chat here today, which is the lead mentor for this project, thanks to his employer, Virginia Australia. Parf and LB spent the last three months working together to improve the UI of the whole of the CMS bit by bit in this UX unification project. So lots of the things we've been demoing are actually done by individual contributors like PAF, thanks to the mentorship of core team members like LB. So the new dashboard, that's uh in large part thanks to PAF 's contribution. This is Parf in the top right, and you see LB in the bottom left. Lovely to have you here as well today, LB. And uh similarly the login screen, it might not seem like that big of a change to you.

Speaker 6: It's just a login screen like you like before, but in terms of visual design, it's big and in terms of accessibility as well. It's much easier for people to tell which field they are on and how to navigate through this. And that's an improvement that PAF basically made happen on his own. And there are lots more of those improvements that PAF has done and that definitely make for a very major contribution to the CMS even though that was just a a one-off three months project. So thank thank you very much Baf. And I believe we have a bit of time for questions now.

Speaker 2: Thanks, Thibaut. Yeah, there's a few questions and comments coming in. Let me try and assign some. So let me check. There's Question about translations. Tom Noyes has asked if translation functionality is a base wagtail feature now or an additional package. Matthew, I think you will take that one.

Speaker 5: Yep. So the The the translation is uh that's a an add-on package. Uh Wagtail Localize is the uh the the sort of actively developed one. Um I've uh put the uh link in in the chat there. And so there is basic multilanguage capabilities in Wagtail itself, but for the an actual translation workflow, you'll need that package, and that's all covered in the documentation. And I think there was a second question, it's where is the translation panel for non-English? And so off the top of my head, I think that is that's available. in the uh the well in White Hill 4 in the drop down from the uh the title bar where you've got these

Speaker 5: edit, delete and so on uh items there.

Speaker 2: Thanks, Matthew. A nice question from Precious, who asks if outreach e applicants can contribute in building out this new design or if it's already built.

Speaker 6: So we have we have uh Fiji, for those who might not know, is one other one of those uh open source internships projects that specifically is for people from unrepresented backgrounds in in tech and open source. So we have three specific project ideas for Outreach E that are lined up. And two of those will involve making further UI changes like these. So one is XPD checker inside the CMS as another side panel that is that is definitely an improvement to this overall page editor experience. And the other is uh refactoring quite a bit of the code to deliver more of this UI to other parts of the CMS. So I guess I guess definitely yes, though what I've demoed here today has already happened, but there's many improvements to do to it

Speaker 2: Thanks, Tibara. And while I've got you, Anonymous asks if high contrast mode comes out of the box or is something that we have to enable in config.

Speaker 6: That's a great question. So high contrast mode is a feature of Windows technically and it's used by quite a lot of people to be honest. Like five 5% or so the population uses it. It is just a built-in feature. If you happen to use high contrast mode in your computer, WhiteTale will look as you'd expect.

Speaker 2: Thank you. And I've got quite a few questions coming in. I'm going to take one more live now and then we'll answer the rest in the Q<unk>A. Dikshana asks if it's possible to make automatic page lock when one editor is editing. Matthew.

Speaker 5: Uh so we don't have uh automatic page locking at the moment. We do have the option for editors to uh lock uh pages manually. if uh that we want to sort of make sure they're the only ones available to edit it. Um automatic locking is quite a tricky um problem to get right because there is the the uh classic problem of if someone locks a page and then goes off on holiday, how do we deal with that? Who has permission to unlock it? So uh that's something we'd like to do, but um I think getting the details right is kind of a bigger problem for that we're going to be tackling later on.

Speaker 2: Thanks, Matthew. And thanks for all these great questions. Please keep them coming. We'll try to answer them as we go. But for now, I'm very pleased to hand over to Sage, who is fresh back from his triumphant First public speaking conference engagement at uh DjangoCon EU in in Portugal. You should definitely check out Sage 's talk there if you haven't seen it. They're all going to be available on YouTube if they're not already. But Sage is going to talk to us today about preview panel and snippets.

Speaker 7: Thanks, Tom. Let me just share my screen. Okay. Hi everyone, I'm Sage and I'm going to show you some of the new features that we have for you in Wattel 4. 0. This was covered a bit previously, but I'm going to talk a little bit more about the preview panel. So the preview panel is open Yeah. Using the button right here. Um so we have moved the preview button from the button uh beside the Action menu here to the header so that if you click the preview button right here, it will show up a preview panel

Speaker 7: that That you can see side by side with the editor. And this is a live preview, which means that the content of the preview is automatically updated as you make changes in the editor. So I'm going to show you a little as you can see the preview it's is updated every time I make some changes in the editor. So for example, there. And you may also notice that we have these icons right here on top of the preview that lets you select between different preview sizes. But for example, in here we have mobile, tablet, and desktop.

Speaker 7: This lets your editors see what their content would look like on different devices as they work on the content. which helps them make sure that it always looks good no matter what the device is. And if you would like to use the good old preview panel, sorry, the good old preview where it opens in a new tab You can open it by clicking this icon right here that will pop up a new tab with the preview so that you can have complete control over the preview. And the preview panel will also let you know if the preview cannot be updated because there are errors in the form. For example, if you missed some of the required fields. It will tell you that you need to correct the validation errors to resume the preview.

Speaker 7: And as soon as I fix this, the preview will be resumed seamlessly. Oh, and previously we had an undocumented feature where if you press CtrlP or CMD P, it will open the preview in a new tab. And that shortcut will now toggle the preview panel instead. And by the way, this live review panel does not only work for pages, it works for snippets as well. So in here I have a snippet model that has been configured to be previewable. So if I edit the snippet You can see the preview button on the header. And if I open it, I can see the preview of

Speaker 7: the snippet and I can make changes in the editor and it will be updated. And as with pages, we can have multiple preview modes as well. For example, here I have defined two preview modes. The first one is a default mode that in here I just use a basic template that shows all of the fields And second one, I made a preview mode for a blog post, which shows a blog post that is authored by this person. And it will show the snippet right here. So if I make any changes, it will also be updated

Speaker 7: And speaking of snippets, in the previous edition of What's New in Wagtail, we showed you about our plans on supercharging snippets. The preview panel is part of that work and we have more things to show you. In here I have configured a snippet model that has been enabled to have provisions. So if I create a new instance of this snippet and then I make more changes to it. If I look at the history of this snippet I can compare with any changes that I have made previously. For example, I will compare with the previous revision

Speaker 7: and it will show you what exactly the changes were. And I can also review to the previous version and I can replace the current version with the previous version. For example, I will replace this right here and it will tell you that it has been replaced with version from the previous one. will also show up in the history that you reverted to a previous version. And the next one is draft state for snippets. I have configured this model bread ingredient model here to have draft changes. So after I configured that, Wikel will automatically add a status column.

Speaker 7: That tells you whether the instance is draft or live. And I have made a draft snippet sugar here. And this bread ingredient model is used on this bread page. And I can choose between the different ingredients in this ingredients section. And if I select the live version it will update uh the preview and in it will show up in the ingredients but if I click on the draft Snip it, it will not show up because I have configured the template to only show the ones that are live. So if I want to make this instance live,

Speaker 7: I just edit this and if you notice the button right here now says save graph instead of just save and I have a new action here publish so if I hit publish And then I update the preview. You can see that it now shows up in the preview. And I can also have changes that are not immediately published. If I make changes to this sugar snippet and then I click on save draft instead of publish and then I reload this editor It will still show the sugar content without the new changes.

Speaker 7: But if I publish the new changes, It will also update the instance, the live instance. So yeah. It basically works the same way as pages and this is a new feature, so let us know if you find it useful. And that's it for me. Feel free to ask any questions.

Speaker 2: Thank you very much, Sage. I realize there's quite a lot to take in there. Sage has quite quickly gone through a range of new features and pretty significant improvements to Wagtail. But um so if you if you think of things, please ask ask them. We have got quite a few questions here, so I'm gonna try and farm them out. Uh first up, in fact, a couple of people have asked this. Is the new preview also usable, usable for headless sites? Kyle, I think you may have an answer on this. Yeah, sure. So yes, it is in short. The only additional requirement is that you need to install an additional Wagtail package called Wagtail Headless Preview. All this does is change a few settings behind the scenes and give you a few additional settings.

Speaker 6: And as soon as you've set those, you can use it in a headless setup. We have a few projects at Torchbox where we're already using it, so it is well tried and tested.

Speaker 2: And just to confirm, Carl, this works with the with the new preview features that Sage has been showing. That's right, yeah. Fantastic. I think uh Andyaska. is gonna be happy about that. Um okay, uh next up, uh Tiago asks Can we customize preview sizes? For example, add new responsive breakpoints or change the exact sizes associated with each predefined button. I'm going to try Tebow on this one.

Speaker 6: Hey, thanks Tom. Tiago, this isn't possible currently, but we've thought about it's pretty hard and this is built in a way that it should definitely just be a matter of deciding how you want to make that configurable. So I'd honestly love a feature request for this and or maybe a pull request and the code definitely supports it. It's just a matter of deciding for us how to configure this.

Speaker 2: Thanks, Tebo. And maybe related, there's uh Ono 's question about if it's possible to make the pre-D larger on widescreens

Speaker 6: That is something that uh Sage has been hard at work on. So definitely the preview you've seen is those demos is just a fixed few sizes that we have. And the plan is to give you much more freedom on how large are small you want it to be. So it will scale according to how much space you decide to this. Sage has a pull request, I believe, still in progress, but not far from being there and could definitely still be a valid for that one feature. Where I believe at most you'd be allowed to take up half of your screen for the preview, which should should be plenty enough for more screen sizes.

Speaker 2: Great, fantastic. One on snippet revisions. Can snippet revisions follow changes to related objects like foreign keys? Matthew. Uh

Speaker 5: yes, so as long as you uh set up your cross-object relations using the sort of parental key or parental many-to-many Those are kind of white tail specific extensions to Django that define those as being conceptually part of the object you're editing, and any changes there will be reflected in the revision history as part of that object.

Speaker 2: Thanks, Matthew. There are some more questions which we which we'll we'll try and answer just uh typing them in. But I want to say because I think th three or four people have asked what I think is the same question, just using different language. And it's obviously quite an important concern. So I just want to confirm to everyone that if you're using a headless site, so you're using Wagtails API and you you're running a separate front end. The new preview feature will still work using the package that Kyle linked to, Wagtail Headless Preview, that in conjunction with Wagtail's new live preview will still work. All right. Sorry, people, questions we didn't get to you, but we will answer them all as we go along. Next up, we have Kyle who's going to talk about more of a developer-facing feature.

Speaker 2: Generic settings for multi-site, over G colour.

Speaker 8: Cool. Thanks, Tom. And hello everyone. So what I'll be talking about isn't as glamorous as some of the other notable new features, though it's something that has been repeatedly requested since 2015, which is when the contrib settings module was first added to Wagtail. And if you've ever considered managing multiple websites within a single instance of Wagtail, so a multi-site, this one's for you. For this demo, I'll be using the all-too familiar Wagtail Bakery project. So to begin with, let's say we have two bakery franchises, one based in England and one in France We can use existing WagTowl function actually to create two site records, one for England, one for France.

Speaker 8: And for each of these, we can then go in and create two series of pages. Again, one for each site. But the requirement is that we want uh editors to be able to manage the name of each franchise. So this little bit that we're showing in the top left up here, the Wagtail Bakery UK division. For those that don't know, the Contrib Settings module is one of Wagtail's most frequently used features. And all it does is allow you to manage abstract pieces of content that don't really make sense as reusable snippets So we can see here that there's actually a typo here. We've spelt division wrong. So we can go and change that. I can go into the settings and go down to my individual bakery settings and I can fix the typo

Speaker 8: for this. So quick change in here, save that, and we've now fixed this However, those familiar with Wagtail will be might have already had experience with this because nothing I've shown so far is new. So what's changed? Until recently, all settings had to be associated to an individual site. So here we can see I'm editing the English website, but the French website has a completely different bakery name So let's continue our example and add the requirement that what we want to have is the details about our parent company in the footer. So if I go back to the front end, I can see that down here we have our parent company

Speaker 8: name. As of Wagtail 4. 0, you can now create generic settings that will be accessible from all sites. So if I go back into my settings and go to my parent company settings, you can see that I've created two fields. There is no selector for the site in the top right because these settings affect all sites. So We can see that there's another typo. We can correct that. Click save. And the typo is updated. And if I go back to this, I can see that, so if I uh just change to the French version of the website Very quickly, we can see that one

Speaker 8: the name has disappeared from the top left. And that's because when we go to our individual site settings, there is no bakery name defined for the French version But when we get to the bottom, the typo is corrected. And that's it. Generic seconds are just one of the small improvements that we've made to Wagtail's multi-site sport. Uh but there is a lot more in the pipeline to strengthen the suffering in the upcoming police.

Speaker 2: Thank you very much, Kyle. We are we're running a bit behind, so I'm going to move straight on to Matthew. So uh we so far we've been showing you l some of the exciting things in Wagtail 4. There's more things we could show you, but we also want to whet your appetite for the Fast approaching 4. 1 and uh Matthew's going to give you a sneak preview.

Speaker 5: Okay, yeah. So yeah, as the version number suggests, the 4. 1 doesn't have the dramatic visual or code changes that the 3. 0 and 4. 0 releases had. In fact, this is our first minor release since we adopted semantic versioning. So really the first time that the version number has communicated this method that this is not going to be a massive undertaking to upgrade. But it is still a feature release, not just a bug fix release. And so here are some of the new features that we hope you'll find useful The first one I'd like to show is the improved scheduled publishing user experience. This is something that we found from our user testing to be a common point of confusion. Oh , to know the Go Live and

Speaker 5: Expiry Day have previously been presented as part of the page content when in reality they don't really belong there. We think of the page content as being information that starts out in draft and goes through a change of state to become published. And the go live next free dates aren't really part of that information. They're part of the mechanism. that that by which that state change happens. And the new editing interface reflects that. So it's a pumpkin spicy season. So let's say that our bakery is launching a new product And uh we want to sort of announce this of at the end of the month. Um so uh That's all now handled through the status sidebar.

Speaker 5: There's now a dedicated modal pop-up to set the schedule with extra messaging to make it clear that this will only take effect. after this page has been published. So if I now save that, you'll see that the sidebar information is now updated to show that this will go live on this date once it's been published. So if I go ahead and publish that now, then uh So then one thing that's previously been ambiguous at this point is what happens if I go in and make further edits. Will that have any bearing on the version of the page that goes live? And since that's uh not something that you would want to do lightly, we now lock the page at the point of scheduling it Um

Speaker 5: so that if you want to make further edits at this point, you would cancel the schedule, make the edits and set the schedule up again. And that's an extra step, but It makes it super clear what's going to happen and avoids the risk of things not going live in the form you expected, which is really the most important thing with functionality like this. And as Sage covered earlier, we're keen to extend Whitetail's publishing workflow capabilities beyond pages and into snippets too. And now schedule publishing is just one more feature on that list. So if you look at this footer text snippet, which is a piece of page content that could absolutely benefit from revision management and publishing. I've configured this to have draft unpublished states, which was a two-line

Speaker 5: change to the code, and that gives me these scheduled publishing options for free. And uh another of our goals for snippets is to address the overlap with model admin. When you have a non-page model that you want to managed through Wagtail. There's some doubt about whether that's a job for snippets or the model admin contrib package. Roughly speaking snippets are better integrated into the rest of Wagtail when it comes to things like chooser controls. but model admin has richer customization options for the editing interface. And we don't really like having to make that trade-off. So we've been working on giving snippets the same level of configurability. So traditionally

Speaker 5: when you define a snippet you would do it by adding this register snippets decorator on the model and that would give you a basic admin interface with not much scope for customization like this listing with just the one column for the name and nothing else. Instead, what we can do is uh rather than doing that from the model file, we can register this uh within the Whitetail hooks. module. If you've uh used Model Admin or the Django admin, this pattern will be quite familiar to you. And we pass in this view set class. And this is something that's now plays a big part throughout Wagsail under the hood. And this is the entry point for any sort of customizations that you would want to make to admin

Speaker 5: views. And here I'm just making a very simple customization to add an extra column to this listing. But yeah, these c these customizations can go a whole lot deeper, right down to redefining how the whole object save mechanism works. So with just that very simple change, we've now got this extra column. And as I say, the customization can go a whole lot deeper than that. this. Another really neat feature in 4. 1 is object usage reports. These are available on snippets, images and documents and they give you an indication of how many times this play this object is referenced from other pages, snippets, any other content

Speaker 5: If I click through here, you can see the two blog posts that uh Olivia Ava is is listed as an author on. And um So this reports it was previously available as a config setting, turned off by default as it was quite a slow, inefficient query that we don't want to be running all the time. But under the hood, this is now using a totally new mechanism. We're maintaining an index of cross-references between objects at the point of saving those objects so that that information is immediately on hand. And that that also means that this also reference uh recognizes references within rich text and stream field And these usage reports are the first example of this reference index in action, but we think this is a feature with lots of potential applications elsewhere.

Speaker 5: things like cache invalidation or making the confirmation page on deletion a lot more informative so that you can see that deleting an object is going to affect these other pages. So definitely something you can look forward to in future releases. Finally, I want to show you feature that's in the final stages of landing in Wagtail Core and we hope we'll be ready in time for 4. 1 which is the mini map on the page editor. So if I'll just run this video here. Hopefully you can see that. This is a feature that appears when you hover over the right hand side of the page editor. And from there you can navigate to any part of the content including within Streamfields. And this is designed to help

Speaker 5: Speed up finding content on big pages. Everything here is listed either by the field name or in the case of stream field blocks, a short excerpt of the block content. And this might also be useful for quickly finding validation issues which are sort of highlighted in red here. So that's just some of what's in store for Wagtail 4. 1. All of this and more is detailed in the release notes. I'll uh drop a link to that uh in the chat in a moment. And one last thing to note is that this is a long-term support release, which means that we're committed to supporting it with security and critical bug fixes for a period of one year. So if you've been holding off upgrading past the 2.

Speaker 5: x releases, now is a very good time to do that. And on that note, I will hand back to Tom.

Speaker 2: Thank you very much, Matthew. Yeah, just want to echo that point about 4. 1 being a good time to upgrade if you've been holding off. Uh so there'll be at least a year's support. I'm gonna just share the link for our release schedule in um in the chat here, uh which you should just see now underneath uh Matthew's link to the release notes. So this helps explain our our the the cadence of releases and shows you how long we we commit to support for. So hopefully that's something you can use if if you need to to make the case to to do an upgrade now is a very good time. Okay, we are we're running a bit over. Thanks to all your great questions. We'll keep trying to answer those as we go, but um for the last section I'm going to hand back to Lisa, who's going to give us uh an update on the community.

Speaker 1: Yeah, so we've had some exciting things happening with our Wagtail community recently, including wrapping up our Google Summer of Code program, where we've had some amazing projects if you've heard about today as well. So we had three contributed contributors sponsored by Google and one sponsored by Torchbox and we'd like to say a massive thank you for all of the hard work that's gone into these projects and to the mentors as well. So we have Anousia who worked on the Windows High Contrast mode, Hitanch who worked on the editor 's guide. Sandil who worked on the Streamfield Migrations Toolkit and Path, who's got big mentions today and I think is on the call as well for UX unification. So amazing work. Thank you everybody. Some of you may remember that Wagtail Space happened in Arnhem and was hosted by Four Digits back in June.

Speaker 1: So this is just to say that all of the talks are now available on YouTube. So if you search for Wagtail Space You can see them all there. Also, we were representing Wagtail at DjangoCon EU, so Sage and Thibaut both did talks there, which had lots of positive feedback. on Twitter and other platforms and they had a lot of fun while they were there as well, which is brilliant. So they, Django Connie, you have said that those talks are going to be available for us to view in the next two weeks as well. And also Megan is hosting a tutorial workshop called Parlov Django at DjangoConUS, which is happening on the 16th. Of October. So you can tune into that. There are still tickets available or if you fancy going to San Diego, you can go get a 20% discount on the ticket there as well.

Speaker 1: So have a look at the website to find out more.

Speaker 2: Thank you very much, Lisa. We are coming to the end of our uh time with you. Um just just to kind of round up on the on the community point, I do want to say a particular welcome to all the outreachy. internship applicants who are here today. Thibaut mentioned Outreachy before. This is a program that's that's new to us, but we're really excited about and we're very happy to see with these new names arriving uh full of enthusiasm for the Wagtail community. So I hope that um I hope that you'll stay involved and and please reach out to any of us if if you need guidance or support with your with your involvement in the program. Thanks, Thibaut, for the for the link there to the to the blog post about our involvement with Outreach E. Maybe we'll just finish up on a couple of

Speaker 2: questions that are coming in and then we'll say goodbye. There's an upgrade one, Matthew, maybe you can answer this one about the 4. 0 step. Uh

Speaker 5: yeah, so upgrading from 3. 0. 3 is the 4. 0 step necessary or is it possible to upgrade directly? Uh it uh should be possible, yes. Um think generally we do uh uh we we do recommend upgrading one point release at a time just so that uh Well, just s so that you've got sort of less yeah, easier troubleshooting if there are any issues that come out of it. Uh you'll be able to sort of s see any sort of deprecation warnings. And but eve even if you're just immediately upgrading from 4. 0 to 4. 1, but um as far as I can think of, the changes in the between 4. 0 and 4. 1. um in terms of sort of the things that you that might be issues for upgrading

Speaker 5: should be fairly small, so that should be sort of safe enough.

Speaker 2: Thank you, Matthew. And with that, actually there's one more question I think that we'll answer now. Lisa, maybe you can help Ono with this question, where can we get that sticker?

Speaker 1: Um, I will find out. I'll see how much merch we've got to distribute, but Ono, I will find out for you and get back to you.

Speaker 2: With that, thank you to all our panel and thank you to all of you for coming. I hope you found this useful. As Lisa said, we'll make a recording of this. We've got another session coming up tomorrow at a um uh different time zone uh a different time for for different time zones uh we'll take the best bits of both and combine them into one super slick video which we'll share with you all And thank you all. That's it. See you for uh what's new in Wagtail number eight.

Speaker 1: Thanks everybody, Ames.

Speaker 2: Bye bye. Thank you.