Map Block: Use the block styles API for choosing map themes

extensions/blocks/map/deprecated/v1/index.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import save from './save';
+
+const attributes = {
+	align: {
+		type: 'string',
+	},
+	points: {
+		type: 'array',
+		default: [],
+	},
+	mapDetails: {
+		type: 'boolean',
+		default: true,
+	},
+	zoom: {
+		type: 'integer',
+		default: 13,
+	},
+	mapCenter: {
+		type: 'object',
+		default: {
+			longitude: -122.41941550000001,
+			latitude: 37.7749295,
+		},
+	},
+	mapStyle: {
+		type: 'string',
+		default: 'default',
+	},
+	markerColor: {
+		type: 'string',
+		default: 'red',
+	},
+	preview: {
+		type: 'boolean',
+		default: false,
+	},
+	scrollToZoom: {
+		type: 'boolean',
+		default: false,
+	},
+	mapHeight: {
+		type: 'integer',
+	},
+	showFullscreenButton: {
+		type: 'boolean',
+		default: true,
+	},
+};
+
+export default {
+	attributes,
+	migrate: oldAttributes => {
+		// If the old block has classNames set, clean up any old "is-style-*" classes
+		// that will clash with the new one we're adding.
+		const className = (
+			( oldAttributes.className || '' ).replace( /is-style-[^ ]+/, '' ) +
+			` is-style-${ oldAttributes.mapStyle }`
+		)
+			.replace( /\s+/g, ' ' )
+			.trim();
+		return {
+			...omit( oldAttributes, 'mapStyle' ),
+			className,
+		};
+	},
+	save,
+};

extensions/blocks/map/deprecated/v1/save.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+
+import { Component } from '@wordpress/element';
+
+class MapSave extends Component {
+	render() {
+		const { attributes } = this.props;
+		const {
+			align,
+			mapStyle,
+			mapDetails,
+			points,
+			zoom,
+			mapCenter,
+			markerColor,
+			scrollToZoom,
+			mapHeight,
+			showFullscreenButton,
+		} = attributes;
+		const pointsList = points.map( ( point, index ) => {
+			const { longitude, latitude } = point.coordinates;
+			const url = 'https://www.google.com/maps/search/?api=1&query=' + latitude + ',' + longitude;
+			return (
+				<li key={ index }>
+					<a href={ url }>{ point.title }</a>
+				</li>
+			);
+		} );
+		const alignClassName = align ? `align${ align }` : null;
+		// All camelCase attribute names converted to snake_case data attributes
+		return (
+			<div
+				className={ alignClassName }
+				data-map-style={ mapStyle }
+				data-map-details={ mapDetails }
+				data-points={ JSON.stringify( points ) }
+				data-zoom={ zoom }
+				data-map-center={ JSON.stringify( mapCenter ) }
+				data-marker-color={ markerColor }
+				data-scroll-to-zoom={ scrollToZoom || null }
+				data-map-height={ mapHeight || null }
+				data-show-fullscreen-button={ showFullscreenButton || null }
+			>
+				{ points.length > 0 && <ul>{ pointsList }</ul> }
+			</div>
+		);
+	}
+}
+
+export default MapSave;

extensions/blocks/map/edit.js

@@ -34,11 +34,11 @@ import classnames from 'classnames';
 import AddPoint from './add-point';
 import Locations from './locations';
 import Map from './component.js';
-import MapThemePicker from './map-theme-picker';
 import { settings } from './settings.js';
 import previewPlaceholder from './map-preview.jpg';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
+import { getActiveStyleName } from '../../shared/block-styles';
 
 const API_STATE_LOADING = 0;
 const API_STATE_FAILURE = 1;
@@ -68,6 +68,7 @@ class MapEdit extends Component {
 		};
 		this.mapRef = createRef();
 	}
