fix (map): allow dynamic content in location field

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,8 @@ const Edit = props => {
 										label={ __( 'Location', i18n ) }
 										attribute="address"
 										placeholder={ __( 'Enter an address or location', i18n ) }
+										help={ __( 'Type in a pair of latitude longitude coordinates.', i18n ) }
+										isDynamic={ true }
 									/>
 								</>
 							) : (
@@ -537,7 +544,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,17 @@
 	}
 }
 
+.stk-control__location-control {
+	display: flex;
+
+	.stk-control__reset-button {
+		position: static;
+		margin-top: 2px;
+		margin-left: 60px;
+		margin-right: 2px;
+	}
+}
+
 .stk-block-map__api-key-notice {
 	margin: 0 0 16px;
 }

src/block/map/location-control.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
 
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components'
+import { TextControl, BaseControl as GutBaseControl } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import {
 	useState, useEffect, useRef,
@@ -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,15 +63,26 @@ const LocationControl = props => {
 	}, [ ref.current, waitForGoogle ] )
 
 	return (
-		<TextControl
+		<GutBaseControl
 			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
+						ref={ ref }
+						value={ props.value }
+						onChange={ value => {
+							props.onTextChange( value )
+						} }
+					/>
+				</DynamicContentControl>
+			</div>
+		</GutBaseControl>
 	)
 }
 

src/components/index.js

@@ -100,7 +100,7 @@ export {
 export { default as Div } from './div'
 export { default as ControlIconToggle } from './control-icon-toggle'
 export {
-	default as DynamicContentControl, useDynamicContent, getDynamicContent,
+	default as DynamicContentControl, useDynamicContent, getDynamicContent, useDynamicContentControlProps,
 } from './dynamic-content-control'
 export { default as Separator2 } from './separator2'
 export { default as ColumnInnerBlocks } from './column-inner-blocks'