Fixed buttons, make sure som is passed to render

readme.txt

@@ -118,6 +118,7 @@ Fix missing translation domain on "Save Changes" in settings. https://wordpress.
 Refined styles for responsive tables https://wordpress.org/support/topic/responsive-strava-activity-table/
 Add activity description under image (if set) https://wordpress.org/support/topic/show-activity-description/
 Add preview of activity in the block editor using server-side render
+Add System of Measure override in Activity Block display options
 
 
 = 2.4.0 =

src/WPStrava/Blocks/Activity.php

@@ -41,6 +41,10 @@ class WPStrava_Blocks_Activity implements WPStrava_Blocks_Interface {
 						'type'    => 'boolean',
 						'default' => false,
 					),
+					'som'            => array(
+						'type'    => 'string',
+						'default' => null,
+					),
 				),
 			)
 		);
@@ -68,9 +72,10 @@ class WPStrava_Blocks_Activity implements WPStrava_Blocks_Interface {
 		if ( $matches[1] ) {
 			// Transform from block attributes to shortcode standard.
 			$attributes = array(
+				'id'         => $matches[1],
 				'image_only' => isset( $attributes['imageOnly'] ) ? $attributes['imageOnly'] : false,
 				'markers'    => isset( $attributes['displayMarkers'] ) ? $attributes['displayMarkers'] : false,
-				'id'         => $matches[1],
+				'som'        => ! empty( $attributes['som'] ) ? $attributes['som'] : null,
 			);
 
 			$renderer = new WPStrava_ActivityRenderer();

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>
 		</>
 	);