-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathblock.js
More file actions
107 lines (90 loc) · 2.71 KB
/
block.js
File metadata and controls
107 lines (90 loc) · 2.71 KB
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var el = wp.element.createElement;
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText, BlockControls, BlockFormatControls, AlignmentToolbar } = wp.editor;
const { Button, Dashicon, Tooltip, IconButton, Toolbar } = wp.components;
const { Component, Fragment } = wp.element;
//standard registerBlockType init
registerBlockType( 'my-block-plugin/block-w-insert-shortcode', {
title: 'Block w Shortcode Button', //any title you like
icon: 'universal-access-alt', //any dashicon or svg
category: 'layout', //which category to appear under
//schema of attributes
attributes: {
content: {
type: 'array',
source: 'children'
}
},
//for adding things like a rich text editor, and controls - the editor
edit: class extends Component {
//standard constructor for a component
constructor() {
super( ...arguments );
//make sure we bind `this` to the current component within our callbacks
this.setupEditor = this.setupEditor.bind( this );
this.onChangeContent = this.onChangeContent.bind( this );
this.state = {
//we don't need our component to manage a state in this instance
};
}
//get a local reference to the editor on setup
setupEditor( editor ) {
this.editor = editor;
}
//update attributes when content is updated
onChangeContent( newContent ) {
this.props.setAttributes( { content: newContent } );
}
//tinymce interaction when button is clicked
onClickShortcodeButton() {
return () => {
//the content we want to insert
var myContent = '[myshortcode][/myshortcode]';
if ( this.editor ) {
//execCommand is a TinyMCE function
this.editor.execCommand( 'mceInsertContent', false, myContent );
}
};
}
render() {
const {
attributes,
setAttributes,
className,
} = this.props;
//return toolbar and richtext components
return (
<Fragment>
<BlockControls
controls={ [
{
icon: 'edit',
title: __( 'Insert Shortcode' ),
onClick: this.onClickShortcodeButton(),
},
] }
/>
<RichText
//getSettings={ this.getEditorSettings } //a useful callback for adding params to TinyMCE on setup
onSetup={ this.setupEditor }
key = { 'editable' }
tagName = { 'p' }
className = { className }
onChange = { this.onChangeContent }
value = { attributes.content}
/>
</Fragment>
);
}
},
//save our content to the DB
save: function( props ) {
//save the content variable
var content = props.attributes.content;
return el( RichText.Content, {
className: props.className,
value: content
} );
},
} );