fix: wp7 compatibility (#19)

* fix: proper use of ToggleControl

* fix: UI fixes

* fix: safely remove type prop

* fix: proper css scope

* Apply suggestion from @bfintal

---------

Co-authored-by: Benjamin Intal <bfintal@gmail.com>

Author: Arukuen

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

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 => {

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,26 @@
 .interact-add-interaction-button-wrapper {
 	--wp-components-color-accent: #05f;
 }
+
+/* Wordpress 7.0 compatibility */
+
+.interact-sidebar, .interact-popover {
+	// 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;
+	}
+}