Designing the new page editor - Phil Dexter and Ben Enright

Speaker 1: While we're doing that, I can introduce our next speakers. I'm so excited to introduce Phil Dexter and Ben Inright, and they will be discussing designing the new page editor.

Speaker 2: Thanks, Dawn. Cheers, Thorn. We'll kick off then. Yeah, hi, yeah. We're Phil and Ben from Torchbox and we're really uh privileged to have been working on Wagtail's new page editor. We started work on it in sort of middle of the year last year, so sort of June last year, a bit of discovery work and And in yeah, been working on it on and off since then, more on recently than off. We presented some some of these designs back at uh what's new in Wagtail webinar uh towards the end Of last year and they've they've moved on since then. Um, we thought that today it'll be hopefully interesting for us to sort of talk through where we've made decisions and why we've made decisions. We know that Wagtail is used in lots of different circumstances by lots of different people. I mean it's quite hard to design something that's going to work for everyone at

Speaker 2: all times. But hopefully today we can show you some of the uh where we got to and some of the reasons why we've got there, some of the problems that we we saw and the ways in which we've tried to solve those problems problems. So fingers crossed this will be as entertaining as Matthew's um Matthew's talk was just then. So the first thing I'm going to do is to make sure we're on the same page about where we are aiming to aim. end up. So what you can see hopefully in front of you at the moment um is Wagtail's new page editor. So this is a Figma mock-up of this rather than the the final thing. But I'm I'm going to talk you through it quite briefly. So at the top left you can see the breadcrumbs are behind a hover here. So I can still see the full breadcrumb, but I hover over it and actually just the normal page title is shown there. Um we have a secondary um

Speaker 2: page actions is what we call this drop down menu here which is to do all the things that you want to do when you're on the page menu, not all of them, but some of them, that you you previously potentially couldn't do and you you usually had to kind of drop back up to the parent page. That actually did change in 216 as a nod towards this. But yeah, we're moving some of those actions here. Here, uh the kind of draft safe seconds ago and named this version is is pointing towards autosave coming in, uh, which is going to be our uh page locking level initially but um still we think this is a bit a big thing it removes the need to have a save draft button for instance which you can see has has disappeared from from the bottom there um and then we also have kind of yes showing you who else is on the the page. I'll come back to these right hand panels shortly but first of all I'll I'll I'll cover some of the the editing um experience so we still have the tabs um as

Speaker 2: we always have done before. I'll just kind of talk you through sort of adding content in. So there's no um you know the the the page title for instance will fit in at the top which you get that and it'll show a bit a bit larger. There's only one page title at this point. And then kind of adding stream field is slightly different. So this is the experience that you're going to be getting with the new page editor rather than the blocks all kind of laying out on the page coming in. like this and we'll talk you through a bit more about why shortly. So here's an example of me adding some rich text in. And you can see that draft tiles changed here as well, the rich text editor So if I wanted for instance to add or to bold or highlight this text, I would select it and get the options at that point. So I could then for instance

Speaker 2: add a link onto the text. apply that and that would apply in that manner. So that's slightly different to to how Wagtail works at the moment. I'll show adding a quote in. And uh another rich text block. And with this one, one of the things that we're introducing is the ability to be able to split blocks. So for instance, if I have added in these two paragraphs and then I realize, oh no, actually what I want really is an image to go between these two paragraphs. Right now in Wagtail, I'll need to add another image, I'll then need to add below that another rich text block. then I need to take this text and paste that under there. It's a a tale as old as time. And uh what we've done now is if you basically press return so you get to a new line, you're gonna be able to split this block.

Speaker 2: So you you'll be able to buck to it to add them in with the the forward slash but you'll be able to uh just add in a new block in between so in the middle of your um uh rich text block so So I can stick an image in there, for instance, choose the image, and that pops my image in and actually splits that into two rich text blocks with an image in between. So that's an example of some of the changes which may seem trivial, may seem cool and exciting to different sorts of people that we're making to the kind of venture industry. interface there. Another um we think quite cool point, let me just move zoom out the way, uh is the what what certainly I'm calling, I think we're generally calling the minimap. which is this kind of page index on the right hand side, but also it will act as a bit of an anchor, so it'll take you to the place in the page where you click it.

