Skip to content

Instantly share code, notes, and snippets.

@pagelab
Created April 25, 2025 21:31
Show Gist options
  • Save pagelab/af8c3a3d7fea5432b71800c3a2e14996 to your computer and use it in GitHub Desktop.
Save pagelab/af8c3a3d7fea5432b71800c3a2e14996 to your computer and use it in GitHub Desktop.
Latest and Oldest post WordPress block pattern (for Sarah)
<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Latest Posts</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":28,"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"metadata":{"categories":["posts"],"patternName":"core/query-small-posts","name":"Small image and title"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center","style":{"color":{"background":"#f6ffeb"}}} -->
<div class="wp-block-columns are-vertically-aligned-center has-background" style="background-color:#f6ffeb"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true,"style":{"border":{"radius":"0px"}}} /--></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true,"fontSize":"medium"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Oldest Posts</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":28,"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","order":"asc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[]},"metadata":{"categories":["posts"],"patternName":"core/query-small-posts","name":"Small image and title"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center","style":{"color":{"background":"#fff3f3"}}} -->
<div class="wp-block-columns are-vertically-aligned-center has-background" style="background-color:#fff3f3"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"style":{"border":{"radius":"0px"}}} /--></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true,"linkTarget":"_blank","style":{"typography":{"fontSize":"1.3rem"},"elements":{"link":{":hover":{"color":{"text":"var:preset|color|accent-3"}}}}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment