From 68b528861e8ce8f66a1f1484098f3bfbb7ffb6f2 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Wed, 8 Apr 2026 16:19:28 +0800
Subject: [PATCH 1/3] fix: proper use of ToggleControl

---
 src/editor/components/timeline/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/editor/components/timeline/index.js b/src/editor/components/timeline/index.js
index 0ccb454..0c04d38 100644
--- a/src/editor/components/timeline/index.js
+++ b/src/editor/components/timeline/index.js
@@ -1147,9 +1147,7 @@ const Timeline = props => {
 							return ! value
 						} )
 					} }
-				>
-					{ __( 'Live Preview', 'interactions' ) }
-				</ToggleControl>
+				/>
 			) }
 		</BaseControl>
 	)

From ce8b0f064ba1424513be9211c873129d02b168b0 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Wed, 8 Apr 2026 21:43:15 +0800
Subject: [PATCH 2/3] fix: UI fixes

---
 .../add-interaction-popover/editor.scss       |  4 ++++
 .../components/interaction-panel/index.js     |  3 +++
 .../components/target-selector/editor.scss    |  7 +++++++
 .../components/target-selector/index.js       |  1 +
 src/editor/editor.scss                        | 21 +++++++++++++++++++
 5 files changed, 36 insertions(+)

diff --git a/src/editor/components/add-interaction-popover/editor.scss b/src/editor/components/add-interaction-popover/editor.scss
index 8b32f5e..cc44433 100644
--- a/src/editor/components/add-interaction-popover/editor.scss
+++ b/src/editor/components/add-interaction-popover/editor.scss
@@ -83,3 +83,7 @@ h4.components-menu-group__label {
 .interface-interface-skeleton__header:has(.interact-add-interaction-popover) {
 	z-index: 99 !important;
 }
+
+.interact-add-interaction-popover .components-toggle-group-control{
+	height: 84px;
+}
\ No newline at end of file
diff --git a/src/editor/components/interaction-panel/index.js b/src/editor/components/interaction-panel/index.js
index 31e58ba..6f687dc 100644
--- a/src/editor/components/interaction-panel/index.js
+++ b/src/editor/components/interaction-panel/index.js
@@ -402,6 +402,9 @@ const InteractionPanel = props => {
 							} else { // Default value
 								propsToPass.checked = option.placeholder || false
 							}
+							// Wordpress 7.0 Compatibility
+							// ToggleControl is messed up in Wordpress 7.0 when type prop is added.
+							delete option.type
 						}
 
 						// Conditionally display the option.
diff --git a/src/editor/components/target-selector/editor.scss b/src/editor/components/target-selector/editor.scss
index 07a911b..757e00b 100644
--- a/src/editor/components/target-selector/editor.scss
+++ b/src/editor/components/target-selector/editor.scss
@@ -69,3 +69,10 @@
 		}
 	}
 }
+
+/* Wordpress 7.0 compatibility */
+
+// Text control losses its margin bottom.
+.interact-target-block-input .components-base-control__field {
+	margin-bottom: 8px;
+}
\ No newline at end of file
diff --git a/src/editor/components/target-selector/index.js b/src/editor/components/target-selector/index.js
index 0e7dc23..ca37d6b 100644
--- a/src/editor/components/target-selector/index.js
+++ b/src/editor/components/target-selector/index.js
@@ -204,6 +204,7 @@ const TargetSelector = props => {
 					<FlexLayout justifyContent="start">
 						{ isHorizontal && targetButton }
 						<TextControl
+							className="interact-target-block-input"
 							id="interact-target-block-input"
 							label={ __( 'Block Anchor / ID', 'interactions' ) }
 							value={ value.value }
diff --git a/src/editor/editor.scss b/src/editor/editor.scss
index a344c7d..67ae053 100644
--- a/src/editor/editor.scss
+++ b/src/editor/editor.scss
@@ -138,3 +138,24 @@
 .interact-add-interaction-button-wrapper {
 	--wp-components-color-accent: #05f;
 }
+
+/* Wordpress 7.0 compatibility */
+
+// Toggle control loses its margin bottom.
+.components-toggle-control {
+	margin-bottom: 12px;
+}
+
+// Text control min-height changed from 30px to 40px.
+.components-text-control__input {
+	min-height: 30px !important;
+}
+
+// Select control field loses its margin bottom.
+.components-select-control .components-base-control__field {
+	margin-bottom: 8px;
+}
+
+.interact-property-control .components-base-control__field {
+	margin-bottom: 8px;
+}
\ No newline at end of file

From f64eee6e494fb6270314ca338b2be9795da33b85 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Thu, 9 Apr 2026 02:13:22 +0800
Subject: [PATCH 3/3] fix: safely remove type prop

---
 src/editor/components/interaction-panel/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/editor/components/interaction-panel/index.js b/src/editor/components/interaction-panel/index.js
index 6f687dc..999a622 100644
--- a/src/editor/components/interaction-panel/index.js
+++ b/src/editor/components/interaction-panel/index.js
@@ -390,6 +390,7 @@ const InteractionPanel = props => {
 					{ interactionConfig.options.map( option => {
 						const { type, condition } = option
 						const propsToPass = {}
+						const optionToPass = { ...option }
 
 						const Tag = type === 'number' ? NumberControl
 							: type === 'select' ? SelectControl
@@ -404,7 +405,7 @@ const InteractionPanel = props => {
 							}
 							// Wordpress 7.0 Compatibility
 							// ToggleControl is messed up in Wordpress 7.0 when type prop is added.
-							delete option.type
+							delete optionToPass.type
 						}
 
 						// Conditionally display the option.
@@ -419,7 +420,7 @@ const InteractionPanel = props => {
 
 						return (
 							<Tag
-								{ ...option }
+								{ ...optionToPass }
 								key={ option.name }
 								value={ editedInteraction.options?.[ option.name ] || '' }
 								onChange={ value => {