Speaker 2: And that should, especially for long pages, have help us a bit. And then this generally the the the kind of right hand panel there we're making use of with things like status um where you'll be able to see various um different parts of of meta information and actions and things for your page. Again, we'll go into that a bit more later. Things like history, comments obviously will take up this space as well. And also live preview. So this is going to be basically updating as you're updating the left hand side as the page saves, the live preview is going to update as well. So there'll be no more having to necessarily press a preview button down here. You will still be able to open a new tab if you need to and hopefully get to different viewports as well. But we're quite excited about that.

Speaker 2: And then the standard sort of C the see the front end by clicking live. But we think that this right hand side is going to be hopefully really useful to be extendable as well so people will be able to add in their own icons up here and use this right hand side for their own things. Um and we can think of some others in the future of things around um you know content support and coaching and stuff um in Ray. So that's a relatively brief overview of the um the page editor. I think we're gonna do you want to switch across to sharing Figma. So When we were working on this, we uh I saw a quote actually from Steve Jobs which was this quote and it really resonated with us that designing a product is keeping 5,000 things in your brain, fitting them all together in new and different ways to get what you're doing. what you want. And every day you discover something new, it's a new problem or a new opportunity to fit these things together a little differently.

Speaker 2: And that felt very much like this. We felt like we kind of were were pretty close a lot of times and then there would be one piece of feedback and that would change Everything and you go, Oh no, okay, well now we need to change this and that and the other and then you'd use a test it and they'd say, Oh have you thought about this? And you go, No, unbel unbelievable, we need to change something else And there's so much that relies on each other and uh kind of integrates together that it was a really interesting, hard but interesting problem to try to solve. solve. So yeah, we'll talk you through um some of that now. So I'm gonna have a bit of Ben to talk us through uh yeah the first sort of problem we tackled.

Speaker 3: Cheers Phil. Yeah so I think what we wanted to do was Take you through some of the thinking we've done, just some of the areas that were challenging and and talk you through some of the ambition we had at the start of the process and kind of kind of how it evolved really just to give you kind of an insight into how we um how we solved some of the problems. So I'm just gonna zoom in here. So so the first area uh we wanted to really focus on of how to kind of focus on content and reduce visual noise. So you know currently Wagtail, you know, it's evolved over time and and and as the UI has has evolved, there's quite a lot of elements that kind of kind of take your attention away from the content. And um an early ambition for us even like uh years

Speaker 3: years ago was to was for for Wagtail to kind of be this natural writing experience, you know, things like drop box paper or or the new um or things like Notion or Gutenberg's another example where you know you take away um quite a lot and it's just really kind of breathable, kind of natural writing experience. So this is like a really early first iteration of this process where we were like let's take it all away and start again and see what we can do because we wanted people just to feel like this is natural, I can see my content, I can get on with writing my content So this was like a first incarnation. As we went through this process we explored a few different things, so we were like, okay, let's take the labels away from fields. Do do people really need those? Are they just getting in the way?

Speaker 3: Um if you're writing a blog post, you know, and you're creating stream field blocks, those labels maybe, you know, you learn that what those blocks are. You're not you you don't need to be told that. So that kind of felt quite good at at this stage. You know, we took away the labels, we were like maybe we'll have an icon there, but otherwise you kind of feel like here's the content, it's kind of almost WYSIWYG. That felt pretty good for a while. But what about the sort of structured templates? I mean, you know, this is Wagtail's obviously not just used for blog writing and things like that. There's some quite highly structured template. This isn't even a very kind of complex example But you know, you quite quickly you realise that someone coming to um a particular page in Wagtail that they need to edit to fill in content, you know, you you kind of need labels for these things, right?

Speaker 3: So and um and you know If you don't have UI Chrome around a field, for example, you know, there are you start to run into accessibility problems quite quickly. And so what you have is this kind of hybrid where you're trying to keep this thing natural But you have to cater to this kind of structures structured data. So it evolved. And then so we obviously brought back, you know, elements, but we wanted to keep True to what we were trying to achieve, which was like keep the labels small. So we kind of tried to shift the focus from large labels to you know labels that give you what you need but you can still focus in on content And then we started thinking, okay, so we're we're doing alright with that. We kind of met kind of in the middle. How about how's that going to work with things like stream fields?

