Add/pendant about page patterns (#5806)

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

pendant/functions.php

@@ -19,10 +19,11 @@ if ( ! function_exists( 'pendant_support' ) ) :
 	 * @return void
 	 */
 	function pendant_support() {
+		// Add support for block styles.
+		add_theme_support( 'wp-block-styles' );
 
 		// Enqueue editor styles.
 		add_editor_style( 'style.css' );
-
 	}
 
 endif;
@@ -56,3 +57,9 @@ if ( ! function_exists( 'pendant_styles' ) ) :
 endif;
 
 add_action( 'wp_enqueue_scripts', 'pendant_styles' );
+
+function pendant_register_block_pattern_categories() {
+	register_block_pattern_category( 'pendant', array( 'label' => __( 'Pendant', 'pendant' ) ) );
+}
+	
+add_action( 'init', 'pendant_register_block_pattern_categories', 9 );

pendant/patterns/404.php

@@ -2,7 +2,7 @@
 /**
  * Title: A 404 page
  * slug: pendant/404
- * Inserter: no
+ * inserter: no
  */
 
 ?>
@@ -27,4 +27,3 @@
 
 </div>
 <!-- /wp:group -->
-

pendant/patterns/about.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Title: About
+ * slug: pendant/about
+ * categories: pendant
+ */
+?>
+
+<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px"},"padding":{"top":"40px","bottom":"50px"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background" style="margin-top:0px;padding-top:40px;padding-bottom:50px"><!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"42%"} -->
+<div class="wp-block-column" style="flex-basis:42%"><!-- wp:heading {"level":1,"align":"wide"} -->
+<h1 class="alignwide"><?php echo  esc_html__( 'About', 'pendant' ); ?></h1>
+<!-- /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/person-in-dress-at-shore.jpg'; ?>" alt="" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:heading {"level":4} -->
+<h4><?php echo  esc_html__( 'Mia Moore, Jewelry lover', 'pendant' ); ?></h4>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><em><?php echo  esc_html__( '“The more I learn about jewelry and dive into its history, the more I love it. Getting to know the meanings behind objects in particular moments in time, how they translated into status, wealth or power. Jewelry has always been a way to communicate and distinguish and with the evolution of society, it turned into another way of expression, like clothing. I’m passionate about how we use it to express who we really are.”', 'pendant' ); ?></em></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

pendant/patterns/image-and-quote.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: Image & Quote
+ * slug: pendant/image-and-quote
+ * categories: pendant
+ */
+?>
+
+<!-- wp:media-text {"align":"full","mediaLink":"<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/person-with-shadow-on-wall.jpeg'; ?>","mediaType":"image","mediaWidth":40,"mediaSizeSlug":"full","backgroundColor":"secondary"} -->
+<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center has-secondary-background-color has-background" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/person-with-shadow-on-wall.jpeg'; ?>" alt=""/></figure><div class="wp-block-media-text__content">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"40px","left":"30px"}}}} -->
+<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:40px;padding-left:30px"><!-- wp:quote {"className":"is-style-plain"} -->
+<blockquote class="wp-block-quote is-style-plain"><p>
+<?php echo  esc_html__( '"We’re very lucky to be able to write about our passion and interview those whose work we admire."', 'pendant' ); ?>
+</p><cite><?php echo esc_html__( 'Marie, editor for PNDNT', 'pendant' ); ?></cite></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:media-text -->

pendant/patterns/team.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Title: Team
+ * slug: pendant/team
+ * categories: pendant
+ */
+?>
+
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"5vw","bottom":"5vw"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group alignwide" style="padding-top:5vw;padding-bottom:5vw"><!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"25%","style":{"spacing":{"padding":{"top":"7vw"}}}} -->
+<div class="wp-block-column is-vertically-aligned-top" style="padding-top:7vw;flex-basis:25%"><!-- wp:heading {"level":3} -->
+<h3><?php echo esc_html__( 'The Team', 'pendant' ); ?></h3>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1.5vw","bottom":"3vw"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="padding-top:1.5vw;padding-bottom:3vw"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized is-style-default"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/smiling-woman-1.jpeg'; ?>" alt="" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><strong><?php echo esc_html__( 'Marie', 'pendant' ); ?></strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em><?php echo esc_html__( 'Editor &amp; Jeweler', 'pendant' ); ?></em></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"1.5vw","bottom":"3vw"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="padding-top:1.5vw;padding-bottom:3vw"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized is-style-default"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/smiling-woman-3.jpeg'; ?>" alt="" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><strong><?php echo esc_html( 'Sandra', 'pendant' ); ?></strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em><?php echo esc_html__( 'Writer, Editor &amp; Jewelry Designer' ); ?></em></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1.5vw","bottom":"3vw"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="padding-top:1.5vw;padding-bottom:3vw"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized is-style-default"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/smiling-woman-2.jpeg'; ?>" alt="" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><strong><?php echo esc_html__( 'Tanya', 'pendant' ); ?></strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em><?php echo esc_html__( 'Editor &amp; Public Relations', 'pendant' ); ?></em></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"1.5vw","bottom":"3vw"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="padding-top:1.5vw;padding-bottom:3vw"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized is-style-default"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/man-with-backward-cap.jpeg'; ?>" alt="" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><strong><?php echo esc_html__( 'Ryan', 'pendant' ); ?></strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em><?php echo esc_html__( 'Marketing &amp; Social Media', 'pendant' ); ?></em></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

pendant/style.css

@@ -116,6 +116,13 @@ 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
@@ -168,6 +175,18 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	width: inherit;
 }
 
+/* We are unable to style the "cite" element in the quote block */
+.wp-block-quote cite {
+	font-family: var(--wp--preset--font-family--body-font);
+	font-style: italic;
+	font-size: var(--wp--preset--font-size--x-small);
+}
+
+/* The plain quote block has a left-padding that doesn't work well with our design */
+.wp-block-quote.is-style-plain {
+	padding-left: 0;
+}
+
 /** Navigation sub-menu items **/
 .wp-block-navigation .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
 	text-transform: uppercase;
@@ -175,4 +194,4 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	line-height: 2.6;
 	font-size: var(--wp--preset--font-size--x-small);
 	letter-spacing: 0.1em;
-}
+}

pendant/theme.json

@@ -175,7 +175,7 @@
 				},
 				{
 					"name": "Medium",
-					"size": "1.25rem",
+					"size": "clamp(1rem, 2vw, 1.25rem)",
 					"slug": "medium"
 				},
 				{
@@ -223,7 +223,7 @@
 			},
 			"core/heading": {
 				"typography": {
-					"lineHeight": 1.125
+					"lineHeight": 1.5
 				}
 			},
 			"core/navigation": {
@@ -260,6 +260,12 @@
 					"fontSize": "var(--wp--preset--font-size--x-small)"
 				}
 			},
+			"core/quote": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontSize": "clamp(1.25rem, 2.5vw, 2rem)"
+				}
+			},
 			"core/site-title": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--medium)",