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
WordPress · Aug 29, 2024 · 5080322 · 5080322
1 parent 243564a
commit 5080322
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
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
@@ -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
@@ -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
@@ -5,6 +5,7 @@
 
 @import "card-grid";
 @import "jetpack";
+@import "playground";
 @import "print";
 @import "sensei";
 @import "sidebar";