Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#51104 closed enhancement (fixed)

Twenty Thirteen: Add Block Patterns

Reported by: melchoyce's profile melchoyce Owned by: ryelle's profile ryelle
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-design has-patch needs-dev-note needs-codex
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.

Let's consider adding some patterns to Twenty Thirteen.

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

Attachments (15)

2013-pattern-audio.png (39.6 KB) - added by melchoyce 4 years ago.
2013-pattern-chat.png (191.4 KB) - added by melchoyce 4 years ago.
2013-pattern-gallery.jpg (221.7 KB) - added by melchoyce 4 years ago.
2013-pattern-link.png (40.4 KB) - added by melchoyce 4 years ago.
2013-pattern-quote.png (83.1 KB) - added by melchoyce 4 years ago.
2013-pattern-status.png (45.8 KB) - added by melchoyce 4 years ago.
2013-pattern-video.png (1.5 MB) - added by melchoyce 4 years ago.
2013-pattern-two-columns-text.png (319.1 KB) - added by melchoyce 4 years ago.
2013-pattern-quote.2.png (301.7 KB) - added by melchoyce 4 years ago.
2013-buttons.png (49.7 KB) - added by melchoyce 4 years ago.
2013-cover-bottomleft.png (99.6 KB) - added by melchoyce 4 years ago.
2013-cover-centered.2.png (110.1 KB) - added by melchoyce 4 years ago.
Twenty Thirteen Patterns.jpg (1.2 MB) - added by melchoyce 3 years ago.
Potential patterns. The triangles image is art done by @joen — would you be willing to open source that image, Joen?
triangles.2.zip (488.1 KB) - added by Joen 3 years ago.
Triangles, GPL v2 or later
51104.diff (3.4 KB) - added by audrasjb 3 years ago.
Missing translatable strings for placeholders

Change History (41)

#1 @Joen
4 years ago

My goodness, I had so much fun working on this theme. And I have so many things I wish I could fundamentally redesign about it, things that really didn't age well 🤭 — thank you for the ping and for this effort!

Two things immediately come to mind:

The alternating ribbon of colors did not really come to pass because post formats were simply not used enough to create an interesting ribbon.

However perhaps for block patterns, we have an opportunity to revisit those alternating ribbons of colors. In other words, I'd love to see those warm bold colors used in big swathes that take up the whole pattern background.

I also recall being really inspired by retro-futuristic illustration such as those that would grace the covers of 1950s "Popular Science" magazines. Those were public domain at the time, but seem nowhere to be found. However leaning into that retro future illustration aesthetic, it appears there are some decent public domain sources to explore:

It seems like those could help create some really interesting colorful patterns, perhaps?

#2 @melchoyce
4 years ago

Thanks @Joen, appreciate your thoughts here!

I wonder if it would make sense to add each Post Format layout & background color as a pattern. (So, likely a bunch of different content blocks inside cover or group blocks.) What do you think about that?

#3 @Joen
4 years ago

I wonder if it would make sense to add each Post Format layout & background color as a pattern. (So, likely a bunch of different content blocks inside cover or group blocks.) What do you think about that?

I think that's a great idea. With the added caveat that I would hope we could improve the design slightly 🙈. Specifically we should not use as many font weights, styles, and sizes as are used now — one weight, perhaps two sizes at most, less italic, and no icons.

Inheriting the font, and leveraging the warm colors, I think, could make for some useful patterns on its own!

Is that helpful?

#4 @melchoyce
4 years ago

@Joen Added a bunch of screenshots of patterns. Let me know how these look to you.

#5 @Joen
4 years ago

Impressive conversion from post formats to patterns. I feel the color usage variation is definitely proving itself fun here.

However the intrinsic problem with post formats: how often are you going to post a "chat log", or even a "status update". Similarly with patterns you have to actively pick the right sequence of patterns in order to recreate such a ribbon.

What if we recreated some of the existing patterns, but with these colors?

  • Two buttons but with a ribbon-background color and appropriate button colors to match
  • Two columns of text, but with a ribbon-background and perhaps a heading color to match
  • Large header with a heading and a button, but ribbon color background
  • Quote, again with ribbon background

