Term: Home

[MaggieCabrera]

https://www.figma.com/community/file/1263420783737936752

[NettiNiko]

Initial draft of my attempt at the home page grid, not completed yet

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:0;margin-bottom:0"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0"}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"border":{"radius":"35px"},"spacing":{"blockGap":"0"}},"backgroundColor":"custom-black","layout":{"type":"grid","columnCount":"2","minimumColumnWidth":null,"rowCount":"1"}} -->
<div class="wp-block-group has-custom-black-background-color has-background" style="border-radius:35px"><!-- wp:group {"style":{"spacing":{"padding":{"right":"1em","left":"1em"}},"border":{"radius":"35px","width":"4px"}},"backgroundColor":"custom-beige","layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group has-custom-beige-background-color has-background" style="border-width:4px;border-radius:35px;padding-right:1em;padding-left:1em"><!-- wp:query {"queryId":30,"query":{"perPage":"1","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->

<!-- wp:post-date /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"radius":"35px","width":"4px"},"spacing":{"padding":{"right":"1em","left":"1em"}}},"backgroundColor":"custom-beige","layout":{"type":"grid","columnCount":"1","minimumColumnWidth":null,"rowCount":"1"}} -->
<div class="wp-block-group has-custom-beige-background-color has-background" style="border-width:4px;border-radius:35px;padding-right:1em;padding-left:1em"><!-- wp:query {"queryId":35,"query":{"perPage":"2","pages":0,"offset":"1","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:post-template {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
<!-- wp:post-title /-->

<!-- wp:post-date /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:group --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[dballari]

Hi, I have given this a try, using @NettiNiko approach to have multiple loops, but using the new grid layout instead. And it works!

The trick is on the col span and row span settings. At first I did not find them but they are there.

So my solution consists of a grid of stacks which contain a loop each one with a post and an offset. I provide here my code and screenshots.

I know everyone is now working on the TT5 theme, I’m also helping a little there. And I noticed that Bea’s News blog with various grids in the Complex News Blog section of the Figma file, could be implemented using this technique, maybe.

`

`

[dballari]

I tryed to add the code but is not shown correctly. Here I attach the code as a text file: home-wip.txt

[dballari]

Hi @NettiNiko I do not now if you are still working on this. To make my work easier to see and try, I'm sending a pull request. If you are still working on this never mind my pull request. Cheers