From 508032291b589a89860a30ebf0d8bf61cf5c9e6f Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:00:06 +1200
Subject: [PATCH] Theme: Enhance display of WordPress Playground blocks in
 lessons

Allow the block to expand to the full width when configured using block settings.
Style the embed container.

See #2664
---
 .../themes/pub/wporg-learn-2024/src/style/_playground.scss   | 5 +++++
 .../themes/pub/wporg-learn-2024/src/style/_sensei.scss       | 5 +++++
 wp-content/themes/pub/wporg-learn-2024/src/style/style.scss  | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_playground.scss

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_playground.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_playground.scss
new file mode 100644
index 000000000..748ae4ebc
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_playground.scss
@@ -0,0 +1,5 @@
+.wp-block-wordpress-playground-playground .wordpress-playground-content-container {
+	box-shadow: unset;
+	border: 1px solid var(--wp--custom--color--border);
+	border-radius: var(--wp--custom--box--border--radius);
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index e052241b5..291b3aae8 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -394,6 +394,11 @@ body.sensei-course-theme {
 			margin-right: unset;
 		}
 	}
+
+	// Allow alignfull blocks in the post content to expand beyond the contrained content width, eg. Playground blocks
+	&.sensei-default .sensei-course-theme__main-content > .entry-content {
+		max-width: unset !important;
+	}
 }
 
 .course:not(body) {
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
index ea6a0d054..a9a3db3e3 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
@@ -5,6 +5,7 @@
 
 @import "card-grid";
 @import "jetpack";
+@import "playground";
 @import "print";
 @import "sensei";
 @import "sidebar";