Grid of Posts 4×2

[iamtakashi]

Imported from Masu. Obviously, the preview varies with the posts that exist on the site.

Categories: Wireframe, Blog Tags: Pattern, Layout

Screenshot (in the editor):

Markup:

<!-- wp:query {"queryId":0,"query":{"perPage":"8","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":4},"align":"wide"} -->
<div class="wp-block-query alignwide"><!-- wp:post-template -->
<!-- wp:group {"style":{"visualizers":{"padding":{"top":true,"right":true,"bottom":true,"left":true}}},"layout":{"inherit":false}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:post-featured-image {"isLink":true} /-->

<!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.6","fontStyle":"normal","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}},"fontSize":"small"} /-->

<!-- wp:spacer {"height":"1rem","style":{"spacing":{"margin":{"top":"0.625rem"}}}} -->
<div style="margin-top:0.625rem;height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->

Preview: https://dotcompatterns.wordpress.com/?p=7996&preview=true

I think it's worth noting the category and the tag the author intends to add in each issue going forward. Let's add categories and tags to the template.

cc: @alaczek @onuro

[onuro]

Looking good!

I think the pagination can also be styled a bit in here, like adding some spacing to page numbers and maybe enabling arrow for next/previous page.

[iamtakashi]

Ok, I've added arrows with the option.

like adding some spacing to page numbers

Can we do this in the editor? Or is this theme-specific setting?

[onuro]

Can we do this in the editor? Or is this theme-specific setting?

Good question! :) Thinking again, I think that part can be handled by the theme settings.

[iamtakashi]

I think that part can be handled by the theme settings. ok :)

Published!