Airtable integration, Wagtail-localize, What’s ahead | What’s New in Wagtail (ep2)

Speaker 1: We're all from Torchbox. I'm I'm Tom, the one of the uh co-founder of Torchbox and the CTO, and I I look after the Wagtail open source project. We're all from Torchbox and I've also got Carl and Matthew and Jacob here who are on the core team with me and Ollie, my co-founder, and Abigail who's uh like a big Wagtail expert and using Wagtail on a lot of our projects. So between us we're going to demo some some new features in Wagtail and from the wider ecosystem. We're also going to talk about some upcoming features, so things that are going to be added to Wagtail soon. And uh yeah, we look forward to hearing your questions. We this should take about 45 minutes, but up to an hour if there's if there's enough to talk about. But I'm going to start by handing over to Abigail.

Speaker 2: Thanks Tom, hi everyone. So I'm going to start by showing you the white tape, white tail and air table import that we've been working on So this was sponsored by the Motley Fall and this has allowed them to give more people access to make changes to pages that they have in Wagtail without actually needing to give everyone permission to Wagetail Airtable is something we're seeing a lot more people using now and including us at Torchbox. It's a bit of a combination between Google Sheets and a database. And it can be really useful if you've got a lot of data that you want to update all in one go. So for example, if you want to unpublish quite a few pages, that's something you can do with Airtable, and I'm actually going to show you how you can do that a little bit later on. So I'm just going to share my screen

Speaker 2: and you can see here that I have an instance of Wagtail and I have AirTable over here as well. So I've got two tables set up here One is for the feature descriptions and this is just a snippet that we have in Wagtail. And the other one is for the blog's pages I just want to quickly mention that on this snippets I do only have a few, so it might not be that useful when you only have sort of 10 snippets, but it's really useful if you have hundreds. So I'm going to start by adding a feature description snippet in Wagtail. So to do this, I'm going to go into snippets. And then I will go into the feature description snippet here. I'm then going to add a new feature description and just add

Speaker 2: some test content here. So when I click save, you'll see over here on my Airtable instance that that automatically populates and it's shown there in Airtable. The other thing that I can do is delete these snippets from Wagtail. So if I go back into Wagtail and if I decide that actually this air table test snippet isn't very good and I don't want that anymore, then I can click delete. And once I approve that, that is just removed from Airtable. So you can see that's all automatically done for you. So what about the other way around? What if someone has access to Airtable but they don't have access to Wagtail? Well, we can still add and edit these snippets in Airtable. It just won't automatically populate them in Wigtail, and we'll have to do a little import

Speaker 2: for that. So to show you how this works, I'm just going to add a snippet here in Airtables. I'm just going to call it test snippet. And I'm just going to put an introduction of test. Now back in Wagtail you can see here I've got this import feature descriptions button or you can go into settings and airtable import here. As I'm already on the snippets page, I'm just going to use this one. So I'm going to click import feature descriptions and then once that's finished importing I'm going to hop back over to my feature description snippet list and when I scroll down to the bottom you can see that test snippet here has been imported for me from Airtable. So doing this import will import every new item or every edit that you've made to Airtable, but I've only added one, so only that one is moving across.

Speaker 2: I can also edit these. So if actually I decide that I don't want this to be called test snippet and I just want it to be called test, then I can go back into Whiteale, again import the feature descriptions. And when I go back in, you'll see that that title has been updated and it is now just full test. So you can also use this for page types. So if a user does only have access to Airtable and you want them to be able to edit pages, then you can set this up in exactly the same way that I've shown you for snippets but for pages. So if I just go to my blog post air table, one thing that you can do here is unpublish a few of the pages that you've got live So to do this I would scroll over to the right and you can see I've got this live checkbox column.

Speaker 2: So if I untick a couple of these And then when I run the import for the blog pages in Whitale, that will just unpublish those pages for me and that's it done. So it's all been managed in Airtable and it's been really quick and easy for me to do The next thing that I want to show you is the Google Image Import work that was sponsored by Made with Circuit. So this is importing images from Google Drive into Wagtail So in order to import these images, I need to go to the image folder here. So this is your image libraries. This is just where all the images that you've uploaded or that you've used on your Wagtail site are stored Then from here I can click on this drop-down S2 add an image and I can choose to import from Drive

Speaker 2: On this page you get to choose the collection that you want your images to go to. So there are a couple that I have here. I've got root and I've got blog images, but I'm just going to choose to leave it on the root for now. I'm then going to click on this button to select my images. Now if you haven't given WhiteL permission to access your Google Drive before, then you will get a pop up here. and you will need to sign into your Google account, but mine are already linked because I've done this a couple of times so it takes me straight into Drive and I can just choose my photo straight away So I can choose a whole folder of photos if I want to or I can choose some individual photos which is what I'm going to do. So I'm just going to choose these two and I'm going to click select. Now, because I'm not trying to upload any duplicate images, I'm taken straight into uploading the images into Wagtail

Speaker 2: So when these are uploading, you have a few different options that you can do. You can edit the title, you can edit or add tags, and you can also change the collection, or you can do nothing and they're just already uploaded for you So I'm just going to remove this person tag and click update and I'm going to leave this one as it is. So now when I go back to my image library You'll see that both of these images have been uploaded and when I go on to this one which I remove the person tag for, you can see that that update has worked and that tag is no longer there. Now I'm just going to quickly run through the upload again just to show you what happens if I try and upload some duplicate images So again I'm taken to here and I can choose my collection

Speaker 2: and I'm just going to choose exactly the same images that I chose last time because I know they're already in Wivetails so I know that this will show the duplication work for you So I'm just going to choose the same two and I'm going to click select. Now if any duplicate images are found then you're taken to this screen. So these obviously are two duplicate images. And WhiteL image import has some really advanced image deduping that helps editors not upload the same images multiple times. So there's a few different options that I have on this screen. I can choose to replace the original image, I can keep both images, or I can cancel the upload I can do this on book for all of the duplicate images that I'm uploading at this time just by using this selection at the top

Speaker 2: Or I can do it on an image-by-image basis. So I might decide that I want to replace this original image, but actually I just want to cancel the upload for this other one. And then I'm going to click confirm. So as you can see here, the one that I decided to cancel the upload on, it isn't uploading again to YTale, but the image that I decided to replace, it is uploading again. And here I again have the same options. I can edit the title, the tags and the collection if I want to, or I can decide that actually I'm happy with what Wagtail suggested here and I can just go back into my images and see that they have been uploaded for me. So the next steps for the image import work will be to allow editors to import these images on specific pages, so

Speaker 2: while they're actually editing pages rather than having to go into the image library. We're also looking at adding additional sources so it doesn't necessarily have to be Google Drive, but we could also add things like OneDrive. And also to look at bringing this duplication detection into course. So any images that you upload to White Tail, whether that's from your computer or from an import, will have that image duplication detection on it as well. We do have a couple of minutes, so if anyone's got any questions, then please do feel free to ask them now.

Speaker 1: Thanks, Abigail. There are some questions. One that's been answered already. So Simon asked about saying that they use their table quite extensively. And is there any error reporting for validation issues? But hopefully Caleb, who actually was one of the authors of this this plugin, has responded to say that validation goes through Django REST framework serializers. So I think one thing to be aware of here is that while pushing content into Airtable, you can be very flexible about that because Airtable is very liberal about what it accepts. You probably you don't want to be quite so easy when you're moving content into Wagtail. So that's why we have that manual step where uh it doesn't push automatically, but but you do the import. Simon said, we'll have a play with this when it lands in a release, but you don't need to wait until then, Sim, because this is actually a

Speaker 1: this is a third-party tool. You can install it with pip install wagtail air table. And it's all ready to go now. So I hope it works out for you. Agnieszka asks, can we use the image deduplicating separately? And um Sadly, not yet, but um this is this is the plan that we will um refactor it so that we we take that deduplication work from this image import plugin and make it part of Wagtail itself, uh which I think a big big improvement. Um Nicholas asks, is there any limit on the number of images to be uploaded in one time? Jacob, I'll let you answer that one.

Speaker 3: No, Google does impose some limits after you start um requesting lots, but that's kind of really on their side and it's just about when their server decides to cut you off. But really on the W side there's no limit.

Speaker 1: Fantastic. All right. I think we'll stop there for questions, but keep keep them coming and we'll we'll try and answer online or or later. Um and I want to talk just generally about the the kind of the Wagtail ecosystem and just to be clear, both those features that Abigail showed. are not in core Wagtail. These are apps that you can add really easily with uh with with a few lines of import code and then some configuration depending on how you how you want them to work. So one is the Magtail Airtable you can import and the other is the the image import. And we'll we'll we'll put the links up either here or um we'll we'll share them afterwards. And um uh I think in both cases it's it's like a strong example of ways that the ecosystem around Wagtail is really growing. And there's there's been this this this growing collection of tools for a while, but we are starting to kind of make a better effort to um to organize it.

Speaker 1: And actually I'm going to share my screen and uh Show you some examples of this. So initially there was a project, this awesome Wagtail project. Um you might have seen these around the web. So uh It's quite a standard thing on GitHub you'll have an awesome hyphen technology name page, usually curated by uh kind of third party And um it's a single page on GitHub with a a lot of links that's um managed by the community. And this has been a really good starting point for Wagtail. And if you haven't seen it already, I I definitely recommend Googling Awesome Wagtail and looking through these. And I expect you'll you'll find some useful tools that you don't know about already. But it's not um as as the ecosystem grows, it's it's not uh as kind of scalable as we want. So

Speaker 1: recently we've um decided to take a slightly different approach and uh really appreciate the help of the Dutch agency Four Digits. And uh particularly Kuhn van der Camp, who's one of the the core core Wagtail team members. I think he's uh listening to this webinar. So uh Kun 's done a great job of reorganising all the available Wagtail packages. into Django packages, which is uh an existing framework for managing this stuff. So um at the moment the best place to go is his blog post on the four digits site. And then from here you can see all the ways they've been categorized. So if you're interested in accessibility in Wagtail Then you can see all the items available here, and each of them will show the development status and how many stars it's got on GitHub and activity and so on Or you might be interested in

Speaker 1: Wagtail blog. That's a pretty common area. So here we can see all the quite a few Wagtail blog projects, some more active than others So this is going to be the way that we uh continue to that we organize our plugins in the third-party system from now on. And um I think it makes sense to do this way because it's kind of standing on top of the the systems that already exist. I think I this is a very last minute demo, but I'm just going to show you one more, give you one more demo, and I hope this works because we just put it together in the last few minutes. This is a feature called Wagtail Transfer. And again, this is something that you can put into all now. And we've seen a few different approaches to this over the years, and uh, but this is a um this is one that that that that is

Speaker 1: now uh in within the Wagtail repository, the Wagtail uh organization on GitHub, um so is kind of officially supported. And um it's this kind of thing that you might use in a sort of more enterprisey environment. So we've we know about banks using an approach approaches like this or um some really kind of high profile uh websites in the tech sector. and others in the finance sector. And it's the sort of situation where for for most people I think the workflow that you get in Wagtail is enough. So uh you have different m permissions and moderators and editors will create content and then moderators and admins might might make it live. But if you're in a sort of environment where it's really important that uh there's a there's a kind of a stricter firewall between your staging content and your production content, you might want to have two instances and then to be able to move all the content between the pro

Speaker 1: the staging instance and the production instance. And that's what this feature allows. So I'm just going to show this very quickly. So this is I've got slightly the wrong way around. So here's imagine this is our first site and here's our second site. So here I'm going to create a new page underneath the home page I'll just make a standard page. This is on the Wagtail site. And I'm going to call it what's new in Wagtail. Hello world. This doesn't matter. too much and I think I need to just add some text in a paragraph in order to be able to save it. So I've now created that page in a draft mode. in uh on on one site. Now if I go to the next site, you see the URL slightly change. I can go to this import feature and from import I can select my source site. So we only have one here.

Speaker 1: but you could set this up with many and now I'm going to select the pages to import. So what I do is search and immediately so this is searching the other site I'm then able to select that page Choose where I want to have it here. It's telling me it's going to import one page. I'll import it. That's done. And now that same page with the same status and the same content is available on this side. And that was just for one page, but perhaps a more typical example would be I want to import the whole site with 152 pages or all the snippets or a subsection of the site. And all of these cases are supported. It works very smoothly and uh I think it's um it's a really good solution for people who want that that kind of hard break between production and staging environments for their content. Okay, I'm gonna stop on the demos now.

