嵌入一个简单的播放列表。
块关系
允许的内部块:
– core/playlist-track
属性
通过 block.json 中的 attributes 属性定义。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
type | string | "audio" | — |
order | string | "asc" | — |
showTracklist | boolean | true | — |
showImages | boolean | true | — |
showPlayButtonArtwork | boolean | false | — |
showArtists | boolean | true | — |
showNumbers | boolean | true | — |
showTrackLength | boolean | true | — |
waveformStyle | string | "bars" | 枚举: bars, mirror, line, blocks, dots, seekbar |
waveformColor | string | — | — |
waveformGradient | string | — | — |
waveformBackgroundColor | string | — | — |
waveformBackgroundGradient | string | — | — |
caption | string | — | — |
支持
通过 block.json 中的 supports 属性定义。
anchor:truealign:truecolor:interactivity:trueshadow:truespacing:margin:truepadding:true
typography:fontSize:true
上下文
通过 block.json 中的 usesContext 和 providesContext 属性定义。
提供上下文:
showArtists→ 属性showArtistsshowImages→ 属性showImages
块标记
这是一个 混合块。它保存静态标记,服务器在渲染时可能会对其进行增强。
<!-- wp:core/playlist {"caption":"Sample playlist"} -->
<figure class="wp-block-playlist">
<ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers">
<!-- wp:core/playlist-track {"id":123,"src":"https://example.com/audio.mp3","album":"Example album","artist":"Example creator","image":"https://example.com/track-image.jpg","imageAlt":"Track image","length":"3:21","title":"Sample track"} /-->
</ol>
<figcaption class="wp-element-caption">Sample playlist</figcaption>
</figure>
<!-- /wp:core/playlist -->
来源
- block.json (参考)
- 源代码目录 — 浏览
edit和save源文件,index.php等。