WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.47k stars 4.18k forks source link

Block Patterns: Some ideas for continued evolution (variants and variables) #59515

Open MadtownLems opened 7 months ago

MadtownLems commented 7 months ago

What problem does this address?

Block Patterns rock. We love using them, and our content providers do, too. I had a few ideas that I wanted to throw out to perhaps extend them. I'm by no means a UI/UX expert, but perhaps there are some nuggets here that someone can run with. The "problem" that some of this might fix is making patterns more flexible, and preventing us from creating and maintaining too many patterns, as well as flooding the interface with too many similar patterns.

What is your proposed solution?

Variants: Let's say you have a Block Pattern that represents a simple 2 column layout. The first column is an Image. the second column is a Heading, Text, and Button. pattern-left

We'd also like to offer this in a right aligned way. It's 99% the same, with the columns switched and some alignments modified. pattern-right

There are countless other variants imaginable. Perhaps you want variants where the photo column is 25%, or 33% instead of 50%. And you still want to offer all this in both left and right aligned. That's 6 different block patterns cluttering the UI for what is a very similar block pattern.

What if there was a single Pattern shown in the UI, with a visual indicator to say (6 Variants) that could be easily browsable and selected?

Variables: Some of our most commonly used block patterns represent a simple full-width group with a background color, heading, etc.

backgrounds

This one offers white and gray Variants. (See above for how that could probably be improved ;) ) But another idea is to prompt me for how MANY of the block pattern I want to insert, with the extra bonus of being able to have them modified slightly. These block patterns are typically used in an alternating fashion: white, gray, white gray. It's so common that we have ANOTHER block pattern for inserting multiple like that. sections

Again, that's 3 separate block patterns clunking up the UI for what is all very similar. Imagine, instead, if upon selecting the one block pattern, it prompted you something like: how many sections would you like? The user selects, say, 5 - and then 5 sections are introduced, each with alternating background colors.

colorful-tones commented 7 months ago

@MadtownLems I wonder if some of your ideas might overlap with #59404? 🤔

If so, consider copying your commentary over there and closing this out. I do not want your suggestions to get lost, and just a suggestion. Love the ideas and input, and feel free to leave this as is. 🫶