Merge pull request #40 from cmanon/feature/39-gutenberg-support

Feature/39 gutenberg support

.gitignore

@@ -1,5 +1,7 @@
 *~
 .svn
 .vscode
-composer.lock
-vendor
+/vendor/
+node_modules/
+/build/**
+!/build/*.css

build/editor.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-wp-strava-activity {
+	border: 1px dotted #f00;
+}

build/style.css

@@ -0,0 +1,11 @@
+/**
+ * The following styles get applied both on the front of your site and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-wp-strava-activity {
+	background-color: #000;
+	color: #fff;
+	padding: 2px;
+}

composer.json

@@ -5,7 +5,7 @@
     "license": "GPL-2.0+",
     "type": "wordpress-plugin",
     "require": {
-        "php": ">=5.2.4"
+        "php": ">=5.3"
     },
     "require-dev": {
         "wp-coding-standards/wpcs": "^2",

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "wp-strava-blocks",
+  "version": "1.0.0",
+  "license": "GPL-2.0-or-later",
+  "description": "",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "6.1.0"
+  }
+}

readme.txt

@@ -4,8 +4,8 @@ Contributors: cmanon, jrfoell, lancewillett, dlintott, sebastianerb
 Tags: strava, activity, bicycle, cycling, biking, running, run, swimming, swim, paddle, kayak, gps, shortcode, widget, plugin
 Requires at least: 4.6
 Tested up to: 5.3
-Stable tag: 2.1.0
-Requires PHP: 5.2
+Stable tag: 2.2.0
+Requires PHP: 5.3
 License: GPLv2 or later
 
 Show your Strava activity on your WordPress site.
@@ -103,6 +103,11 @@ On the WP-Strava settings page you cannot currently remove and add another athle
 
 == Changelog ==
 
+= 2.2.0 =
+Added rudimentary gutenberg block for single Activity.
+Changed all Strava links to HTTPS.
+Moved PHP classes from includes/ to src/.
+
 = 2.1.0 =
 
 Updated settings to work with WP 5.3.

src/WPStrava.php

@@ -71,6 +71,11 @@ class WPStrava {
 	public function hook() {
 		$this->auth->hook();
 
+		// Include Gutenberg blocks.
+		if ( function_exists( 'register_block_type' ) ) {
+			add_action( 'init', array( $this, 'register_blocks' ) );
+		}
+
 		if ( is_admin() ) {
 			$this->settings->hook();
 		} else {
@@ -176,4 +181,61 @@ class WPStrava {
 		new WPStrava_LatestMapShortcode();
 	}
 
+	/**
+	 * Registers all block assets so that they can be enqueued through Gutenberg in
+	 * the corresponding context.
+	 *
+	 * @see https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/#enqueuing-block-scripts
+	 */
+	public function register_blocks() {
+		static $blocks = array( 'WPStrava_Blocks_Activity' );
+
+		// automatically load dependencies and version
+		$asset_file = include WPSTRAVA_PLUGIN_DIR . 'build/index.asset.php';
+
+		wp_register_script(
+			'wp-strava-block',
+			plugins_url( 'build/index.js', WPSTRAVA_PLUGIN_FILE ),
+			$asset_file['dependencies'],
+			$asset_file['version'],
+			true
+		);
+
+		wp_register_style(
+			'wp-strava-block-editor',
+			plugins_url( 'build/editor.css', WPSTRAVA_PLUGIN_FILE ),
+			array( 'wp-edit-blocks' ),
+			filemtime( WPSTRAVA_PLUGIN_DIR . 'build/editor.css' )
+		);
+
+		wp_register_style(
+			'wp-strava-block',
+			plugins_url( 'build/style.css', WPSTRAVA_PLUGIN_FILE ),
+			array(),
+			filemtime( WPSTRAVA_PLUGIN_DIR . 'build/style.css' )
+		);
+
+		wp_localize_script(
+			'wp-strava-block',
+			'wpStrava',
+			array(
+				'placeholderActivityImg' => WPSTRAVA_PLUGIN_URL . 'images/example-activity.png',
+			)
+		);
+
+		foreach ( $blocks as $block_class ) {
+			$block = new $block_class();
+			$block->register_block();
+		}
+
+		if ( function_exists( 'wp_set_script_translations' ) ) {
+			/**
+			 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
+			 * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
+			 * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
+			 */
+			wp_set_script_translations( 'wp-strava-block', 'wp-strava' );
+		}
+	}
+
 }

