Revisit + expand the bundled block patterns

[kjellr]

Update May 11, 2021:

We've revised the initial set of patterns, but will continue to use this thread to brainstorm and design additional patterns. These will continue to be bundled with the plugin for now, but we'll eventually migrate them over to the pattern directory at launch.

---

#20345 added a set of ten bundled block patterns to Gutenberg. These have been included for a while now, so it would be a good idea to revisit these.

• Are there any other common patterns that we should consider including?
• Is the imagery and text here still fine? Can/should we update it?
• Should any of these patterns be removed?

Current Patterns

[melchoyce]

Some ideas for existing patterns:

• I think it's worth toggling on the 100% vh setting for one of those cover blocks, maybe the image background one ("large header with a heading") for maximum impact?
• Can we make "two columns of text with images" wide-width? Feels cramped as it currently is. It won't work in themes that don't support wider alignments, but it'll be an improvement in themes that do.
• Do we really need both two and three button patterns? Could we remove the three button pattern?

[kjellr]

I think those are great points.

For the button patterns, I suggest we try using the button width settings: The two buttons pattern could use two 50% width buttons, and then maybe we have another pattern that has a handful of 100% width patterns stacked.

[melchoyce]

...then maybe we have another pattern that has a handful of 100% width patterns stacked.

That's a good idea 👍

[beafialho]

Regarding the existing block patterns, I think they're fine. For visual coherence though, I'd suggest updating or removing "Large header with a heading and a button". Vivid red looks totally separate from the rest. In the other patterns there's a magenta tone that could be used, or even a background image, which would be more interesting. Besides that, I think many more patterns could be added.

[melchoyce]

@jasmussen had some particularly nice designs when patterns were first being explored: #20345 (comment)

I especially love these two:

[melchoyce]

Testing those two out in Twenty Twenty and Twenty Twenty One:

Might be worth tweaking the line-height on those headings, and it looks like there's some weirdness happening with image sizing and the separator in Twenty Twenty. Also looks like the dropcap setting wasn't retained when I copied over the code.

[beafialho]

Bringing back some of the categories mentioned in #20345, I’ve been working on a few patterns I thought could be of use in core.

These are separate experiments for now, that could be tweaked to fall in two pattern collections: one that could be “nature” themed, and another that could be “portrait” themed. Copy isn’t definitive either.

Hero

Text

Media & Text

Gallery

List

They can be seen live here.

[kjellr]

I love those two, @melchoyce. They seem great to include.

@beafialho your explorations are excellent too. I particularly love the trees ones. I think some of the other ones ("Freshly Baked" and the "Step One..." pattern) could make great replacements for some of the existing patterns.

It would be great to come up with a new theme for the copy and images. The current ones are all about Don Quixote, but I like the photographs I'm seeing here — in particular the geometric shapes/patterns, and the nature shots. Maybe we can try to center in on one of those.

[melchoyce]

The geometric photos were ones I had on my test site; @jasmussen, do you still have those nature shots you used in your original pattern designs, and do you know their licensing info?

[kellychoffman]

Lovely work. For the three column of text with buttons: would be nice to include a heading there, possibly a photo too.

I know some of it is theme dependent but the aesthetic of the patterns in the original comment pale in comparison to designs in the comments below it. For example - I'd be happy if I never saw those super round buttons again 🙃. I say - clean them all up.

[jasmussen]

do you still have those nature shots you used in your original pattern designs, and do you know their licensing info?

