Improving the default Craft matrix field publishing experience

For big­ger, con­tent-heavy web­sites it some­times make sense to cre­ate a ​“con­tent builder” for your clients so that they can cre­ate their own page lay­outs. 

There are some great posts on how to cre­ate a sys­tem like this with Craft but the gist of it is that you use a matrix field with a sin­gle ​“block” for each design element/​component you want the client to be able to pub­lish.

For exam­ple, here’s how some of our con­tent maps to the blocks in our ​“con­tent” matrix field used to pub­lish this post:

The prob­lem is that if you have a lot of these (say 5 or more), it becomes dif­fi­cult to fig­ure out exact­ly what each block does. You can name them sen­si­bly (like ​“hero”, ​“rich text”, ​“call­out” etc.) but as their num­bers grow it gets hard to remem­ber them. 

There are some great plu­g­ins already in the Craft Store like Matrix­Mate and Spoon that help to organ­ise your fields into more man­agable groups, but as your blocks grow it would help to be able to visu­alise what they’re going to look like.

That’s where Matrix Field Pre­view comes in.

Matrix Field Pre­view lets you con­fig­ure all of your matrix field blocks in your Craft set­tings, allow­ing you to add a descrip­tion and an image of the ren­dered block (ide­al­ly a screenshot).

Once you’ve added your descrip­tions and screen­shots, you’ll have a total­ly new pub­lish­ing expe­ri­ence when you go to edit your entries.

Instead of the reg­u­lar drop­down, you’ll now see a modal appear with all the previews.

As well as the over­lay, there’s also a small­er pre­view insert­ed to each exist­ing block.

With these improve­ments it should make it eas­i­er for clients to add con­tent quick­ly and con­fi­dent­ly and take the guess work out of adding new blocks.