Speaker 1: Uh do ask questions about that, but for now we're gonna move on to uh talking about I think the biggest feature in Wagtail over the last six months. And we did do a demo of this in our our last What's New in Wagtail session, which was the first one. But um uh this is Wagtail localized. So this is our uh our our uh approach for handling multi-language sites in Wagtail. And again, there have been several methods for doing this over the years in Wagtail, but um we there's been like considerable investment in in Wagtail Localize, which is this is the new standard for doing this. And I think it's not just the new standard for Wagtail, but I think is a new standard for open source content management systems in general. This has been

Speaker 1: funded with with a range of organizations. Torchbox has invested a lot in it. Google originally had some requirements around this and more recently Mozilla have been uh done and made like significant contributions to uh improving this feature. I'm going to hand over now to Carl and Ollie, who are going to talk to you about the UI changes that we've made and the new features that we can show off.

Speaker 4: Hi everybody, so I'm Ollie. I'm the other founder at Torchbox, Creative Director. I have a little bit of oversight on the user experience and interaction design work that we do on Wagtail. So Carl's going to demo the Wagtail Localize feature, but before he does that, I'm just going to introduce it a little bit and introduce a couple of the fundamental design decisions that we've made along the way I'm gonna be rather old school and use a um use a keynote deck. But people haven't seen one of these for a while. Uh okay. So uh Wagtail Localize. Localize provides features for translation and localization. So very broadly You know, translation is just the actual act of translating a piece of content, whereas localization is when you translate the content and then you change it to give it more local relevance.

Speaker 4: So for example Changing a photo to something more locally significant or rewriting content in a more culturally acceptable way. And there are two ways to sort of tackle this. this kind of problem in in CMSs. So the first way is is is field level localization. So this is where you provide alternate content versions on the same page. Here are a couple of uh kind of ways this has been done historically in Wagtails. So on the left you can see just about, I hope, that there's a series of title fields in different languages and you'd get this kind of replication of field. with the different language versions for every field you had on your page in this kind of implementation. And then on the right. . You can see it's the same sort of uh it's the same situation in that it's in the same page, but this time translations are contained within separate tabs.

Speaker 4: So it's a bit uh possibly of a nicer kind of editing experience and perhaps a bit more scalable, but it's still the same fields in the same page. The other option is to do page level localization. So this is where each language variant is stored in a completely separate page in Wagtail. And that ends up creating separate sort of language branches or sites. within your your Wagtail instance. And this approach works better as a more flexible, scalable solution, we think. So this is the approach that we've taken in Wagtail Localize. So what are the advantages of this approach? Firstly, you know, a translation or a localized version can be an exact translation of the site.

Speaker 4: But also you might want it so that that translated localized version grows independently of the original version. So you might have your English site here, but then your Spanish site, you might want to have extra sections or extra content in time. So in order to do that, you need really a separate sort of of site. With the page level localization , it kind of it's very scalable. Whereas with field level localization where you might have say 12 language versions of a big page on the same page, you can you can see how you might have some performance issues with that. And when you have page level localization, these different sites, you can have some language instances published and some in draft states. Whereas if it's all, if your languages are all on the same page, they're all that page is either published or not.

Speaker 4: And finally you can translate slugs too, which is nice in this page level kind of approach. So that's the first kind of important design decision that we've made. The other thing that I want to show you is how do we actually translate content. And we've created a kind of different interface for translating and managing translated content within Wagtail. I'm just gonna explain how that that interface is particularly important when you're doing linked uh pages. So here I've got my English site. and my French site, my Wagtail Bakery sites. And you can see the baguette page is kind of, I've got this line indicating that it's linked to the French baguette page is linked to the English baguette page. The idea is that we'd want to keep them totally in sync

Speaker 4: So if we made a change to the English version, we'd like to tell the French translated version to update itself. So in that sort of situation, you don't want editors going in and making other sorts of changes But it may be that you want to separate these these kind of different pages and create separate localized page versions in the way that I talked about that that kind of different language site. scaling and becoming it it something separate. In this case you want to kind of make the bag break that kind of sync link between the English baguette page and the French baguette page. I mean of course the French have probably got an awful lot more to say about baguettes than English people. So you don't want that exact relation. So we've created a special interface to manage the initial translation and those pages that stay in this linked mode.

Speaker 4: And I want to just show you that now. So On the left of my screen you can see the standard Wagtail edit page interface, and on the right of the screen you can see the same page translated into French in translation mode. So the first thing to note about when you're doing a translation in a content manager system is you don't generally translate it line by line in a way that you might enter content. You tend to use a translation service So you download a PO file, a portable object file, send it off to your translation service, and then upload it the translated Upload the translated version and it fills in all the translations here. If you don't have a translation service, you can either do it manually or can you can use a machine translation service like Deeper or Google Translate or whatever, and Carl will show you this in a second

