-
Notifications
You must be signed in to change notification settings - Fork 0
/
block.js
69 lines (63 loc) · 1.46 KB
/
block.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
( function( blocks, components, i18n, element ) {
const el = element.createElement;
const __ = i18n.__;
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
blocks.registerBlockType( 'vrvb/vrview', {
title: __( 'VRView', 'vrvb' ),
icon: 'format-image',
category: 'common',
attributes: {
mediaID: {
type: 'number',
},
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
},
},
edit: function( props ) {
const attributes = props.attributes;
const onSelectImage = function( media ) {
return props.setAttributes( {
mediaURL: media.url,
mediaID: media.id,
} );
};
return (
el( 'div', { className: 'vrview-editor' },
el( blocks.MediaUpload, {
onSelect: onSelectImage,
type: 'image',
value: attributes.mediaID,
render: function( obj ) {
return el( components.Button, {
className: attributes.mediaID ? 'image-button' : 'button button-large',
onClick: obj.open,
},
! attributes.mediaID ? i18n.__( 'Upload Image' ) : el( 'img', { src: attributes.mediaURL } )
);
},
} )
)
);
},
save: function( props ) {
const attributes = props.attributes;
return (
el( 'div', { className: 'vrview-image', ID: 'vrview', 'data-src': attributes.mediaURL },
)
);
},
} );
}(
window.wp.blocks,
window.wp.components,
window.wp.i18n,
window.wp.element
) );