This week we are going to go through a great way to organise field panels in order to streamline the editor experience. We will also go through a quirk with inline panels and their buttons and also the decision making process of naming and grouping related field panels.
Hello and welcome to this weeks instalment of Wagtail Wednesdays. In todays video we are going to take a look at multi-field panels and how we can organise them in a way to make the editing experience a lot more streamlined.
To demonstrate this, we are going to use one of our blog post pages. On this page we have a page title, main content area, author and recommended posts. If we look at the admin view we can see that the fields aren't currently grouped together and could be organised better. A good example of this is the recommended posts at the bottom of the body section. In order to improve the editor experience we can organise the different sections using multi-field panels.
Let's have a look at our current code and start to organise it better. Here we have all the fields within a single content panel. They aren't grouped or organised into related items. Let's go ahead and change that. So, first of all let's look at how we can group certain fields together. I think we can have a section named 'post details' that could contain the summary, the post date, the categories, the featured post checkbox and the cover image that's used on the blog index page.
So let's put these together in a multi-field panel. The first thing we will need to do is add the multi-field import to the top of the page from wagtail.admin.edit_handlers. Now we can create our multi-field panel which will house the fields we mentioned earlier. Let's add these field to the panel. A multi-field panel also has the options for a heading and the ability to be collapsed, which can help organise the admin area further. So, for this section we will call it 'Post Details' and we'll make the panel collapsible. If we look at our admin view now we can see our post details section with the fields we placed within it.
Next, we can do the same for authors. For this particular field we are going to place it within it's own multi-field panel as there may be multiple authors. Inline panels can get lost when placed with other fields in multi-field panels as the inline panel title doesn't appear. We like to keep inline panels separate and in their own multi-field panel.
This can be seen here when the post authors ‘add’ button was placed underneath the featured checkbox. So let's go ahead and add another multi-field panel for post authors and do the same as before by adding a heading and making the panel collapsible. As we can see, this change makes the admin view much better. It's really obvious where to add the authors.
We can go one step further and add a label to the inline panel button to make it even more obvious. In this case we can just add the word author as the default already inserts the word ‘add’.
We are going to do the same again for the main body content. We can place the body content within its own section as it contains separate Streamfield Blocks which are labeled and are self explanatory as to what they are.
Last of all we have the recommended post section as this field is made up of an inline panel. It again has the same issue as the authors field. We can't really tell what the button is for straight away, so let's add it to it's own multi-field panel as we did for authors and give it a better label.
The last thing we are going to do is take a look at how we can set a multi-field panel to collapse by default when the editor first comes to the page. Again, this is really simple and can be done by adding both collapsible and collapsed to the classname attribute. By doing this we can immediately show the most important fields that the editor needs to focus on and we can make other less important, or equally more advanced fields, organised neatly in a collapsed section.
The goal here is to try and make the editing experience as simple as possible. If we can remove any friction points for the editor by making simple changes, we can increase efficiency and save time.
So there we have it. A quick insight into how we can use multi-field panels to neatly organise sections and improve the editor experience. If you enjoyed this instalment of Wagtail Wednesdays please consider liking and subscribing to our channel. You can also sign up to our mailing list for early access to our videos and you can find the link in the description below. Thanks and see you next time!
Want Early Access To Future Videos?
Want Early Access To Future Videos?
Pop your email address in the box below and receive new videos before everyone else!
Thanks for subscribing!
Look out for the early access links in your inbox.