Speaker 4: And if you want your page to stay in this linked mode where it's an exact replica of the original uh content version, you leave it in this mode and we're able to identify when each of these strings need updating and show you that nice and clearly. But if you want to change your page and let it kind of evolve beyond the translated version, adding new content, then you'll want to end translation mode. You can see that's the top link in the the drop up at the bottom and when you do that it'll return this page to a normal page edit mode so it'll be the French language stuff but displayed as a normal Wagtail edit page would be Okay, I hope that's given you a little bit of an intro and uh and I'm gonna hand over to Carl now for the demo.

Speaker 5: Thank you, Ollie. Hello everyone, I'm Carl, and I'm going to demo the writer localized package. So here's my screen. So as you can see, this is the Wagtail Bakery demo. This is our internal demo we use for building and demoing new Wagtail features. This particular version has the latest version of Wagtail installed and also the Wagtail localized package. Currently the entire site is in English. And as you can see, if you look at the URL up here, we have a prefix on the whole site slash EN. This is so we can uh have separate URLs for each uh language so for example France would be slash fr but for your default language it's optional to have the slash E N. You can configure this to just

Speaker 5: respond on the the root URL. The advantage of having it in this way is that it allows you to have browser language detection. So if I visit the site at the root path it should automatically forward me to slash en and anyone else who has a foreign language browser will be routed to the correct language. So now I've got to quickly show you how to translate this site into French using Wagtail Localize. So I'm going to just go to the Wagtail admin. And the first thing I have to do is set up a new locale. So currently, so we go into settings locales, and currently we just have English. And I'm going to add a new locale. And the reason why we call them locales is we'd like to encourage you to use these also for localizing content into particular regions.

Speaker 5: In this example I only have languages set up, so English, French and Spanish. These are configured by your developer and it really depends on what your front end supports. So if you're you know if you uh haven't got translations in your front end for a particular language you shouldn't you wouldn't add it here. You can actually set up regions on these as well. So you have French for Canada and French for France as well. So I'm going to set up French and I'm going to set this sync from FERL to English What this does is it'll initialize the whole site with the existing English content and any changes that are made to the English content will actually be affected to French unless those pages have been translated

Speaker 5: So let's save that. And now this should have created a new page tree based on the English tree. So it's exactly the same as the English at the moment and we can navigate through that tree using these new little UIs. This jumps us between the English version and the French. But yes, it's it's it's exactly mirroring the uh uh English content. Uh if we try and edit one of these pages You'll see we'll get a warning saying that this is a mirror. Any changes that are made to the English version at this time will be also automatically synced with the French. But if we translate the page, that'll allow us to actually turn this into a French page. So let's hit that button

Speaker 5: and click submit. Now you see the page editor has changed into this new new translation editor. uh paragraph of the page and field value has been split out into a separate field. This prevents translators from modifying the structure of the page and it allow and it allows keeping it up to date with the English content much easier. But we can disable that. I'll show you how to do that later. We can translate this this content directly. So I can set this birds and click save and now that uh string is translated or we can download a uh a PO file for the entire page so we just

Speaker 5: open that and this is just a a standard format for transferring the source strings and also when these are filled in. We can upload that PA file here with the translations and then those translations be loaded in. We can also translate with a machine translation service. So I've got this set with Deepall, and I'll just quickly Try that now. So let's click that button. As you can see, this is now filled in all those empty strings with with some some French. So Deeple, rather, as the name suggests, uses deep learning. So these a fairly good quality. They're they're probably not as good as as a a a human written one, but they're they're pretty good. And also they also support um uh inline styling as well so things like bold text and and links that are in the previous uh English version have actually been carried through to the French which I think is really nice.

Speaker 5: Before I move on, I'd like to quickly show you how images are handled. As you can see, we got uh all the images on the page are also displayed here. By default, it'll stay in sync with the English version. So this if this image is updated in the English version of the page, it'll be updated here too. But you can optionally override them for certain locales. You might want to do this, for example, if it had some English text on that image and you wanted to replace it with a version with the text translated to French So I'll just quickly demo how that is done. We just hit this change image button here and I'm going to search for And now that's replaced. It'll stay like that until we

