Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Blog (four column grid) #184

Open alaczek opened 3 years ago

alaczek commented 3 years ago

image

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"60px","right":"5vw","bottom":"60px","left":"5vw"}}}} -->
<div class="wp-block-group alignfull" style="padding-top:60px;padding-right:5vw;padding-bottom:60px;padding-left:5vw"><!-- wp:heading {"align":"full"} -->
<h2 class="alignfull"><span class="uppercase">Recipes</span></h2>
<!-- /wp:heading -->

<!-- wp:query {"queryId":2,"query":{"perPage":4,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":4},"align":"full"} -->
<div class="wp-block-query alignfull"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->

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

<!-- wp:post-terms {"term":"category","textAlign":"center","fontSize":"tiny"} /-->

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

<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"fontSize":"large"} /-->

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

<!-- wp:post-excerpt {"textAlign":"center","moreText":"\u003cspan class=\u0022uppercase\u0022\u003e\u003cstrong\u003eREAD MORE\u003c/strong\u003e\u003c/span\u003e","fontSize":"small","style":{"typography":{"lineHeight":"1.5"}}} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
alaczek commented 3 years ago

The caveat with this one it's using the Query block, and when images are not uniform height, it ends up looking something like this (using Seedlet):

image

@ianstewart is this a blocker for launch?