Block Pattern Directory

The block pattern directory is an amazing tool for site editors to be aware of. It’s a collection of block patterns that you can browse, copy, and paste to your site without the need of installing a new theme or additional plugins.

You can search for patterns by keywords, or browse through categories to select the pattern that is right for your current content needs. So for example, lets say you want to create section to display your latest posts. Navigate to the posts category, scroll through the available patterns, and click the one that matches your needs. I’m currently looking at this “Left aligned posts” pattern. At the top of the page you will see a copy pattern block button, that once clicked the needed block markup with be copied to your clipboard, and we can now paste it to our post.

This is the markup for the left aligned posts

<!-- wp:query {"queryId":31,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-query alignfull"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-template {"style":{"typography":{"textTransform":"none"}}} -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"780px","justifyContent":"left","wideSize":"780px"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"20px","padding":{"bottom":"var:preset|spacing|80"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:post-date {"textAlign":"left","format":"n/j/Y","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"letterSpacing":"1px","fontSize":"0.9rem"}},"textColor":"contrast"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:post-title {"isLink":true,"style":{"layout":{"selfStretch":"fit"},"typography":{"lineHeight":"1","fontSize":"4.6rem","fontStyle":"normal","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} /-->

<!-- wp:post-excerpt {"style":{"typography":{"lineHeight":"1.7"}},"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"var:preset|spacing|40","right":"var:preset|spacing|40","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"780px"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:query-pagination {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<!-- wp:query-pagination-previous {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"letterSpacing":"1px","fontSize":"0.9rem","textTransform":"uppercase"}}} /-->

<!-- wp:query-pagination-next {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"letterSpacing":"1px","fontSize":"0.9rem","textTransform":"uppercase"}}} /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query -->

The markup for blocks is a unique html mix of markup, comments, and json. When pasted into the block editor this markup is parsed into blocks that can then be customized with your content and settings. The rest of the content on this page is laid out from the above block pattern, next we are going to start looking into setting up our own block patterns.

Related Posts

  • Reusable Blocks

    Block patterns are great when you want a starting template of blocks to start plugging content into. If you want a set of blocks that remain the same from page to page that can be reused and edited from one spot, that is where reusable blocks come in handy. Let’s do a visual walkthrough of […]

  • Creating A Block Pattern with register_block_pattern

    Creating block patterns with plugins, or with the pattern directory tool is great. It offers a quick clean method for site owners to build their patterns with a visual tool and not have to dig into the code. For some clients they may just want to grab something from a collection of premade blocks patterns. […]

  • Creating A Block Pattern: BlockMeister – Block Pattern Builder

    BlockMeister – Block Pattern Builder is the next plugin I want to look into for building out block patterns. Unlike the previous plugin reviewed, this one is actively maintained by it’s developer. This plugin has both a free version and various levels of paid versions ranging from $19.99 – $99.99 a year. Some of the […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.