search

WordPress / twentytwentytwo

Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9.
407 stars 92 forks source link

Block Patterns: Add General Patterns #17

Closed kjellr closed 2 years ago

kjellr commented 2 years ago

Frame 132

More details in the Figma file.

melchoyce commented 2 years ago

Just wondering, should the wavy line be a block style for the separator block?

image

melchoyce commented 2 years ago

Video trailer:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"140px","right":"1rem","left":"1rem","bottom":"80px"}}},"backgroundColor":"secondary","textColor":"foreground","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-foreground-color has-secondary-background-color has-text-color has-background has-link-color" style="padding-top:140px;padding-right:1rem;padding-bottom:80px;padding-left:1rem"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"style":{"typography":{"fontSize":"32px"}}} -->
<h2 style="font-size:32px">Extended Trailer</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A film about hobbyist bird watchers, a catalog of different birds, paired with the noises they make. Each bird is listed by their scientific name so things seem more official.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:video {"id":181} -->
<figure class="wp-block-video"><video controls src="https://cldup.com/RKX7T5V-8U.mp4"></video></figure>
<!-- /wp:video --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
kjellr commented 2 years ago

Just wondering, should the wavy line be a block style for the separator block?

I considered it, but we can’t do that without CSS. 😄 I pictured it as a cover block with a small min height maybe?

melchoyce commented 2 years ago

Subscribe:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"100px","right":"100px","left":"100px"}}},"backgroundColor":"background"} -->
<div class="wp-block-group alignfull has-background-background-color has-background" style="padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%"><!-- wp:heading -->
<h2>Watch birds<br>from your inbox</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Join our mailing list</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
melchoyce commented 2 years ago

Image with caption:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"140px","right":"100px","bottom":"140px","left":"100px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"primary","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:140px;padding-right:100px;padding-bottom:140px;padding-left:100px"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:media-text {"mediaId":202,"mediaLink":"http://2022.local/general-patterns/hummingbird/","mediaType":"image","verticalAlignment":"bottom","imageFill":false} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="https://cldup.com/8dpxzqUb3j.jpg" alt="" class="wp-image-202 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p><strong>Hummingbird</strong><br>I try in vain to be persuaded that the pole is anything but the region of beauty and delight.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
melchoyce commented 2 years ago

Latest posts:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"100px","right":"100px","left":"100px"}}},"layout":{"wideSize":"1000px"}} -->
<div class="wp-block-group alignfull" style="padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"queryId":18,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>LATEST POSTS</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><a href="#">View more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0rem","bottom":"0px","left":"0px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0rem;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"width":"","height":"","scale":"fill"} /-->

<!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"36px"}}} /-->

<!-- wp:post-excerpt /-->

<!-- wp:post-date /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

Some issues with this one:

melchoyce commented 2 years ago

Wide image with introduction and buttons:

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://cldup.com/A-u2oNQDID.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"style":{"typography":{"fontSize":"100px","lineHeight":"1.15"}}} -->
<h2 style="font-size:100px;line-height:1.15"><em>Welcome to<br>the Aviary</em></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"bottom":"6rem"}}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-bottom:6rem"><!-- wp:paragraph -->
<p>A film about hobbyist bird watchers, a catalog of different birds, paired with the noises they make. Each bird is listed by their scientific name so things seem more official.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Learn More</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Buy Tickets</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
melchoyce commented 2 years ago

Two images and text:

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://cldup.com/XGFzsKp22z.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://cldup.com/HG7NlWivQJ.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"style":{"typography":{"fontSize":"32px"}}} -->
<h2 style="font-size:32px">SCREENING</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":5} -->
<div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>May 14th, 2022 @ 7:00PM<br>The Vintagé Theater,<br>245 Arden Rd.<br>Gardenville, NH</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-foreground-background-color has-background">Buy Tickets</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
melchoyce commented 2 years ago

Cover image with contained image:

