refactored structure and added styling for help tip

gambitph · Mar 20, 2024 · 5ace935 · 5ace935
1 parent ce24dd4
commit 5ace935
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
@@ -47,6 +47,11 @@
 		top: 28px;
 	}
 
+	.components-base-control__help {
+		text-align: justify;
+		hyphens: auto;
+	}
+
 }
 
 .stk-block-map__api-key-notice {

diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
@@ -64,25 +64,23 @@ const LocationControl = props => {
 
 	return (
 		<GutBaseControl
-			className="stk-control"
+			className="stk-control stk-control__location-control"
 			label={ __( 'Location', i18n ) }
 			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
 		>
-			<div className="stk-control__location-control">
-				<DynamicContentControl
-					enable={ true }
-					hasPanelModifiedIndicator={ true }
-					{ ...dynamicContentProps }
-				>
-					<TextControl
-						ref={ ref }
-						value={ props.value }
-						onChange={ value => {
-							props.onTextChange( value )
-						} }
-					/>
-				</DynamicContentControl>
-			</div>
+			<DynamicContentControl
+				enable={ true }
+				hasPanelModifiedIndicator={ true }
+				{ ...dynamicContentProps }
+			>
+				<TextControl
+					ref={ ref }
+					value={ props.value }
+					onChange={ value => {
+						props.onTextChange( value )
+					} }
+				/>
+			</DynamicContentControl>
 		</GutBaseControl>
 	)
 }