From 98bdcb1eab1f1c70aa018b53b0a9a2db27053632 Mon Sep 17 00:00:00 2001
From: JuanMa Garrido <juanma.garrido@gmail.com>
Date: Fri, 30 Aug 2024 11:43:59 +0200
Subject: [PATCH] isSelected

---
 _app/src/HomePage.js |  5 ++++-
 _app/src/styles.scss | 20 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/_app/src/HomePage.js b/_app/src/HomePage.js
index 27e2fff4..27f63ec9 100644
--- a/_app/src/HomePage.js
+++ b/_app/src/HomePage.js
@@ -179,6 +179,7 @@ const Examples = () => {
 	const onChangeSelection = ( [ selectedExampleSlug ] ) => {
 		setSelectedExample( selectedExampleSlug );
 	};
+
 	useEffect( () => {
 		if ( filterTags ) {
 			setSearchParams( { tags: filterTags, operator: filterOperator } );
@@ -220,12 +221,14 @@ const Examples = () => {
 						<_DataViews />
 					</div>
 					<div className="iframeContainer">
-						{ selectedExample && (
+						{ selectedExample ? (
 							<iframe
 								src={ `https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/${ selectedExample }/_playground/blueprint.json` }
 								title="Example Iframe" // Title for accessibility
 								loading="lazy" // Optional: Defer loading the iframe until it is visible
 							/>
+						) : (
+							<p>👈 Select an example to view the demo</p>
 						) }
 					</div>
 				</div>
diff --git a/_app/src/styles.scss b/_app/src/styles.scss
index 72a3a179..b7692a19 100644
--- a/_app/src/styles.scss
+++ b/_app/src/styles.scss
@@ -64,8 +64,19 @@ body {
 	}
 
 	.iframeContainer {
-		width: 60%;
+		width: 50%;
+		height: 90vh;
 		float: left;
+
+		display: table;
+	}
+
+	.iframeContainer p {
+		text-align: center;
+		vertical-align: middle;
+		display: table-cell;
+		color: rgb(238, 55, 55);
+		font-size: 1.2em;
 	}
 }
 
@@ -82,7 +93,7 @@ iframe {
 }
 
 .dataviews-view-list .dataviews-view-list__media-wrapper,
-.dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
+.dataviews-view-list li .dataviews-view-list__primary-field {
 	display: none;
 }
 
@@ -100,3 +111,8 @@ iframe {
 .dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(5) {
 	flex: 1 1 100%;
 }
+
+.dataviews-view-list li.is-selected.is-selected {
+	background: #fcfcfc;
+	border-right: 4px solid rgb(20, 19, 19);
+}