And perhaps instead of the somewhat random themes I chose in the old demo content, we could find a singular topic with which to pre-populate the patterns. Project Gutenberg has a bunch of good public domain stories from which we can quote. Perhaps from Treasure Island (http://www.gutenberg.org/ebooks/120) or Huckleberry Finn (http://www.gutenberg.org/ebooks/76) — they both encompass some of the adventurious spirit that the theme, in an idealized vision, should've embraced. The pictures should also be PD even if some of them are low quality.

What do you think? Thank you for working on this!

#6 @melchoyce
4 years ago

Quote and two columns of text work well. Running into alignment issues with the large header, and color issues with the button pattern.

#7 @Joen
4 years ago

Conceptually this totally! The second "Buttons" is a bit hard to read, but that's a nitpick. I'm digging this. Thank you Mel!

#8 @melchoyce
4 years ago

Yeah, the button and cover blocks are experiencing styling issues that will need to get fixed in Twenty Thirteen.

#9 @melchoyce
4 years ago

Created two tickets to track the style issues: #51223, #51224

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


4 years ago

#11 @hellofromTonya
3 years ago

  • Milestone changed from 5.6 to Future Release

With Beta 1 for 5.6 landing in less than 2 weeks, punting this ticket to Future Release. If any maintainer or committer feels this can be resolved in time, or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

@melchoyce
3 years ago

Potential patterns. The triangles image is art done by @joen — would you be willing to open source that image, Joen?

@Joen
3 years ago

Triangles, GPL v2 or later

#12 @Joen
3 years ago

The triangle geometric shapes feel different enough from the circle headers that it may be worth focusing on either the circle shapes or the triangle shapes. If you go the circle route, I could've sworn I GPL'ed those back in the day, but it looks like I only used vague "make it your own" language for the PSD I shared: https://moc.co/2013/08/twenty-thirteen-make-it-yours/ — so for good measure, consider that PSD as GPL v2 or later!

Going with the triangles, I dug up the old .ai files in case you need to tweak the colors. Let's call those GPL v2 as well.

Thank you Mel!

#13 @melchoyce
3 years ago

Thank you too! :hat-tip:

#14 @kjellr
3 years ago

I agree that it might be good to use circles instead of the triangles for that pattern. That will relate really nicely to the header graphic.

#15 @desrosj
3 years ago

  • Milestone changed from Future Release to 5.8

I'm going to move this to 5.8. But, if they are ready sooner we can move this to 5.7.1 (or if that's not realistic, please do move this back Future Release).

We can also release an update detached from a specific WordPress release as we did in December.

This ticket was mentioned in PR #1299 on WordPress/wordpress-develop by MaggieCabrera.


3 years ago
#16

  • Keywords has-patch added

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

Adds a set of bundled block patterns for the Twenty Thirteen Theme.

This ticket was mentioned in Slack in #core-themes by kjell. View the logs.


3 years ago

#18 @ryelle
3 years ago

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

In 51012:

Bundled Themes: Introduce block patterns for Twenty Thirteen.

Props joen, melchoyce, kjellr, onemaggie.
Fixes #51104.

#19 @ryelle
3 years ago

Noting here (to record it somewhere), I had to add #1, #2 etc to the image URLs in "Decorative Gallery" to prevent a duplicate key error in the Gallery block - it doesn't expect the same image to show up multiple times, since you can't do that through the UI. This workaround fixes the complaint from React.

#20 @ryelle
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

I just noticed from looking at #51105 that we didn't add and copyright attributions in the readme for these images. Reopening to add those attributions.

@melchoyce I think you have the info for how to attribute the NASA images?

@audrasjb
3 years ago

Missing translatable strings for placeholders

#21 @audrasjb
3 years ago

Hey @ryelle, I just noticed two missing translatable string for placeholders.
51104.diff fixes this small issue :)

#22 @melchoyce
3 years ago

Cylinder Interior: https://www.flickr.com/photos/nasacommons/14052998066/in/album-72157644439092941/. Rick Guidice, NASA Ames Research Center.
Bernal Cutaway: https://www.flickr.com/photos/nasacommons/14052996976/in/album-72157644439092941/ Don Davis, NASA Ames Research Center.
Torus Interior: https://www.flickr.com/photos/nasacommons/14076102195/in/album-72157644439092941/ Rick Guidice, NASA Ames Research Center.
Toroidal Colony: https://www.flickr.com/photos/nasacommons/13889485757/in/album-72157644439092941/ Rick Guidice, NASA Ames Research Center.

All are "No known copyright restrictions," posted by NASA.

ryelle commented on PR #1299:


3 years ago
#23

This was merged in r51012.

#24 @ryelle
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 51034:

Twenty Thirteen: Fix missing translations in block patterns, add image credits.

Props audrasjb, melchoyce.
Follow-up to [51012].
Fixes #51104.

This ticket was mentioned in Slack in #core-themes by kjell. View the logs.


3 years ago

#26 @milana_cap
3 years ago

  • Keywords needs-dev-note needs-codex added
Note: See TracTickets for help on using tickets.