Add Mapkit to Maps block (#29098)

* Add util functions to convert from/between Mapbox zoom levels & Mapkit camera distance (#29092) * Add helper functions to convert from & to zoom level * Add helper functions to convert from & to zoom level * Simplified convertCameraDistanceToZoomLevel * Add `getMapProvider` helper (#29116) * [not verified] Add util functions to convert from/between Mapbox zoom levels & Mapkit camera distance (#29092) * Add helper functions to convert from & to zoom level * Add helper functions to convert from & to zoom level * Simplified convertCameraDistanceToZoomLevel * [not verified] Add `getMapProvider` helper (#29116) * Introduce useMapkitSetup hook (#29144) * Introduce useMapkitSetup hook * Cherry-pick * Cherry-pick * Add changelog * Maps block: render Apple Maps maps on WP.com frontend (#29089) * [not verified] WIP version of Mapkit support * [not verified] Changelog * Implement convertZoomLevelToCameraDistance * - Size map according to what's inside data-map-height. - Move resizeMapContainer to utils * - Resize logic for Mapkit * Rename sources to view * Fix inclusion of React, Lodash & others * Add support for Mapkit geocoding (#29120) * Add Mapkit geocoding * Add changelog * Fix focus * Skip POI's * - Use async/await where possible to reduce code and increase readability * Don't fetch user location for geosearch * fetchKey function returns a promise * Fallback to [] when results is null * Don't show Mapbox token input when map provider is Mapkit (#29306) * Hide access token panel when provider is not mapbox * Add changelog * Add Mapkit support in the editor (#29252) * Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things * Revert "Add Mapkit support in the editor (#29252)" (#29353) This reverts commit 8b79eab. * Revert "Revert "Add Mapkit support in the editor (#29252)" (#29353)" (#29354) This reverts commit 5ac39b1. * Only show specific controls when mapprovider is mapbox (#29333) * Only show specific controls when mapprovider is mapbox * Add tests * Add changelog * Only load Mapkit library block once per page (#29301) * Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things * Load Mapkit only once * Load Mapkit only once (frontend) * Make cookie override frontend too * Changelog * Reject when mapkitIsInitializing is undefined --------- Co-authored-by: Maciej Grabowski <[email protected]> * Recenter map after closing a marker info window (#29338) * Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things * Recenter map when closing popup * Changelog * Move logic to getMapProvider (#29382) * Move logic to getMapProvider * Changelog * Also make a get_map_provider function on the server side * Change str_contains to str_pos since str_contains is only supported in PHP7.4+ * Geocode the address attribute if it's present (#29394) * Geocode address if it's an attribute * Changelog * Round zoom level value in block controls (#29334) * Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things * Round zoom value * Catch Mapkit API request failures & show error (#29356) * Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things * Load Mapkit only once * Load Mapkit only once (frontend) * Make cookie override frontend too * Changelog * Show error when Mapkit API request fails * Changelog * Friendlier error message * Squashed commit of the following: commit e426f62 Merge: 0f2a0f4 0712aed Author: Tim Broddin <[email protected]> Date: Wed Mar 8 12:37:40 2023 +0100 Merge branch 'trunk' into add/map-block-mapkit commit 0712aed Author: thingalon <[email protected]> Date: Wed Mar 8 20:00:50 2023 +1100 [Boost] Clean up linting issues in the minify feature (#29352) * Fix linting issues in minify module * changelog --------- Co-authored-by: Mark George <[email protected]> commit 12fbcf8 Author: Nauris Pūķis <[email protected]> Date: Wed Mar 8 09:45:29 2023 +0200 Jetpack Boost: Add livereload (#29342) * Add livereload to the run dev script * Move livereaload functionality to "devlive" script * Add a bit of documentation 🤏 * Add a changelog commit 0dcad49 Author: Francesco Bigiarini <[email protected]> Date: Wed Mar 8 08:32:37 2023 +0100 Add import package media endpoints (#29080) * [not verified] Add /jetpack/v4/import/media/* endpoints * [not verified] changelog * [not verified] Fix: remove categories and tags from pages. * [not verified] Add attachment PUT method * [not verified] Fix: wrong variable name * [not verified] Add missing body action * [not verified] Update version commit cf08052 Author: thingalon <[email protected]> Date: Wed Mar 8 17:54:09 2023 +1100 Add a changelog for fixing Safari lazy loading for the next boost release (#29266) Co-authored-by: Mark George <[email protected]> commit 318799a Author: Nate Weller <[email protected]> Date: Tue Mar 7 22:44:08 2023 -0700 Protect: Display "All threats" instead of "All 1 threats" (#29327) commit 39f711e Author: Samiff <[email protected]> Date: Tue Mar 7 15:10:52 2023 -0700 Update/jetpack backport 11.9 (#29345) * [not verified] Jetpack: 11.9 changelog and readme * Update stable tag to 11.9 commit e480211 Author: Matthew Reishus <[email protected]> Date: Tue Mar 7 14:35:16 2023 -0600 media summary: write to memo when no images found (#29326) commit 177950e Author: Jason Johnston <[email protected]> Date: Tue Mar 7 15:25:17 2023 -0500 VideoPress: Add/use preview hook (#29164) * [not verified] Add usePreview hook * [not verified] Use UsePreview hook * [not verified] Add changelog * Update projects/packages/videopress/src/client/block-editor/hooks/use-preview.ts Co-authored-by: Damián Suárez <[email protected]> * Move hook to a directory Add readme * Update VideoPress version * Fix package path --------- Co-authored-by: jhnstn <[email protected]> Co-authored-by: Damián Suárez <[email protected]> commit dff2d71 Author: Nate Weller <[email protected]> Date: Tue Mar 7 11:33:25 2023 -0700 Protect: More Descriptive Error Messages (#29185) commit fc9b6b5 Author: Nate Weller <[email protected]> Date: Tue Mar 7 11:14:12 2023 -0700 WAF: Minor Error Handling Improvements (#29108) commit 128facd Author: Damián Suárez <[email protected]> Date: Tue Mar 7 15:00:53 2023 -0300 VideoPress: pick and convert core/video VideoPress instances also from inner blocks (#29339) * pick v6 also from inner blocks * changelog * minor code changes * fix changelog * minor doc enhancement * ensure to include the selected v5 instance commit 34dc9c3 Author: Grant Kinney <[email protected]> Date: Tue Mar 7 09:42:49 2023 -0600 Writing prompt block: a few cleanup tasks (#29324) - Uses scss variables from @automattic/jetpack-base-styles/gutenberg-base-styles where appropriate - Ensures "View all responses" is an external link that opens in a new tab/window - Ensures "prompt" is used in css classes and the like, since a block represents a single prompt commit 76990eb Author: Kuba Birecki <[email protected]> Date: Tue Mar 7 15:56:37 2023 +0100 Implement RWD navigation for feedback dashboard (#29315) * [not verified] Fix RWD styles for the table and response * [not verified] Add navigation for switching between inbox and response views on mobile * Update layout component to accept custom class names * changelog * Reject when mapkitIsInitializing is undefined * Delete changelogs --------- Co-authored-by: Maciej Grabowski <[email protected]> * Default to the default mapCenter defined in settings.js (#29385) * Default center * Changelog * Should be MutedStandard. * Call hook to get map provider * Read window global in getMapProvider * Reformat error * Allow scroll to zoom for mapkit * Map black & white to MutedStandard on Mapkit * Better type check * Fix test * Change label for Black & White option to Muted on Mapkit Change screenshots to Mapkit version on Mapkit * Fix minification build problem * Fix minification build problem * Fix minification build problem * Mapkit token didn't work on private sites, changed this to proxy via /wp-json * Call renamed endpoint * Call renamed endpoint * Remove helper class & separate endpoint for now * Update get-map-provider to accomodate new shape of global * Change global variable name to Jetpack_Maps --------- Co-authored-by: Maciej Grabowski <[email protected]> Co-authored-by: Yan Sern <[email protected]>
Automattic · Apr 26, 2023 · 1b26cf0 · 1b26cf0
1 parent bc84394
commit 1b26cf0
Show file tree

Hide file tree

Showing 49 changed files with 1,573 additions and 409 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-address-attribute b/projects/plugins/jetpack/changelog/add-map-block-mapkit-address-attribute
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Mapkit support for the address attribute
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-editor b/projects/plugins/jetpack/changelog/add-map-block-mapkit-editor
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Editor support for Mapkit in the Map block
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-geocoder b/projects/plugins/jetpack/changelog/add-map-block-mapkit-geocoder
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Add Mapkit geocoder for use on WPCOM.
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-hide-unimplemented-options b/projects/plugins/jetpack/changelog/add-map-block-mapkit-hide-unimplemented-options
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Hide Mapbox specific options when using Mapkit
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-map-provider-logic b/projects/plugins/jetpack/changelog/add-map-block-mapkit-map-provider-logic
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Move logic to getMapProvider
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-recenter b/projects/plugins/jetpack/changelog/add-map-block-mapkit-recenter
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Recenter map after closing marker.
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-remove-token-input b/projects/plugins/jetpack/changelog/add-map-block-mapkit-remove-token-input
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Remove the Mapbox API key box, when the mapping provider isn't Mapbox
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-use-mapkit-setup b/projects/plugins/jetpack/changelog/add-map-block-mapkit-use-mapkit-setup
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Adds useMapkitSetup hook
diff --git a/projects/plugins/jetpack/changelog/add-map-block-mapkit-zoom-conversion b/projects/plugins/jetpack/changelog/add-map-block-mapkit-zoom-conversion
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Adds util functions for mapkit that allow converting zoom levels to camera distance, and back
diff --git a/projects/plugins/jetpack/changelog/add-map-mapkit b/projects/plugins/jetpack/changelog/add-map-mapkit
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add Mapkit maps
diff --git a/projects/plugins/jetpack/changelog/fix-map-block-mapkit-catch-faillure b/projects/plugins/jetpack/changelog/fix-map-block-mapkit-catch-faillure
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Show error message when fetching Mapkit API key fails
diff --git a/projects/plugins/jetpack/changelog/fix-map-block-mapkit-default-latlng b/projects/plugins/jetpack/changelog/fix-map-block-mapkit-default-latlng
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Support latitude & longitude next to lat/lng
diff --git a/projects/plugins/jetpack/changelog/fix-map-block-mapkit-duplicate-loads b/projects/plugins/jetpack/changelog/fix-map-block-mapkit-duplicate-loads
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Only add mapkit.js once
diff --git a/projects/plugins/jetpack/extensions/blocks/map/add-point/index.js b/projects/plugins/jetpack/extensions/blocks/map/add-point/index.js
@@ -7,7 +7,7 @@ import './style.scss';
 
 export class AddPoint extends Component {
 	render() {
-		const { onClose, onAddPoint, onError, apiKey } = this.props;
+		const { onClose, onAddPoint, onError, apiKey, mapProvider } = this.props;
 		return (
 			<Button className="component__add-point">
 				{ __( 'Add marker', 'jetpack' ) }
@@ -20,6 +20,7 @@ export class AddPoint extends Component {
 						label={ __( 'Add a location', 'jetpack' ) }
 						apiKey={ apiKey }
 						onError={ onError }
+						mapProvider={ mapProvider }
 					/>
 				</Popover>
 			</Button>
@@ -31,6 +32,7 @@ AddPoint.defaultProps = {
 	onAddPoint: () => {},
 	onClose: () => {},
 	onError: () => {},
+	mapProvider: 'mapbox',
 };
 
 export default AddPoint;
diff --git a/projects/plugins/jetpack/extensions/blocks/map/component/index.js b/projects/plugins/jetpack/extensions/blocks/map/component/index.js
@@ -0,0 +1,13 @@
+import { forwardRef } from '@wordpress/element';
+import MapboxComponent from './mapbox';
+import MapkitComponent from './mapkit';
+
+const MapComponent = forwardRef( ( props, ref ) => {
+	if ( props.mapProvider === 'mapkit' ) {
+		const mapkitProps = { ...props, ref: null };
+		return <MapkitComponent { ...mapkitProps } ref={ ref } />;
+	}
+	return <MapboxComponent { ...props } ref={ ref } />;
+} );
+
+export default MapComponent;
diff --git a/projects/plugins/jetpack/extensions/blocks/map/component/info-window/index.js b/projects/plugins/jetpack/extensions/blocks/map/component/info-window/index.js
@@ -0,0 +1,11 @@
+import MapboxInfoWindow from './mapbox';
+import MapkitInfoWindow from './mapkit';
+
+const InfoWindow = props => {
+	if ( props.mapProvider === 'mapkit' ) {
+		return <MapkitInfoWindow { ...props } />;
+	}
+	return <MapboxInfoWindow { ...props } />;
+};
+
+export default InfoWindow;
diff --git a/...xtensions/blocks/map/info-window/index.js → ...locks/map/component/info-window/mapbox.js b/...xtensions/blocks/map/info-window/index.js → ...locks/map/component/info-window/mapbox.js
@@ -1,5 +1,5 @@
 import { Component, createPortal } from '@wordpress/element';
-import { createInfoWindowPopup } from '../mapbox-utils';
+import { createInfoWindowPopup } from '../../mapbox-utils';
 
 export class InfoWindow extends Component {
 	componentDidMount() {

diff --git a/projects/plugins/jetpack/extensions/blocks/map/component/info-window/mapkit.js b/projects/plugins/jetpack/extensions/blocks/map/component/info-window/mapkit.js
@@ -0,0 +1,83 @@
+import { Button, Dashicon, TextareaControl, TextControl } from '@wordpress/components';
+import { createPortal, Fragment, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useMapkit } from '../../mapkit/hooks';
+
+const InfoWindow = () => {
+	const { activeMarker, setActiveMarker, calloutReference, admin, points, setPoints } = useMapkit();
+	const [ pointsCopy, setPointsCopy ] = useState( points );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const { title, caption } = pointsCopy.find( p => p.id === activeMarker?.id ) || {};
+
+	const updateActiveMarker = value => {
+		const newPoints = points.map( point => {
+			if ( point.id === activeMarker.id ) {
+				return { ...point, ...value };
+			}
+			return point;
+		} );
+		setPointsCopy( newPoints );
+		setIsDirty( true );
+	};
+
+	const deleteActiveMarker = () => {
+		const newPoints = points.filter( point => point.id !== activeMarker.id );
+		setPointsCopy( newPoints );
+		setIsDirty( true );
+		// force closing of window
+		setActiveMarker( null );
+	};
+
+	useEffect( () => {
+		if ( ! activeMarker && isDirty ) {
+			// commit the points when callout is closed, and content is dirty
+			setPoints( pointsCopy );
+		}
+	}, [ activeMarker, isDirty, pointsCopy, setPoints ] );
+
+	useEffect( () => {
+		setPointsCopy( points );
+		setIsDirty( false );
+	}, [ points ] );
+
+	if ( ! activeMarker || ! calloutReference ) {
+		return null;
+	}
+
+	return createPortal(
+		<Fragment>
+			{ admin && (
+				<Fragment>
+					<TextControl
+						label={ __( 'Marker Title', 'jetpack' ) }
+						value={ title }
+						onChange={ value => updateActiveMarker( { title: value } ) }
+					/>
+					<TextareaControl
+						className="wp-block-jetpack-map__marker-caption"
+						label={ __( 'Marker Caption', 'jetpack' ) }
+						value={ caption }
+						rows="2"
+						tag="textarea"
+						onChange={ value => updateActiveMarker( { caption: value } ) }
+					/>
+					<Button onClick={ deleteActiveMarker } className="wp-block-jetpack-map__delete-btn">
+						<Dashicon icon="trash" size="15" /> { __( 'Delete Marker', 'jetpack' ) }
+					</Button>
+				</Fragment>
+			) }
+
+			{ ! admin && (
+				<Fragment>
+					<h3>{ title }</h3>
+					<p>{ caption }</p>
+				</Fragment>
+			) }
+		</Fragment>,
+		calloutReference
+	);
+};
+
+InfoWindow.defaultProps = {};
+
+export default InfoWindow;
diff --git a/...extensions/blocks/map/map-marker/index.js → .../blocks/map/component/map-marker/index.js b/...extensions/blocks/map/map-marker/index.js → .../blocks/map/component/map-marker/index.js
@@ -1,6 +1,6 @@
 import { Component } from '@wordpress/element';
-import { getLoadContext } from '../../../shared/block-editor-asset-loader';
-import { setMarkerHTML } from '../mapbox-utils';
+import { getLoadContext } from '../../../../shared/block-editor-asset-loader';
+import { setMarkerHTML } from '../../mapbox-utils';
 
 import './style.scss';
 

diff --git a/...tensions/blocks/map/map-marker/style.scss → ...locks/map/component/map-marker/style.scss b/...tensions/blocks/map/map-marker/style.scss → ...locks/map/component/map-marker/style.scss
diff --git a/...etpack/extensions/blocks/map/component.js → ...extensions/blocks/map/component/mapbox.js b/...etpack/extensions/blocks/map/component.js → ...extensions/blocks/map/component/mapbox.js
@@ -6,19 +6,15 @@ import {
 	getLoadContext,
 	loadBlockEditorAssets,
 	waitForObject,
-} from '../../shared/block-editor-asset-loader';
-import editorAssets from './block-editor-assets.json';
-import InfoWindow from './info-window/';
-import MapMarker from './map-marker/';
-import { mapboxMapFormatter } from './mapbox-map-formatter/';
-import {
-	fitMapToBounds,
-	getMapBounds,
-	googlePoint2Mapbox,
-	resizeMapContainer,
-} from './mapbox-utils';
+} from '../../../shared/block-editor-asset-loader';
+import editorAssets from '../block-editor-assets.json';
+import { mapboxMapFormatter } from '../mapbox-map-formatter';
+import { fitMapToBounds, getMapBounds, googlePoint2Mapbox } from '../mapbox-utils';
+import { resizeMapContainer } from '../utils';
+import InfoWindow from './info-window';
+import MapMarker from './map-marker';
 
-export class Map extends Component {
+export class MapBoxComponent extends Component {
 	// Lifecycle
 	constructor() {
 		super( ...arguments );
@@ -216,7 +212,6 @@ export class Map extends Component {
 		const { map } = this.state;
 
 		map.setZoom( zoom );
-		map.updateZoom( zoom );
 	};
 	setBoundsByMarkers = () => {
 		const { admin, onSetMapCenter, onSetZoom, points, zoom } = this.props;
@@ -375,7 +370,7 @@ export class Map extends Component {
 	}
 }
 
-Map.defaultProps = {
+MapBoxComponent.defaultProps = {
 	points: [],
 	mapStyle: 'default',
 	zoom: 13,
@@ -387,6 +382,7 @@ Map.defaultProps = {
 	markerColor: 'red',
 	apiKey: null,
 	mapCenter: {},
+	address: null,
 };
 
-export default Map;
+export default MapBoxComponent;