Fixed buttons, make sure som is passed to render

src/blocks/activity/edit.js

@@ -18,11 +18,13 @@ class Edit extends Component {
 		this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
 		this.toggleImageOnly      = this.toggleImageOnly.bind( this );
 		this.toggleDisplayMarkers = this.toggleDisplayMarkers.bind( this );
+		this.overrideSOM          = this.overrideSOM.bind( this );
 
 		this.state = {
 			url: this.props.attributes.url,
 			imageOnly: this.props.attributes.imageOnly,
 			displayMarkers: this.props.attributes.displayMarkers,
+			som: this.props.attributes.som,
 			editingURL: isEmpty( this.props.attributes.url ) ? true : false,
 		};
 	}
@@ -49,12 +51,18 @@ class Edit extends Component {
 		this.props.setAttributes( { displayMarkers: checked } );
 	}
 
+	overrideSOM( newSOM ) {
+		this.setState( { som: newSOM } );
+		this.props.setAttributes( { som: newSOM } );
+	}
+
 	render() {
 		const {
 			url,
 			editingURL,
 			imageOnly,
 			displayMarkers,
+			som
 		} = this.state;
 
 		// Newly inserted block or we've clicked the edit button.
@@ -83,6 +91,7 @@ class Edit extends Component {
 						url: url,
 						imageOnly: imageOnly,
 						displayMarkers: displayMarkers,
+						som: som,
 					} }
 				/>
 				<InspectorControls>
@@ -100,7 +109,8 @@ class Edit extends Component {
 							onChange={ (checked ) => this.toggleDisplayMarkers( checked ) }
 						/>
 						<SOMOverride
-							onChange={ ( value ) => this.props.setAttributes( { som: value } ) }
+							onChange={ ( value ) => this.overrideSOM( value ) }
+							som={ som }
 						/>
 					</PanelBody>
 				</InspectorControls>

src/blocks/activity/som-override.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import mapValues from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,44 +7,48 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const SOM_PRESETS = {
-	'english': __( 'English', 'wp-strava' ),
-	'metric':  __( 'Metric', 'wp-strava' ),
-};
-
 export default function SOMOverride( {
+	som,
 	onChange,
 } ) {
 
-	function updateSOM( newSOM ) {
+	function updateSOM( som ) {
 		return () => {
-			onChange( { som: newSOM } );
+			onChange( som );
 		};
 	}
 
 	return (
 		<>
 			<div className="block-editor-som-control">
-				<ButtonGroup aria-label={ __( 'System of Measure (override from Settings)' ) }>
-					{ mapValues( SOM_PRESETS, ( key, label ) => {
-						return (
-							<Button
-								key={ key }
-								isSmall
-								isPrimary={ true }
-								isPressed={ true }
-								onClick={ updateSOM(
-									key
-								) }
-							>
-								{ label }
-							</Button>
-						);
-					} ) }
-				</ButtonGroup>
-				<Button isSmall onClick={ updateSOM() }>
-					{ __( 'Reset' ) }
-				</Button>
+				<p className="block-editor-som-control-row">
+						{ __( 'System of Measure (override from settings)' ) }
+				</p>
+				<div className="block-editor-image-size-control-row">
+					<ButtonGroup aria-label={ __( 'System of Measure', 'wp-strava' ) }>
+						<Button
+							key={ 'english' }
+							isSmall
+							isPrimary={ som == 'english' }
+							isPressed={ som == 'english' }
+							onClick={ updateSOM( 'english' ) }
+						>
+							{ __( 'English', 'wp-strava' ) }
+						</Button>
+						<Button
+							key={ 'metric' }
+							isSmall
+							isPrimary={ som == 'metric' }
+							isPressed={ som == 'metric' }
+							onClick={ updateSOM( 'metric' ) }
+						>
+							{ __( 'Metric', 'wp-strava' ) }
+						</Button>
+					</ButtonGroup>
+					<Button isSmall onClick={ updateSOM() }>
+						{ __( 'Reset', 'wp-strava' ) }
+					</Button>
+				</div>
 			</div>
 		</>
 	);