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..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
@@ -402,6 +403,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 optionToPass.type
 						}
 
 						// Conditionally display the option.
@@ -416,7 +420,7 @@ const InteractionPanel = props => {
 
 						return (
 							<Tag
-								{ ...option }
+								{ ...optionToPass }
 								key={ option.name }
 								value={ editedInteraction.options?.[ option.name ] || '' }
 								onChange={ value => {
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/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>
 	)
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