Map Block: Fix Mapbox maps and markers in React's Strict Mode (#37918)

* Map Block: Handle React's Strict Mode for Mapbox Markers

In Strict Mode, react will mount, unmount, then remount each compontent
to make sure components handle unmounting correctly.

When Mapbox Markers are unmounted, remove them from the map, and also
lose the reference to them so that when we remount, we create a new
Marker.

* Map Block: Handle React's Strict Mode for Mapbox Maps

In Strict Mode, react will mount, unmount, then remount each compontent
to make sure components handle unmounting correctly.

Whe Mapbox maps are mounted, we kick off an asynchronous callback
to load the Mapbox library. Because that callback is asynchronous,
it can be called after the component has been unmounted, which
can lead to initializing the map twice (once after the mount/unmount
and once after the remount).

Ideally, we'd catch that case and not initialize a map after the
component has been unmounted.

Instead, when we initialize the map, check if there is already
an initialized map and remove it.

* changelog

projects/plugins/jetpack/changelog/fix-map-block-in-react-strict-mode

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Map Block: Handle React's Strict Mode correctly for Mapbox maps

projects/plugins/jetpack/extensions/blocks/map/component/map-marker/index.js

@@ -11,6 +11,7 @@ export class MapMarker extends Component {
 	componentWillUnmount() {
 		if ( this.marker ) {
 			this.marker.remove();
+			this.marker = null;
 		}
 	}
 	componentDidUpdate() {

projects/plugins/jetpack/extensions/blocks/map/component/mapbox.js

@@ -352,21 +352,32 @@ export class MapBoxComponent extends Component {
 		} );
 		/* Listen for clicks on the Map background, which hides the current popup. */
 		map.getCanvas().addEventListener( 'click', this.onMapClick );
-		this.setState( { map, zoomControl, fullscreenControl }, () => {
-			this.debouncedSizeMap();
-			map.addControl( zoomControl );
-			if ( showFullscreenButton ) {
-				map.addControl( fullscreenControl );
-				if ( admin && fullscreenControl._fullscreenButton ) {
-					fullscreenControl._fullscreenButton.disabled = true;
+		this.setState(
+			( { map: prevMap } ) => {
+				try {
+					// If there's an old map instance hanging around, try to
+					// clean it up.
+					prevMap?.remove();
+				} catch ( error ) {}
+
+				return { map, zoomControl, fullscreenControl };
+			},
+			() => {
+				this.debouncedSizeMap();
+				map.addControl( zoomControl );
+				if ( showFullscreenButton ) {
+					map.addControl( fullscreenControl );
+					if ( admin && fullscreenControl._fullscreenButton ) {
+						fullscreenControl._fullscreenButton.disabled = true;
+					}
 				}
+				this.mapRef.current.addEventListener( 'alignmentChanged', this.debouncedSizeMap );
+				map.resize();
+				onMapLoaded();
+				this.setState( { loaded: true } );
+				window.addEventListener( 'resize', this.debouncedSizeMap );
 			}
-			this.mapRef.current.addEventListener( 'alignmentChanged', this.debouncedSizeMap );
-			map.resize();
-			onMapLoaded();
-			this.setState( { loaded: true } );
-			window.addEventListener( 'resize', this.debouncedSizeMap );
-		} );
+		);
 	}
 }