<?php
/**
* Server-side rendering of the `core/playlist` block.
*
* @package WordPress
*/
/**
* Renders the `core/playlist` block on server.
*
* @since 7.1.0
*
* @param array $attributes The block attributes.
* @param string $content The block content.
* @param WP_Block $block The block instance.
*
* @return string Returns the Playlist.
*/
function render_block_core_playlist( $attributes, $content, $block ) {
$playlist_id = wp_unique_id( 'playlist-' );
$playlist_tracks = array();
$tracks_data = array();
$show_play_button_artwork = ! empty( $attributes['showPlayButtonArtwork'] );
// Parse inner blocks to extract track data.
// This approach avoids duplicating track data in the HTML output.
if ( ! empty( $block->inner_blocks ) ) {
foreach ( $block->inner_blocks as $inner_block ) {
if ( 'core/playlist-track' === $inner_block->name ) {
$track_attributes = $inner_block->attributes;
if ( empty( $track_attributes['id'] ) ) {
continue;
}
$track_id = 'track-' . count( $playlist_tracks );
$playlist_tracks[] = $track_id;
// Extract track metadata from block attributes.
$title = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' );
$artist = $track_attributes['artist'] ?? '';
$album = $track_attributes['album'] ?? '';
$image = $track_attributes['image'] ?? '';
$image_alt = $track_attributes['imageAlt'] ?? '';
$url = $track_attributes['src'] ?? '';
$aria_label = $title;
if ( $title && $artist && $album ) {
$aria_label = sprintf(
/* translators: %1$s: track title, %2$s: artist name, %3$s: album name. */
_x( '%1$s by %2$s from the album %3$s', 'track title, artist name, album name' ),
$title,
$artist,
$album
);
}
// Data is passed to wp_interactivity_state() which JSON-encodes it,
// so we use wp_strip_all_tags() instead of esc_html() to prevent
// HTML injection without double-encoding. URLs still use esc_url().
$tracks_data[ $track_id ] = array(
'url' => esc_url( $url ),
'title' => wp_strip_all_tags( $title ),
'artist' => wp_strip_all_tags( $artist ),
'album' => wp_strip_all_tags( $album ),
'image' => esc_url( $image ),
'imageAlt' => wp_strip_all_tags( $image_alt ),
'ariaLabel' => wp_strip_all_tags( $aria_label ),
);
}
}
}
if ( empty( $playlist_tracks ) ) {
return '';
}
wp_enqueue_script_module( '@wordpress/block-library/playlist/view' );
// Add the playlist tracks to the global state,
// but keep them isolated from other playlists with the help of playlistId.
wp_interactivity_state(
'core/playlist',
array(
'playlists' => array(
$playlist_id => array(
'tracks' => $tracks_data,
),
),
)
);
// Add waveform player container with translated button labels.
$label_play = esc_attr__( 'Play' );
$label_pause = esc_attr__( 'Pause' );
$label_seek = esc_attr__( 'Seek' );
/* translators: %1$s: current audio time, %2$s: total audio duration. */
$label_seek_value = esc_attr_x(
'%1$s of %2$s',
'audio current time of total duration'
);
$waveform_color_attribute = '';
$waveform_gradient_attribute = '';
$waveform_background_color_attribute = '';
$waveform_background_gradient_attribute = '';
if ( ! empty( $attributes['waveformColor'] ) ) {
$waveform_color_attribute = sprintf(
' data-waveform-player-color="%s"',
esc_attr( $attributes['waveformColor'] )
);
}
if ( ! empty( $attributes['waveformGradient'] ) ) {
$waveform_gradient_attribute = sprintf(
' data-waveform-player-gradient="%s"',
esc_attr( $attributes['waveformGradient'] )
);
}
if ( ! empty( $attributes['waveformBackgroundColor'] ) ) {
$waveform_background_color_attribute = sprintf(
' data-waveform-player-background-color="%s"',
esc_attr( $attributes['waveformBackgroundColor'] )
);
}
if ( ! empty( $attributes['waveformBackgroundGradient'] ) ) {
$waveform_background_gradient_attribute = sprintf(
' data-waveform-player-background-gradient="%s"',
esc_attr( $attributes['waveformBackgroundGradient'] )
);
}
$html = '<div class="wp-block-playlist__waveform-player"' .
$waveform_color_attribute .
$waveform_gradient_attribute .
$waveform_background_color_attribute .
$waveform_background_gradient_attribute . '
data-wp-watch="callbacks.initWaveformPlayer"
data-label-play="' . $label_play . '"
data-label-pause="' . $label_pause . '"
data-label-seek="' . $label_seek . '"
data-label-seek-value="' . $label_seek_value . '"
></div>';
// Add the waveform player container inside the figure.
$figure = null;
preg_match( '/<figure[^>]*>/', $content, $figure );
if ( ! empty( $figure[0] ) ) {
$content = preg_replace( '/(<figure[^>]*>)/', '$1' . $html, $content, 1 );
}
$processor = new WP_HTML_Tag_Processor( $content );
$processor->next_tag( 'figure' );
$processor->set_attribute( 'data-wp-interactive', 'core/playlist' );
$waveform_style = $attributes['waveformStyle'] ?? 'bars';
$processor->set_attribute(
'data-wp-context',
wp_json_encode(
array(
'playlistId' => $playlist_id,
'currentId' => $playlist_tracks[0],
'isPlaying' => false,
'tracks' => $playlist_tracks,
'waveformStyle' => $waveform_style,
'showPlayButtonArtwork' => $show_play_button_artwork,
'labelPauseTrack' => __( 'Pause' ),
'labelSelectTrack' => __( 'Play' ),
)
)
);
// Track IDs are render-time only. Add them after inner blocks have rendered
// so track buttons can update the Interactivity API state without storing
// persistent unique IDs in post content.
$track_index = 0;
while ( $processor->next_tag( array( 'class_name' => 'wp-block-playlist-track__button' ) ) ) {
$track_id = $playlist_tracks[ $track_index ] ?? null;
if ( null === $track_id ) {
break;
}
$processor->set_attribute(
'data-wp-context',
wp_json_encode(
array(
'trackId' => $track_id,
)
)
);
++$track_index;
}
return $processor->get_updated_html();
}
/**
* Registers the `core/playlist` block on server.
*
* @since 7.1.0
*/
function register_block_core_playlist() {
register_block_type_from_metadata(
__DIR__ . '/playlist',
array(
'render_callback' => 'render_block_core_playlist',
)
);
}
add_action( 'init', 'register_block_core_playlist' );