1 |
|
2 |
|
3 |
|
4 | import { createBlobURL } from '@wordpress/blob';
|
5 | import { createBlock } from '@wordpress/blocks';
|
6 | import { RichText } from '@wordpress/block-editor';
|
7 | import { __ } from '@wordpress/i18n';
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import edit from './edit';
|
13 | import icon from './icon';
|
14 |
|
15 | export const name = 'core/audio';
|
16 |
|
17 | export const settings = {
|
18 | title: __( 'Audio' ),
|
19 |
|
20 | description: __( 'Embed a simple audio player.' ),
|
21 |
|
22 | icon,
|
23 |
|
24 | category: 'common',
|
25 |
|
26 | attributes: {
|
27 | src: {
|
28 | type: 'string',
|
29 | source: 'attribute',
|
30 | selector: 'audio',
|
31 | attribute: 'src',
|
32 | },
|
33 | caption: {
|
34 | type: 'string',
|
35 | source: 'html',
|
36 | selector: 'figcaption',
|
37 | },
|
38 | id: {
|
39 | type: 'number',
|
40 | },
|
41 | autoplay: {
|
42 | type: 'boolean',
|
43 | source: 'attribute',
|
44 | selector: 'audio',
|
45 | attribute: 'autoplay',
|
46 | },
|
47 | loop: {
|
48 | type: 'boolean',
|
49 | source: 'attribute',
|
50 | selector: 'audio',
|
51 | attribute: 'loop',
|
52 | },
|
53 | preload: {
|
54 | type: 'string',
|
55 | source: 'attribute',
|
56 | selector: 'audio',
|
57 | attribute: 'preload',
|
58 | },
|
59 | },
|
60 |
|
61 | transforms: {
|
62 | from: [
|
63 | {
|
64 | type: 'files',
|
65 | isMatch( files ) {
|
66 | return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0;
|
67 | },
|
68 | transform( files ) {
|
69 | const file = files[ 0 ];
|
70 |
|
71 |
|
72 |
|
73 | const block = createBlock( 'core/audio', {
|
74 | src: createBlobURL( file ),
|
75 | } );
|
76 |
|
77 | return block;
|
78 | },
|
79 | },
|
80 | {
|
81 | type: 'shortcode',
|
82 | tag: 'audio',
|
83 | attributes: {
|
84 | src: {
|
85 | type: 'string',
|
86 | shortcode: ( { named: { src } } ) => {
|
87 | return src;
|
88 | },
|
89 | },
|
90 | loop: {
|
91 | type: 'string',
|
92 | shortcode: ( { named: { loop } } ) => {
|
93 | return loop;
|
94 | },
|
95 | },
|
96 | autoplay: {
|
97 | type: 'srting',
|
98 | shortcode: ( { named: { autoplay } } ) => {
|
99 | return autoplay;
|
100 | },
|
101 | },
|
102 | preload: {
|
103 | type: 'string',
|
104 | shortcode: ( { named: { preload } } ) => {
|
105 | return preload;
|
106 | },
|
107 | },
|
108 | },
|
109 | },
|
110 | ],
|
111 | },
|
112 |
|
113 | supports: {
|
114 | align: true,
|
115 | },
|
116 |
|
117 | edit,
|
118 |
|
119 | save( { attributes } ) {
|
120 | const { autoplay, caption, loop, preload, src } = attributes;
|
121 | return (
|
122 | <figure>
|
123 | <audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
|
124 | { ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
|
125 | </figure>
|
126 | );
|
127 | },
|
128 | };
|