I would have thought I wrote those down :( I apparently did not. But I'm almost sure I found them on Pexels by searching for drone photography, the common theme between the photos being top-down landscape photography. https://www.pexels.com/search/drone%20photography/

[beafialho]

It would be great to come up with a new theme for the copy and images. The current ones are all about Don Quixote, but I like the photographs I'm seeing here — in particular the geometric shapes/patterns, and the nature shots. Maybe we can try to center in on one of those.

I've narrowed the ones above a bit and centered in those two subjects: nature and geometric. Maybe there's room for both categories? Here's how they look.

[kjellr]

These are looking great, @beafialho! I think it would make sense to narrow in on a single theme. "Nature" seems reasonable, considering Gutenberg already uses imagery of nature in block previews.

Just a few comments on my end:

1. The outlined button is just a little hard to read here against the background. Maybe we try using a solid-color button instead?

2. The line length for the paragraph copy here seems a little long — is this a wide block? If so, it might be worth making it a standard-width one instead. In addition, I think it would make sense to have each of the two sections include a headline, paragraph, and button.

3. If we remove the headline from here, it could be a new version of the "Two Images Side by Side" pattern. That seems like a good idea to me.

4. I think it would make sense to keep + refresh a few of the existing simple patterns:

• Two buttons
• Two columns of text
• Heading and a paragraph
• Quote

Would you mind trying to adapt those patterns to this new aesthetic? Thanks again, this is great work!

[beafialho]

Thanks for your thoughts @kjellr! I was just wondering what's the thinking behind having only one "theme"? Since we're not releasing themes any time soon, why don't we create several collections of block patterns? The ones above that @melchoyce worked on are also great options.

[kjellr]

Since these are all the default patterns, I think it's important for them to appear as a single cohesive set. When the current Core patterns were originally added they didn't share a common thread aesthetically, and it felt a bit random. You couldn't really use multiple patterns together unless you made a lot of edits to each one — changing the fonts + colors, etc. So we settled on this red/orange Don Quixote aesthetic to tie them together.

Having different sets of styled patterns could totally make sense, but I imagine that'll mostly happen either via individual themes adding their own patterns, or via the upcoming Pattern Library. In the meantime, I think it makes sense to swap out an overall aesthetic for all of the default patterns whenever we refresh them (like we'd be doing here going from Don Quixote to Nature). I think it might be worth trying the ones @melchoyce worked on with this nature-theme too.

[melchoyce]