Speaker 3: So then we've got this kind of combination. of structured fields but also stream field where people are building up stuff. So we started to explore how can we kind of meet again, like in the middle where we 'cause you know, we obviously streamfield's got each block's got elements that, you know, it's got functions, it's got actions that Associate with those blocks, you need to move them around. But what do we need to show to show people before they interact with that particular block? Um, currently, and I'll talk about this kind of idea of lost in stream field in a minute. But currently the the the stream field UI Chrome gets quite busy, especially when you start getting nested. So we've explored these kind of ideas for you know only show the stuff you need when you're focused on it. So it just kind of hones you in on that thing. So you know we we introduced um these lines that kind of help you to focus on the on the block that you're

Speaker 3: that you're interacting with So this started feeling quite nice and so then you start to see this sense of indentation, but it's quite quite light and you can kind of just scroll to the to the content you're looking for. So that evolved. Um and then things like accessibility came to mind, you know. So, you know, there's there's there's issues around um Help text, for example, we had some feedback from the community when we shared these shared these links to on GitHub that you know there's there's quite a lot of research that says that inline help text is is more effective. And um there's a lot of lot of people who kind of guided us in in the in the in the sense that help text is really important to a lot of people in these in this world. So we brought that in line rather than over on the right hand side to kind of give it more of a more of its place, which you know we had to give up some vertical space for that, which

Speaker 3: But an ambition for us was to try and save vertical space, but we felt like it was the right balance from an accessibility perspective. And then so and that's where we are now. So so this is sort of where the the demo that Phil just shared and you know we've kind of got to a point now where we've we've we've we've kind of got to the finer details and we've introduced a slightly larger size label for acceptable. accessibility reasons. So you know it ideally we would have gone smaller, but we need to make sure this is accessible. So we've kind of this is where we've landed and this is what Phil just demoed and we're feeling pretty good about um the kind of the balance with the that we've struck. We've introduced things like these icons to kind of imply there's you know there's functions there without actually showing them to everybody. So you know you know that there's a a menu note it's not completely hidden.

Speaker 3: So yeah, so then um carrying on then. So as part of Streamfield obviously there's the menu and that's kind of what we have at the moment. So how is that going to work in this new world? Obviously at the moment it kind of it's in line, it pushes stuff down. We explored this, can we group things? But then we kind of started thinking about the splitting functionality and about how actually you know if you're going to be using uh say for example keyp keyboard shortcuts to split using the kind of backslash idea, then actually these kind of ideas where the kind of the menu appears on top feels more natural because it's something that you can just press escape and it goes away. It's not affecting the the the page um flow or anything like that. And you know you can then tab through or s or quickly search for your components or your your stream field blocks.

Speaker 3: So that's kind of how we've ended up with this kind of fly up menu that feels really consistent across all the bits. And then so before I hand over back over to Phil, I just wanted to talk a bit more about this idea of lost in stream feel that we talk about a lot. So yeah, this idea that when you go quite deep Deeply nested, you start to get a bit confused, right? You kind of lose your way. You know, there's kind of this idea that these pluses, you know, there's no indentation on the pluses. That's That's that can get a bit confusing. You kind of lose where you are. You know, the labels are on the right hand side at the moment. Um, you know, the kind of less useful labels are the ones you you scan to. How can we kind of solve that problem? A couple of things we tried, and one of them was kind of we maintain indentation.

Speaker 3: We couldn't really get away from that. But we're not indenting on the right now, just indenting on the left. And we're using our lines that we introduced to kind of anchor you to the one you're focused on. And also deliberately using the plus symbol on the left hand side so you can so you can honor that idea of indentation. And then so what happens when you scroll down quite deep? Well This is an idea we've had around this idea of kind of the stream-filled breadcrumb. So as you scroll you've got this kind of anchoring uh of the of where you are and if you want to kind of get back to the top of a certain kind of level, you can click this and it might scroll you back up to the top. So yeah, um so that was one way of solving the lost in the stream field, but there's uh a few things that Phil can talk about now around kind of long pages as well that we wanted to that we'd explore.

