Can the flow of adding blocks have a more consistent design?

[JayBox325]

What are you trying to do?

Firstly, I'd love to see the ability to add blocks from the toolbar (apologies if this is already possible). As the + icon and command bar are learned UX, they're not initially visible until the user has used the WYSIWYG.

Secondly, there are two separate design patterns for the + icon and the command bar, it would be much cleaner if these were consistent.

What's your proposed solution?

Use the same component for the + and command palette or at least bring the design styles a bit more in line so they're similar.

Additional context

No response

[engram-design]

It's not actually possible amazingly enough (to add blocks from a toolbar button), but very easy to add - good thinking. You can also set "Block Type Picker Behaviour" to be "Hover" which can help show the add icon. We can't have it always visible because we don't know where it make it visible at a given point. Bit of a convo about it.

As for the different UI pattern for the command palette that's because they do slightly different things. With the command palette you can pick a node to add, or a Vizy block. I know we should probably consilidate that in some fashion, but they do have different things. We didn't want to cram adding nodes into the Vizy Block picker, as that'd just be a lot of options there.

So it's certainly a design choice, but happy to review it.

[JayBox325]

That would be a great addition, mate. I really like style from how Sanity do this, I'll also shift the behaviour to be hover which will help, with the UX, you're right.

When it comes to the consistent design, I think there's some small things that can be consistent like:

• the background shades of grey to be the same
• icons are black in one, grey in the other
• one is 16/9 (or thereabouts) and the other is long list items

For me, I'd just make the colour palettes similar but also lean on the list view, which will help where my "Embed Instagram Post" is spreading over 3 lines with the 16/9 view. I think splitting 4 items into two columns with empty space on the right could be improved, too. I'd say they should be stacked on top of eachother in a list until it hits 6 items then becomes a scroll block (or then split to two columns), and I'd retain the groups. So if I added list formatting etc to my command bar, I'd end up with:

Media

• Image
• Video

Social

• Embed Instagram Post
• Embed Tweet/Post on X

Formatted Text

• Ordered List
• Unordered List
• Blockquote

Something like that would look good. Finally, I'd probably lean on the core CraftCMS popout styling to keep it consistent with the rest of the CMS:

[engram-design]

Good call on the Sanity comparison, I haven't checked in with that for a while now.

I've even been on the fence for some time about the current block-picker in its 3-column iteration. It takes up a lot of space which I think could be improved as horizontal icon-label combinations. Either a single column like Sanity (with an inclusion of search filtering at the top), or two columns. I was going to leave this UI change for a breaking release with Craft 6, but we'll see!

Appreciate the feedback, and agree a review is in order for sure. At the very least, a consistent command palette and block picker. It'll probably be different to the Craft popout style, purely because it's a different UI component, but similar of course.

[JayBox325]

This sounds like a good solution. I'd possibly consider making the search only appear if there's more than 6 blocks or something, as it's a bit redundant if there's only 2 or 3 items. I'm not sure when Craft 6 is going to be released but we wouldn't be migrating to it until at least 6.1/6.2 to avoid any major bugs which wouldn't be until well into 2026 I'm assuming, so if this could potentially be brought forward to Craft 5, I'd really appreciate it!