Block Pattern Library

I’ve had this idea in my head for many months and lo-and-behold, WordPress.org beats me to the punch with their directory of usable patterns featuring original blocks (ie, works with any theme) in their Pattern Library.

Copy the code under each block you like and simply paste it directly into your WordPress Post or Page (just like you would copy and paste from a Word Doc). The block that appears may look different, as each block is controlled in look and feel by your website’s theme.

If you see a section on a website you really like, and would like to repeat it for your website, send me a screenshot on Slack and I’ll see what I can do.

Author Bio

Author Name Goes Here

Author bio. Keep it short and sweet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus porta velit at gravida. Fusce pharetra sed neque ac hendrerit. Suspendisse venenatis lorem nisi, in porttitor felis venenatis eget. Mauris eu tempor risus, sed gravida enim. Nulla at orci malesuada, lobortis risus vel, viverra felis. Fusce a nunc nec ante condimentum porttitor ac sit amet quam.

Copy & Paste this directly into your WordPress Page or Post

<!-- wp:cover {"url":"https://thefierywell.com/wp-content/uploads/2021/07/pexels-photo-5600072.jpeg","id":8663,"dimRatio":80,"focalPoint":{"x":"0.51","y":"0.29"},"minHeight":504,"minHeightUnit":"px","customGradient":"linear-gradient(180deg,rgba(237,237,237,0) 2%,rgb(0,0,0) 89%)","contentPosition":"bottom center","conditionalBlocks":{"conditions":[]},"conditionalBlocksAttributes":{"hideOnMobile":false,"hideOnTablet":false,"hideOnDesktop":false,"userState":"","userRoles":[],"httpReferer":"","httpUserAgent":[],"postMeta":{"key":"","value":"","operator":"true"},"dates":[]},"align":"wide"} -->
<div class="wp-block-cover alignwide has-background-dim-80 has-background-dim has-background-gradient has-custom-content-position is-position-bottom-center" style="min-height:504px"><span aria-hidden="true" class="wp-block-cover__gradient-background" style="background:linear-gradient(180deg,rgba(237,237,237,0) 2%,rgb(0,0,0) 89%)"></span><img class="wp-block-cover__image-background wp-image-8663" alt="" src="https://thefierywell.com/wp-content/uploads/2021/07/pexels-photo-5600072.jpeg" style="object-position:51% 29%" data-object-fit="cover" data-object-position="51% 29%"/><div class="wp-block-cover__inner-container"><!-- wp:heading -->
<h2>Author Name Goes Here</h2>
<!-- /wp:heading -->

<!-- wp:social-links {"align":"right","className":"is-style-default"} -->
<ul class="wp-block-social-links alignright is-style-default"><!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram","label":"Follow Alexandria on Instagram"} /-->

<!-- wp:social-link {"url":"https://getonlinewitch.com/","service":"chain","label":"Visit Alexandria's website"} /-->

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

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Author bio. Keep it short and sweet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus porta velit at gravida. Fusce pharetra sed neque ac hendrerit. Suspendisse venenatis lorem nisi, in porttitor felis venenatis eget. Mauris eu tempor risus, sed gravida enim. Nulla at orci malesuada, lobortis risus vel, viverra felis. Fusce a nunc nec ante condimentum porttitor ac sit amet quam. </p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Author Quote


woman in witch costume feeling bored

This is a quote from my blog post that was worth pulling out to break up the visual space.

– My Name Goes Here, my picture to the left.

Copy & Paste this directly into your WordPress Page or Post

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator --><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"align":"center","id":8664,"width":240,"height":240,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://thefierywell.com/wp-content/uploads/2021/07/pexels-photo-5600072-edited.jpeg" alt="woman in witch costume feeling bored" class="wp-image-8664" width="240" height="240"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>This is a quote from my blog post that was worth pulling out to break up the visual space.</p><cite><em>- My Name Goes Here</em>, my picture to the left.</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

Call to Action

This is my heading.

This is a quick sentence summarizing what the main benefit is.

Copy & Paste this directly into your WordPress Page or Post

<!-- wp:cover {"url":"https://thefierywell.com/wp-content/uploads/2021/07/pexels-photo-1629236.jpeg","id":8650,"minHeight":10,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="min-height:10px"><img class="wp-block-cover__image-background wp-image-8650" alt="" src="https://thefierywell.com/wp-content/uploads/2021/07/pexels-photo-1629236.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>This is my heading.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a quick sentence summarizing what the main benefit is.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":"","style":{"color":{"background":"#ff00b3"}},"textColor":"white","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color:#ff00b3">Call to Action »</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->