Playground block v0.2.3: Do not apply editor styles to blocks rendere…

…d outside of the editor
WordPress · May 6, 2024 · 428986d · 428986d
1 parent 1a54e43
commit 428986d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/packages/wordpress-playground-block/README.plugindirectory.txt b/packages/wordpress-playground-block/README.plugindirectory.txt
@@ -3,7 +3,7 @@ Contributors: wordpressdotorg, dawidurbanski, zieladam
 Tags: code, interactive, playground, block
 Requires at least: 6.0
 Tested up to: 6.4
-Stable tag: 0.2.2
+Stable tag: 0.2.3
 Requires PHP: 7.0
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -16,9 +16,9 @@ This WordPress block embeds WordPress Playground in your posts and pages. You ca
 == Usage ==
 
 -   Navigate to any post or page editing screen in WordPress.
--   Click the '+' button to add a new block and search for 'Interactive Code Block'.
--   Select the Interactive Code Block from the list of available blocks.
--   A new interactive code block will be inserted into your post or page. You can start typing PHP code directly into the block.
+-   Click the '+' button to add a new block and search for 'WordPress Playground Block'.
+-   Select the WordPress Playground Block from the list of available blocks.
+-   A new WordPress Playground Block will be inserted into your post or page. You can start typing PHP code directly into the block.
 -   Click the 'Run' button to execute the code and see the results in the output area below the code block.
 
 == All features ==

diff --git a/packages/wordpress-playground-block/src/editor.scss b/packages/wordpress-playground-block/src/editor.scss
@@ -1,50 +1,57 @@
-.wp-block-wordpress-playground-playground {
-	position: relative;
+/**
+ * The .editor-styles-wrapper class is required here – we cannot assume
+ * the editor.scss file will only be loaded in the editor. Some environments
+ * load both the view styles and the editor styles.
+ */
+.editor-styles-wrapper {
+	.wp-block-wordpress-playground-playground {
+		position: relative;
 
-	&::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 1000;
-	}
-
-	&.is-selected {
 		&::after {
-			content: none;
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 1000;
+		}
+
+		&.is-selected {
+			&::after {
+				content: none;
+			}
 		}
 	}
-}
 
-.wordpress-playground-block-button {
-	display: inline-flex;
-	align-items: center;
-	appearance: none;
-	background-color: transparent;
-	border: 0;
-	cursor: pointer;
-	font-weight: bold;
-	font-size: 12px;
-}
+	.wordpress-playground-block-button {
+		display: inline-flex;
+		align-items: center;
+		appearance: none;
+		background-color: transparent;
+		border: 0;
+		cursor: pointer;
+		font-weight: bold;
+		font-size: 12px;
+	}
 
-.file-actions {
-	display: flex;
-	align-items: center;
+	.file-actions {
+		display: flex;
+		align-items: center;
 
-	path {
-		fill: currentColor;
+		path {
+			fill: currentColor;
+		}
 	}
-}
 
-.button-destructive {
-	color: red;
-	&:hover {
-		color: #ff4545;
+	.button-destructive {
+		color: red;
+		&:hover {
+			color: #ff4545;
+		}
 	}
-}
 
-.button-non-destructive {
-	color: #eee;
+	.button-non-destructive {
+		color: #eee;
+	}
 }
diff --git a/packages/wordpress-playground-block/wordpress-playground-block.php b/packages/wordpress-playground-block/wordpress-playground-block.php
@@ -4,7 +4,7 @@
  * Description:       WordPress Playground as a Gutenberg block.
  * Requires at least: 6.1
  * Requires PHP:      7.0
- * Version:           0.2.2
+ * Version:           0.2.3
  * Author:            Dawid Urbański, Adam Zieliński
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html