From 669662c740bf0e69f58ad1d7e570607c066f31ef Mon Sep 17 00:00:00 2001
From: Akira Tachibana <atachibana@unofficialtokyo.com>
Date: Tue, 14 Jan 2025 17:33:28 +0900
Subject: [PATCH] Docs: Interactivity API - missing styles in the sample code
 (#66253)

Co-authored-by: atachibana <atachibana@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../the-reactive-and-declarative-mindset.md    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
index 3760fdf3867802..4f167d4e37de8a 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
@@ -28,6 +28,15 @@ Take, for example, this interactive block with two buttons and a paragraph:
 	<p id="status-paragraph" class="inactive" hidden>this is inactive</p>
 </div>
 
+<style>
+	.active {
+		color: green;
+	}
+	.inactive {
+		color: red;
+	}
+</style>
+
 <script>
 	const showHideBtn = document.getElementById( 'show-hide-btn' );
 	const activateBtn = document.getElementById( 'activate-btn' );
@@ -101,6 +110,15 @@ The declarative approach simplifies the process by focusing on _what_ should hap
 		this is inactive
 	</p>
 </div>
+
+<style>
+	.active {
+		color: green;
+	}
+	.inactive {
+		color: red;
+	}
+</style>
 ```
 
 ```js