From 79b4c42136f6d80a30ee927d3ef9eab0bc1af732 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:55:38 +1200
Subject: [PATCH] 2024 Theme: Fix card image aspect ratio

---
 .../themes/pub/wporg-learn-2024/parts/card-course-h3.html     | 2 +-
 wp-content/themes/pub/wporg-learn-2024/parts/card-course.html | 4 ++--
 .../themes/pub/wporg-learn-2024/parts/card-lesson-h3.html     | 2 +-
 wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html | 2 +-
 wp-content/themes/pub/wporg-learn-2024/parts/card.html        | 2 +-
 .../pub/wporg-learn-2024/patterns/page-my-courses-content.php | 2 +-
 .../themes/pub/wporg-learn-2024/src/style/_card-grid.scss     | 3 ++-
 7 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
index 7eb7e2b1f..ecff26cbe 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 		
-	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
index 75d7f6a12..3db21a15f 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-		
-	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
index 10b631322..194298cb8 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 		
-	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
index 4d54dac0d..5fcff651a 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 		
-	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
index 35c8ebb32..d92c93eda 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 		
-	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
index 9570fc5d9..cc3797f99 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
@@ -37,7 +37,7 @@
 		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-			<!-- wp:post-featured-image {"isLink":true,"height":"","align":"center"} /-->
+			<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"var:preset|spacing|10"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
index 2084f7c1f..bd504b236 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
@@ -6,7 +6,8 @@
 
 	.wp-block-group,
 	.wp-block-post-title,
-	.wp-block-post-excerpt {
+	.wp-block-post-excerpt,
+	.wp-block-post-featured-image {
 		max-width: 100%;
 	}