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 element p, which we define in selector 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 is onChangeContent() 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 values bold, 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 👇

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 12 yrs of experience.

Need some custom developer help? Get in touch