Scrobbled Blocks
Scrobbled Blocks brings your Last.fm listening history to your WordPress site using native Gutenberg blocks. Whether you’re a music blogger, podcaster, DJ, or just want to share your musical tastes with your audience, this plugin makes it simple.
Two Powerful Blocks
Now Playing Block Display the track you’re currently listening to, or the most recent track you’ve played. Perfect for sidebars, footers, or anywhere you want to show off your current musical mood.
Recently Played Block Show a list or grid of your recent scrobbles. Configurable from 1-20 tracks, with flexible layout options to match your site’s design.
Key Features
- Live Editor Preview – See your actual Last.fm data while editing in Gutenberg
- Flexible Layouts – Choose between list and grid views for the Recently Played block
- Customisable Display – Toggle artwork, timestamps, and Last.fm links on or off
- Smart Caching – Minimises API calls while keeping data fresh (1 min for Now Playing, 5 min for Recently Played)
- Graceful Degradation – If the API is unavailable, cached data is served; if no cache exists, blocks simply don’t render
- Theme-Friendly Styling – Uses CSS custom properties so you can easily match your theme
- Responsive Design – Looks great on all screen sizes
- Custom Placeholder – Upload your own placeholder image for tracks without artwork
External Services
This plugin connects to the Last.fm API (https://ws.audioscrobbler.com/2.0/) to retrieve your public listening history and display it on your WordPress site.
What the service is used for:
This plugin uses the Last.fm API to fetch your recent scrobbles (listening history) so they can be displayed on your WordPress site using the Now Playing and Recently Played blocks.
What data is sent:
- Your Last.fm username
- Your Last.fm API key
- The number of tracks to retrieve
When data is sent:
- When the Now Playing or Recently Played blocks are displayed on a page
- Data is cached locally to minimise API requests (1 minute for Now Playing, 5 minutes for Recently Played)
Service provider:
This service is provided by Last.fm Ltd.
No personal data from your site visitors is collected or sent to Last.fm. Only your configured Last.fm username and API key are transmitted to retrieve your public listening data.
CSS Customisation
The plugin uses CSS custom properties (CSS variables) for easy theming. Add these to your theme’s CSS to override the defaults:
:root {
/* Artwork sizes */
--scrobble-artwork-size: 64px;
--scrobble-artwork-size-grid: 100%;
/* Spacing */
--scrobble-gap: 1rem;
/* Typography */
--scrobble-font-size-track: inherit;
--scrobble-font-size-artist: 0.875em;
--scrobble-font-size-timestamp: 0.75em;
/* Colours */
--scrobble-color-text: inherit;
--scrobble-color-text-secondary: inherit;
--scrobble-color-link: inherit;
}
Example: Larger Artwork
:root {
--scrobble-artwork-size: 100px;
}
Example: Custom Colours
:root {
--scrobble-color-text: #333;
--scrobble-color-text-secondary: #666;
--scrobble-color-link: #1db954;
}
Additional Notes
Requirements
- WordPress 6.0 or higher
- PHP 7.4 or higher
- A Last.fm account (free)
- A Last.fm API key (free, get one at last.fm/api)
Source Code
This plugin uses build tools to compile JavaScript for the block editor. The compiled files are located in the build/ directory.
The original, human-readable source code is available in the src/ directory and on GitHub:
https://github.com/jordesign/scrobbled-blocks
To build from source:
- Clone the repository
- Run
npm installto install dependencies - Run
npm run buildto compile the blocks
Support
For bug reports and feature requests, please visit the GitHub repository.
Contributing
Contributions are welcome! Please see the GitHub repository for development guidelines.