Speaker 5: switch it back to English. If there's any updates to English, that will be that will update this but we can uh switch back to the English version by clicking this button here. So let's publish that. sorry we go and now view life as you can see the page is now in in French we've got all this uh Yeah, and as you can see all the all the uh links have also been carried through as well. And our image is now a baguette instead of uh So there are still some bits of this site that aren't translated into French. So as you can see these pages here, these are still mirroring the English content. So I'll quickly show you how to translate a page, another page.

Speaker 5: So let's translate this Anadama page. Now let's edit this. And that takes us, that's the same view we got earlier. If we hit translate this page and then submit. We now get to the translation editor. Yeah, so I'll quickly translate this at Depot. And there we go. And also actually there is another way of translating content that I forgot to mention a minute ago. You can integrate this with a external translation service. So Mozilla currently using an an older version of this, but that's automatically synchronizing with a service called Pontoon. And here we have the content of give.

Speaker 5: mozilla. org and that's being translated to French and German through here. So these files are created by Wagtail and kept up to date by Wagtail. And as soon as a contributor translates them and they get approved, they're automatically sent back to Wagtail and then Wagtail creates the pages. Yeah, so finally I'd like to show you uh how uh snippets are handled. So as you can see here we've got two snippets that both have got text on them so we would need to translate these as well. These are brought out here and they're automatically submitted. So that we can click edit. That takes you to the editor for the snippet and we can just translate these using deeple again

Speaker 5: and I'll publish them. Back, edit that, and then hit deploy again, publish And there we go, they should be they should say one out of one segment translated. Let's publish this page and we can view it live. There we go. So it's all in in French and these have also been translated to French. If we later decide that we want to change the structure of this page, we can disable the translation mode by going into the actions and click end translation mode. This means that it'll no longer receive any updates from the English version, but it will remain linked to the original page. But this lets you

Speaker 5: add extra paragraphs to the page if you like. Finally, I'd like to show you how we would translate a snippet that is on its own. So at the bottom of this site you've got this. a little quote that's not linked to any page so we need to translate this independently of a page so let's uh go into here and then we can go snippets Foototext, this is where that photo text is managed and uh we can hit translate here and I'll translate that to French, submit. And now if we visit the French side, we can edit that. And here we go, we've got a translation that here.

Speaker 5: Translate Deeple. publish it and now if we go to the French site and go to the beginning it should have pulled in the French version of that snippet. There we go, that's everything uh you think I was going to show. Uh so Wagter localized we plan to uh Release version 1. 2 of that around the same time as Wagtower 2. 11, which would be around the beginning of November.

Speaker 1: Thank you very much, Carl. Such a great demo that I I just I never get tired of seeing how fast Deep will dose those translations. Amazing. I'm aware that Carl covered a lot in that time. And we are going to we are recording the session and we'll make the video available later. Lisa will send it out when that's ready. So you can watch it at um 50% speed if you want to uh really pick up on all the details. Um but uh yeah and Uh we'll also be sharing the links to it. We'll have a lot more documentation as well. But there's there's a lot of features there and I think it's good it's a really powerful system. We've got some questions. coming in and uh well actually first from brady this isn't a question but i'm just gonna read it out because it's nice wow this is way better than what i've been doing

Speaker 1: very cool thank you brady uh but also a question from onno Would you upgrade from Wagtail Trans to this model in Wagtail for older websites that were built? Will this keep maintenance for coming years easy?

Speaker 5: Yeah, so um Wagtail Trans uses the same model of of separating out the page trees. Um so I think it should it it should be possible to to um to migrate. So the the um uh the ch the translation fields that we have are actually in Wagtail Core. So um yeah it may even be possible for uh the uh for us to have to create like a compatible uh version of Wagtail trans that that allows you to migrate easily. But yeah, we haven't looked into that yet. But

Speaker 1: Just for for other people on this, the Wagtail Trans is another package for handling translations in Wagtail. And it's used widely. uh option but um we've made some changes to core wagtail in order to make this integration smoother for wagtail localize and uh it may be that if that wagtail trans can refactor a bit in order to to take advantage of those Um uh there's also a question from uh Benedict asked a similar question about what about transfer from Wagtail Model Trans, which is uh like the example that Ollie showed right at the beginning.

