WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#51104 new enhancement

Twenty Thirteen: Add Block Patterns

Reported by: melchoyce Owned by:
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-design
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 (14)

2013-pattern-audio.png (39.6 KB) - added by melchoyce 9 months ago.
2013-pattern-chat.png (191.4 KB) - added by melchoyce 9 months ago.
2013-pattern-gallery.jpg (221.7 KB) - added by melchoyce 9 months ago.
2013-pattern-link.png (40.4 KB) - added by melchoyce 9 months ago.
2013-pattern-quote.png (83.1 KB) - added by melchoyce 9 months ago.
2013-pattern-status.png (45.8 KB) - added by melchoyce 9 months ago.
2013-pattern-video.png (1.5 MB) - added by melchoyce 9 months ago.
2013-pattern-two-columns-text.png (319.1 KB) - added by melchoyce 9 months ago.
2013-pattern-quote.2.png (301.7 KB) - added by melchoyce 9 months ago.
2013-buttons.png (49.7 KB) - added by melchoyce 9 months ago.
2013-cover-bottomleft.png (99.6 KB) - added by melchoyce 9 months ago.
2013-cover-centered.2.png (110.1 KB) - added by melchoyce 9 months ago.
Twenty Thirteen Patterns.jpg (1.2 MB) - added by melchoyce 3 months 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 months ago.
Triangles, GPL v2 or later

Change History (29)

#1 @Joen
9 months 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
9 months 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
9 months 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
9 months ago

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

#5 @Joen
9 months 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
9 months 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
8 months 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
8 months ago

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

#9 @melchoyce
8 months ago

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

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


8 months ago

#11 @hellofromTonya
7 months 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 months ago

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

@Joen
3 months ago

Triangles, GPL v2 or later

#12 @Joen
3 months 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 months ago

Thank you too! :hat-tip:

#14 @kjellr
3 months 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
2 months 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.

Note: See TracTickets for help on using tickets.