Quadrat: Add Latest episodes block pattern (#3665)

* added Latest episodes block pattern * translatable strings * staging url for media * rebased, updated texts and adjusted paddings * added a group with padding to the blocks * Body line-height to 1.7. Co-authored-by: Jeff Ong <jonger4@gmail.com>
Automattic · Apr 26, 2021 · d9fd972 · d9fd972
1 parent 21c9f0b
commit d9fd972
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 4 deletions.
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json
@@ -87,7 +87,7 @@
 					"horizontal": "20px"
 				},
 				"line-height": {
-					"body": 1.6,
+					"body": 1.7,
 					"headings": {
 						"h1": 1.2,
 						"h2": 1.2,

diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json
@@ -278,7 +278,7 @@
 					"family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400"
 				],
 				"line-height": {
-					"body": 1.6,
+					"body": 1.7,
 					"headings": {
 						"h1": 1.2,
 						"h2": 1.2,

diff --git a/quadrat/header.php b/quadrat/header.php
@@ -7,7 +7,7 @@
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
  * @package WordPress
- * @subpackage çQuadrat
+ * @subpackage Quadrat
  * @since 1.0.0
  */
 ?><!doctype html>

diff --git a/quadrat/inc/block-patterns.php b/quadrat/inc/block-patterns.php
@@ -72,6 +72,51 @@ function quadrat_register_block_patterns() {
 				)
 			);
 
+			register_block_pattern(
+				'quadrat/latest-episodes',
+				array(
+					'title'      => __( 'Latest Episodes', 'quadrat' ),
+					'categories' => array( 'quadrat' ),
+					'content'    => '<!-- wp:columns {"align":"wide"} -->
+					<div class="wp-block-columns alignwide"><!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"30px"}}}} -->
+					<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:30px"><!-- wp:image {"id":1438,"sizeSlug":"large","linkDestination":"none","className":"image-no-margin mb-0"} -->
+					<figure class="wp-block-image size-large image-no-margin mb-0"><img src="https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/04/Screen-usage-1024x623.jpg" alt="' . esc_attr__( 'Illustration of a woman working on a laptop.', 'quadrat') . '" class="wp-image-1438"/></figure>
+					<!-- /wp:image -->
+					
+					<!-- wp:cover {"overlayColor":"darker-blue","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
+					<div class="wp-block-cover has-darker-blue-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"pink"} -->
+					<h3 class="has-pink-color has-text-color">' . esc_html__( 'Episode 1: How Screens Affect Hormones', 'quadrat') . '</h3>
+					<!-- /wp:heading -->
+					
+					<!-- wp:paragraph {"textColor":"pink","fontSize":"small"} -->
+					<p class="has-pink-color has-text-color has-small-font-size">' . esc_html__( 'In this episode, Sarah and Olivia talk with female hormone specialist Diana Roth about the impact that gadgets and technology have on hormone and fertility health.', 'quadrat') . '</p>
+					<!-- /wp:paragraph --></div></div>
+					<!-- /wp:cover --></div>
+					<!-- /wp:group --></div>
+					<!-- /wp:column -->
+					
+					<!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"30px"}}}} -->
+					<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:30px"><!-- wp:image {"id":1439,"sizeSlug":"large","linkDestination":"none","className":"image-no-margin mb-0"} -->
+					<figure class="wp-block-image size-large image-no-margin mb-0"><img src="https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/04/Leadership-1024x623.jpg" alt="' . esc_attr__( 'Illustration of a woman climbing steps.', 'quadrat') . '" class="wp-image-1439"/></figure>
+					<!-- /wp:image -->
+					
+					<!-- wp:cover {"overlayColor":"darker-blue","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
+					<div class="wp-block-cover has-darker-blue-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"pink"} -->
+					<h3 class="has-pink-color has-text-color">' . esc_html__( 'Episode 2: Female Leaders, Where Are They?', 'quadrat') . '</h3>
+					<!-- /wp:heading -->
+					
+					<!-- wp:paragraph {"textColor":"pink","fontSize":"small"} -->
+					<p class="has-pink-color has-text-color has-small-font-size">' . esc_html__( 'After years of revolution, the big question remains: why aren’t there more women in leadership? Sarah and Olivia get deep into the subject.', 'quadrat') . '</p>
+					<!-- /wp:paragraph --></div></div>
+					<!-- /wp:cover --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:group --></div>
+					<!-- /wp:columns -->',
+				)
+			);
+
 		}
 	}
 endif;

diff --git a/quadrat/sass/_utility.scss b/quadrat/sass/_utility.scss
@@ -0,0 +1,7 @@
+.image-no-margin {
+	margin: 0;
+	& > * { //the first sibling is a div on the editor and an image on the frontend
+		vertical-align: bottom;
+	}
+}
+
diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss
@@ -1,2 +1,3 @@
 @import '../../blank-canvas-blocks/sass/base/breakpoints'; // Get the mobile-only media query and make it available to this theme's styles
-@import 'blocks/media-text';
+@import 'blocks/media-text';
+@import "utility";