Speaker 5: Yeah, so this is uh slightly more uh tricky than uh from Wagtail Trans because obviously Wagtail Model Trans uses separate fields. It is possible to do It's a little bit more of a complex data migration because you have to create all the new page trees as well. But yeah, I have done it once in the past, so it is possible.

Speaker 1: And uh Christoph asks, are stream fields also available for synchronization and translation? Uh

Speaker 5: yes, they are, yeah. Um if you have your own custom stream field blocks, you may have to uh supply a couple of of methods to allow it to extract the the segments from them. But yeah, all the built-in string of field blocks are supported.

Speaker 1: Great. Thank you, Carl. And thanks everyone for the questions. I think we're going to move on because we we're getting towards the end of the hour. And um so what we've talked about so far are tools that are available um as third-party packages or are really imminently available with Wagto Localis, as Carl said. becoming possible with uh Mike Del 2. 11, which is November the first, or around the beginning of November. But we also want to talk about some things which are just coming in the in the near future and uh some work that that we're doing around those. And I'm gonna start by handing back to Ollie.

Speaker 4: Uh thanks Tom. Okay, I'm going to talk about um Wagtail commenting So commenting is going to be a great addition to the edit experience and a kind of build on the the nice workflow features that we demonstrated in the last What's New Wagtail. It's not ready for a demo yet, so I'm back in my old keynotes, demonstrating uh through some kind of a screenshots Uh uh but this is a really nice commenting system. It's been sponsored by the Motley Fool again, uh which we're really appreciative of. Uh and I think this is gonna feel really familiar to you if you use Google Docs or Dropbox Paper or anything like that, just to zoom in on a couple of things. So um uh you can show and hide all the comments on a particular page

Speaker 4: You can reply to comments, you can resolve comments, and you can see that the system over here is able to handle quite a lot of comments in a nice way. It shows you the active comment when you click on it. You can also also actually kind of create a comment within a comment, which is quite cool. And you can comment on all sorts of fields. So as well as as commenting on on Text areas like up here you can uh comment on on these input fields here and and fields both inside and outside of stream field and indeed actually image fields as well. So so it's going to be a really nice feature I think. uh and and one that will be a a nice addition to the tools we've got here. The last thing on this is that the kind of

Speaker 4: eagle-eyed amongst you may have noticed that this has got a uh a collapsed kind of left menu which we've kind of introduced to to afford us a bit more space for the editing area when you've got comments in play. The Streamfield blocks are a bit uh a bit narrower, uh but they're wider if we collapse the menu like this and uh I think it's gonna work you know I think it could work really well it works really well in uh in lots of other applications so I think it could work really well here And um and we'll we're we're mocking this up now and looking forward to seeing how that will work for us as well, creating a bit more space for us all to edit in. Okay, back to you Tom.

Speaker 1: Thanks, Ollie. So the last thing I'm going to talk about is another forthcoming feature and it's it's probably the least uh exciting visually because uh it's it's at a at a more of a conceptual stage at the moment But um I think it's it's something that's really important to Wagtail and the future of Wagtail. And um in order to talk about it, I'm just gonna Sh go back five and a bit years to uh Wagtail 1. 0, where I wrote this, as I said, a rather indulgent review for uh for a big release for us and um One of the things that that made Wagtail 1. 0 a big release was Streamfield, which was you know, all of you who are using Wagtail now are aware of, but this is really a standout feature for Wagtail. And it's the ability to

Speaker 1: create kind of rich narrative style complex pages without needing lots of different templates, but while maintaining structured content that can be filtered and reused in different ways And um I think Stream Field has been been an important part of of a Wagtail's success and it's been interesting to see how it's been adopted in other content management systems. So You might have seen that WordPress now has, with its Gutenberg editor, has this more con block style way of editing, which has some accessibility issues, but is is a nice user interface and and and follows some of the models that Streamfield laid out in Wagto. But people used Streamfield in in ways that we didn't always anticipate. So while we were imagining these kind of uh magazine style narrative pages, people increasingly used Streamfield

