Skip to content

Instantly share code, notes, and snippets.

@justintadlock
Created December 21, 2023 14:09
Show Gist options
  • Save justintadlock/75fff90417ea2da1c9dfa47371ce9480 to your computer and use it in GitHub Desktop.
Save justintadlock/75fff90417ea2da1c9dfa47371ce9480 to your computer and use it in GitHub Desktop.
Query Loop pattern with stretched Stack block nested in Cover
<!-- wp:query {"queryId":0,"query":{"perPage":"7","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"align":"full","className":"pattern-post-grid-cover","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignfull pattern-post-grid-cover"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|plus-3","left":"var:preset|spacing|plus-3","top":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)","bottom":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--theme-spacing--plus-3);padding-right:var(--wp--preset--spacing--plus-3);padding-bottom:var(--theme-spacing--plus-3);padding-left:var(--wp--preset--spacing--plus-3)"><!-- wp:post-template {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|minus-3"}},"className":"is-style-no-gap is-style-flex-grow is-style-featured-col-span-2","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"tagName":"article","layout":{"type":"default"}} -->
<article class="wp-block-group"><!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"isUserOverlayColor":true,"minHeight":32,"minHeightUnit":"rem","contentPosition":"center center","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|plus-3","right":"var:preset|spacing|plus-3","bottom":"var:preset|spacing|plus-3","left":"var:preset|spacing|plus-3"}}},"className":"is-style-default","layout":{"type":"default"}} -->
<div class="wp-block-cover alignfull is-style-default" style="padding-top:var(--wp--preset--spacing--plus-3);padding-right:var(--wp--preset--spacing--plus-3);padding-bottom:var(--wp--preset--spacing--plus-3);padding-left:var(--wp--preset--spacing--plus-3);min-height:32rem"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"dimensions":{"minHeight":"28rem"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
<div class="wp-block-group" style="min-height:28rem"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:post-terms {"term":"category","className":"is-style-button"} /-->
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:post-date {"format":"d","style":{"typography":{"fontStyle":"normal","fontWeight":"900"}},"fontSize":"3-xl"} /-->
<!-- wp:post-date {"format":"M","style":{"typography":{"textTransform":"uppercase"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"header","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<header class="wp-block-group"><!-- wp:post-title {"isLink":true} /--></header>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></article>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:group -->
<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment