fix(0.3.2): play-button glyph baseline — drop dashicon for Unicode ▶ / ‖

The dashicon used for the play/pause icon was rendering visibly below
the button text — dashicon font metrics sit the glyph low inside its
own box, so even with `inline-flex` centering the symbol looked like
it was on a separate row from the word "Play".

Swap dashicons-controls-play / dashicons-controls-pause for plain
Unicode glyphs (▶ / ‖) which render on the text baseline like any
other character. Flex container changed to align-items: baseline.
font-variant-emoji: text on the glyph span to keep platforms that
might otherwise pick up an emoji variant of ▶ as monochrome text.

Files: radio.php (version), inc/admin-page.php +
inc/dashboard-widget.php (dashicon span → glyph span),
assets/css/radio.css (drop dashicon-sizing rule, add
.radio-player__play-glyph, baseline alignment),
assets/js/radio.js (setPlayIcon swaps glyph textContent instead of
dashicon className), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-29 23:19:04 +01:00
parent 774e7f9958
commit a56fd7aff7
7 changed files with 39 additions and 14 deletions
+1 -1
View File
@@ -43,7 +43,7 @@ function radio_render_dashboard_widget() {
<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 class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
</button>