Design bundled Template Part patterns

[kjellr]

Paired with the work in #31155, we should consider exploring various patterns for Template Parts. Let's use this thread to brainstorm possible designs.

Like the Query patterns explored in #30508, these patterns would likely be bundled with Gutenberg for a short time, and then would shift over to the Pattern Directory.

As per #29159, these would map to a few categories:

• Headers
• Footers
• General

[carolinan]

I think this needs to be solved first because if the template part block itself has styling options it will change how the pattern looks.
#30732

[kjellr]

To get this started, I spent a little time on potential Header & Footer patterns. These are thematically based on the new patterns, however most of the blocks here would use dynamic blocks and would reflect the actual site they're previewed on.

I ran into a few issues while creating these:

• Lack of fine-tuned spacing controls between blocks (Dimension Tools and Controls #28356)
• Lack of bold or italic styles for the Site Title block (Improvements to Site Title Block #30918 (comment))
• Right-aligned search field appears incorrectly. (Search Block: Custom-width search blocks are not fully right-aligned #31517)
• Search block missing icon-only option. (Search Block: Add icon-only option #31128)
• Twenty Twenty-One imposes a background color on the Nav block, and this doesn't appear to be fully changeable. (53161-Trac)

The footer patterns could use the most work — I think it would be helpful to include an option that uses a typical blog footer with latest posts, categories/tags, etc.

Header

Footer

[carolinan]

Yeah aligning a paragraph and site title to create a copyright or credit text in the footer isn't possible without additional CSS to force them to be inline.

[mtias]

This a great start!

[kjellr]

Adding a couple more issues that I ran into, specifically around getting these to work responsively:

• Specifying alternate alignments for small screens. (Responsive previewing and device-specific editing #19909 (comment))
• Declaring that columns should not wrap on mobile. (Feature request: allow Columns block non-responsive option #31248 (comment))

[carolinan]

For general template parts, it would be great to be able to use post meta information in template parts.
But it is not possible to place post date, post title, post author, tags etc in a template part because it will only show the information for the current item, it does not use context so it can not be used in a loop.

[Sandstromer]

Blocks used in this pattern

[carolinan]

I think it would be good to have social icons in at least one of the footers?

[kjellr]

I think it would be good to have social icons in at least one of the footers?

Yeah, definitely. I realized I didn't include a site tagline in any of the headers either. 😄 I'll iterate a bit as I try building these out.

[mtias]

This is in place already.