Speaker 2: Yeah, exactly. The the lost in stream field has two two relevant points and one is the nested where you have nested, nested, nested, nested, nested, nested stream fields. And the other is just very long pages. You might not have nested stream fields so much, but you just have tons and tons of of content on long pages, when you have that, it's it can be quite hard to get through. And I know recently we've introduced um collapsible blocks and things like that, which is definitely helping. But we were looking at things like um you know this I think VS Code has this kind of idea of a a smaller version of what you're looking at on the top right hand side. And we we quite like that as a concept. I think I pushed for that before everyone sort of told me that actually it's is better for this than it is for um for what we're trying to solve. Um at one stage we looked at the live preview. So the idea of the live preview and being able to

Speaker 2: drag like a box up and down on that and it would dry and it would kind of move your left hand side up and down as well your content and your live preview being completely in sync. But actually when you think about it that's really tricky to do. Because your uh content you know might be really long here. Um you you don't necessarily know that it's in the same order, um there's you know it's it's pretty hard for us to come up with a way, a pattern of making that work consistently. So yeah, we looked at a few different kind of document outlines and things. um that we really liked, especially uh yeah this this sort of situation you can see we're getting closer and closer to our final destination and this is sort of what yeah where we kind of um started off going was was this kind of kind of pattern of of this index, this sort of mini-map, this version

Speaker 2: where we're using color to donate different um stream field versus kind of structured data. Um this is another version where here we we're sort of even in the content we're using struct the the name of the field for the structured data which works you know relatively well but then in in your your stream field it's it's kind of a bit wasted. You're not quite sure where you are with it. And so in the end, we end up going with a bit of a um uh yeah, in between the two where we we're using the content, um which I think is what people will want to look at look for within within stream field whereas whereas with the structured data it's more the kind of name of the field that you might care about rather than whether the thing is sort of you know ticked or not or um or whatever. So that's another way we've been trying to solve the kind of uh lost in string

Speaker 2: field um situation. Um and then another thing that we've been been looking at is This idea of uh yeah what you see is what you get in terms of uh editing and as as Ben said we tried to go that way early on with our designs to try and make the admin experience look as much as possible as as perhaps the front end word and and make it customizable in that way. We looked at a few kind of things that we liked in terms of or well maybe we didn't like, but we looked at a few inspirations uh around this in terms of uh you know having having um WYSIWYGs but actually as Ben said the s the structure um the structured data means we need those labels. We're not going to be able to go to a WYSIWYG kind of click in and and edit your data design sort of scenario. So what's really the problem we're trying to solve there?

Speaker 2: Well, it's allowing your editor, your content editor, to be able to uh visualize what this will look like on the front end without having to click preview every two minutes. And I think the live preview that we've ended up with is something that allows that to happen. On the left hand side, you've got your accessible structured data that works for hopefully lots of different um scenarios and different use cases for Wagtail and on the right hand side you're able to see what that will look like so your content editor can can content and we kind of have a view of that. So hopefully that's a a nice marriage of the of the two. And yeah we're quite pleased with sort of how that's looked. Doing on time, we're doing okay on time. Right. Hello.

Speaker 2: Strap in, because the next bit's good. So This is uh uh Wagtail's page editor as it looks like now, uh which will be hugely familiar to everyone I'm sure. And um I've got a few things opened here. So I've got the the actions open at the bottom I'm on the settings tab. We've got a lot of information in the header. And it's effectively what's happened here is with kind of products that that live and grow organically as as Wagtail has, often what you'd end up doing is kind of bolting on new things and finding places to put new things. So like the comments uh on the right hand side here feels a little bit lost, a little bit lonely over there and and the um metadata we did a bit of a rewrite of this in in 2. 10 but not really enough.