+
 	addPoint = point => {
 		const { attributes, setAttributes } = this.props;
 		const { points } = attributes;
@@ -210,7 +211,6 @@ class MapEdit extends Component {
 			onResizeStart,
 		} = this.props;
 		const {
-			mapStyle,
 			mapDetails,
 			points,
 			zoom,
@@ -247,18 +247,6 @@ class MapEdit extends Component {
 					</Toolbar>
 				</BlockControls>
 				<InspectorControls>
-					<PanelBody title={ __( 'Map Theme', 'jetpack' ) }>
-						<MapThemePicker
-							value={ mapStyle }
-							onChange={ value => setAttributes( { mapStyle: value } ) }
-							options={ settings.mapStyleOptions }
-						/>
-						<ToggleControl
-							label={ __( 'Show street names', 'jetpack' ) }
-							checked={ mapDetails }
-							onChange={ value => setAttributes( { mapDetails: value } ) }
-						/>
-					</PanelBody>
 					<PanelColorSettings
 						title={ __( 'Colors', 'jetpack' ) }
 						initialOpen={ true }
@@ -311,6 +299,11 @@ class MapEdit extends Component {
 							min={ 0 }
 							max={ 22 }
 						/>
+						<ToggleControl
+							label={ __( 'Show street names', 'jetpack' ) }
+							checked={ mapDetails }
+							onChange={ value => setAttributes( { mapDetails: value } ) }
+						/>
 						<ToggleControl
 							label={ __( 'Scroll to zoom', 'jetpack' ) }
 							help={ __( 'Allow the map to capture scrolling, and zoom in or out.', 'jetpack' ) }
@@ -339,7 +332,7 @@ class MapEdit extends Component {
 							help={
 								'wpcom' === apiKeySource && (
 									<>
-										{ __( 'You can optionally enter your own access token.', 'jetpack' ) }{' '}
+										{ __( 'You can optionally enter your own access token.', 'jetpack' ) }{ ' ' }
 										<ExternalLink href="https://account.mapbox.com/access-tokens/">
 											{ __( 'Find it on Mapbox', 'jetpack' ) }
 										</ExternalLink>
@@ -423,6 +416,7 @@ class MapEdit extends Component {
 		);
 		// Only scroll to zoom when the block is selected, and there's 1 or less points.
 		const allowScrollToZoom = isSelected && points.length <= 1;
+		const mapStyle = getActiveStyleName( settings.styles, attributes.className );
 		const placeholderAPIStateSuccess = (
 			<Fragment>
 				{ inspectorControls }
@@ -449,7 +443,7 @@ class MapEdit extends Component {
 								ref={ this.mapRef }
 								scrollToZoom={ allowScrollToZoom }
 								showFullscreenButton={ showFullscreenButton }
-								mapStyle={ mapStyle }
+								mapStyle={ mapStyle || 'default' }
 								mapDetails={ mapDetails }
 								mapHeight={ mapHeight }
 								points={ points }
@@ -482,9 +476,13 @@ class MapEdit extends Component {
 				</div>
 			</Fragment>
 		);
+		const mapStyleObject = settings.styles.find( styleObject => styleObject.name === mapStyle );
 		const placholderPreview = (
 			<div>
-				<img alt={ __( 'Map Preview', 'jetpack' ) } src={ previewPlaceholder } />
+				<img
+					alt={ __( 'Map Preview', 'jetpack' ) }
+					src={ mapStyleObject ? mapStyleObject.preview : previewPlaceholder }
+				/>
 			</div>
 		);
 		return (

extensions/blocks/map/index.js

@@ -1,5 +1,5 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
 import { omit } from 'lodash';
 
@@ -9,9 +9,9 @@ import { omit } from 'lodash';
 import { settings as mapSettings } from './settings.js';
 import edit from './edit';
 import save from './save';
+import deprecatedV1 from './deprecated/v1';
 import './style.scss';
 import './editor.scss';
-
 export const { name } = mapSettings;
 
 export const settings = {
@@ -22,6 +22,7 @@ export const settings = {
 	description: mapSettings.description,
 	attributes: mapSettings.attributes,
 	supports: mapSettings.supports,
+	styles: mapSettings.styles,
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( -1 !== mapSettings.validAlignments.indexOf( align ) ) {
@@ -37,5 +38,6 @@ export const settings = {
 			migrate: attributes => ( { ...attributes, showFullscreenButton: true } ),
 			save,
 		},
+		deprecatedV1,
 	],
 };

extensions/blocks/map/save.js

@@ -4,12 +4,18 @@
 
 import { Component } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { settings } from './settings.js';
+import { getActiveStyleName } from '../../shared/block-styles';
+
 class MapSave extends Component {
 	render() {
 		const { attributes } = this.props;
 		const {
 			align,
-			mapStyle,
+			className,
 			mapDetails,
 			points,
 			zoom,
@@ -19,6 +25,7 @@ class MapSave extends Component {
 			mapHeight,
 			showFullscreenButton,
 		} = attributes;
+		const mapStyle = getActiveStyleName( settings.styles, className );
 		const pointsList = points.map( ( point, index ) => {
 			const { longitude, latitude } = point.coordinates;
 			const url = 'https://www.google.com/maps/search/?api=1&query=' + latitude + ',' + longitude;