Browse Source

Erma: Updates the Blog Home template to use one query block

Uses css to vary the position of post images, rather than multiple columns, query loop, and spacer blocks.
Grant Kinney 1 year ago
parent
commit
2cfa59184d
2 changed files with 29 additions and 144 deletions
  1. 16 1
      erma/style.css
  2. 13 143
      erma/templates/home.html

+ 16 - 1
erma/style.css

@@ -1,6 +1,6 @@
 /*
 /*
 Theme Name: Erma
 Theme Name: Erma
-Theme URI: 
+Theme URI:
 Author: Automattic
 Author: Automattic
 Author URI: https://automattic.com/
 Author URI: https://automattic.com/
 Description: Erma is a WordPress portfolio block theme that features gorgeous imagery and modern layouts. With three unique style variations and elegant templates, Erma is the perfect choice for artists, designers, and other creative professionals looking to showcase their work in an eye-catching way. The theme's design is clean and sophisticated, allowing your portfolio pieces to take center stage.
 Description: Erma is a WordPress portfolio block theme that features gorgeous imagery and modern layouts. With three unique style variations and elegant templates, Erma is the perfect choice for artists, designers, and other creative professionals looking to showcase their work in an eye-catching way. The theme's design is clean and sophisticated, allowing your portfolio pieces to take center stage.
@@ -33,3 +33,18 @@ a {
 	text-decoration-thickness: .0625em !important;
 	text-decoration-thickness: .0625em !important;
 	text-underline-offset: .15em;
 	text-underline-offset: .15em;
 }
 }
+
+/*
+ * Blog Home template query loop offsets
+ */
+@media (min-width: 601px) {
+
+	.wp-block-query .is-layout-grid .wp-block-post:nth-child(5n+2) {
+		margin-top: 10vh;
+	}
+
+	.wp-block-query .is-layout-grid .wp-block-post:nth-child(5n+4) {
+		margin-top: 15vh;
+	}
+
+}

+ 13 - 143
erma/templates/home.html

@@ -1,155 +1,25 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|70"}}}} -->
-<div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"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 {"layout":{"type":"default"}} -->
+<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:query {"queryId":24,"query":{"perPage":"15","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"enhancedPagination":true,"align":"wide","layout":{"type":"default"}} -->
+<div class="wp-block-query alignwide"><!-- wp:post-template {"layout":{"type":"grid","columnCount":"5","minimumColumnWidth":null}} -->
 <!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
 <!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"7vh"} -->
-<div style="height:7vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":1,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"12vh"} -->
-<div style="height:12vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":3,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":4,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->
-
-<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|70"}}}} -->
-<div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":5,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"9vh"} -->
-<div style="height:9vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":6,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
+<!-- /wp:post-template -->
 
 
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":7,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"11vh"} -->
-<div style="height:11vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":8,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":9,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->
-
-<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|70"}}}} -->
-<div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":10,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"9vh"} -->
-<div style="height:9vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<!-- wp:query-pagination {"paginationArrow":"chevron","showLabel":false,"layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination-previous /-->
 
 
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":"11","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
+<!-- wp:query-pagination-numbers /-->
 
 
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":"12","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
 
 
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:spacer {"height":"11vh"} -->
-<div style="height:11vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":"13","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
-<!-- /wp:query --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:query {"queryId":14,"query":{"perPage":1,"pages":0,"offset":"14","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
-<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
-<!-- /wp:post-template --></div>
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
 <!-- /wp:query --></div>
 <!-- /wp:query --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns --></div>
 <!-- /wp:group -->
 <!-- /wp:group -->
 
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->