Block Patterns: Add About Me Patterns

[kjellr]

These mockups are available with more detail in the theme's Figma file.

[melchoyce]

Tried putting these together. Similar spacing issues as #16, and on the third pattern, I had to use a horizontal navigation block instead of a hamburger since that's not available on desktop. I also used a cover block instead of a full-width image block for the fourth pattern due to an image proportion bug I'm investigating.

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700">Left Media &amp; Text with Logo, Header, Paragraph, and Social</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"align":"full","mediaId":72,"mediaLink":"http://2022.local/?attachment_id=72","mediaType":"image","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile has-background-color has-foreground-background-color has-text-color has-background has-link-color"><figure class="wp-block-media-text__media"><img src="http://2022.local/wp-content/uploads/2021/10/About-Pattern-1-683x1024.png" alt="" class="wp-image-72 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:site-logo {"width":60} /-->

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

<!-- wp:group {"style":{"spacing":{"padding":{"right":"8rem"}}}} -->
<div class="wp-block-group" style="padding-right:8rem"><!-- wp:heading {"style":{"typography":{"fontWeight":"300","lineHeight":"1.115","fontSize":"72px"}}} -->
<h2 style="font-size:72px;font-weight:300;line-height:1.115"><em>Doug<br>Stilton</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}}} -->
<p style="line-height:1.6">Oh hello. My name’s Doug, and you’ve found your way to my website. I’m an avid bird watcher, and I also broadcast my own radio show on Tuesday evenings at 11PM EDT.</p>
<!-- /wp:paragraph -->

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

<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","iconBackgroundColor":"foreground","iconBackgroundColorValue":"#000000"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text -->

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

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700"><meta charset="utf-8">Right Media &amp; Text with Logo, Header, Paragraph, and Social</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":84,"mediaLink":"http://2022.local/about-patterns/about-pattern-2/","mediaType":"image","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile has-background-color has-foreground-background-color has-text-color has-background has-link-color"><figure class="wp-block-media-text__media"><img src="http://2022.local/wp-content/uploads/2021/10/About-Pattern-2-683x1024.png" alt="" class="wp-image-84 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:site-logo {"width":60} /-->

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

<!-- wp:group {"style":{"spacing":{"padding":{"right":"8rem"}}}} -->
<div class="wp-block-group" style="padding-right:8rem"><!-- wp:heading {"style":{"typography":{"fontWeight":"300","lineHeight":"1.115","fontSize":"72px"}}} -->
<h2 style="font-size:72px;font-weight:300;line-height:1.115"><em>Emery<br>Driscoll</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}}} -->
<p style="line-height:1.6">Oh hello. My name’s Emery, and you’ve found your way to my website. I’m an avid bird watcher, and I also broadcast my own radio show on Tuesday evenings at 11PM EDT.</p>
<!-- /wp:paragraph -->

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

<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","iconBackgroundColor":"foreground","iconBackgroundColorValue":"#000000"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text -->

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

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700"><meta charset="utf-8">Logo, header, description, and social on left, menu and separator on right</h2>
<!-- /wp:heading -->

<!-- wp:cover {"overlayColor":"foreground","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","align":"full","style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"4rem","left":"4rem"}}}} -->
<div class="wp-block-cover alignfull has-foreground-background-color has-background-dim" style="padding-top:4rem;padding-right:4rem;padding-bottom:4rem;padding-left:4rem;min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:navigation {"itemsJustification":"right"} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom","width":"45%","style":{"spacing":{"padding":{"top":"12rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-top:12rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem;flex-basis:45%"><!-- wp:site-logo {"width":60} /-->

<!-- wp:heading {"style":{"typography":{"fontWeight":"300","lineHeight":"1.115","fontSize":"72px"}}} -->
<h2 style="font-size:72px;font-weight:300;line-height:1.115"><em>Jesús</em><br><em>Rodriguez</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}}} -->
<p style="line-height:1.6">Oh hello. My name’s Jesús, and you’ve found your way to my website. I’m an avid bird watcher, and I also broadcast my own radio show on Tuesday evenings at 11PM EDT.</p>
<!-- /wp:paragraph -->

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

<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","iconBackgroundColor":"foreground","iconBackgroundColorValue":"#000000"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"4rem","left":"4rem"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0rem;padding-right:0rem;padding-bottom:4rem;padding-left:4rem"><!-- wp:separator {"color":"background","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-background-background-color has-background-color is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

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

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700"><meta charset="utf-8">Big Image and Buttons</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"http://2022.local/wp-content/uploads/2021/10/About-Pattern-4.png","id":95,"dimRatio":0,"minHeight":840,"align":"center"} -->
<div class="wp-block-cover aligncenter" style="min-height:840px"><img class="wp-block-cover__image-background wp-image-95" alt="" src="http://2022.local/wp-content/uploads/2021/10/About-Pattern-4.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"wideSize":"1000px"}} -->
<div class="wp-block-group" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:buttons {"contentJustification":"space-between"} -->
<div class="wp-block-buttons is-content-justification-space-between"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Purchase my work</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Support my studio</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Take a class</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"contentJustification":"space-between"} -->
<div class="wp-block-buttons is-content-justification-space-between"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Read about me</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">See my process</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Join my mailing list</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#1a4548","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700"><meta charset="utf-8">Link in Bio</h2>
<!-- /wp:heading -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":101,"width":100,"height":100,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-full is-resized"><img src="http://2022.local/wp-content/uploads/2021/10/User-Icon.png" alt="" class="wp-image-101" width="100" height="100"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"48px"}}} -->
<h2 class="has-text-align-center" style="font-size:48px">Swoop</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">A podcast about birds</p>
<!-- /wp:paragraph -->

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

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"width":75,"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link" style="border-radius:6px">Watch our videos</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link" style="border-radius:6px">Listen on iTunes Podcasts</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link" style="border-radius:6px">Listen on Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link" style="border-radius:6px">Support the show</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link" style="border-radius:6px">About the hosts</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#1a4548","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

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

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-text-align-center has-small-font-size" style="font-weight:700"><meta charset="utf-8">Link in Bio: Dark</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"10rem","right":"0rem","bottom":"10rem","left":"0rem"}}},"backgroundColor":"primary","textColor":"background","layout":{"wideSize":"1000px","contentSize":"480px"}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:10rem;padding-right:0rem;padding-bottom:10rem;padding-left:0rem"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"id":101,"width":100,"height":100,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="http://2022.local/wp-content/uploads/2021/10/User-Icon.png" alt="" class="wp-image-101" width="100" height="100"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"48px"}}} -->
<h2 class="has-text-align-left" style="font-size:48px">A trouble of hummingbirds</h2>
<!-- /wp:heading -->

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

<!-- wp:buttons {"contentJustification":"left"} -->
<div class="wp-block-buttons is-content-justification-left"><!-- wp:button {"width":100,"style":{"border":{"radius":"6px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link" style="border-radius:6px">Watch our videos</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"border":{"radius":"6px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link" style="border-radius:6px">Listen on iTunes Podcasts</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"border":{"radius":"6px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link" style="border-radius:6px">Listen on Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"border":{"radius":"6px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link" style="border-radius:6px">Support the show</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"border":{"radius":"6px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link" style="border-radius:6px">About the hosts</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[kjellr]

Thank you!

I also used a cover block instead of a full-width image block for the fourth pattern due to an image proportion bug I'm investigating.

I think that's probably this issue, which should be fixed in the next Gutenberg release.

[kjellr]

Closed via #110