WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 3 days ago

Last modified 2 days ago

#51098 closed task (blessed) (fixed)

Twenty Twenty: Add Block Patterns

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

Description (last modified by 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 Twenty 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 Twenty?

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

Attachments (6)

TwentyTwenty-Patterns.jpg (589.7 KB) - added by melchoyce 2 months ago.
twentytwenty-double-cta-pattern.png (61.8 KB) - added by Anlino 2 months ago.
Double call to action pattern
51098.diff (9.9 KB) - added by kjellr 2 weeks ago.
51098.2.diff (10.8 KB) - added by ryelle 10 days ago.
51098.3.diff (10.9 KB) - added by kjellr 4 days ago.
51098.4.diff (10.9 KB) - added by kjellr 4 days ago.

Download all attachments as: .zip

Change History (35)

#1 @melchoyce
2 months ago

  • Description modified (diff)

#2 @Anlino
2 months ago

@melchoyce Happy to! I had a look in the Figma file, and I think the ones you've included in the attachment covers pretty much all of them. The only additional candidate I could find was the double call to action section, attached below.

@Anlino
2 months ago

Double call to action pattern

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


2 months ago

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


3 weeks ago

#5 @hellofromTonya
3 weeks 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.

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


3 weeks ago

#7 @hellofromTonya
3 weeks ago

  • Keywords needs-patch added; needs-design removed
  • Milestone changed from Future Release to 5.6

Talking with @melchoyce and the core-theme team today, moving this ticket back into the milestone. Design is done. Next step is a patch and then a committer.

@kjellr
2 weeks ago

#8 @kjellr
2 weeks ago

I've added 51098.diff, which implements almost all of the patterns above. The only one missing is the "Outdented Pullquote" pattern — that one is broken in the editor ( https://cloudup.com/ckRht5KqHt5 ), so I suggest we leave it out for now. I modified the introduction one slightly to avoid needing to use Lorem Ipsum text. But other than that these should all be pretty straightforward.

Here are screenshots:

https://cldup.com/gnr0i0JZbd.png

https://cldup.com/xk-m0yXnRY.png

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


2 weeks ago

#10 @hellofromTonya
2 weeks ago

  • Keywords has-patch added; needs-patch removed

#11 @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

#13 @jffng
11 days ago

I gave this a test and have three minor comments:

  1. The dates in the Event Details pattern use an em dash, whereas the dates in the Featured Content pattern use two hyphens. It would be nice if these were consistent.
  1. Typo in the Introduction pattern: "As visitor you are invited to guided tours" -> "As a visitor you are invited..."
  1. In the Introduction pattern, there is a discrepancy between the editor and the front:

Editor: https://cloudup.com/cQAIVJnhat5

Front-end: https://cloudup.com/ciALp4hPSW3

#14 @helen
11 days ago

Question for this that also applies to the other starter content tickets - can we find a way to introduce line breaks in the code? I assume we'll have issues with wpautop() type stuff if it's in the actual output but doing more concat or making an array and imploding it, perhaps? It's really hard to read and will also be hard to track changes later.

#15 @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.

@ryelle
10 days ago

#16 @ryelle
10 days ago

51098.2.diff uses the same implode( '', array(…) ) method that starter content uses, so the content can be split onto separate lines. I also updated the Featured Content pattern to use a single emdash (matching Event Details) & fixed the typo in Introduction.

In the Introduction pattern, there is a discrepancy between the editor and the front:

This seems to be a bug with gutenberg & alignments - you can't have a heading be both wide and centered, so the editor only centers it, but the frontend applies the wide style too. I'll try to track that down once I post this, but for now I've removed the "wide" setting from the heading.

#17 @kjellr
9 days ago

Thank you @ryelle — the updates look great and the code is much more readable now. 🙌

#18 @melchoyce
9 days ago

@helen Ready for commit? I know you mentioned copy, but there's been no movement there, and currently these patterns match the core-included patterns by using demo content, not instructional content.

#19 @bridgetwillard
5 days ago

I'm happy to make suggestions on the copy in 51098.diff, @melchoyce & @helen.

I agree with @jffng on the em dash versus two hyphens. It should be an em dash.

Suggested Edit

'Support the Museum and Get Exclusive Offers'

Currently says: 'Become a Member and Get Exclusive Offers' (line 36)

Suggested Edit

'Become a Member'

Currently says: 'Join the Club.' (line 36)

Suggested Edit

'Award-winning exhibitions featuring internationally-renowned artists.'

Internationally-renowned implies they are from all over the world.

Currently says: 'Award-winning exhibitions featuring internationally-renowned artists from all over the world.' (line 47)

Suggested Edit

'An awe-inspiring collection of books, prints, and gifts from our exhibitions.'

Currently says: 'An awe-inspiring collection of books, prints, and miscellaneous items from our exhibitions.', (line 47)

Suggested Edit

'Shop Now'

Currently says: 'Read More' (line 47)

Suggested Edit

(This h2 should be forced into two and use Title Case.)

<h2>'The Premier Destination for Modern Art in Sweden.'</h2>
<h2>'Open 10 AM to 6 PM every day during winter.'</h2>

Currently says: 'The premier destination for modern art in Sweden. Open 10 AM → 6 PM every day during winter.' (line 80)

Suggested Edit

'With seven floors of striking architecture, UMoMA shows exhibitions of international contemporary art, sometimes along with art historical retrospectives. Existential, political, and philosophical issues are intrinsic to our program. As visitor, you are invited to guided tours artist talks, lectures, film screenings, and other events with free admission.'

(Added oxford comma and US spelling for "program."

Currently says: 'With seven floors of striking architecture, UMoMA shows exhibitions of international contemporary art, sometimes along with art historical retrospectives. Existential, political and philosophical issues are intrinsic to our programme. As visitor you are invited to guided tours artist talks, lectures, film screenings and other events with free admission.' (line 80)

#20 @bridgetwillard
5 days ago

  • Keywords has-copy-review added; needs-copy-review removed

@kjellr
4 days ago

#21 follow-up: @kjellr
4 days ago

Thank you, @bridgetwillard for the copy review. 51098.3.diff should incorporate all of those changes. The only one that I modified at all was the last one — breaking the headline into two H2's looked weird visually, so I recommend removing the second one. This keeps the pattern nice and simple.

Updated screenshot of all patterns:

http://cldup.com/aemmXrQhLx.png

#22 in reply to: ↑ 21 @bridgetwillard
4 days ago

You're welcome @kjellr and thank you. It looks great!

There is a period I should have caught though for the h2 at the bottom (line 80).

'The Premier Destination for Modern Art in Sweden'

You're awesome!

Replying to kjellr:

Thank you, @bridgetwillard for the copy review. 51098.3.diff should incorporate all of those changes. The only one that I modified at all was the last one — breaking the headline into two H2's looked weird visually, so I recommend removing the second one. This keeps the pattern nice and simple.

Updated screenshot of all patterns:

http://cldup.com/aemmXrQhLx.png

@kjellr
4 days ago

#23 @kjellr
4 days ago

There is a period I should have caught though for the h2 at the bottom (line 80).

Thanks for catching that! Should be fixed in 51098.4.diff.

http://cldup.com/peGgxIpQCj.png

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


3 days ago

#25 @helen
3 days ago

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

In 49347:

Bundled Themes: Introduce block patterns for Twenty Twenty.

Props melchoyce, Anlino, kjellr, ryelle.
Fixes #51098.

#26 @helen
3 days ago

In 49349:

PHPCS fixes after [49347].

See #51098.

#27 @helen
3 days ago

In 49352:

Twenty Twenty: Correct some textdomains in block patterns.

Props justinahinon.
Fixes #51648. See #51098.

#28 follow-up: @melchoyce
2 days ago

@bridgetwillard Thanks for all your help here! Is there any chance you have the time to look at #51100 and #51101 as well? No worries if not :)

#29 in reply to: ↑ 28 @bridgetwillard
2 days ago

You're very welcome @melchoyce .

Replying to melchoyce:

@bridgetwillard Thanks for all your help here! Is there any chance you have the time to look at #51100 and #51101 as well? No worries if not :)

Note: See TracTickets for help on using tickets.