Twenty Nineteen: Add Block Patterns

[melchoyce]

With block patterns introduced in WordPress 5.5, we now have the opportunity to add some patterns to our older default themes.

The Twenty Nineteen demo content already has some designs that we should consider bundling as patterns. I'll attach screenshots of what I'm thinking to this ticket.

What other patterns should we consider bundling with Twenty Nineteen?

@kjellr, since you were the designer for the theme, would love to get your input here.

[beafialho]

Worked on a few more patterns:
​https://share.getcloudapp.com/E0unOElg
​https://share.getcloudapp.com/7KuLNy2n
​https://share.getcloudapp.com/geuzKr0e
​https://share.getcloudapp.com/eDuBZ9LW

[elmastudio]

I like the pattern ideas a lot so far. Should we create more as jpg examples or start building right away?

I think a number of patterns to create a simple business front page probably makes the most sense: Our Services, What we do, Team and Contact.

[elmastudio]

The third pattern @beafialho created is especially beautiful I think :)

[melchoyce]

Agreed! Let's add the patterns I called out from ​the demo, along with the following three that @beafialho put together:

• ​https://share.getcloudapp.com/geuzKr0e
• ​https://share.getcloudapp.com/eDuBZ9LW
• ​https://share.getcloudapp.com/E0unOElg, but let's adjust the heading line-height on this. Maybe 1.3?

• Adds block patterns as described in the Trac ticket.
• Adds images for use in these patterns, along with license information.
• Adds theme support for custom line height, since it's used in one of the patterns.

Trac ticket: https://core.trac.wordpress.org/ticket/51099

[kjellr]

I added a patch for this over on GitHub.

A few notes:

• I included every patch except for this one: ​https://share.getcloudapp.com/geuzKr0e (Because of columns block quirks, I was unable to get it to work well responsively, unfortunately.)
• I did however use the images from that pattern in each of the other patterns that require images. The ones used in the demo site were CC0 at the time, but are no longer listed as CC0 on Pexels. In addition, the icons used in the Services pattern are Material Icons — there'd been concern about whether those were GPL-compatible or not. Given all that, I figured using fresh images makes sense.
• I bundled the images with the theme for now, but we could theoretically put these on the CDN link to them as we do for the default Gutenberg patterns.

Screenshots:

[hellofromTonya]

Noted during today's core scrub.

[jffng]

I tested this and verified the patch works as expected.

The only thing I noticed was using the "What We Do" pattern — the type is italic on the front-end and regular in the editor. This seems to be an issue with the pullquote block styles rather than how this pattern is implemented.

[helen]

I am not deeply concerned about getting this in before beta so I am marking as a task.

[ryelle]

I've updated the PR to split the content into multiple lines for easier scanning & change tracking.

The included images are all pretty large (2000px x 2000px), when they don't appear larger than 556px at the most, so these could probably be shrunk & maybe better optimized (pattern_03 is the largest filesize, maybe it could be replaced with another gradient instead?).

[kjellr]

Thank you for the fixes, @ryelle!

The included images are all pretty large (2000px x 2000px), when they don't appear larger than 556px at the most, so these could probably be shrunk & maybe better optimized (pattern_03 is the largest filesize, maybe it could be replaced with another gradient instead?).

Good call. I shrunk the images to a max of 1112px wide (556px on a 2.0 retina screen), and replaced that larger filesize one with another gradient.

[helen]

In 49348:

Bundled Themes: Introduce block patterns for Twenty Nineteen.

Including some props I missed on the commit for Twenty Twenty, I am sorry.

Props: kjellr, beafialho, melchoyce, ryelle, jffng, bridgetwillard.
Fixes #51099.

Merged into WP Core with changeset https://core.trac.wordpress.org/changeset/49348.

[SergeyBiryukov]

In 49585:

Bundled Themes: Add block-patterns tag to Twenty Nineteen and Twenty Twenty.

Follow-up to [49347], [49348].

See #51098, #51099.

[desrosj]

In 50076:

Twenty Twenty: Update the RTL stylesheet with the block-patterns tag.

Rebuilding the RTL stylesheet was missed in [49585].

See #51098, #51099.

[desrosj]

In 50080:

Twenty Nineteen: Update the RTL stylesheet with the block-patterns tag.

Rebuilding the RTL stylesheet was missed in [49585].

See #51098, #51099.