Speaker 2: For a long time we felt like the header is taking up too much vertical space. Um the duplicate kind of title in the top and on the content having the title there has always felt a bit wasted. This schedule publishing I'm not going to go on about because everyone knows it's a little bit confusing. Um but having it here and having privacy here, whereas you've got lock in here has always felt interesting because they both sort of you know, take action straight away. So I think there have been s certain things and and certain bits of meta information that I felt like, well why is that there and not somewhere else? Why is this the meta? that I can see. And so what we tried to do was take a you know, is this was a great opportunity for us to take a step back really and one of the driving foot factors behind this to go, well what should the actions be? you know what should the buttons be, what's the information people want to see when they're editing versus just to have available to them.

Speaker 2: And so this is kind of the new the new header. So we've still got the breadcrumbs as we know they're hugely important for people to be able to kind of navigate to and know where they are in the um in the the system. We've introduced, as we said, the secondary page menu, which I think is really important and houses some of those actions that previously were down in the publishing menu which was just getting a bit too big really that publish menu to kind of find the key action you wanted. Obviously we need to bring autosaving to give people confidence that the thing is actually saving, not just, you know, probably it's working but Actually yes it is and and the information about who else is editing. Um and yeah the tabs we've actually left down here we did for a while try and put the tabs up into this header, but it felt like it wouldn't necessarily be a sensible move and actually the vertical space we're gaining, you know, these tabs will scroll underneath this header anyway, so it's not a huge deal for us to put them there.

Speaker 2: But alongside that we brought in this status panel and we spent quite a long time trying to get the words right. And the visuals write on this to give you the information that you want really importantly and quickly. So the fact that the status is is a draft or live, whatever it is, the ability to get to the history of this page, because these things are linked, right? The history of the page and what the status of the pages in and when that page was changed, right? Um we've brought the the kind of locales um and and localized stuff in here because now now Wagtell is simple localize in its uh in core um so your ability to s to know which locale you're in and switch if you're using if you're using locales. Locking and page locking feels more natural here I think than down in the page publish. You know what we've tried to do is keep that bottom left button to be much more around publishing and schedule publishing and and kind of the pace

Speaker 2: page status changes like that rather than lock in. which feels more of a settings. And you can actually see we've we're going to be uh not in the next release but the final one we're getting rid of the settings panel altogether because we've pulled that that stuff out we will have been uh including the page privacy which has come in here. So as a mixture really of statuses, help text and just kind of useful information as well as sort of meta information, hopefully things like first publish will be useful for people more more generally. And yeah, you can just see, I'll just briefly show a few of the previous versions of this just to show hopefully you think this is okay, you know, if not pretty decent. We like it. It. But it took us a long time to get here. There are a lot of versions of this that were worse where we were, you know, confusing what people find useful and which information belongs together

Speaker 2: and how should these actions be and should we introduce a whole nother page menu up here and what should it do so you know there there's a lot of work and effort has gone into trying to make things simple which hopefully they feel now So um we're coming up to time now. Um I would mention that there is a GitHub discussion that looks a bit like this that our man Thibault started. um where we are regularly, I think every couple of weeks we're getting updates on our progress on the page editor. And we started building this um in late January this year and we are aiming to be releasing um across the next couple of releases you'll see The page edits are starting to morph and change, hopefully in in nice ways. But we're really, you know, welcoming feedback and welcoming comments.

Speaker 2: We do respond to all of them as much as we can. And they have definitely influenced us. us as well. You'll be able to see in in the um discussion if you if you care to where we've taken on board things and where we've kind of listened to feedback from the community. So yeah we also really appreciate everyone who's been involved with user testing this um as well. There's been I can't remember how many across a long period of time, probably six months, we've done various different user tests and they've all been really useful. User testing is always great. Usability testing that is So yeah, we've we've really enjoyed that. Um and yeah, do kind of get in contact if um yeah, if you uh have been inspired by this and and want to give us any feedback or or generally have uh any feedback for us at all. We're also looking for uh for sponsorship still um to

Speaker 2: to kind of finish off the final bit so get in contact if you feel like your organization's in a great place to do that too. Otherwise, I should note that we do recognize we are wearing matching hoodies. This wasn't a planned scenario Um we're actually wearing fully matching outfits as well. We've got full unies and hoodies situation going on. So burger after this, everyone's gonna think we're really cool.

