WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 3 days ago

#51099 closed task (blessed) (fixed)

Twenty Nineteen: Add Block Patterns

Reported by: melchoyce Owned by: helen
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-copy-review
Focuses: Cc:

Description

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.

Attachments (1)

TwentyNineteen-Patterns.jpg (443.0 KB) - added by melchoyce 2 months ago.

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


2 months ago

#3 @elmastudio
5 weeks ago

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.

#4 @elmastudio
5 weeks ago

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

#5 @melchoyce
3 weeks ago

  • Keywords needs-patch added; needs-design removed

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

This ticket was mentioned in PR #599 on WordPress/wordpress-develop by kjellr.


2 weeks ago

  • Keywords has-patch added; needs-patch removed
  • 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

#7 @kjellr
2 weeks ago

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:

https://cldup.com/BxKwKmF46Q.png
https://cldup.com/XLggSvBohI.png

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


2 weeks ago

#9 @hellofromTonya
2 weeks ago

  • Keywords needs-copy-review added

Noted during today's core scrub.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


11 days ago

#11 @jffng
11 days ago

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.

#12 @helen
11 days ago

  • Type changed from enhancement to task (blessed)

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

#13 @ryelle
10 days ago

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?).

#14 @kjellr
9 days ago

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.

http://cldup.com/f4006_mkL4.png

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


3 days ago

#16 @helen
3 days ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.