-
Notifications
You must be signed in to change notification settings - Fork 1
/
block.js
93 lines (84 loc) · 2.34 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
( function( blocks, editor, i18n, element ) {
let el = element.createElement;
let __ = i18n.__;
let RichText = editor.RichText;
let setAttributes
Vue.customElement( 'basic-editable', {
props: [
'title',
'content',
],
data: function () {
return {
edit_content: '',
edit_title: ''
}
},
watch: {
edit_content: function (v) {
setAttributes({ content:v});
},
edit_title: function (v) {
setAttributes({ title:v});
}
},
created(){
this.edit_content = this.content
this.edit_title = this.title
},
template: `
<div>
<div><p>Title: {{edit_title}}</p><input v-model="edit_title" /></div>
<div><p>Content: {{edit_content}}</p><input v-model="edit_content" /></div>
</div>
`
} );
blocks.registerBlockType( 'marcushiles-blocks/basic-editable', {
title: __( 'Example: Editable' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
content: {
type: 'string',
source: 'children',
selector: 'p',
},
content: {
type: 'array',
source: 'children',
selector: 'p',
},
},
edit: function( props ) {
let vueAppIdAttr = `basic-editable-${props.id}`;
let content = props.attributes.content;
let title = props.attributes.title;
let focus = props.focus;
setAttributes = props.setAttributes
return el(
'basic-editable',
{
className: props.className,
content: content,
title: title,
id: vueAppIdAttr,
}
)
},
save: function( props ) {
return el( 'div', { className: 'components-block-description' },
el( RichText.Content, {
tagName: 'p', value: props.attributes.title
} ),
el( RichText.Content, {
tagName: 'p', value: props.attributes.content
} ),
)
}
});
} )(
window.wp.blocks,
window.wp.editor,
window.wp.i18n,
window.wp.element
);