From dcda6168fe6a3f7d48f15a8291a8e067f5b56df5 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Mon, 19 Aug 2024 16:59:44 +0100
Subject: [PATCH 1/2] Allow Mapkit maps to be selectable as a block

---
 .../extensions/blocks/map/component/mapkit.js | 48 +++++++++++++++++--
 .../jetpack/extensions/blocks/map/editor.scss | 15 ++++++
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/map/component/mapkit.js b/projects/plugins/jetpack/extensions/blocks/map/component/mapkit.js
index 0d70b9f2a7e11..37f6a44c57cac 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/component/mapkit.js
+++ b/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,6 +53,7 @@ const MapkitComponent = forwardRef(
 				return child;
 			}
 		} );
+		const [ isSelected, setIsSelected ] = useState( false );
 
 		useEffect( () => {
 			if ( error ) {
@@ -52,6 +61,23 @@ const MapkitComponent = forwardRef(
 			}
 		}, [ 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>
diff --git a/projects/plugins/jetpack/extensions/blocks/map/editor.scss b/projects/plugins/jetpack/extensions/blocks/map/editor.scss
index 810a5c9c0f8ca..e482a2e52bb77 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/editor.scss
+++ b/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 {

From fd01671adcbf39a3fc66d1e4ca1145d77231922b Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Mon, 19 Aug 2024 17:00:27 +0100
Subject: [PATCH 2/2] changelog

---
 projects/plugins/jetpack/changelog/fix-map-block-selection | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/fix-map-block-selection

diff --git a/projects/plugins/jetpack/changelog/fix-map-block-selection b/projects/plugins/jetpack/changelog/fix-map-block-selection
new file mode 100644
index 0000000000000..989aae81cfcda
--- /dev/null
+++ b/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.