Add a setting for scroll to zoom on the front end, and combine the fl…

…ag with backend.
Automattic · Feb 13, 2020 · 172127f · 172127f
1 parent e130a3c
commit 172127f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/extensions/blocks/map/component.js b/extensions/blocks/map/component.js
@@ -115,7 +115,7 @@ export class Map extends Component {
 		this.debouncedSizeMap.cancel();
 	}
 	componentDidUpdate( prevProps ) {
-		const { apiKey, children, points, mapStyle, mapDetails, isSelected } = this.props;
+		const { apiKey, children, points, mapStyle, mapDetails, scrollToZoom } = this.props;
 		const { map } = this.state;
 		if ( apiKey && apiKey.length > 0 && apiKey !== prevProps.apiKey ) {
 			this.loadMapLibraries();
@@ -135,10 +135,9 @@ export class Map extends Component {
 			map.setStyle( this.getMapStyle() );
 		}
 
-		// Only allow scroll zooming when the block is selected, so the block can't
-		// accidentally capture the pointer when scrolling through a post.
-		if ( isSelected !== prevProps.isSelected ) {
-			if ( isSelected ) {
+		// Only allow scroll zooming when the `scrollToZoom` is set.
+		if ( scrollToZoom !== prevProps.scrollToZoom ) {
+			if ( scrollToZoom ) {
 				map.scrollZoom.enable();
 			} else {
 				map.scrollZoom.disable();
@@ -287,7 +286,7 @@ export class Map extends Component {
 	}
 	initMap( mapCenter ) {
 		const { mapboxgl } = this.state;
-		const { zoom, onMapLoaded, onError, admin, isSelected } = this.props;
+		const { zoom, onMapLoaded, onError, scrollToZoom, admin } = this.props;
 		let map = null;
 		try {
 			map = new mapboxgl.Map( {
@@ -304,8 +303,9 @@ export class Map extends Component {
 			return;
 		}
 
-		// If the map block doesn't have the focus right now, disable scroll zooming.
-		if ( ! isSelected ) {
+		// If the map block doesn't have the focus in the editor, or
+		// it hasn't been enabled on the front end, disable scroll zooming.
+		if ( ! scrollToZoom ) {
 			map.scrollZoom.disable();
 		}
 

diff --git a/extensions/blocks/map/edit.js b/extensions/blocks/map/edit.js
@@ -134,6 +134,7 @@ class MapEdit extends Component {
 			markerColor,
 			align,
 			preview,
+			scrollToZoom,
 		} = attributes;
 		const {
 			addPointVisibility,
@@ -183,6 +184,14 @@ class MapEdit extends Component {
 							},
 						] }
 					/>
+					<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+						<ToggleControl
+							label={ __( 'Scroll to zoom', 'jetpack' ) }
+							help={ __( 'Allow the map to capture scrolling, and zoom in or out.', 'jetpack' ) }
+							checked={ scrollToZoom }
+							onChange={ value => setAttributes( { scrollToZoom: value } ) }
+						/>
+					</PanelBody>
 					{ points.length ? (
 						<PanelBody title={ __( 'Markers', 'jetpack' ) } initialOpen={ false }>
 							<Locations
@@ -268,7 +277,7 @@ class MapEdit extends Component {
 				<div className={ className }>
 					<Map
 						ref={ this.mapRef }
-						isSelected={ isSelected }
+						scrollToZoom={ isSelected } // Only scroll to zoom when the block is selected.
 						mapStyle={ mapStyle }
 						mapDetails={ mapDetails }
 						points={ points }

diff --git a/extensions/blocks/map/settings.js b/extensions/blocks/map/settings.js
@@ -66,6 +66,10 @@ export const settings = {
 			type: 'boolean',
 			default: false,
 		},
+		scrollToZoom: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 	supports: {
 		html: false,