Add initial block patterns

[melchoyce]

Twenty Twenty One will come packaged with several block patterns. Here's a couple to get us started.

---

• Two images showcase

• Full-width block
• Maybe a media and text block, where instead of text, we show a second, smaller, framed image?

---

• Overlapping gallery

• Wide-width block
• Maybe every third image overlaps every second image? Or horizontal images always overlap vertical images? We'll need to play with this in code to determine the best approach.

---

• Image underlapping text box

• Wide-width block
• Image block
• Overlapped by a paragraph in a container with a border

---

• Media & Text article title

• Width-width block
• Media and text block with a border. The text includes an H2, short separator block, and a small paragraph

---

• Portfolio list

• Width-width block
• Separator, H2, tiny image

---

• Large text

• 144px paragraph block, 300 font weight

---

• Two overlapping blocks of text

• Wide-width block
• Extra large paragraph in the first block, large paragraph in the second

---

• Link CTA

• Width-width block
• Group or cover block with a border
• 96px paragraph block, 300 font weight
• Spacer block?
• Columns block
• Left column: social media links
• Right column: email link

---

You can view all of these block patterns in Figma: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=269%3A68

As more pattern designs come in, we'll likely end up modifying or removing some of these initial patterns, but they should be good to get us started.

[carolinan]

How would you feel about keeping the "alternating posts" that is used in Seedlet?
This one:

[carolinan]

Question on best practice: Should images be included in patterns, or be empty?

[melchoyce]

I don't know that the alternating posts pattern from Seedlet works stylistically with this theme, so I'd remove it.

Question on best practice: Should images be included in patterns, or be empty?

Do we know who the best person to answer this question is?

[kjellr]

Large text
144px paragraph block, 300 font weight

Anyone have ideas for how to implement the font-weight setting for this one? Block patterns don't come with their own CSS class, so we can't assign it in the stylesheet. And selecting a light font weight is not possible in the editor currently. 🤔 We could add a custom class ourselves, but I feel like users aren't going to notice that's there and it may cause confusion.

[melchoyce]

Yeah, we might be out of luck there 😕

[carolinan]

When you say, we can add the custom class ourselves, do you mean using the additional CSS class field?
Why would that be confusing? In case they want to remove the font weight?

[kjellr]

When you say, we can add the custom class ourselves, do you mean using the additional CSS class field?
Why would that be confusing? In case they want to remove the font weight?

Yeah, it's a hack. Users definitely won't know it's there.

[LittleBigThing]

Large text
144px paragraph block, 300 font weight

Anyone have ideas for how to implement the font-weight setting for this one? Block patterns don't come with their own CSS class, so we can't assign it in the stylesheet. And selecting a light font weight is not possible in the editor currently. 🤔 We could add a custom class ourselves, but I feel like users aren't going to notice that's there and it may cause confusion.

Couldn't a light font weight be part of a paragraph block style?
I think though that a light font style may not be visibly distinctive in each system font?

[kjellr]

Couldn't a light font weight be part of a paragraph block style?
I think though that a light font style may not be visibly distinctive in each system font?

Yeah — using a block style of it feels a little weird in general, but you make a great point about how some system fonts in the stack may actually not have a light variant to swap out with. In that case, the user wouldn't notice any difference between the normal + "Light" block styles. 😕

[melchoyce]

Yeah, we might just need to go with regular weight here.

[carolinan]

Why do users need to know that the additional class is there? It is not a problem for other block styles, like
"is-style-twentytwentyone-border"

[carolinan]

Is adding a class to patterns something that you want to move over to the Gutenberg repo?

[kjellr]

Why do users need to know that the additional class is there? It is not a problem for other block styles, like
"is-style-twentytwentyone-border"

That class is added via a block style though, so while it is invisible to the user, they have standard Gutenberg UI to add and remove it.

Is adding a class to patterns something that you want to move over to the Gutenberg repo?

I don't think so. There is a standard practice for doing so (block styles). The problem is mostly that it doesn't quite make sense for us to adopt that for font weight here. There's already a PR for font-weight, and that's all we need to get this implemented in a standardized way: WordPress/gutenberg#24978.

[carolinan]

Block patterns can add CSS class names that are visible in the additional CSS class field too.

[melchoyce]

Since we're finding that it'll be difficult to do text overlaps, it might be nice to sub in this one instead:

<!-- wp:columns {"verticalAlignment":null,"align":"wide","className":"is-style-twentytwentyone-columns-overlap"} -->
<div class="wp-block-columns alignwide is-style-twentytwentyone-columns-overlap"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":181,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://twentytwentyone.local/wp-content/uploads/2020/10/vangogh-02-002.jpg" alt="" class="wp-image-181"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:group {"className":"is-style-twentytwentyone-border","backgroundColor":"green"} -->
<div class="wp-block-group is-style-twentytwentyone-border has-green-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"fontSize":"extra-large","style":{"typography":{"lineHeight":"1.4"}}} -->
<p class="has-extra-large-font-size" style="line-height:1.4">Beautiful flowers painted by Vincent van Gogh in the late 1800s</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":24,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://twentytwentyone.local/wp-content/uploads/2020/09/DP346475-811x1024.jpg" alt="" class="wp-image-24"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[melchoyce]

This should be good now! Closing.