6 files changed, 86 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/index.js b/plugins/jetpack/extensions/blocks/map/map-theme-picker/index.js
new file mode 100644
index 00000000..e226534a
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/index.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Button, ButtonGroup } from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export class MapThemePicker extends Component {
+	render() {
+		const { options, value, onChange, label } = this.props;
+		const buttons = options.map( ( option, index ) => {
+			const classes = classnames(
+				'component__map-theme-picker__button',
+				'is-theme-' + option.value,
+				option.value === value ? 'is-selected' : ''
+			);
+			return (
+				<Button
+					className={ classes }
+					title={ option.label }
+					key={ index }
+					onClick={ () => onChange( option.value ) }
+				>
+					{ option.label }
+				</Button>
+			);
+		} );
+		return (
+			<div className="component__map-theme-picker components-base-control">
+				{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
+				<label className="components-base-control__label">{ label }</label>
+				<ButtonGroup>{ buttons }</ButtonGroup>
+			</div>
+		);
+	}
+}
+
+MapThemePicker.defaultProps = {
+	label: '',
+	options: [],
+	value: null,
+	onChange: () => {},
+};
+
+export default MapThemePicker;
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_black_and_white.jpg b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_black_and_white.jpg
new file mode 100644
index 00000000..34cc1412
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_black_and_white.jpg
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_default.jpg b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_default.jpg
new file mode 100644
index 00000000..35505eb1
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_default.jpg
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_satellite.jpg b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_satellite.jpg
new file mode 100644
index 00000000..ef6ae417
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_satellite.jpg
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_terrain.jpg b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_terrain.jpg
new file mode 100644
index 00000000..eee1a2da
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/map-theme_terrain.jpg
diff --git a/plugins/jetpack/extensions/blocks/map/map-theme-picker/style.scss b/plugins/jetpack/extensions/blocks/map/map-theme-picker/style.scss
new file mode 100644
index 00000000..eb444c1c
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/map/map-theme-picker/style.scss
@@ -0,0 +1,36 @@
+@import '../../../shared/styles/gutenberg-colors.scss';
+
+.component__map-theme-picker__button {
+	.edit-post-settings-sidebar__panel-block & {
+		border: 1px solid $light-gray-500;
+		border-radius: 100%;
+		width: 56px;
+		height: 56px;
+		margin: 2px;
+		text-indent: -9999px;
+		background-color: $light-gray-500;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		transform: scale( 1 );
+		transition: transform 0.2s ease;
+		&:hover {
+			transform: scale( 1.1 );
+		}
+		&.is-selected {
+			border-color: $black;
+		}
+		&.is-theme-default {
+			background-image: url( './map-theme_default.jpg' );
+		}
+		&.is-theme-black_and_white {
+			background-image: url( './map-theme_black_and_white.jpg' );
+		}
+		&.is-theme-satellite {
+			background-image: url( './map-theme_satellite.jpg' );
+		}
+		&.is-theme-terrain {
+			background-image: url( './map-theme_terrain.jpg' );
+		}
+	}
+}