Idea: Support predefined setting/style combinations for Blocks (almost like single-block patterns)

[MadtownLems]

Notes: This post has been significantly updated to include a mockup and a clearer example.

What problem does this address?

It feels like there's a missing utility when configuring Blocks on a page: the ability to choose from a variety of pre-defined settings and styles that only involves a single block, which still let the user tweak one or more bits at their discretion.

What is your proposed solution?

Introduce a new concept that lets users quickly toggle between and select suggested settings and styles for an individual block, but still lets them fine tune it from there. Clicking one on the control for one of these buttons would immediately update the appropriate UI controls to a set of predefined values. (My internal working name is "Style Shortcuts" but I'm not married to that by any sense.)

In this example, I'll use The Icon Block from @ndiego (https://wordpress.org/plugins/icon-block/)

The Settings and Styles for the Icon Block are amazing, and let users configure the block in a lot of cool ways - all of which can be done directly with the UI. We'd love to offer our users a variety of starting points for styling their Block, but still let them retain final control (to easily tweak sizes, dimensions, colors, etc). All of the following are accomplished with the native UI, but currently require updating several attributes (in addition to enabling the panels for said attributes).

Again, clicking on any of these would simply update the associated UI controls to defined values, letting the user continue to tweak things from there. For example, clicking on "Circle Border" would set the following in the UI:
Border Radius: 50
Border Radius Units: %
Border Width: 4
Border Width Units: px

In each of these cases, the user is free to tweak things to their content; perhaps they want to thicken the border radius or set a color for it. It's kind of a pattern for the single block. Another way of thinking of them is predefined "styles" that can be used as sources to "Paste Styles" from.

@talldan asked if these would be registered through an API or by a user on the site, and I will admit that my original vision was for registration through the theme/plugin, but I believe the idea of user generated ones has a ton of potential l (similar to how Block Patterns can be registered either through the API or by users on site). It would effectively let users "favorite" how they style blocks, to easily use them across the site in other places.

Why can't you just use Styles?

Frankly, I believe Styles have a lot of issues that I won't go too deep into here, but they are rarely a great option. They involve technical debt: we must continue to support is-style-foo forever. Styles also often overlap with UI controls, having CSS rules for things that could/should be set in the UI.

Why can't you just use Block Patterns?

Because the Patterns interface already gets cluttered, and block patterns are only for inserting NEW content - this is for tweaking content that's already been inserted (and may even have Inner Blocks already in it). In the Icon Block example, I would probably want to insert the block, then choose my specific Icon, and then start mucking with the various settings to see how they look with the specific icon I selected. While The Icon Block doesn't support Inner Blocks, this idea can easily extend to blocks that do. Perhaps I want to create a bunch of content inside my block, then toggle through various style shortcuts for my container to see what looks best (and then still tweak it).

Why can't you just use Block Variations?

I will admit that "under the hood", this is very similar to Block Variations. The main difference here is the UI and user experience. I believe that treating these minor display differences as separate blocks is overly confusing and unnecessary. It's not really a different block - it's just a predefined set of styles for the block. It might be possible to tie this into the block variant architecture.

[talldan]

@MadtownLems This sound very much like the existing block variations feature.

Do you envision this being something a user can configure or something that is set via an API? Block variations can already be registered via an API, but there's no user interface for adding/removing them (I'm not sure if there are any plugins that explore this idea).

[MadtownLems]

Do you envision this being something a user can configure or something that is set via an API?

My original vision was something set by theme/plugin developers, but the idea of letting users configure them makes this even more intriguing of a possibility to me - similar to Block Patterns, which can be registered either by theme/plugin or by users. If users could register them, it would effectively let users store 'favorites' of how they configure blocks for use across Pages and Posts. I love it!

As for Block Variations, I probably should have addressed "Why can't you just use Block Variations?" in the original post, but the answer is basically a combination of the other "why nots". Block Variations clutter up the Block Inserter, don't really help with existing blocks (only new blocks), and they also carry technical debt (you must manage them forever) - in addition to them being a different/worse user experience for the user.

[talldan]

My original vision was something set by theme/plugin developers, but the idea of letting users configure them makes this even more intriguing of a possibility to me

It's definitely an interesting idea. I think the variations API could possibly achieve this. I think it's something that would be good to get design feedback on.

Block Variations clutter up the Block Inserter

You should be able to control whether a variation appears in the inserter using the scope property:
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/#defining-a-block-variation

I think it gets interesting for blocks like group, where core is already registering opionated variations (row/stack).

don't really help with existing blocks (only new blocks)

Could you elaborate on this point? Variations can appear almost like an entirely new block (like the group has row/stack variations), but they can also appear in a few different ways (as transforms or as options in the block inspector).

and they also carry technical debt (you must manage them forever)

I don't think this is true, you can remove a block variation and I think everything should still work. The variation is essentially just a preset of attributes, so if the variation is removed, those attributes can still exist on a block.

[MadtownLems]

@talldan Thank you so much for engaging and for the feedback. After sleeping on it and getting some feedback, I've significantly updated the original post, and have attempted to address your points and answer your questions within it.