Here's the jumble:

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Sea id autem nominavi deseruisse</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size"><strong>Big Title</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.38%"} -->
<div class="wp-block-column" style="flex-basis:33.38%"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33%"} -->
<div class="wp-block-column" style="flex-basis:33%"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":1830,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://mywptesting.site/wp-content/uploads/2020/03/jude-beck-J1noPUvNx9s-unsplash-683x1024.jpg" alt="" class="wp-image-1830"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.62%"} -->
<div class="wp-block-column" style="flex-basis:33.62%"><!-- wp:image {"id":1835,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://mywptesting.site/wp-content/uploads/2020/03/autumn-studio-PaM7SD5wM6g-unsplash-683x1024.jpg" alt="" class="wp-image-1835"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"67%"} -->
<div class="wp-block-column" style="flex-basis:67%"><!-- wp:image {"align":"right","id":1834,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignright size-large"><img src="https://mywptesting.site/wp-content/uploads/2020/03/ashkan-forouzani-89Hx_F0t-8I-unsplash-1024x683.jpg" alt="" class="wp-image-1834"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33%"><!-- wp:paragraph -->
<p>Eu integre accusata prodesset est, sed te impetus gubergren conceptam, ex sed wisi nostrum ocurreret. Esse velit omittantur ius te, alii dissentias ei vis. At sed unum veritus fabellas. Te volutpat appellantur duo. Ad natum fuisset intellegebat eam, causae invidunt usu id, et vis impetus appetere.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

Text columns:

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size"><strong>Sea id autem nominavi deseruisse</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer {"height":53} -->
<div style="height:53px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[kjellr]

I think it would make sense to narrow in on a single theme.

Contrary to my earlier note here, I think it probably makes sense to spread these out to cover a variety of topics.

I had a good chat with @mtias and @pablohoneyhoney this morning about it, and they convinced me to change my mind. The original bundled patterns were mapped to a singular topic, but since then we're learned more about how patterns are supplied to users: Themes tend to provide sets of patterns mapped to a specific style, and the upcoming Pattern Library will likely also contain groups of patterns tied to specific topics/uses.

The bundled patterns we’re creating here should be widely appealing, so it makes sense to have them focus on a diverse range of topics. (That also makes it easier for us to find/choose images! 😄)

In terms of those topics, @pablohoneyhoney suggested drawing from history whenever possible. I also think think art and architecture is full of great imagery and inspiration. We should probably stay away from anything that makes folks a little wary (I’m thinking of the mentions of drones in the mockups above).

I think we have a good diverse group of options in the mockups above, so let's just prune these down to some favorites and launch them. If we need to add/remove a few, we can do that once have them all together. 👍

[pablohoneyhoney]

Just to be clear on the "history" piece, I don’t mean this to be a tacit topic, but more a hidden conceptual thread that can guide us internally throughout topics, no need to make it explicit or unified. History can’t be narrowed to a topic as it is variable by design and has pretty much everything, but needs to be meaningful for all. It can be about civilizations, cities, architecture, art, literature, social movements, natural changes, places... anything with enough historic goodness and significance.

Which also defines a slight difference with areas like Dotcom, where the present design zeitgeist is more relevant.

[beafialho]

It can be about civilizations, cities, architecture, art, literature, social movements, natural changes, places... anything with enough historic goodness and significance.

Given the last round of feedback, I've worked on three different topics: Art, Architecture and Nature.

I think it would make sense to keep + refresh a few of the existing simple patterns.
Two buttons, Two columns of text, Heading and a paragraph, Quote
Would you mind trying to adapt those patterns to this new aesthetic?

I've included the adjustments mentioned by @kjellr and have adapted the existing patterns to these topics.

Below are also the image source URL's.

Art

• Hero Section
• Media & Text
• Text
• List
• Two columns of text

https://artvee.com/dl/venus-rising-from-the-sea
https://artvee.com/dl/ninos-en-el-mar-playa-de-valencia-children-in-the-sea-valencia-beach

Architecture

• Heading
• Gallery
• List
• Media & Text
• Heading and a paragraph
• Two buttons

https://pxhere.com/pt/photo/714046
https://pxhere.com/pt/photo/99094
https://pxhere.com/pt/photo/997338
https://stocksnap.io/photo/abstract-background-C7E4WYWEHZ

Nature

• Media & Text
• Two Images side by side
• Quote

https://pxhere.com/pt/photo/726223
https://stocksnap.io/photo/ocean-coast-IM8T5HVXU0
https://stocksnap.io/photo/nature-green-66J4T150FP
https://pxhere.com/pt/photo/153393
https://pxhere.com/pt/photo/1100731
https://stocksnap.io/photo/windmill-mountain-56RKHNDUQ2
https://stocksnap.io/photo/nature-landscape-ZD6WAL4LGT
https://stocksnap.io/photo/coast-cliffs-H17J2YTARL
https://stocksnap.io/photo/people-girl-HQR8BJFZID

[beafialho]

A little correction to the Art patterns: I've replaced the artworks that showed nudity.

https://artvee.com/dl/shore-with-blue-sea
https://artvee.com/dl/sunset-at-sea-after-a-storm

And removed the captions to the Two Images Side by Side pattern:

[kjellr]

These look excellent, thank you, @beafialho! I think these are good to go — would someone like to volunteer to build these in? Once we have a PR open, we can go ahead and try to get the images added to the CDN.

[beafialho]

I've pasted the patterns code here.

[beafialho]

Forgot to paste the Buttons pattern within the Architecture collection. Here's the code.

[ntsekouras]

Just noting that the revisited patterns should keep in mind to avoid or minimize the deprecated markup used. Related: #30985

[kjellr]

I'm going to close this one for now, since #29973 has merged. The second part of this will be merging into Core (and removing from Gutenberg), but we have a trac ticket to keep track of when that needs to happen. 👍

[kjellr]

I'm going to reopen this so we can use it to continue designing patterns for inclusion in the Pattern Directory at launch. Please continue sharing ideas!

[youknowriad]

I'm removing this from the "must-have" board since the first iteration landed and the patterns are now part of the directory and can be iterated on independently from the release cycle.

[critterverse]

I made a 404 page design for one of the previous FSE calls for testing that could potentially be turned into a pattern if we're still looking for ideas. Here's a slightly simplified version:

Cover block → Cover block → Column block:

• Left column: Cover block with inner Paragraph (Image)
• Right column: Heading, Paragraph

Let me know if less nesting would be preferable 😁

The backgound is based on a Hero Patterns texture so I think it should be ok for use but I can source something else if not!

[mtias]

@critterverse is this issue something that's still active?

[critterverse]

Closing this issue since it was meant for preparing the launch of the Pattern Directory and is no longer active.