Twenty Twenty: 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 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.

[Anlino]

@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]

Double call to action pattern

[hellofromTonya]

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.

[hellofromTonya]

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]

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:

[hellofromTonya]

Noted during today's core scrub.

[jffng]

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.

2. Typo in the Introduction pattern: "As visitor you are invited to guided tours" -> "As a visitor you are invited..."

3. 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

[helen]

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.

[helen]

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

[ryelle]

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.

[kjellr]

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

[melchoyce]

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

[bridgetwillard]

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)

[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:

[bridgetwillard]

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:

[kjellr]

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​.

[helen]

In 49347:

Bundled Themes: Introduce block patterns for Twenty Twenty.

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

[helen]

In 49349:

PHPCS fixes after [49347].

See #51098.

[helen]

In 49352:

Twenty Twenty: Correct some textdomains in block patterns.

Props justinahinon.
Fixes #51648. See #51098.

[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 :)

[bridgetwillard]

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 :)

[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.