Speaker 1: for are quite kind of complex and sometimes heavily nested pages. And here's an example. This one isn't too bad, but this is a long blog post uh by Caleb about creating um uh deploying a Wagtail website from scratch and you can see it's got a lot of different elements and um at this stage it's fine but once you start getting to kind of hundreds of different blocks then the interface starts slowing down a bit and also it just feels a bit clunky. And there's some things that we want to be able to do, like something that we saw a lovely demo from New York Public Radio at Wagtail Space a couple of months ago. the ability to split blocks for example or to be able to drag and drop items around the page uh or to be able to have um uh auto save in your content editors And some of these things are a bit harder to do than we'd like

Speaker 1: because of the technologies that that were available when we originally designed Streamfield. So the the way that Django templates and uh and the JavaScript of the front end works together So there's been some thinking about this in the last two years, and in particular you might have been aware of this Kickstarter project called Wagtail's First Hatch, which was initiated by Bertrand Boudage. French uh core Wagtail team member, who um who who started projects to to recreate the Wagtail edit interface using React, uh very popular front-end framework. And uh it was a it was a successful project, there was some good funding for it, and Bertrand made some really good progress um and and delivered on his goals really, but there were some things about it that in retrospect we were a bit nervous about and in in particular

Speaker 1: We didn't want to break backwards compatibility for Wagtail, and we wanted to make sure that Wagtail may was continue to be an edit a CMS that's powerful for Django and Python developers. So you don't need to know React in order to create new stream field blocks, for example. So w we've taken some of the UI improvements from this from this project, but we we've rethought a bit the way that we want we can make this integration possible. And um the latest on this is uh is really beautifully expressed by Matthew who's the Wagtails lead developer who's on the call here. with us who um written this recent blog post in fact if you just go to work tool. io slash blog you'll take you'll take to this because it's the latest one. And uh this is about Telepath, Matthew's new project

Speaker 1: Which is a way of integrating Python and JavaScript and making it possible for us to share the content types and the data with the JavaScript front end in a kind of seamless and clean way And um it sounds like, you know, it it is quite a kind of conceptual project, but it's one that um is exists already and I think actually will go beyond Wagtail in in in being a really powerful, useful tool for for Django and applications generally. But more importantly for us, it will underpin the developments that we want to make and the investments that we want to put in creating really a kind of next generation user interface for uh for the edit page in Wagtail. And that's a project that we're starting soon. So November the 12th, we are starting a six-week project, an intense project

Speaker 1: with a few team members at TorchBox. Focusing on using this this uh the the the abilities that telepath gives us in order to create the the beginnings of it of a new editor that allows us to have you know things like splitting blocks and drag and dropping moving around and autosave and the the things that we want to be able to do to make Wagtail like absolutely the best editing experience it can be. So we're really excited about that. And hopefully, so six weeks from November the 12th, that takes us kind of end of end of the year. And I think it means that When we are having our uh episode three of What's New and Wagtail, sometime in uh the beginning of 2021, we'll be able to show you the outcomes of this. And uh it's a nice deadline for us, but it's just I think it's also

Speaker 1: a really exciting prospect. I just want to sign off by saying that a lot of what we've seen today has been made possible by the contributions made by different organizations and Torchbox is one of those organizations, but there's also people like Mozilla and Motleyful and Google and Department of International Trade in the UK who have seen that um uh they who've who uh uh are using Wagtail to to run big sites and um and have seen that by making kind of focused investments in particular areas, they can rapidly improve that they can significantly improve the workflows of their editors and authors. And it's just um I I think it's a very it can be a very effective way of uh improving the software that you that

Speaker 1: you use and it's you know for us it's wonderful because it means that we're able to to share those benefits with the whole community which is the kind of you know the dream of open source. And um I would encourage all of you to think about ways that you might be able to contribute in order to make Wagtail better for you That's it from us. I haven't seen are there any recent questions on the things we've shown apart from a nice message from Simon saying, wow, that sounds mega exciting. I think we should probably wrap up here unless there are any last burning questions. Chris Christopher from Mozilla says is liking the collapsed left nav, which is good. That's promising. I think we're gonna we're gonna wrap up here and um Lisa

Speaker 1: I'm sure will send out to all the participants the the video when it's ready and uh any relevant links If you think of any questions that you didn't have a chance to ask in the meantime, then please keep sending them. We're all available. The Wagtail Slack is a very good place to stay involved if you're not on that already. So Wagtail. io forward slash Slack. back. All right. I'm going to say thank you and goodbye.

Speaker 4: Thanks everybody.

Speaker 1: See you next time. Thanks everyone.

Speaker 4: Please.