Cms: Matrix block enhancements: options for compact instructions and field collections

[watershed]

Big fan of Matrix blocks, but they can easily become spatially extravagant when a block requires a large number of fields. Here’s a couple of ways that could _optionally_ be mitigated at the system designer's discretion:

1. Assign a compact mode to instructions, so that they present and behave like the i symbol does for Assets field instructions:
   
   
   
   • My thought is that this should be a global setting for the field, not a per block type setting
   
   
2. Assign contiguous block fields to a layout collection so that they are wrapped by a containing <div> with a collection name:
   
   
   
   • This would facilitate modern layout techniques such as display:flex or display:grid within custom Control Panel CSS, as opposed to having to use more flaky techniques like float:left
   
   
   • Consider, for example:
     
     
     
     
     
     • A sequence of horizontally compact date, time and dropdown fields.
     
     
     
     • Because they have no wrapper element other than the block's div.fields, they have to be floated left of each other within a media query, and then the following field have that float cleared.
     
     
     
     • Whereas because field types such as checkbox groups have a wrapper for their options, these can be elegantly laid out with display:flex.
     
     
     
     • Image attached illustrates some example spatially compact field layout. The first row of 4 fields uses float:left with margins. It works but offends my sensibilities! The ‘People data to show’ row exploits the existing container with…
     
     
     
   
   

.matrixblock[data-type="item"] .checkbox-group {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    grid-gap: 1.5em;
}

[ShaneHudson]

I have no preference for how this is achieved but the size/sameness of every matrix has been one of its few weaknesses so something like this would be very welcome!

[watershed]

Re suggestion 2…

Using the Control Panel CSS plugin, I’ve managed to effectively lay out a Matrix field’s blocks with CSS Grid template areas (snapshot of Sass source and desired outcome attached). With that technique, there's plenty that can be done with the existing .fields > .field structure. So I think my second request above for a layout collection is redundant.

---

My first request for compact field instructions remains on my wish list though.

---

[brandonkelly]

Just added the ability to customize the widths of Matrix sub-fields for the next Craft 3.5 release, similar to how normal fields’ widths can be customized (see https://github.com/craftcms/cms/issues/2644#issuecomment-656955838).

The idea for a compact UI mode is covered by #3407, so you can subscribe to that issue to follow along with progress.