Strava Blocks

WordPress Gutenberg blocks for displaying Strava activities and data on your website.

Features

• Recent Activity Block: Display your latest Strava activity with map thumbnail and stats
• OAuth Integration: Secure connection to your Strava account
• Customizable Display: Adjustable titles and alignment options
• Interactive Maps: Click-through to view full activity on Strava
• Responsive Design: Works on desktop and mobile devices

Installation

1. Download or clone this plugin to your WordPress plugins directory:

   /wp-content/plugins/strava/

2. Build the assets (requires Node.js):

   cd /path/to/wp-content/plugins/strava
   npm install
   npm run build

3. Activate the plugin in WordPress Admin → Plugins

Setup

1. Create a Strava API Application

1. Go to https://www.strava.com/settings/api
2. Click "Create App"
3. Fill in the required information:
   • Application Name: Your app name
   • Category: Choose appropriate category
   • Club: Leave blank unless required
   • Website: Your website URL
   • Authorization Callback Domain: Your domain (e.g., yourdomain.com)
4. Click "Create"
5. Copy your Client ID and Client Secret

2. Configure the Plugin

1. In WordPress Admin, go to Settings → Strava
2. Enter your Client ID and Client Secret from step 1
3. (Optional) Add a Google Maps API Key for better map thumbnails
4. Click "Save Changes"
5. Click "Connect to Strava" to authorize the connection
6. You'll be redirected to Strava to approve access
7. After approval, you'll return to WordPress with a connected status

3. Google Maps API (Optional)

For enhanced map thumbnails, you can add a Google Maps API key:

1. Go to Google Cloud Console
2. Create a project or select existing one
3. Enable the Maps Static API
4. Create credentials (API Key)
5. Add the API key in Settings → Strava → Google Maps API Key

Without this key, the plugin will show stylized SVG map placeholders.

Usage

Recent Activity Block

1. Create or edit a post/page in WordPress
2. Click "Add Block" (+) in Gutenberg
3. Search for "Recent Strava Activity"
4. Add the block to your content

Block Options:

• Title: Customize the block heading (default: "Recent Activity")
• Alignment: Left, Center, or Right alignment
• Automatic Loading: Fetches your most recent Strava activity

The block displays:

• Activity name and type (Run, Ride, etc.)
• Date of activity
• Distance, time, and elevation gain
• Map thumbnail (clickable link to Strava)

Block Controls

• Toolbar: Alignment options (left/center/right)
• Inspector Panel: Title customization and alignment settings
• Auto-refresh: Block data updates when you add new Strava activities

Troubleshooting

"Not connected" or "API Error"

• Verify your Client ID and Client Secret are correct
• Ensure your WordPress site domain matches the Strava app callback domain
• Try disconnecting and reconnecting your Strava account

"No recent activities found"

• Make sure you have recent activities on Strava
• Check that your activities are not set to "Only You" privacy
• Token may need refreshing - try reconnecting

Block not appearing

• Ensure the plugin is activated
• Check browser console for JavaScript errors
• Verify assets were built correctly (npm run build)

Map thumbnails not showing

• Without Google Maps API: Shows SVG placeholders (normal behavior)
• With Google Maps API: Verify your API key has Static Maps API enabled
• Check that the API key has proper permissions and quotas

Development

Building Assets

# Install dependencies
npm install

# Development build (watch mode)
npm run dev

# Production build
npm run build

File Structure

strava/
├── strava-blocks.php          # Main plugin file
├── includes/
│   ├── strava-api.php         # Strava API wrapper
│   └── rest-api.php           # WordPress REST endpoints
├── blocks/
│   └── recent-activity/       # Gutenberg block files
├── build/                     # Compiled assets
└── README.md                  # This file

API Endpoints

The plugin exposes these REST API endpoints:

• GET /wp-json/strava-blocks/v1/activities/recent - Get recent activities
• GET /wp-json/strava-blocks/v1/activities/{id} - Get specific activity
• GET /wp-json/strava-blocks/v1/athlete - Get athlete profile
• GET /wp-json/strava-blocks/v1/connection-status - Check connection status

Requirements

• WordPress 5.0+ with Gutenberg
• PHP 7.4+
• Node.js 16+ (for building assets)
• Active Strava account
• Strava API application

License

GPL-2.0-or-later

Support

For issues and questions, please check:

1. This README file
2. WordPress admin Settings → Strava for connection status
3. Browser console for JavaScript errors
4. Strava API documentation at developers.strava.com

Changelog

1.0.0

• Initial release
• Recent Activity Gutenberg block
• OAuth integration with Strava
• Map thumbnail support
• Responsive design