Add Front Page template (and patterns) (#5822)

Co-authored-by: Jeff Ong <jonger4@gmail.com>

pendant/patterns/hero.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Title: Home page hero
+ * slug: pendant/home-hero
+ */
+?>
+
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"0px","bottom":"0px"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+<div class="wp-block-group has-background-color has-foreground-background-color has-text-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:columns {"align":"full","style":{"spacing":{"blockGap":"0px"}}} -->
+<div class="wp-block-columns alignfull"><!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"bottom","width":"calc(1240px / 2)","style":{"spacing":{"padding":{"left":"var(--wp--custom--gap--horizontal)"}}}} -->
+<div class="wp-block-column is-vertically-aligned-bottom" style="padding-left:var(--wp--custom--gap--horizontal);flex-basis:calc(1240px / 2)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"100px","bottom":"100px","right":"calc(var(--wp--custom--gap--horizontal)/2)"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:100px;padding-right:calc(var(--wp--custom--gap--horizontal)/2);padding-bottom:100px"><!-- wp:paragraph {"placeholder":"Content…","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"x-small"} -->
+<p class="has-x-small-font-size" style="text-transform:uppercase"><?php echo esc_html__( 'Featured', 'pendant' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1,"style":{"typography":{"lineHeight":"1"}}} -->
+<h1 style="line-height:1"><?php echo esc_html__( 'October Finds', 'pendant' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link"><?php echo esc_html__( 'Explore', 'pendant' ); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"width":1000,"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/fists-on-chin.jpeg'; ?>" alt="" width="1000"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

pendant/patterns/image-gallery.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Title: Image Gallery
+ * slug: pendant/image-gallery
+ */
+?>
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+<!-- wp:group {"align":"wide"} -->
+<div class="wp-block-group alignwide">
+<!-- wp:heading {"level":4} -->
+<h4><?php echo esc_html__( 'What We\'re Loving', 'pendant' ); ?></h4>
+<!-- /wp:heading -->
+
+<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<div class="wp-block-columns" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/hands-on-hips.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/neck-and-necklace.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/two-necklaces.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:image {"id":80,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/above-the-ocean.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/a-watch.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+

pendant/patterns/image-series.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Image Series
+ * slug: pendant/image-series
+ */
+?>
+
+<!-- wp:group {"backgroundColor":"tertiary","layout":{"inherit":true}} -->
+<div class="wp-block-group has-tertiary-background-color has-background"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"},"blockGap":"100px"}},"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-group alignwide" style="padding-top:60px;padding-bottom:60px"><!-- wp:heading {"textAlign":"center","level":4} -->
+<h4 class="has-text-align-center"><?php echo esc_html__( 'Our Picks', 'pendant' ); ?></h4>
+<!-- /wp:heading -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"100px"}},"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/jewelery-1.png'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/jewelery-2.png'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/jewelery-3.png'; ?>" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

pendant/patterns/post-topics.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Title: Posts and Topics
+ * slug: pendant/posts-topics
+ */
+?>
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"60px","padding":{"top":"80px","bottom":"80px"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-top:80px;padding-bottom:80px"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":4,"fontSize":"large"} -->
+<h4 class="has-large-font-size"><?php echo esc_html__( 'Latest Interviews', 'pendant' ); ?></h4>
+<!-- /wp:heading -->
+
+<!-- wp:columns {"style":{"spacing":{"blockGap":"20px"}}} -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/jewelery-making-1.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:heading {"level":4} -->
+<h4><?php echo esc_html__( 'Q&amp;A with Lana DeVito, Jewelry designer', 'pendant' ); ?></h4>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/jewelery-making-2.jpeg'; ?>" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:heading {"level":4} -->
+<h4><?php echo esc_html__( 'Q&amp;A with Andrew Holsen, handmaker', 'pendant' ); ?></h4>
+<!-- /wp:heading --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"25%","layout":{"inherit":false}} -->
+<div class="wp-block-column" style="flex-basis:25%"><!-- wp:heading {"style":{"spacing":{"margin":{"bottom":"20px"}}},"fontSize":"large"} -->
+<h2 class="has-large-font-size" style="margin-bottom:20px"><?php echo esc_html__( 'Popular Topics', 'pendant' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","lineHeight":"2","letterSpacing":"0.1em"}},"fontSize":"x-small"} -->
+<p class="has-x-small-font-size" style="line-height:2;text-transform:uppercase;letter-spacing:0.1em"><?php echo wp_kses_post( 'rings<br>engagement/wedding rings<br>earrings<br>bracelets<br>necklaces<br>pendants<br>antique &amp; vintage jewelry<br>watches<br>24k GOLD<br>jewelry books<br>museum collections<br>interviews', 'pendant' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

pendant/style.css

@@ -116,13 +116,6 @@ a:focus {
 	width: 1em;
 }
 
-/*
- * We don't wish for the top-level elements to leverage the block-gap
- */
-.wp-site-blocks > * {
-	margin-block-start: 0;
-}
-
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or

pendant/templates/home.html

@@ -0,0 +1,27 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:pattern {"slug":"pendant/home-hero"} /-->
+
+<!-- wp:query {"queryId":1,"query":{"perPage":"4","pages":1,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"tagName":"main","displayLayout":{"type":"flex","columns":2},"layout":{"inherit":true}} -->
+<main class="wp-block-query"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"1.5em"}}}} -->
+<div class="wp-block-group alignwide" style="padding-top:1em;padding-bottom:1.5em"><!-- wp:post-template -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"2em","bottom":"2em"}}}} -->
+<div class="wp-block-group" style="padding-top:2em;padding-bottom:2em"><!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"16em"} /-->
+
+<!-- wp:post-title {"level":3,"isLink":true} /-->
+
+<!-- wp:post-excerpt /-->
+
+<!-- wp:read-more {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"fontSize":"medium"} /--></div>
+<!-- /wp:group -->
+<!-- /wp:post-template --></div>
+<!-- /wp:group --></main>
+<!-- /wp:query -->
+	
+<!-- wp:pattern {"slug":"pendant/image-series"} /-->
+
+<!-- wp:pattern {"slug":"pendant/posts-topics"} /-->
+
+<!-- wp:pattern {"slug":"pendant/image-gallery"} /-->
+
+<!-- wp:template-part {"slug":"footer"} /-->