| @@ -7,9 +7,9 @@ | ||
| 7 | 7 | |
| 8 | 8 | /** |
| 9 | 9 | * Renders the `core/playlist` block on server. |
| 10 | 10 | * |
| 11 | - * @since 7.1.0 | |
| 11 | + * @since 6.9.0 | |
| 12 | 12 | * |
| 13 | 13 | * @param array $attributes The block attributes. |
| 14 | 14 | * @param string $content The block content. |
| 15 | 15 | * @param WP_Block $block The block instance. |
| @@ -16,26 +16,30 @@ | ||
| 16 | 16 | * |
| 17 | 17 | * @return string Returns the Playlist. |
| 18 | 18 | */ |
| 19 | 19 | function gutenberg_render_block_core_playlist( $attributes, $content, $block ) { |
| 20 | - $playlist_id = wp_unique_id( 'playlist-' ); | |
| 21 | - $playlist_tracks = array(); | |
| 22 | - $tracks_data = array(); | |
| 23 | - $show_play_button_artwork = ! empty( $attributes['showPlayButtonArtwork'] ); | |
| 20 | + if ( empty( $attributes['currentTrack'] ) ) { | |
| 21 | + return ''; | |
| 22 | + } | |
| 24 | 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 | + | |
| 25 | 30 | // Parse inner blocks to extract track data. |
| 26 | 31 | // This approach avoids duplicating track data in the HTML output. |
| 27 | 32 | if ( ! empty( $block->inner_blocks ) ) { |
| 28 | 33 | foreach ( $block->inner_blocks as $inner_block ) { |
| 29 | 34 | if ( 'core/playlist-track' === $inner_block->name ) { |
| 30 | - $track_attributes = $inner_block->attributes; | |
| 35 | + $inner_block->context['playlistId'] = $playlist_id; | |
| 31 | 36 | |
| 32 | - if ( empty( $track_attributes['id'] ) ) { | |
| 33 | - continue; | |
| 34 | - } | |
| 37 | + $track_attributes = $inner_block->attributes; | |
| 38 | + $unique_id = $track_attributes['uniqueId'] ?? wp_unique_id( 'playlist-track-' ); | |
| 39 | + $playlist_tracks[] = $unique_id; | |
| 35 | 40 | |
| 36 | - $track_id = 'track-' . count( $playlist_tracks ); | |
| 37 | - $playlist_tracks[] = $track_id; | |
| 41 | + $inner_block->attributes['uniqueId'] = $unique_id; | |
| 38 | 42 | |
| 39 | 43 | // Extract track metadata from block attributes. |
| 40 | 44 | $title = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' ); |
| 41 | 45 | $artist = $track_attributes['artist'] ?? ''; |
| @@ -40,15 +44,14 @@ | ||
| 40 | 44 | $title = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' ); |
| 41 | 45 | $artist = $track_attributes['artist'] ?? ''; |
| 42 | 46 | $album = $track_attributes['album'] ?? ''; |
| 43 | 47 | $image = $track_attributes['image'] ?? ''; |
| 44 | - $image_alt = $track_attributes['imageAlt'] ?? ''; | |
| 45 | 48 | $url = $track_attributes['src'] ?? ''; |
| 46 | 49 | $aria_label = $title; |
| 47 | 50 | |
| 48 | 51 | if ( $title && $artist && $album ) { |
| 49 | 52 | $aria_label = sprintf( |
| 50 | - /* translators: %1$s: track title, %2$s: artist name, %3$s: album name. */ | |
| 53 | + /* translators: %1$s: track title, %2$s artist name, %3$s: album name. */ | |
| 51 | 54 | _x( '%1$s by %2$s from the album %3$s', 'track title, artist name, album name' ), |
| 52 | 55 | $title, |
| 53 | 56 | $artist, |
| 54 | 57 | $album |
| @@ -57,22 +60,28 @@ | ||
| 57 | 60 | |
| 58 | 61 | // Data is passed to wp_interactivity_state() which JSON-encodes it, |
| 59 | 62 | // so we use wp_strip_all_tags() instead of esc_html() to prevent |
| 60 | 63 | // HTML injection without double-encoding. URLs still use esc_url(). |
| 61 | - $tracks_data[ $track_id ] = array( | |
| 64 | + $tracks_data[ $unique_id ] = array( | |
| 62 | 65 | 'url' => esc_url( $url ), |
| 63 | 66 | 'title' => wp_strip_all_tags( $title ), |
| 64 | 67 | 'artist' => wp_strip_all_tags( $artist ), |
| 65 | 68 | 'album' => wp_strip_all_tags( $album ), |
| 66 | 69 | 'image' => esc_url( $image ), |
| 67 | - 'imageAlt' => wp_strip_all_tags( $image_alt ), | |
| 68 | 70 | 'ariaLabel' => wp_strip_all_tags( $aria_label ), |
| 69 | 71 | ); |
| 72 | + | |
| 73 | + if ( $unique_id === $current_media_id ) { | |
| 74 | + $current_unique_id = $unique_id; | |
| 75 | + } | |
| 70 | 76 | } |
| 71 | 77 | } |
| 72 | 78 | } |
| 73 | 79 | |
| 74 | - if ( empty( $playlist_tracks ) ) { | |
| 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 ) ) { | |
| 75 | 84 | return ''; |
| 76 | 85 | } |
| 77 | 86 | |
| 78 | 87 | wp_enqueue_script_module( '@wordpress/block-library/playlist/view' ); |
| @@ -92,55 +101,15 @@ | ||
| 92 | 101 | |
| 93 | 102 | // Add waveform player container with translated button labels. |
| 94 | 103 | $label_play = esc_attr__( 'Play' ); |
| 95 | 104 | $label_pause = esc_attr__( 'Pause' ); |
| 96 | - $label_seek = esc_attr__( 'Seek' ); | |
| 97 | - /* translators: %1$s: current audio time, %2$s: total audio duration. */ | |
| 98 | - $label_seek_value = esc_attr_x( | |
| 99 | - '%1$s of %2$s', | |
| 100 | - 'audio current time of total duration' | |
| 101 | - ); | |
| 102 | - $waveform_color_attribute = ''; | |
| 103 | - $waveform_gradient_attribute = ''; | |
| 104 | - $waveform_background_color_attribute = ''; | |
| 105 | - $waveform_background_gradient_attribute = ''; | |
| 106 | - if ( ! empty( $attributes['waveformColor'] ) ) { | |
| 107 | - $waveform_color_attribute = sprintf( | |
| 108 | - ' data-waveform-player-color="%s"', | |
| 109 | - esc_attr( $attributes['waveformColor'] ) | |
| 110 | - ); | |
| 111 | - } | |
| 112 | - if ( ! empty( $attributes['waveformGradient'] ) ) { | |
| 113 | - $waveform_gradient_attribute = sprintf( | |
| 114 | - ' data-waveform-player-gradient="%s"', | |
| 115 | - esc_attr( $attributes['waveformGradient'] ) | |
| 116 | - ); | |
| 117 | - } | |
| 118 | - if ( ! empty( $attributes['waveformBackgroundColor'] ) ) { | |
| 119 | - $waveform_background_color_attribute = sprintf( | |
| 120 | - ' data-waveform-player-background-color="%s"', | |
| 121 | - esc_attr( $attributes['waveformBackgroundColor'] ) | |
| 122 | - ); | |
| 123 | - } | |
| 124 | - if ( ! empty( $attributes['waveformBackgroundGradient'] ) ) { | |
| 125 | - $waveform_background_gradient_attribute = sprintf( | |
| 126 | - ' data-waveform-player-background-gradient="%s"', | |
| 127 | - esc_attr( $attributes['waveformBackgroundGradient'] ) | |
| 128 | - ); | |
| 129 | - } | |
| 130 | - $html = '<div class="wp-block-playlist__waveform-player"' . | |
| 131 | - $waveform_color_attribute . | |
| 132 | - $waveform_gradient_attribute . | |
| 133 | - $waveform_background_color_attribute . | |
| 134 | - $waveform_background_gradient_attribute . ' | |
| 105 | + $html = '<div class="wp-block-playlist__waveform-player" | |
| 135 | 106 | data-wp-watch="callbacks.initWaveformPlayer" |
| 136 | 107 | data-label-play="' . $label_play . '" |
| 137 | 108 | data-label-pause="' . $label_pause . '" |
| 138 | - data-label-seek="' . $label_seek . '" | |
| 139 | - data-label-seek-value="' . $label_seek_value . '" | |
| 140 | 109 | ></div>'; |
| 141 | 110 | |
| 142 | - // Add the waveform player container inside the figure. | |
| 111 | + // Add the HTML for the current track inside the figure. | |
| 143 | 112 | $figure = null; |
| 144 | 113 | preg_match( '/<figure[^>]*>/', $content, $figure ); |
| 145 | 114 | if ( ! empty( $figure[0] ) ) { |
| 146 | 115 | $content = preg_replace( '/(<figure[^>]*>)/', '$1' . $html, $content, 1 ); |
| @@ -148,50 +117,19 @@ | ||
| 148 | 117 | |
| 149 | 118 | $processor = new WP_HTML_Tag_Processor( $content ); |
| 150 | 119 | $processor->next_tag( 'figure' ); |
| 151 | 120 | $processor->set_attribute( 'data-wp-interactive', 'core/playlist' ); |
| 152 | - | |
| 153 | - $waveform_style = $attributes['waveformStyle'] ?? 'bars'; | |
| 154 | - | |
| 155 | 121 | $processor->set_attribute( |
| 156 | 122 | 'data-wp-context', |
| 157 | - wp_json_encode( | |
| 123 | + json_encode( | |
| 158 | 124 | array( |
| 159 | - 'playlistId' => $playlist_id, | |
| 160 | - 'currentId' => $playlist_tracks[0], | |
| 161 | - 'isPlaying' => false, | |
| 162 | - 'tracks' => $playlist_tracks, | |
| 163 | - 'waveformStyle' => $waveform_style, | |
| 164 | - 'showPlayButtonArtwork' => $show_play_button_artwork, | |
| 165 | - 'labelPauseTrack' => __( 'Pause' ), | |
| 166 | - 'labelSelectTrack' => __( 'Play' ), | |
| 125 | + 'playlistId' => $playlist_id, | |
| 126 | + 'currentId' => $current_unique_id, | |
| 127 | + 'tracks' => $playlist_tracks, | |
| 167 | 128 | ) |
| 168 | 129 | ) |
| 169 | 130 | ); |
| 170 | 131 | |
| 171 | - // Track IDs are render-time only. Add them after inner blocks have rendered | |
| 172 | - // so track buttons can update the Interactivity API state without storing | |
| 173 | - // persistent unique IDs in post content. | |
| 174 | - $track_index = 0; | |
| 175 | - while ( $processor->next_tag( array( 'class_name' => 'wp-block-playlist-track__button' ) ) ) { | |
| 176 | - $track_id = $playlist_tracks[ $track_index ] ?? null; | |
| 177 | - | |
| 178 | - if ( null === $track_id ) { | |
| 179 | - break; | |
| 180 | - } | |
| 181 | - | |
| 182 | - $processor->set_attribute( | |
| 183 | - 'data-wp-context', | |
| 184 | - wp_json_encode( | |
| 185 | - array( | |
| 186 | - 'trackId' => $track_id, | |
| 187 | - ) | |
| 188 | - ) | |
| 189 | - ); | |
| 190 | - | |
| 191 | - ++$track_index; | |
| 192 | - } | |
| 193 | - | |
| 194 | 132 | return $processor->get_updated_html(); |
| 195 | 133 | } |
| 196 | 134 | |
| 197 | 135 | /** |
| @@ -196,9 +134,9 @@ | ||
| 196 | 134 | |
| 197 | 135 | /** |
| 198 | 136 | * Registers the `core/playlist` block on server. |
| 199 | 137 | * |
| 200 | - * @since 7.1.0 | |
| 138 | + * @since 6.9.0 | |
| 201 | 139 | */ |
| 202 | 140 | function gutenberg_register_block_core_playlist() { |
| 203 | 141 | register_block_type_from_metadata( |
| 204 | 142 | __DIR__ . '/playlist', |
