Improving the default Craft matrix field publishing experience
Craft matrix fields can be unwieldly once you've added a number of blocks. We've created a plugin to help
For bigger, content-heavy websites it sometimes make sense to create a “content builder” for your clients so that they can create their own page layouts.
There are some great posts on how to create a system like this with Craft but the gist of it is that you use a matrix field with a single “block” for each design element/component you want the client to be able to publish.
For example, here’s how some of our content maps to the blocks in our “content” matrix field used to publish this post:
The problem is that if you have a lot of these (say 5 or more), it becomes difficult to figure out exactly what each block does. You can name them sensibly (like “hero”, “rich text”, “callout” etc.) but as their numbers grow it gets hard to remember them.
There are some great plugins already in the Craft Store like MatrixMate and Spoon that help to organise your fields into more managable groups, but as your blocks grow it would help to be able to visualise what they’re going to look like.
That’s where Matrix Field Preview comes in.
Matrix Field Preview lets you configure all of your matrix field blocks in your Craft settings, allowing you to add a description and an image of the rendered block (ideally a screenshot).
Once you’ve added your descriptions and screenshots, you’ll have a totally new publishing experience when you go to edit your entries.
Instead of the regular dropdown, you’ll now see a modal appear with all the previews.
As well as the overlay, there’s also a smaller preview inserted to each existing block.
With these improvements it should make it easier for clients to add content quickly and confidently and take the guess work out of adding new blocks.