I've properly registered a Gutenberg block that consists of a textarea control to store metadata for a post. In the old days, I simply rendered a wp_editor on the edit-form-advanced hook which had full TinyMCE editing capability and stored the textarea html on the transition_post_status hook.
Inside the Gutenberg environment, using the TextareaControl component, how do I bring full editing capability into the textarea control? My basic setup only shows plain text to input into the control. I guess I could hand code the html but it seems like I should be able to used the editing toolbar to achieve this.
I should add that I'm looking for full TinyMCE editing including ordered/unordered lists. The pre-formatted Toolbar isn't featured enough.
Edit: Here is the js I used to render the Gutenberg block. Pretty basic.
( function( wp ) {
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var TextareaControl = wpponents.TextareaControl;
var RichText = wp.editor.RichText;
var AlignmentToolbar = wp.editor.AlignmentToolbar;
registerBlockType( 'my-gutenberg/my-block', {
title: 'The title',
icon: 'email-alt',
category: 'common',
keywords: ['email'],
attributes: {
blockValue: {
type: 'string',
source: 'meta',
meta: 'the_meta'
}
},
edit: function( props ) {
var className = props.className;
var setAttributes = props.setAttributes;
function updateBlockValue( blockValue ) {
setAttributes({ blockValue });
}
return el(
'div',
{ className: className },
el( TextareaControl, {
label: 'The label',
value: props.attributes.blockValue,
onChange: updateBlockValue
} )
);
},
// No information saved to the block
// Data is saved to post meta via attributes
save: function() {
return null;
}
} );
} )( window.wp );
I've properly registered a Gutenberg block that consists of a textarea control to store metadata for a post. In the old days, I simply rendered a wp_editor on the edit-form-advanced hook which had full TinyMCE editing capability and stored the textarea html on the transition_post_status hook.
Inside the Gutenberg environment, using the TextareaControl component, how do I bring full editing capability into the textarea control? My basic setup only shows plain text to input into the control. I guess I could hand code the html but it seems like I should be able to used the editing toolbar to achieve this.
I should add that I'm looking for full TinyMCE editing including ordered/unordered lists. The pre-formatted Toolbar isn't featured enough.
Edit: Here is the js I used to render the Gutenberg block. Pretty basic.
( function( wp ) {
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var TextareaControl = wpponents.TextareaControl;
var RichText = wp.editor.RichText;
var AlignmentToolbar = wp.editor.AlignmentToolbar;
registerBlockType( 'my-gutenberg/my-block', {
title: 'The title',
icon: 'email-alt',
category: 'common',
keywords: ['email'],
attributes: {
blockValue: {
type: 'string',
source: 'meta',
meta: 'the_meta'
}
},
edit: function( props ) {
var className = props.className;
var setAttributes = props.setAttributes;
function updateBlockValue( blockValue ) {
setAttributes({ blockValue });
}
return el(
'div',
{ className: className },
el( TextareaControl, {
label: 'The label',
value: props.attributes.blockValue,
onChange: updateBlockValue
} )
);
},
// No information saved to the block
// Data is saved to post meta via attributes
save: function() {
return null;
}
} );
} )( window.wp );
- You may be looking for the RichText component. If you'll post your code you'll have a better chance of someone recognizing what's wrong and how to fix it. :) – WebElaine Commented May 15, 2019 at 18:35
- @WebElaine added the js as you suggested. – jdp Commented May 15, 2019 at 18:47
- @WebElaine I need more than just RichText. I need some basic HTML editing capability including unordered lists. – jdp Commented May 16, 2019 at 13:05
- That's a bit counter to how the Block Editor imagines things - each separate component is typically its own block. If you have a set/templated structure, you can add multiple types of inputs - i.e. say each block has a heading, a list, and an image - you just use multiple components and they all become part of the one block. – WebElaine Commented May 16, 2019 at 18:03
1 Answer
Reset to default 1Here'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.prototypeponentDidMount.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.