<!-- wp:cover {"url":"https://cldup.com/4Qktdda0JA.jpg","id":233,"dimRatio":0,"minHeight":666,"contentPosition":"center center","align":"wide","style":{"spacing":{"padding":{"top":"60px","right":"60px","bottom":"60px","left":"60px"}}}} -->
<div class="wp-block-cover alignwide" style="padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;min-height:666px"><img class="wp-block-cover__image-background wp-image-233" alt="" src="http://2022.local/wp-content/uploads/2021/10/Ducks-Cropped.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","width":384,"height":580,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://cldup.com/r12BMiKdGp.jpg" alt="" width="384" height="580"/></figure></div>
<!-- /wp:image --></div></div>
<!-- /wp:cover -->

This one is a little bit misaligned because of the figcaption on the image.

melchoyce commented 2 years ago

Membership level columns

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph -->
<p>MEMBERSHIP LEVELS</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"typography":{"fontSize":"72px","lineHeight":"0.5"}}} -->
<h2 style="font-size:72px;line-height:0.5">1</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"36px"}}} -->
<h3 style="font-size:36px"><em>Pigeon</em></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Help support our growing community by joining at the Pigeon level. Your support will help pay our writers, and you’ll get access to our exclusive newsletter.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-foreground-background-color has-background">$25</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"typography":{"fontSize":"72px","lineHeight":"0.5"}}} -->
<h2 style="font-size:72px;line-height:0.5">2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"fontSize":"36px"}}} -->
<h2 style="font-size:36px"><meta charset="utf-8"><em>Sparrow</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Join at the Sparrow level and become a member of our flock! You’ll receive our newsletter, plus a bird pin that you can wear with pride when you’re out in nature.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-foreground-background-color has-background">$75</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"typography":{"fontSize":"72px","lineHeight":"0.5"}}} -->
<h2 style="font-size:72px;line-height:0.5">3</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"fontSize":"36px"}}} -->
<h2 style="font-size:36px"><meta charset="utf-8"><em>Falcon</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Play a leading role for our community by joining at the Falcon level. This level earns you a seat on our board, where you can help plan future birdwatching expeditions.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-foreground-background-color has-background">$150</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
melchoyce commented 2 years ago

Image Divider (Dark)

<!-- wp:cover {"url":"https://cldup.com/93w0dedaeP.jpg","id":239,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull"><img class="wp-block-cover__image-background wp-image-239" alt="" src="http://2022.local/wp-content/uploads/2021/10/Image-Divider-Dark.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Image Divider (Light)

<!-- wp:cover {"url":"http://2022.local/wp-content/uploads/2021/10/Image-Divider-Light.jpg","id":240,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull"><img class="wp-block-cover__image-background wp-image-240" alt="" src="https://cldup.com/fKEwMWqjFQ.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Wasn't sure if these should be full or wide, so I went with full. I don't think they ended up needing a max-height, they look good by default IMO!

melchoyce commented 2 years ago

Some overall notes on these:

The spacing might be inconsistent; I used a mix of px and rems that should probably get standardized into one unit. I was also trying to eyeball based on the mockups, since the exact pixel values didn't always work because of additional padding or margin on blocks.

Column spacing might also need to be adjusted.

Here's a front-end preview:

image

(The very tall photo is a bug that's already fixed in trunk)

kjellr commented 2 years ago

Thanks, @melchoyce!

The spacing might be inconsistent; I used a mix of px and rems that should probably get standardized into one unit. I was also trying to eyeball based on the mockups, since the exact pixel values didn't always work because of additional padding or margin on blocks.

Column spacing might also need to be adjusted.

Ok, I think these are good enough to move to PR. We can standardize spacing and font sizes as needed there.

Two small updates:

For the latest posts one, I think we can use this markup instead (it's based on an existing query pattern): 

<!-- wp:group {"align":"wide","layout":{"inherit":false}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph -->
<p>LATEST POSTS</p>
<!-- /wp:paragraph -->

<!-- wp:query {"queryId":7,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image {"isLink":true,"width":"","height":"310px"} /-->

<!-- wp:post-title {"isLink":true,"fontSize":"medium"} /-->

<!-- wp:post-excerpt /-->

<!-- wp:post-date {"fontSize":"small"} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

And I think a standard 50% width works fine for the Subscribe pattern: 

<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading -->
<h2>Watch birds<br>from your inbox</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"fontSize":"normal"} -->
<div class="wp-block-button has-custom-font-size has-normal-font-size"><a class="wp-block-button__link">Join our mailing list</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->