Map block: Allow block selection when Mapkit is being used (#38956)

projects/plugins/jetpack/changelog/fix-map-block-selection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Map block: Allow maps on WordPress.com to be selectable.

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

@@ -1,4 +1,12 @@
-import { Children, forwardRef, memo, useCallback, useEffect, useRef } from '@wordpress/element';
+import {
+	Children,
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { get } from 'lodash';
 import { MapkitProvider } from '../mapkit/context';
 import {
@@ -45,13 +53,31 @@ const MapkitComponent = forwardRef(
 				return child;
 			}
 		} );
+		const [ isSelected, setIsSelected ] = useState( false );
 
 		useEffect( () => {
 			if ( error ) {
 				onError( 'mapkit_error', error );
 			}
 		}, [ error, onError ] );
 
+		const handleBlockClick = () => {
+			setIsSelected( true );
+		};
+
+		useEffect( () => {
+			const handleClickOutside = event => {
+				if ( ! mapRef.current.contains( event.target ) ) {
+					setIsSelected( false );
+				}
+			};
+
+			document.addEventListener( 'mousedown', handleClickOutside );
+			return () => {
+				document.removeEventListener( 'mousedown', handleClickOutside );
+			};
+		}, [ mapRef ] );
+
 		return (
 			<MapkitProvider
 				value={ {
@@ -80,11 +106,25 @@ const MapkitComponent = forwardRef(
 						onMapLoaded={ onMapLoaded }
 					/>
 				) : null }
+
+				{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }
 				<div
-					style={ { height: mapHeight ? `${ mapHeight }px` : '400px' } }
-					className="wp-block-jetpack-map__gm-container"
+					style={ { height: mapHeight ? `${ mapHeight }px` : '400px', position: 'relative' } }
+					className="wp-block-jetpack-map__mapkit-wrapper"
 					ref={ mapRef }
-				/>
+					onClick={ handleBlockClick }
+				>
+					{ ! isSelected && <div className="wp-block-jetpack-map__select-overlay" /> }
+					{ /* Map container */ }
+					<div
+						className="wp-block-jetpack-map__gm-container"
+						style={ {
+							height: `${ mapHeight }px`,
+							pointerEvents: isSelected ? 'auto' : 'none',
+						} }
+					></div>
+				</div>
+
 				{ addPoint }
 				<InfoWindow mapProvider="mapkit" />
 			</MapkitProvider>

projects/plugins/jetpack/extensions/blocks/map/editor.scss

@@ -42,6 +42,21 @@
 		// This matches the color that MapBox uses as a placeholder before map tiles have loaded.
 		background-color: #e4e2de;
 	}
+
+	 .wp-block-jetpack-map__gm-container {
+	 	position: absolute;
+	 	inset: 0;
+	 	z-index: 0;
+	 }
+
+	/* Overlay for block selection */
+	.wp-block-jetpack-map__select-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 2;
+		background-color: transparent;
+		pointer-events: auto;
+	}
 }
 
 .wp-block-jetpack-map__height_input {