Author Experience working with Matrix Blocks

[jan-dh]

While I'm a big fan of Craft CMS in general and matrix blocks and the functionality it gives me as a developer, I get a lot of complaints from people who actually have to work with them. They love the functionality but some of the main points of feedback I get on a regular base:

1. Drag and drop on a large page is very clunky. The moment you drag a block a couple of spots it's sometimes really hard to navigate. If the blocks are large you can't identify the top/bottom block where you're dragging them over. Auto-collapsing when drag'n dropping would solve a lot of these issues I think. An alternative could be that you actually drag and drop it on a sort of mini-map, the way you see in some code editors. That would make it easier to reshuffle them over a big page.

2. Blocks tend to look a lot like each other and there's no real way of making a visual distinction between them. Maybe the possibility to add a background color, adding an image with a little preview or a small twig template option to make a preview with the actual component code would make it easier for different blocks to stand out.

3. In general the design of a matrix block feels a bit heavy, so when you're working on a laptop (which a lot of people do these days) it's often hard to get all the fields on your page (and this is after the use of something like Matrixmate already, using different tabs).

The reason for this discussion is to make the matrix block's author experience just as awesome as it is for the developers experience. It's one of Craft's strongest and most flexible features, I want to provide all the possible feedback so it can shine in all it's glory 🚀.

[thupsi]

I feel like points 2 and 3 are very probably going to be covered when the new Matrix UI modes are implemented in 4.0 (see roadmap).

As for the drag and drop functionality, I agree that it has room for improvement. I have observed this kind of problem not only in Craft but in many other platforms where you need to reposition an element in a long list, especially when scrolling comes into play. It can become frustrating in general but - most importantly in my opinion - it results in reduced accessibility.

Of the top of my mind I can't remember a great working example with a solution to this, but I would suggest to replace drag and drop with clicking.

Something like this:

• Click a new option/button to cut/copy current block, or even use a keybord shortcut
• The gaps between blocks are highlighted and made clickable
• Click the gap/position where the current block is to be moved/copied

I also think the above mentioned Matrix UI modes will make drag and rop easier if they present us with a way to have a more compact matrix "block list". (see this recent discussion)

Anyway, P&T have a proven track record of prioritizing such authoring "frustrations", so I'm sure they will solve this sooner rather than later.

[brandonkelly]

Yep what @thupsi said. In the meantime, you might want to check out plugins like Spoon and Matrix Colors.

[mattcdavis1]

@brandonkelly

I think Craft should take some cues from Wordpress' block editor experience. Specifically:

• WP creates a fully dedicated context for editing which allows for use of the right and left screen-area for editing functionality
• The structure map is useful
• The panel on the right side area is great for things like settings (i.e. margin, padding, background color etc) so that the main content area can be more focused on content.
• Having searchable blocks with icons and categories in the left panel area is also great and also allows for easier 3rd party block integration

[thupsi]

It's kind of a balancing act. I think WP has opted for a "page builder" or "lego" approach, so the UI is more optimized for this scenario. On the other hand Craft follows a less opinionated, more flexible philosophy where the "edit" screen is not trying to mimic the front-end, but is tailor-suited to the content model of each individual section/entry type.

I prefer Craft's approach for more custom builds. It frees me as a designer/developer to think outside the box (and that for me is the fun part of design).

Having said that, the matrix AX is due for an update, and there are various bits and pieces from other systems that could serve as inspiration: Wordpress, Statamic, Kirby, Webflow to name but a few. The good news is that several improvements are allready in the works. Details have not been announced yet, but I'm optimistic that we will learn more during the upcoming DotAll conference. 😊

[mattcdavis1]

I think the page builder / lego approach is basically an improved version of what Craft already has in Neo and Matrix. I think the WP approach in this respect provides more flexibility not less. The main difference being that the UI context in WP changes to fully focus on the editing experience which I think is better UX than Craft's approach of maintaining global UI while editing.

[thupsi]

I see where you're coming from. I was talking more about Craft in general, meaning that it's almost an app framework, not just a pagebuilder. Since this discussion is specifically about Matrix, you're more on the point!

Some of the things you are suggesting do strike me as too opinionated for my liking (such as "content in the center, settings on the right"), still it's a nice discussion to have! I fully support the idea of a macro/structure view for matrix!

I would also like more customizability in the CP in general, exactly because there are many different workflow/project types, but that's me going off-topic again!