allow dynamic content in map location

Author: prconcepcion

src/block/map/edit.js

@@ -23,6 +23,7 @@ import {
 	PanelAdvancedSettings,
 	ResizerTooltip,
 	StyleControl,
+	getDynamicContent,
 } from '~stackable/components'
 import { useDeviceType } from '~stackable/hooks'
 import {
@@ -104,6 +105,7 @@ const Edit = props => {
 
 	const { stackable_google_maps_api_key: apiKey } = settings
 	const userCanManageApiKey = useMemo( () => currentUserHasCapability( 'manage_options' ), [] )
+	const mapAddress = address.startsWith( '!#stk_dynamic/' ) ? getDynamicContent( address ) : address
 
 	// This just forces the tooltip to update.
 	const [ , setResizingHeight ] = useState( '' )
@@ -243,6 +245,9 @@ const Edit = props => {
 	// Try geocoding the address.
 	const [ useGeocoding, setUseGeocoding ] = useState( true )
 	const geocodeAddress = useCallback( debounce( address => {
+		if ( address.startsWith( '!#stk_dynamic/' ) ) {
+			address = getDynamicContent( address )
+		}
 		if ( useGeocoding ) {
 			geocoderRef.current.geocode( {
 				address,
@@ -291,6 +296,7 @@ const Edit = props => {
 										label={ __( 'Location', i18n ) }
 										attribute="address"
 										placeholder={ __( 'Enter an address or location', i18n ) }
+										isDynamic={ true }
 									/>
 								</>
 							) : (
@@ -537,7 +543,7 @@ const Edit = props => {
 					) : (
 						<iframe
 							title={ __( 'Embedded content from Google Map Platform.', i18n ) }
-							src={ `https://maps.google.com/maps?q=${ address || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
+							src={ `https://maps.google.com/maps?q=${ mapAddress || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
 							frameBorder="0"
 						/>
 					) }

src/block/map/editor.scss

@@ -37,6 +37,22 @@
 	}
 }
 
+.stk-control__location-control {
+	display: flex;
+
+	> :not(.stk--has-dynamic-content) {
+		.stk-dynamic-content-control__button {
+			margin-top: 23px;
+		}
+	}
+
+	.stk-control__reset-button {
+		position: static;
+		margin-left: 2px;
+		margin-right: 2px;
+	}
+}
+
 .stk-block-map__api-key-notice {
 	margin: 0 0 16px;
 }

src/block/map/location-control.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
 
 /**
  * WordPress dependencies
@@ -20,6 +21,14 @@ import {
 const LocationControl = props => {
 	const [ waitForGoogle, setWaitForGoogle ] = useState( 0 )
 
+	const dynamicContentProps = useDynamicContentControlProps( {
+		value: props.value,
+		onChange: value => {
+			props.onTextChange( value )
+		},
+		isFormatType: false,
+	} )
+
 	useEffect( () => {
 		if ( ! window?.google?.maps ) {
 			const interval = setInterval( () => {
@@ -54,21 +63,30 @@ const LocationControl = props => {
 	}, [ ref.current, waitForGoogle ] )
 
 	return (
-		<TextControl
-			label={ __( 'Location', i18n ) }
-			ref={ ref }
-			value={ props.value }
-			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 ) }
-			onChange={ value => {
-				props.onTextChange( value )
-			} }
-		/>
+		<div className="stk-control__location-control">
+			<DynamicContentControl
+				enable={ true }
+				hasPanelModifiedIndicator={ true }
+				{ ...dynamicContentProps }
+			>
+				<TextControl
+					label={ __( 'Location', i18n ) }
+					ref={ ref }
+					value={ props.value }
+					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 ) }
+					onChange={ value => {
+						props.onTextChange( value )
+					} }
+				/>
+			</DynamicContentControl>
+		</div>
 	)
 }
 
 LocationControl.defaultProps = {
 	onChange: null,
 	value: '',
+	hasPanelModifiedIndicator: true,
 }
 
 export default LocationControl