feat: v0.2.0 — UI rebuilt to WordPress admin standards
v0.1.0 worked but felt like a third-party React widget bolted on
top of WordPress. v0.2.0 makes the player visually native to the
WP admin: postbox container, standard Play/Pause button with text
label, admin-colour-scheme aware accents, dashboard widget no
longer renders a card inside a card.
CHANGES
- inc/admin-page.php: main page now wraps the player in a
.postbox > .postbox-header (with h2.hndle) > .inside structure.
Custom rounded card / shadow stripped.
- inc/dashboard-widget.php: bare .radio-player content; WP already
wraps dashboard widgets in a postbox, was double-card before.
- inc/about.php: version-history card promotes v0.2.0 to latest,
demotes v0.1.0.
- assets/css/radio.css: rewrite. Strip custom shadows + oversized
typography. Adopt WP body-text defaults. Use
var(--wp-admin-theme-color, #2271b1) for volume-slider accent +
link colours so the plugin picks up whichever admin colour
scheme the user has chosen. About-page cards now use the
postbox-style gray header + 1px border pattern.
- assets/js/radio.js: setPlayIcon() also flips the visible text
label ("Play" ↔ "Pause"), not just the icon class. mirrorSelection()
also updates the [data-radio-genre] element so the genre label
stays in sync across surfaces.
- radio.php: Version: 0.1.0 -> 0.2.0; BUDDY_VERSION constant
bumped likewise.
- CHANGELOG.md: new [0.2.0] entry explaining the visual overhaul.
NET EFFECT
- Same 44 stations, same audio path, same persistence, same
updater, same AJAX endpoint. Pure visual change.
- The plugin now looks like part of WordPress admin instead of a
guest widget.
- Closer to WP.org submission criteria — plugin reviewers look
for native-styled plugins.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
+5
-1
@@ -48,7 +48,11 @@ function radio_render_about_page() {
|
||||
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ver">v0.1.0</span> — 26 May 2026 <span class="latest">latest</span><br>
|
||||
<span class="ver">v0.2.0</span> — 26 May 2026 <span class="latest">latest</span><br>
|
||||
<?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ver">v0.1.0</span> — 26 May 2026<br>
|
||||
<?php esc_html_e( 'First release. 44 SomaFM stations grouped by 10 genres, dashboard widget + dedicated admin page, per-user state in user_meta, self-hosted update checker against Gitea. Direct HTML5 audio playback — no proxy, no build step, no tracking.', 'radio' ); ?>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+50
-40
@@ -2,9 +2,10 @@
|
||||
/**
|
||||
* Radio — main admin page (WP Admin → Radio → My Radio).
|
||||
*
|
||||
* Larger player with the same controls as the dashboard widget. Both
|
||||
* surfaces share the same JS (assets/js/radio.js binds to every
|
||||
* .radio-player on the page).
|
||||
* Uses WP-native postbox structure so the player feels like part of
|
||||
* WordPress, not a third-party widget. The dashboard widget shares
|
||||
* the same internal markup via assets/js/radio.js binding to every
|
||||
* .radio-player on the page.
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||||
@@ -26,55 +27,64 @@ function radio_render_main_page() {
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %d = number of stations */
|
||||
esc_html__( 'A friendly tab of background music for your WordPress admin. %d hand-curated SomaFM stations across 10 genres, all free, no ads.', 'radio' ),
|
||||
esc_html__( 'A tab of background music for your WordPress admin. %d hand-curated SomaFM stations across 10 genres — free, no ads, no tracking.', 'radio' ),
|
||||
(int) $count
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
|
||||
<div class="radio-player radio-player--main" data-radio-surface="main">
|
||||
<div class="radio-player__now radio-player__now--large">
|
||||
<div class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></div>
|
||||
<div class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></div>
|
||||
<div class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></div>
|
||||
<div class="radio-player__station-genre"><?php echo esc_html( $station['genre'] ); ?></div>
|
||||
<div class="postbox">
|
||||
<div class="postbox-header">
|
||||
<h2 class="hndle"><?php esc_html_e( 'Player', 'radio' ); ?></h2>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="radio-player" data-radio-surface="main">
|
||||
|
||||
<div class="radio-player__controls radio-player__controls--large">
|
||||
<button type="button" class="radio-player__play button button-primary button-hero" data-radio-play title="<?php esc_attr_e( 'Play', 'radio' ); ?>">
|
||||
<span class="dashicons dashicons-controls-play"></span>
|
||||
</button>
|
||||
<div class="radio-player__now">
|
||||
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
|
||||
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
|
||||
<span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
|
||||
<p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__volume">
|
||||
<span class="dashicons dashicons-controls-volumeon"></span>
|
||||
<input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
|
||||
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
<div class="radio-player__controls">
|
||||
<button type="button" class="button button-primary radio-player__play" data-radio-play>
|
||||
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
|
||||
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
|
||||
</button>
|
||||
|
||||
<div class="radio-player__volume">
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
<input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
|
||||
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__station-select">
|
||||
<label for="radio-station-main"><?php esc_html_e( 'Station', 'radio' ); ?></label>
|
||||
<select id="radio-station-main" data-radio-station>
|
||||
<?php foreach ( $stations as $genre => $entries ) :
|
||||
if ( empty( $entries ) ) { continue; }
|
||||
?>
|
||||
<optgroup label="<?php echo esc_attr( $genre ); ?>">
|
||||
<?php foreach ( $entries as $entry ) : ?>
|
||||
<option value="<?php echo esc_attr( $entry['id'] ); ?>" data-url="<?php echo esc_attr( $entry['url'] ); ?>" data-desc="<?php echo esc_attr( $entry['description'] ); ?>" data-genre="<?php echo esc_attr( $entry['genre'] ); ?>" <?php selected( $entry['id'], $state['station_id'] ); ?>>
|
||||
<?php echo esc_html( $entry['name'] ); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</optgroup>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__error" data-radio-error hidden></div>
|
||||
|
||||
<audio data-radio-audio preload="none"></audio>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__station-select">
|
||||
<label for="radio-station-main"><?php esc_html_e( 'Station', 'radio' ); ?></label>
|
||||
<select id="radio-station-main" data-radio-station>
|
||||
<?php foreach ( $stations as $genre => $entries ) :
|
||||
if ( empty( $entries ) ) { continue; }
|
||||
?>
|
||||
<optgroup label="<?php echo esc_attr( $genre ); ?>">
|
||||
<?php foreach ( $entries as $entry ) : ?>
|
||||
<option value="<?php echo esc_attr( $entry['id'] ); ?>" data-url="<?php echo esc_attr( $entry['url'] ); ?>" data-desc="<?php echo esc_attr( $entry['description'] ); ?>" data-genre="<?php echo esc_attr( $entry['genre'] ); ?>" <?php selected( $entry['id'], $state['station_id'] ); ?>>
|
||||
<?php echo esc_html( $entry['name'] ); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</optgroup>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__error" data-radio-error hidden></div>
|
||||
|
||||
<audio data-radio-audio preload="none"></audio>
|
||||
</div>
|
||||
|
||||
<p class="radio-player__credit radio-player__credit--main">
|
||||
<p class="radio-player__credit radio-player__credit--main description">
|
||||
<?php
|
||||
printf(
|
||||
wp_kses(
|
||||
|
||||
+15
-12
@@ -2,9 +2,9 @@
|
||||
/**
|
||||
* Radio — dashboard widget.
|
||||
*
|
||||
* The compact mini-player on WP Admin → Dashboard. Same HTML structure
|
||||
* as the main admin page but smaller, so the assets/js/radio.js can
|
||||
* bind to whichever surface the user opens first.
|
||||
* The compact mini-player on WP Admin → Dashboard. WordPress wraps
|
||||
* dashboard widgets in a .postbox automatically, so we render bare
|
||||
* content here — no nested card styling.
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||||
@@ -31,21 +31,25 @@ function radio_render_dashboard_widget() {
|
||||
$station = radio_find_station( $state['station_id'] );
|
||||
$stations = radio_get_stations_grouped();
|
||||
?>
|
||||
<div class="radio-player radio-player--widget" data-radio-surface="widget">
|
||||
<div class="radio-player" data-radio-surface="widget">
|
||||
|
||||
<div class="radio-player__now">
|
||||
<div class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></div>
|
||||
<div class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></div>
|
||||
<div class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></div>
|
||||
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
|
||||
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
|
||||
<span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
|
||||
<p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__controls">
|
||||
<button type="button" class="radio-player__play button button-primary" data-radio-play title="<?php esc_attr_e( 'Play', 'radio' ); ?>">
|
||||
<span class="dashicons dashicons-controls-play"></span>
|
||||
<button type="button" class="button button-primary radio-player__play" data-radio-play>
|
||||
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
|
||||
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
|
||||
</button>
|
||||
|
||||
<div class="radio-player__volume">
|
||||
<span class="dashicons dashicons-controls-volumeon"></span>
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
<input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
|
||||
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +61,7 @@ function radio_render_dashboard_widget() {
|
||||
?>
|
||||
<optgroup label="<?php echo esc_attr( $genre ); ?>">
|
||||
<?php foreach ( $entries as $entry ) : ?>
|
||||
<option value="<?php echo esc_attr( $entry['id'] ); ?>" data-url="<?php echo esc_attr( $entry['url'] ); ?>" data-desc="<?php echo esc_attr( $entry['description'] ); ?>" <?php selected( $entry['id'], $state['station_id'] ); ?>>
|
||||
<option value="<?php echo esc_attr( $entry['id'] ); ?>" data-url="<?php echo esc_attr( $entry['url'] ); ?>" data-desc="<?php echo esc_attr( $entry['description'] ); ?>" data-genre="<?php echo esc_attr( $entry['genre'] ); ?>" <?php selected( $entry['id'], $state['station_id'] ); ?>>
|
||||
<?php echo esc_html( $entry['name'] ); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
@@ -72,7 +76,6 @@ function radio_render_dashboard_widget() {
|
||||
|
||||
<p class="radio-player__credit">
|
||||
<?php
|
||||
/* translators: %s = SomaFM link */
|
||||
printf(
|
||||
wp_kses(
|
||||
/* translators: %s = link to somafm.com */
|
||||
|
||||
Reference in New Issue
Block a user