Rainfall: add Home template (#6450)

* Home template updates.
* Patternise sidebar content
* Move images to assets directory

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

rainfall/patterns/big-header.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Title: Big Header
+ * Slug: rainfall/big-header
+ * Categories: featured
+ */
+?>
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull">
+<!-- wp:column {"width":"75%"} -->
+<div class="wp-block-column" style="flex-basis:75%">
+<!-- wp:heading {"className":"indented-post-title","fontSize":"xx-large"} -->
+<h2 class="has-xx-large-font-size indented-post-title"><?php esc_html_e( 'The City That Never Sleeps', 'rainfall' ); ?></h2>
+<!-- /wp:heading -->
+</div>
+<!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
+
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"bottom","width":"33.33%"} -->
+<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:33.33%"><!-- wp:heading {"fontSize":"xx-large"} -->
+<h2 class="has-xx-large-font-size"><?php echo esc_html__( '002', 'rainfall' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
+<p style="text-transform:uppercase"><a href="/about"><?php esc_html_e( 'Read Issue', 'rainfall' ); ?></a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:image {"align":"right","sizeSlug":"large","linkDestination":"custom"} -->
+<figure class="wp-block-image alignright size-large"><a href="/about"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/home.jpg" alt="<?php esc_html_e( 'Person with umbrella', 'rainfall' ); ?>"/></a></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+</div>
+<!-- /wp:group -->
+

rainfall/patterns/contacts.php

@@ -17,7 +17,7 @@
 
 <!-- wp:column {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--30)"}},"border":{"top":{"color":"var:preset|color|black","width":"1px"}}}} -->
 <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading -->
-<h2><?php echo esc_html__( 'EDITORIAL &amp; SUBMISSIONS', 'rainfall' ); ?></h2>
+<h2><?php echo esc_html__( 'Editorial &amp; Submissions', 'rainfall' ); ?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

rainfall/patterns/home-query.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Title: Home Query
+ * Slug: rainfall/home-query
+ * Categories: featured, columns
+ */
+?>
+
+<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"fontSize":"xx-large"} -->
+<h2 class="has-xx-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><?php esc_html_e( 'Issues', 'rainfall' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->
+
+<!-- wp:query {"queryId":0,"query":{"pages":0,"offset":0,"postType":"post","inherit":true,"perPage":4},"displayLayout":{"type":"flex","columns":2}} -->
+<div class="wp-block-query">
+<!-- wp:post-template -->
+
+<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"align":"wide","style":{"spacing":{"blockGap":"1rem"}}} -->
+<div class="wp-block-group alignwide">
+<!-- wp:post-featured-image {"width":"100%","height":"max(32vw, 50vh)"} /-->
+
+<!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
+
+<!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.1","textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"color":{"text":"#ffffff","link":"#ffffff"}},"fontSize":"large"} /-->
+
+<!-- wp:post-excerpt /--></div>
+<!-- /wp:group -->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:query -->

rainfall/patterns/media-text.php

@@ -20,9 +20,9 @@
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/rainfall-background.jpg'; ?>","id":2061,"dimRatio":50,"minHeight":80,"minHeightUnit":"vh","contentPosition":"center center","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
-<div class="wp-block-cover" style="min-height:80vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-2061" alt="" src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/rainfall-background.jpg'; ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":2065,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
-<figure class="wp-block-image aligncenter size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/rainfall-foreground.jpg'; ?>" alt="" class="wp-image-2065"/></figure>
+<div class="wp-block-column"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ) . '/assets/rainfall-background.jpg'; ?>","dimRatio":50,"minHeight":80,"minHeightUnit":"vh","contentPosition":"center center","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<div class="wp-block-cover" style="min-height:80vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-2061" alt="" src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/rainfall-background.jpg'; ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image aligncenter size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/rainfall-foreground.jpg'; ?>" alt="" class="wp-image-2065"/></figure>
 <!-- /wp:image --></div></div>
 <!-- /wp:cover --></div>
 <!-- /wp:column --></div>

rainfall/patterns/sidebar.php

@@ -1,16 +1,32 @@
 <?php
 /**
- * Title: Sidebar content
+ * Title: Sidebar Content
  * Slug: rainfall/sidebar
  * Categories: columns
  */
 ?>
-<!-- wp:search {"label":"<?php esc_html_e( 'Search for a topic', 'rainfall' ); ?>","buttonText":"<?php esc_html_e( 'Search', 'rainfall' ); ?>"} /-->
+<!-- wp:heading {"level":6,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}}} -->
+<h6 style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)"><?php echo esc_html__( 'Search for a Topic', 'rainfall' ); ?></h6>
+<!-- /wp:heading -->
+
+<!-- wp:search {"label":"<?php echo esc_html__( 'Search for a Topic', 'rainfall' ); ?>","showLabel":false,"buttonText":"<?php echo esc_html__( 'Search', 'rainfall' ); ?>"} /-->
+
+<!-- wp:heading {"level":6,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}}} -->
+<h6 style="margin-bottom:var(--wp--preset--spacing--20)"><?php echo esc_html__( 'Categories', 'rainfall' ); ?></h6>
+<!-- /wp:heading -->
+
+<!-- wp:categories /-->
+
+<!-- wp:heading {"level":6,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}}} -->
+<h6 style="margin-bottom:var(--wp--preset--spacing--20)"><?php echo esc_html__( 'Posted Recently', 'rainfall' ); ?></h6>
+<!-- /wp:heading -->
+
+<!-- wp:latest-posts {"postsToShow":3} /-->
 
