Creating Editable Gutenberg block if You Don’t Know JavaScript Deeply
First of all a disclaimer – I don’t think that I’m a guru in Gutenberg, so, if you have something to add, always welcome to comments.
Let’s keep things simple, so for now I’m going to show you just one thing – how to add an editable title to the form we created in the previous tutorial.
Here is the result:

1. Double Check all JavaScript Dependencies
In the step 1 of the previous tut we enqueued block JS and CSS files, our JS file had dependencies array( 'wp-blocks', 'wp-element' )
but below I’m going to use window.wp.editor
component, so let’s just add one more dependency – wp-editor
.
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
In the latest version of WordPress everything works without this dependency but better safe than sorry 😁
2. Dealing with Attributes
There is a lot to tell you about attributes, but better read this tutorial on the official WordPress website. The long story short we need attributes to save and store our block content and its settings.
registerBlockType( 'misha/newsletter', { ... attributes: { content: { type: 'array', source: 'children', selector: 'p' }, }, ..
content
is just the attribute name, can be anything,source
defines how the attribute value should be stored within a block.children
means, that the content will be stored inside an elementp
, which we define inselector
parameter.
3. RichText or PlainText? Or maybe Editable?
As I probably mentioned in my previous tutorial, Gutenberg is all about ready components. And if we need to edit something we need an appropriate component.
Editable
component doesn’t exist anymore. It was split into RichText
and PlainText
components in Gutenberg 2.2 ( in January 2K18 ). So do not try to make it work 😁
PlainText
component is just a simple auto-growing textarea field, with no controls.
4. RichText Component
Include component
If you are using the code from my previous Gutenberg tutorial, you probably noticed, that we included only window.wp.blocks
and window.wp.element
. But now we need one more thing – window.wp.editor
. Let’s include it too.
( function( blocks, element ) { const el = element.createElement; const { registerBlockType } = blocks; const { RichText } = editor; registerBlockType( .... ); // it is described in the next chapter } )( window.wp.blocks, window.wp.editor, // here it is window.wp.element, );
Please look at the line 5 – now we can use RichText component in the code below.
edit()
edit: function( props ) { // when text in RichText component has been changed function onChangeContent( newContent ) { props.setAttributes( { content: newContent } ); } return ( el( 'div', { className: props.className }, el( RichText, { tagName: 'p', format: 'string', className: 'misha-subscription-block-title', onChange: onChangeContent, value: props.attributes.content, formattingControls: [ 'bold' ] } ), el( 'div', { className: 'misha-subscription-block-form-wrap' }, el( 'div', {}, 'Enter your email...' ), el( 'div', {}, 'Subscribe' ) ) ) ); },
Ok, let’s look at RichText component parameters I used. tagName
, format
and className
should be clear for you, but what about the other ones?
onChange
– this parameter accepts a name of a function, in my example it isonChangeContent()
function which is defined on lines 4-6. This function changes the component attribute on the fly which is its value in this case.value
– here we just obtain the RichText value from attributes.formattingControls
– it allows you to define which formatting buttons are you going to use for this specific RichText component, accepts valuesbold
,italic
,link
,strikethrough
, by default all of them are available. If you want to deactivate everything, just pass an empty array[]
.

save()
Nothing especial here, we just use RichText.Content
to display the content of our RichText component.
save: function( props ) { return ( el( 'div', { className: props.className }, el( RichText.Content, { tagName: 'p', className: 'misha-subscription-block-title', value: props.attributes.content } ), el( 'form', { className: 'misha-subscription-block-form-wrap' }, el( 'input', { 'type': 'email', 'placeholder' : 'Enter your email address' } ), el( 'button', {}, 'Subscribe' ) ) ) ); },
Of course you can download a plugin with this block. Here is the link.
And if you have some extra information or maybe a question, please ask in comments below 👇