Here’s an easy way to achieve what you wanted:
From the edit
callback, return a class
which extends the ClassicEdit
component used with the Classic editor block. And in your block’s attributes
, make sure content
is set (in the question, it’s blockValue
). Tried and tested working properly:
var el = wp.element.createElement;
var ClassicEdit; // An instance of the private ClassicEdit class.
wp.blocks.registerBlockType( 'my-gutenberg/my-block', {
attributes: {
content: {
type: 'string',
source: 'meta',
meta: 'the_meta'
}
},
edit: function( props ) {
if ( ! ClassicEdit ) {
var block = wp.blocks.getBlockType( 'core/freeform' );
ClassicEdit = ( class extends block.edit {
componentDidMount() {
// Call the parent method to setup TinyMCE, etc.
block.edit.prototype.componentDidMount.call( this );
// Change the toolbar's title - to your block's.
jQuery( '#toolbar-' + this.props.clientId )
.attr( 'data-placeholder', 'My Title' );
}
} );
}
return el( ClassicEdit, props );
},
save: function( props ) {
},
...
} );
But you’d want to copy these CSS and make sure to replace the my-guternberg/my-block
with the proper block name.
For advanced coding, you could copy the component file, edit it anyway you like, and use it with your block’s edit
option — edit: MyClassicEdit
.
And here’s the code I used for testing.