Create block patterns for WordCamps

[ryelle]

Let's create some block patterns for WordCamps! There are common content patterns across sites that could be shared as block patterns.

Share ideas, screenshots, or pattern code on this issue.

[ryelle]

Basic Speaker Grid

Code

```html

---

```

[melchoyce]

Took a stab at some header and homepage cover patterns:

Headers

Code

```

April 16–17. 2022 • City Conference Center

[Buy tickets]()

---

```

Code

```

April 16–17. 2022 • City Conference Center

---

---

```

Homepage Covers / Hero Areas

https://search.openverse.engineering/image/725ed34a-f2fd-46e8-9d05-02e47b399163

Code

```

WordCamp Location

April 16–17. 2022

[Buy tickets]()

```

https://search.openverse.engineering/image/8d620669-d046-4075-99dc-2d24831ddbaa

Code

```

WordCamp Location

April 16–17. 2022

[Buy tickets]()

```

https://search.openverse.engineering/image/0bdbe597-13e1-4076-8438-de25b492979f

Code

```

WordCamp Location

April 16–17. 2022

[Buy tickets]()

```

Code

```

WordCamp Location

April 16–17. 2022

[Register]()

```

[melchoyce]

Speakers

Code

```

```

---

Code

```

```

---

Code

```

---

---

```

---

Code

```

---

```

[melchoyce]

Sessions

Code

```

---

```

---

Code

```

---

```

[critterverse]

These look awesome @melchoyce, we took a quick look during the Design Team Show & Tell call today.

A few notes that came up:

• Some of the cover patterns shared here could potentially use a lighter color for the green buttons that are placed on top of images — they seem a bit hard to distinguish against the background image
• For the first design shared at the top of that same comment — if possible, the headline and date/location text could move closer together so they are more aligned with the button on right
• In general, folks are big fans of the simplicity — so nice and clean! 😁

[melchoyce]

Thanks, totally agree! These patterns are currently inheriting theme styles, so some of the weird styling is coming from that.

Some of the cover patterns https://github.com/WordPress/wordcamp.org/issues/756#issuecomment-1096937986 could potentially use a lighter color for the green buttons that are placed on top of images — they seem a bit hard to distinguish against the background image

Definitely. The green in this case is the theme's default color. Instead of using the default color, I could make the button white. Do you think that would work better overall?

For the first design shared at the top of that https://github.com/WordPress/wordcamp.org/issues/756#issuecomment-1096937986 — if possible, the headline and date/location text could move closer together so they are more aligned with the button on right

100% agree, this was driving me bananas. The huge margin on the heading here is coming straight from the theme, and there wasn't a setting to turn on to change that to something custom. In some themes, this will look fine, but in this case the margin is way too large. Do you know if there's any new workarounds that would fix that?

[critterverse]

These patterns are currently inheriting theme styles, so some of the weird styling is coming from that.

I figured as much 😁

Do you know if there's any new workarounds that would fix that?

I don't think so just yet but there should be soon based on new functionality that already shipped in the Gutenberg plugin. Once available, you could try grouping the Heading and Paragraph into the new Stack block (a vertical flex-box variation on the Group block). Then from the Stack block, you should be able to adjust the block spacing from the Dimensions panel.

[melchoyce]

Once available, you could try grouping the Heading and Paragraph into the new Stack block (a vertical flex-box variation on the Group block). Then from the Stack block, you should be able to adjust the block spacing from the Dimensions panel.

Exxxxxcellent. I can make an updated version of the pattern when that's out!

[critterverse]

@melchoyce just realized that the block spacing control is already available on the regular Group block 🎉