Speaker 1: Likely story. All right. Well, we're coming up on time. We have a few minutes uh for questions before the next talk. I'm not seeing any in chat in the moment, but let's see if there's any. Here we go.

Speaker 4: One question is when you're looking at inspiration. from things like um you know are are we are you trying to match any feature parity with uh other builders other cms or are you are We're just right at the moment looking to get all the current features kind of placed in the right place.

Speaker 1: So when you are uh looking at other uh features like Gutenberg Are you looking to match any feature parity or are you looking to get the current features up to where you're looking to get them?

Speaker 4: features while you're doing this big

Speaker 1: okay are you looking to add any new features while you're doing this big uh new new push

Speaker 2: um well i suppose um I think I understand the question. I suppose when we're looking at other other kind of features and tool other tools and other things out there for inspiration, it mainly is for inspiration, it's to try and understand where are the people doing things really well. We're not kind of saying, hey, we should be as good as this other tool. It's more sort of that's interesting. I wonder why they're doing that. And what are the benefits of approaching it in that kind of manner. So I think that's probably what I'd say about when we're looking at other tools. In terms of new features. I suppose I'm not sure if I've really got the grasp of the question, but I suppose we're we we are bringing quite a few new features with the page editor in terms of things like live preview and autosave the

Speaker 2: mini map on the right hand side, the blocks splitter. So yeah, sorry if I haven't understood the question. But let's have another go.

Speaker 1: That was a perfect answer. Yeah.

Speaker 3: Yes.

Speaker 1: I think there are some questions in the chat.

Speaker 2: Holy sugar.

Speaker 1: All right. Hi guys, great job. While developing a new feature, usually we need to have a kind of a settings, quote unquote, section as per block level. What I mean is that it would be very nice to have a cog icon next to the duplicate icon that once clicked, it opens a section where we've added block setting fields to be used as setting not settings, not content. In parentheses, i. e. let's let's say you have a carousel block and on those block setting fields you can find define an autoplay or a slide per slide per view and sew Are you planning to have that kind of feature on the new design?

Speaker 2: Not right now we're not, but I think what would be cool Marcos is if you could drop that onto the um GitHub discussion so that we can follow up with uh people like Gasman and Thibaut who are working on this project with us and we can have a chat about that. That's quite interesting. Uh I don't think I've seen an example like that before

Speaker 3: I think so.

Speaker 2: But I don't think there's a reason we shouldn't be able to either allow that to be extendable, he says. or or uh or think about that. Yeah this well worth us thinking about so thanks Marcus but yeah if you could drop that onto the the GitHub discussion that would be ideal I can see there's a question or two questions about the collapse all functionality. Yes, that is a thing that we will have, or that we're intending to have. We haven't come up with a design that we like enough to be able to able to include it yet but it's basically on our on our backlog of of things still to um still to finish off with this and that's one of the key ones. So yeah, thank you.

Speaker 1: Awesome. I'm going to repeat the question for the recording as well, those who aren't in the Zoom. Is there going to be a collapse of all functionality? This is uh this is sort of related to the lost and stream field discussion because we definitely have extremely long and nested pages. And yeah, navigation is super difficult and confusing. Love the sort of table of contents mini-map idea on the side, but something uh simple like collapse all blocks would be useful too. Um and you you definitely spoke to that.

Speaker 2: Cool.

Speaker 1: And one more, uh great work. Can the editor be used on production site now?

Speaker 2: Uh no, uh because we are still building it at this point in time. So people are writing the code as we speak and um uh we're expecting it to be included. We're expecting so in the next version of Wagtail, we are um hoping to include some changes. Um we certainly will be including some changes. changes in the um August release of Wagtail. So we do have some of the changes already merged into Core, including like the left slim sidebar. But yeah, it's one of those where Wagtail will be released at the point where it's expect it to be in early May um and it's really hard for us to commit features to releases so we prefer not to not to guarantee things like that. But I would say that that that's that's our aim and and um Yeah, we'll try and keep keep everyone updated basically.

Speaker 1: Awesome. Um, all right, we're at time. Um thank you so much, y'all. That was uh fantastic every time you do the presentation. Um Really excited to see it.