fix: wp7 compatibility

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;
+}

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.

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;
+}

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 }

src/editor/components/timeline/index.js

@@ -1147,9 +1147,7 @@ const Timeline = props => {
 							return ! value
 						} )
 					} }
-				>
-					{ __( 'Live Preview', 'interactions' ) }
-				</ToggleControl>
+				/>
 			) }
 		</BaseControl>
 	)

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;
+}