src/WPStrava/Activity.php

@@ -4,8 +4,8 @@
  */
 class WPStrava_Activity {
 
-	const ACTIVITIES_URL = 'http://strava.com/activities/';
-	const ATHLETES_URL   = 'http://strava.com/athletes/';
+	const ACTIVITIES_URL = 'https://strava.com/activities/';
+	const ATHLETES_URL   = 'https://strava.com/athletes/';
 
 	/**
 	 * Get single activity by ID.

src/WPStrava/ActivityRenderer.php

@@ -1,56 +1,18 @@
 <?php
-/**
- * Activity Shortcode [activity].
- * @package WPStrava
+/*
+ * ActivityRenderer has all the markup for the Activity Block & Shortcode.
  */
-
-/**
- * Activity Shortcode class (converted from Ride).
- *
- * @author Justin Foell <justin@foell.org>
- * @since  1.0
- */
-class WPStrava_ActivityShortcode {
+class WPStrava_ActivityRenderer {
 
 	/**
-	 * Whether or not to enqueue styles (if shortcode is present).
+	 * Get the HTML for a single activity.
 	 *
-	 * @var boolean
+	 * @param array $atts
+	 * @return string HTML for an activity.
 	 * @author Justin Foell <justin@foell.org>
-	 * @since  1.0
+	 * @since  2.2.0
 	 */
-	private $add_script = false;
-
-	/**
-	 * Constructor (converted from static init()).
-	 *
-	 * @author Justin Foell <justin@foell.org>
-	 * @since  1.0
-	 */
-	public function __construct() {
-		add_shortcode( 'ride', array( $this, 'handler' ) ); // @deprecated 1.1
-		add_shortcode( 'activity', array( $this, 'handler' ) );
-		add_action( 'wp_footer', array( $this, 'print_scripts' ) );
-	}
-
-	/**
-	 * Shortcode handler for [activity].
-	 *
-	 * [activity id=id som=metric map_width="100%" map_height="400px" markers=false]
-	 *
-	 * @param array $atts Array of attributes (id, map_width, etc.).
-	 * @return string Shortcode output
-	 * @author Justin Foell <justin@foell.org>
-	 * @since  1.0
-	 */
-	public function handler( $atts ) {
-		if ( isset( $atts['athlete_token'] ) ) {
-			// Translators: Message shown when using deprecated athlete_token parameter.
-			return __( 'The <code>athlete_token</code> parameter is deprecated as of WP-Strava version 2 and should be replaced with <code>client_id</code>.', 'wp-strava' );
-		}
-
-		$this->add_script = true;
-
+	public function get_html( $atts ) {
 		$defaults = array(
 			'id'         => 0,
 			'som'        => WPStrava::get_instance()->settings->som,
@@ -61,7 +23,7 @@ class WPStrava_ActivityShortcode {
 			'image_only' => false,
 		);
 
-		$atts = shortcode_atts( $defaults, $atts, 'activity' );
+		$atts = wp_parse_args( $atts, $defaults );
 
 		/* Make sure boolean values are actually boolean
 		 * @see https://wordpress.stackexchange.com/a/119299
@@ -182,16 +144,4 @@ class WPStrava_ActivityShortcode {
 			</table>
 		';
 	}
-
-	/**
-	 * Enqueue style if shortcode is being used.
-	 *
-	 * @author Justin Foell <justin@foell.org>
-	 * @since  1.0
-	 */
-	public function print_scripts() {
-		if ( $this->add_script ) {
-			wp_enqueue_style( 'wp-strava-style' );
-		}
-	}
 }

src/WPStrava/ActivityShortcode.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Activity Shortcode [activity].
+ * @package WPStrava
+ */
+
+/**
+ * Activity Shortcode class (converted from Ride).
+ *
+ * @author Justin Foell <justin@foell.org>
+ * @since  1.0
+ */
+class WPStrava_ActivityShortcode {
+
+	/**
+	 * Whether or not to enqueue styles (if shortcode is present).
+	 *
+	 * @var boolean
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  1.0
+	 */
+	private $add_script = false;
+
+	/**
+	 * Constructor (converted from static init()).
+	 *
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  1.0
+	 */
+	public function __construct() {
+		add_shortcode( 'ride', array( $this, 'handler' ) ); // @deprecated 1.1
+		add_shortcode( 'activity', array( $this, 'handler' ) );
+		add_action( 'wp_footer', array( $this, 'print_scripts' ) );
+	}
+
+	/**
+	 * Shortcode handler for [activity].
+	 *
+	 * [activity id=id som=metric map_width="100%" map_height="400px" markers=false]
+	 *
+	 * @param array $atts Array of attributes (id, map_width, etc.).
+	 * @return string Shortcode output
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  1.0
+	 */
+	public function handler( $atts ) {
+		if ( isset( $atts['athlete_token'] ) ) {
+			// Translators: Message shown when using deprecated athlete_token parameter.
+			return __( 'The <code>athlete_token</code> parameter is deprecated as of WP-Strava version 2 and should be replaced with <code>client_id</code>.', 'wp-strava' );
+		}
+
+		$this->add_script = true;
+
+		$renderer = new WPStrava_ActivityRenderer();
+		return $renderer->get_html( $atts );
+	}
+
+	/**
+	 * Enqueue style if shortcode is being used.
+	 *
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  1.0
+	 */
+	public function print_scripts() {
+		if ( $this->add_script ) {
+			wp_enqueue_style( 'wp-strava-style' );
+		}
+	}
+}

src/WPStrava/Blocks/Activity.php

@@ -0,0 +1,48 @@
+<?php
+/*
+ * Activity block.
+ */
+
+class WPStrava_Blocks_Activity implements WPStrava_Blocks_Interface {
+
+	/**
+	 * Register the wp-strava/activity block.
+	 *
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  2.2.0
+	 */
+	public function register_block() {
+		register_block_type(
+			'wp-strava/activity',
+			array(
+				'style'           => 'wp-strava-block',
+				'editor_style'    => 'wp-strava-block-editor',
+				'editor_script'   => 'wp-strava-block',
+				'render_callback' => array( $this, 'render_block' ),
+			)
+		);
+	}
+
+	/**
+	 * Render for this block.
+	 *
+	 * @param array $attributes JSON attributes saved in the HTML comment for this block.
+	 * @param string $content The content from JS save() for this block.
+	 * @return string HTML for this block.
+	 * @author Justin Foell <justin@foell.org>
+	 * @since  2.2.0
+	 */
+	public function render_block( $attributes, $content ) {
+		if ( empty( $attributes['url'] ) ) {
+			return $content;
+		}
+
+		$matches = [];
+		preg_match( "/\/activities\/([0-9].*)$/", $attributes['url'], $matches );
+		if ( $matches[1] ) {
+			$renderer = new WPStrava_ActivityRenderer();
+			return $renderer->get_html( array( 'id' => $matches[1] ) );
+		}
+		return $content;
+	}
+}

src/WPStrava/Blocks/Interface.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * WP-Strava Block Interface.
+ */
+
+interface WPStrava_Blocks_Interface {
+
+	public function register_block();
+
+	public function render_block( $attributes, $content );
+}

src/WPStrava/Routes.php

@@ -7,7 +7,7 @@
  * @since 1.3.0
  */
 class WPStrava_Routes {
-	const ROUTES_URL = 'http://strava.com/routes/';
+	const ROUTES_URL = 'https://strava.com/routes/';
 
 	/**
 	 * Get single route by ID.

src/autoload.php

@@ -16,7 +16,7 @@ function wpstrava_autoload_classes( $class_name ) {
 	}
 
 	// @TODO Add directory searching if they get created.
-	$file = WPSTRAVA_PLUGIN_DIR . '/includes/' . implode( '/', $parts ) . '.php';
+	$file = WPSTRAVA_PLUGIN_DIR . '/src/' . implode( '/', $parts ) . '.php';
 	if ( file_exists( $file ) ) {
 		include_once $file;
 	}

src/blocks/activity/edit.js

@@ -0,0 +1,72 @@
+/* global wp, wpStrava */
+import EmbedPlaceholder from './embed-placeholder';
+import EmbedControls from './embed-controls';
+
+const { Component } = wp.element;
+const { isEmpty } = lodash;
+
+/**
+ * Localized Data.
+ */
+const {
+	placeholderActivityImg,
+} = wpStrava;
+
+class Edit extends Component {
+
+	constructor() {
+		super( ...arguments );
+		this.setUrl = this.setUrl.bind( this );
+		this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
+
+		this.state = {
+			url: this.props.attributes.url,
+			editingURL: isEmpty( this.props.attributes.url ) ? true : false,
+		};
+	}
+
+	setUrl( event ) {
+		if ( event ) {
+			event.preventDefault();
+		}
+		const { url } = this.state;
+		const { setAttributes } = this.props;
+		this.setState( { editingURL: false } );
+		setAttributes( { url } );
+	}
+
+	switchBackToURLInput() {
+		this.setState( { editingURL: true } );
+	}
+
+	render() {
+		const { url, editingURL } = this.state;
+
+		// Newly inserted block or we've clicked the edit button.
+		if ( editingURL ) {
+			return (
+				<EmbedPlaceholder
+					icon="chart-line"
+					label="Strava Activity"
+					onSubmit={ this.setUrl }
+					value={ url }
+					onChange={ ( event ) =>
+						this.setState( { url: event.target.value } )
+					}
+				/>
+			);
+		}
+
+		return (
+			<>
+				<EmbedControls
+					switchBackToURLInput={ this.switchBackToURLInput }
+				/>
+				<img className="wp-strava-img" src={placeholderActivityImg} />
+			</>
+		);
+	}
+
+};
+
+export default Edit;

src/blocks/activity/embed-controls.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls } from '@wordpress/editor';
+
+const { __ } = wp.i18n;
+const {
+	Icon,
+	Button,
+	Toolbar,
+} = wp.components;
+
+const EmbedControls = ( props ) => {
+	const {
+		switchBackToURLInput,
+	} = props;
+
+	return (
+		<>
+			<BlockControls>
+				<Toolbar>
+					<Button
+						label={ __( 'Edit URL' ) }
+						onClick={ switchBackToURLInput }
+					>
+						<Icon icon="edit" />
+					</Button>
+				</Toolbar>
+			</BlockControls>
+		</>
+	);
+};
+
+export default EmbedControls;

src/blocks/activity/embed-placeholder.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+
+import { BlockIcon } from '@wordpress/editor';
+
+const { __, _x } = wp.i18n;
+const { Button, Placeholder } = wp.components;
+
+const EmbedPlaceholder = ( props ) => {
+	const {
+		icon,
+		label,
+		value,
+		onSubmit,
+		onChange,
+	} = props;
+
+	return (
+		<Placeholder
+			icon={ <BlockIcon icon={ icon } showColors /> }
+			label={ label }
+			className="wp-block-embed"
+			instructions={ __(
+				'Paste a link to the Strava Activity you want to display on your site.'
+			) }
+		>
+			<form onSubmit={ onSubmit }>
+				<input
+					type="url"
+					value={ value || '' }
+					className="components-placeholder__input"
+					aria-label={ label }
+					placeholder={ __( 'Enter Activity URL to embed here…' ) }
+					onChange={ onChange }
+				/>
+				<Button isPrimary type="submit">
+					{ _x( 'Embed', 'button label' ) }
+				</Button>
+			</form>
+		</Placeholder>
+	);
+};
+
+export default EmbedPlaceholder;

src/blocks/activity/index.js

@@ -0,0 +1,25 @@
+/* global wp, wpStrava */
+const { registerBlockType } = wp.blocks;
+
+import edit from './edit';
+
+/**
+ * Localized Data.
+ */
+const {
+    placeholderActivityImg,
+} = wpStrava;
+
+registerBlockType( 'wp-strava/activity', {
+    title: 'Strava Activity',
+    icon: 'chart-line',
+    category: 'embed',
+    attributes: {
+        url: {
+          type: 'string',
+          default: '',
+        },
+    },
+    edit,
+    save: () => <img className="wp-strava-img" src={placeholderActivityImg} />,
+} );

src/index.js

@@ -0,0 +1 @@
+import './blocks/activity';

tests/bootstrap.php

@@ -4,7 +4,7 @@ if ( ! defined( 'WPSTRAVA_PLUGIN_DIR' ) ) {
 	define( 'WPSTRAVA_PLUGIN_DIR', dirname( __FILE__ ) . '/../' );
 }
 
-require_once dirname( __FILE__ ) . '/../includes/autoload.php';
+require_once dirname( __FILE__ ) . '/../src/autoload.php';
 require_once dirname( __FILE__ ) . '/../vendor/autoload.php';
 
 WP_Mock::bootstrap();

wp-strava.php

@@ -3,7 +3,7 @@
  * Plugin Name: WP Strava
  * Plugin URI: https://wordpress.org/plugins/wp-strava/
  * Description: Show your strava.com activity on your WordPress site. Some Icons are Copyright © Yusuke Kamiyamane. All rights reserved. Licensed under a Creative Commons Attribution 3.0 license.
- * Version: 2.1.0
+ * Version: 2.2.0
  * Author: Carlos Santa Cruz, Justin Foell, Lance Willett, Daniel Lintott, Sebastian Erb
  * License: GPL2
  * Text Domain: wp-strava
@@ -27,8 +27,8 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
-
-define( 'WPSTRAVA_PLUGIN_VERSION', '2.0.1' );
+define( 'WPSTRAVA_PLUGIN_VERSION', '2.2.0' );
+define( 'WPSTRAVA_PLUGIN_FILE', __FILE__ );
 define( 'WPSTRAVA_PLUGIN_DIR', trailingslashit( dirname( __FILE__ ) ) );
 define( 'WPSTRAVA_PLUGIN_URL', plugins_url( '/', __FILE__ ) );
 define( 'WPSTRAVA_PLUGIN_NAME', plugin_basename( __FILE__ ) );
@@ -36,13 +36,14 @@ if ( ! defined( 'WPSTRAVA_DEBUG' ) ) {
 	define( 'WPSTRAVA_DEBUG', false );
 }
 
-require_once WPSTRAVA_PLUGIN_DIR . 'includes/autoload.php';
+require_once WPSTRAVA_PLUGIN_DIR . 'src/autoload.php';
 
 // Load the plugin and multilingual support.
-function wpstrava_load_plugin_textdomain() {
+function wpstrava_plugin_loaded() {
+	// Load language files.
 	load_plugin_textdomain( 'wp-strava', false, WPSTRAVA_PLUGIN_DIR . 'lang/' );
 }
-add_action( 'plugins_loaded', 'wpstrava_load_plugin_textdomain' );
+add_action( 'plugins_loaded', 'wpstrava_plugin_loaded' );
 
 $wpstrava = WPStrava::get_instance();
 $wpstrava->hook();