Creating Editable Gutenberg block if You Don’t Know JavaScript Deeply

In my previous Gutenberg tutorial we created a nice subscription form block. Now let’s make it editable.

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'
			},
		},
 
		..

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?

Formatting controls for RichText component in Gutenberg
bold, italic, link and strikethrough formatting controls for RichText component

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

Misha Rudrastyh

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

Need some custom developer help? Let me know

Follow Misha

Need some help with Gutenberg?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code