Scrobbled Blocks

Opis

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.

• Last.fm Terms of Service
• Last.fm Privacy Policy

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:

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm run build to 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.