-<!-- wp:heading {"level":6} -->
-<h6><?php esc_html_e( 'Submissions', 'rainfall' ); ?></h6>
+<!-- wp:heading {"level":6,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}}} -->
+<h6 style="margin-bottom:var(--wp--preset--spacing--20)"><?php echo esc_html__( 'Submissions', 'rainfall' ); ?></h6>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php esc_html_e( 'Would you like to contribute as an editor or a writer to our blog? Let us know all the details about yourself and send us a message.', 'rainfall' ); ?></p>
+<p><?php echo esc_html__( 'Would you like to contribute as an editor or a writer to our blog? Let us know all the details about yourself and send us a message.', 'rainfall' ); ?></p>
 <!-- /wp:paragraph -->

rainfall/patterns/testimonials.php

@@ -15,7 +15,7 @@
 
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"width":"20%"} -->
-<div class="wp-block-column" style="flex-basis:20%"><!-- wp:image {"align":"center","id":443,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+<div class="wp-block-column" style="flex-basis:20%"><!-- wp:image {"align":"center","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
 <figure class="wp-block-image aligncenter size-large is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/testimonial-1.png" alt="" class="wp-image-443"/></figure>
 <!-- /wp:image -->
 
@@ -29,7 +29,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:image {"align":"center","id":442,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+<div class="wp-block-column"><!-- wp:image {"align":"center","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
 <figure class="wp-block-image aligncenter size-large is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/testimonial-2.png" alt="" class="wp-image-442"/></figure>
 <!-- /wp:image -->
 
@@ -43,7 +43,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:image {"align":"center","id":441,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+<div class="wp-block-column"><!-- wp:image {"align":"center","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
 <figure class="wp-block-image aligncenter size-large is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/testimonial-3.png" alt="" class="wp-image-441"/></figure>
 <!-- /wp:image -->
 
@@ -57,7 +57,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:image {"align":"center","id":439,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+<div class="wp-block-column"><!-- wp:image {"align":"center","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
 <figure class="wp-block-image aligncenter size-large is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/testimonial-4.png" alt="" class="wp-image-439"/></figure>
 <!-- /wp:image -->
 

rainfall/style.css

@@ -17,10 +17,10 @@ Tags: two-columns, custom-colors, custom-menu, custom-logo, editor-style, featur
 /**
  * Post title indent
  */
-.wp-block-post-title:not(.editor-post-title) {
+.indented-post-title {
 	margin-left: 1ch;
 	text-indent: -1ch;
-}
+ }
 
 /**
  * Comment form elements

rainfall/templates/home.html

@@ -0,0 +1,43 @@
+<!-- wp:group {"backgroundColor":"orange"} -->
+<div class="wp-block-group has-orange-background-color has-background">
+
+	<!-- wp:template-part {"slug":"header","tag":"header"} /-->
+	<!-- wp:pattern {"slug":"rainfall/big-header"} /-->
+
+<!-- wp:spacer {"height":"12px"} -->
+<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"9.36rem"}}} -->
+<div class="wp-block-columns alignwide">
+
+<!-- wp:column {"width":"70%","style":{"spacing":{"padding":{"top":"20px","right":"0","bottom":"20px","left":"0"}}}} -->
+<div class="wp-block-column" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;flex-basis:70%">
+
+<!-- wp:pattern {"slug":"rainfall/home-query"} /-->
+
+</div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"30%","style":{"spacing":{"padding":{"top":"20px","right":"0","bottom":"20px","left":"0"}}}} -->
+<div class="wp-block-column" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;flex-basis:30%">
+
+<!-- wp:template-part {"slug":"sidebar"} /-->
+
+</div>
+<!-- /wp:column -->
+
+</div>
+<!-- /wp:columns -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"type":"default"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"black","textColor":"white"} -->
+<div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color">
+	<!-- wp:pattern {"slug":"rainfall/cta"} /-->
+	<!-- wp:template-part {"slug":"footer","tag":"footer"} /-->
+</div>
+<!-- /wp:group -->

rainfall/templates/page-header-black.html

@@ -5,7 +5,7 @@
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
-<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"className":"indented-post-title"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->

rainfall/templates/page-no-sidebar.html

@@ -4,7 +4,7 @@
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
-<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"className":"indented-post-title"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->

rainfall/templates/page.html

@@ -4,7 +4,7 @@
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
-<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+<div class="wp-block-column" style="flex-basis:55rem"><!-- wp:post-title {"className":"indented-post-title"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->

rainfall/templates/single.html

@@ -4,7 +4,7 @@
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"80%"} -->
-<div class="wp-block-column" style="flex-basis:80%"><!-- wp:post-title {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+<div class="wp-block-column" style="flex-basis:80%"><!-- wp:post-title {"className":"indented-post-title"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"20%","verticalAlignment":"bottom"} -->

rainfall/theme.json

@@ -140,8 +140,8 @@
 				},
 				{
 					"fluid": {
-						"max": "4rem",
-						"min": "7rem"
+						"max": "7rem",
+						"min": "4rem"
 					},
 					"name": "Extra Extra Large",
 					"size": "6.5rem",
@@ -260,7 +260,8 @@
 					}
 				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--xx-large)"
+					"fontSize": "var(--wp--preset--font-size--xx-large)",
+					"textTransform": "uppercase"
 				}
 			},
 			"core/query-pagination": {