Merge pull request #70 from cmanon/feature/48-som-override-activity-block

Feature/48 som override activity block

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

@@ -1,6 +1,7 @@
 /* global wp, wpStrava */
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedControls from './embed-controls';
+import SOMOverride from './som-override';
 
 const { __ } = wp.i18n;
 const { Component } = wp.element;
@@ -17,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,
 		};
 	}
@@ -48,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.
@@ -82,6 +91,7 @@ class Edit extends Component {
 						url: url,
 						imageOnly: imageOnly,
 						displayMarkers: displayMarkers,
+						som: som,
 					} }
 				/>
 				<InspectorControls>
@@ -98,6 +108,10 @@ class Edit extends Component {
 							checked={ displayMarkers }
 							onChange={ (checked ) => this.toggleDisplayMarkers( checked ) }
 						/>
+						<SOMOverride
+							onChange={ ( value ) => this.overrideSOM( value ) }
+							som={ som }
+						/>
 					</PanelBody>
 				</InspectorControls>
 			</>

src/blocks/activity/index.js

@@ -18,7 +18,11 @@ registerBlockType( 'wp-strava/activity', {
 		displayMarkers: {
 			type: 'boolean',
 			default: false,
-		}
+		},
+		som: {
+			type: 'string',
+			default: null,
+		},
 	},
 	edit,
 	save: () => null,

src/blocks/activity/som-override.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ButtonGroup,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function SOMOverride( {
+	som,
+	onChange,
+} ) {
+
+	function updateSOM( som ) {
+		return () => {
+			onChange( som );
+		};
+	}
+
+	return (
+		<>
+			<div className="wp-block-wp-strava-som-control">
+				<p className="wp-block-wp-strava-som-control-row">
+						{ __( 'System of Measure (override from settings)' ) }
+				</p>
+				<div className="wp-block-wp-strava-som-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>
+		</>
+	);
+}