| 1 |
<?php |
| 2 |
/** |
| 3 |
* Server-side rendering of the `core/playlist` block. |
| 4 |
* |
| 5 |
* @package WordPress |
| 6 |
*/ |
| 7 |
|
| 8 |
/** |
| 9 |
* Renders the `core/playlist` block on server. |
| 10 |
* |
| 11 |
* @since 6.9.0 |
| 12 |
* |
| 13 |
* @param array $attributes The block attributes. |
| 14 |
* @param string $content The block content. |
| 15 |
* @param WP_Block $block The block instance. |
| 16 |
* |
| 17 |
* @return string Returns the Playlist. |
| 18 |
*/ |
| 19 |
function gutenberg_render_block_core_playlist( $attributes, $content, $block ) { |
| 20 |
if ( empty( $attributes['currentTrack'] ) ) { |
| 21 |
return ''; |
| 22 |
} |
| 23 |
|
| 24 |
$current_media_id = $attributes['currentTrack']; |
| 25 |
$playlist_id = wp_unique_id( 'playlist-' ); |
| 26 |
$playlist_tracks = array(); |
| 27 |
$tracks_data = array(); |
| 28 |
$current_unique_id = null; |
| 29 |
|
| 30 |
// Parse inner blocks to extract track data. |
| 31 |
// This approach avoids duplicating track data in the HTML output. |
| 32 |
if ( ! empty( $block->inner_blocks ) ) { |
| 33 |
foreach ( $block->inner_blocks as $inner_block ) { |
| 34 |
if ( 'core/playlist-track' === $inner_block->name ) { |
| 35 |
$inner_block->context['playlistId'] = $playlist_id; |
| 36 |
|
| 37 |
$track_attributes = $inner_block->attributes; |
| 38 |
$unique_id = $track_attributes['uniqueId'] ?? wp_unique_id( 'playlist-track-' ); |
| 39 |
$playlist_tracks[] = $unique_id; |
| 40 |
|
| 41 |
$inner_block->attributes['uniqueId'] = $unique_id; |
| 42 |
|
| 43 |
// Extract track metadata from block attributes. |
| 44 |
$title = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' ); |
| 45 |
$artist = $track_attributes['artist'] ?? ''; |
| 46 |
$album = $track_attributes['album'] ?? ''; |
| 47 |
$image = $track_attributes['image'] ?? ''; |
| 48 |
$url = $track_attributes['src'] ?? ''; |
| 49 |
$aria_label = $title; |
| 50 |
|
| 51 |
if ( $title && $artist && $album ) { |
| 52 |
$aria_label = sprintf( |
| 53 |
/* translators: %1$s: track title, %2$s artist name, %3$s: album name. */ |
| 54 |
_x( '%1$s by %2$s from the album %3$s', 'track title, artist name, album name' ), |
| 55 |
$title, |
| 56 |
$artist, |
| 57 |
$album |
| 58 |
); |
| 59 |
} |
| 60 |
|
| 61 |
// Data is passed to wp_interactivity_state() which JSON-encodes it, |
| 62 |
// so we use wp_strip_all_tags() instead of esc_html() to prevent |
| 63 |
// HTML injection without double-encoding. URLs still use esc_url(). |
| 64 |
$tracks_data[ $unique_id ] = array( |
| 65 |
'url' => esc_url( $url ), |
| 66 |
'title' => wp_strip_all_tags( $title ), |
| 67 |
'artist' => wp_strip_all_tags( $artist ), |
| 68 |
'album' => wp_strip_all_tags( $album ), |
| 69 |
'image' => esc_url( $image ), |
| 70 |
'ariaLabel' => wp_strip_all_tags( $aria_label ), |
| 71 |
); |
| 72 |
|
| 73 |
if ( $unique_id === $current_media_id ) { |
| 74 |
$current_unique_id = $unique_id; |
| 75 |
} |
| 76 |
} |
| 77 |
} |
| 78 |
} |
| 79 |
|
| 80 |
// If there are no tracks but there is a currentTrack set, do not render the block. |
| 81 |
// This can happen for example if the currentTrack was not deleted correctly |
| 82 |
// or if the block is manually edited in the code editor mode. |
| 83 |
if ( empty( $playlist_tracks ) || ! in_array( $current_media_id, $playlist_tracks, true ) ) { |
| 84 |
return ''; |
| 85 |
} |
| 86 |
|
| 87 |
wp_enqueue_script_module( '@wordpress/block-library/playlist/view' ); |
| 88 |
|
| 89 |
// Add the playlist tracks to the global state, |
| 90 |
// but keep them isolated from other playlists with the help of playlistId. |
| 91 |
wp_interactivity_state( |
| 92 |
'core/playlist', |
| 93 |
array( |
| 94 |
'playlists' => array( |
| 95 |
$playlist_id => array( |
| 96 |
'tracks' => $tracks_data, |
| 97 |
), |
| 98 |
), |
| 99 |
) |
| 100 |
); |
| 101 |
|
| 102 |
// Add waveform player container with translated button labels. |
| 103 |
$label_play = esc_attr__( 'Play' ); |
| 104 |
$label_pause = esc_attr__( 'Pause' ); |
| 105 |
$html = '<div class="wp-block-playlist__waveform-player" |
| 106 |
data-wp-watch="callbacks.initWaveformPlayer" |
| 107 |
data-label-play="' . $label_play . '" |
| 108 |
data-label-pause="' . $label_pause . '" |
| 109 |
></div>'; |
| 110 |
|
| 111 |
// Add the HTML for the current track inside the figure. |
| 112 |
$figure = null; |
| 113 |
preg_match( '/<figure[^>]*>/', $content, $figure ); |
| 114 |
if ( ! empty( $figure[0] ) ) { |
| 115 |
$content = preg_replace( '/(<figure[^>]*>)/', '$1' . $html, $content, 1 ); |
| 116 |
} |
| 117 |
|
| 118 |
$processor = new WP_HTML_Tag_Processor( $content ); |
| 119 |
$processor->next_tag( 'figure' ); |
| 120 |
$processor->set_attribute( 'data-wp-interactive', 'core/playlist' ); |
| 121 |
$processor->set_attribute( |
| 122 |
'data-wp-context', |
| 123 |
json_encode( |
| 124 |
array( |
| 125 |
'playlistId' => $playlist_id, |
| 126 |
'currentId' => $current_unique_id, |
| 127 |
'tracks' => $playlist_tracks, |
| 128 |
) |
| 129 |
) |
| 130 |
); |
| 131 |
|
| 132 |
return $processor->get_updated_html(); |
| 133 |
} |
| 134 |
|
| 135 |
/** |
| 136 |
* Registers the `core/playlist` block on server. |
| 137 |
* |
| 138 |
* @since 6.9.0 |
| 139 |
*/ |
| 140 |
function gutenberg_register_block_core_playlist() { |
| 141 |
register_block_type_from_metadata( |
| 142 |
__DIR__ . '/playlist', |
| 143 |
array( |
| 144 |
'render_callback' => 'gutenberg_render_block_core_playlist', |
| 145 |
) |
| 146 |
); |
| 147 |
} |
| 148 |
add_action( 'init', 'gutenberg_register_block_core_playlist', 20 ); |
| 149 |
|
