Gutenberg block editor basics in Wordpress - Mini Project: Build & Apply

Gutenberg Block Editor Basics

📖 Scenario: You are creating a simple custom Gutenberg block for WordPress. This block will display a greeting message that the user can customize.

🎯 Goal: Build a basic Gutenberg block that shows a customizable greeting message using block attributes and edit/save functions.

📋 What You'll Learn

Create a block with a text attribute called greeting initialized to 'Hello, world!'

Add a text input control in the block editor to update the greeting attribute

Render the greeting text inside a <p> tag in the editor and on the front-end

Register the block properly with registerBlockType

💡 Why This Matters

🌍 Real World

Custom Gutenberg blocks let WordPress site owners add unique content blocks tailored to their needs without coding each time.

💼 Career

Knowing how to build Gutenberg blocks is essential for WordPress developers creating themes and plugins that enhance site editing experiences.

1

Set up block attributes

Create a block registration using registerBlockType with the name myplugin/greeting-block. Define an attribute called greeting of type string with a default value of 'Hello, world!'.

Wordpress

// Your code here to register the block with attributes

Need a hint?

Use registerBlockType with the block name and define attributes inside the options object.

2

Add edit function with text control

In the edit function, add a TextControl from @wordpress/components that updates the greeting attribute. Use props.attributes.greeting as the value and props.setAttributes to update it on change.

Wordpress

import { TextControl } from '@wordpress/components';

registerBlockType('myplugin/greeting-block', {
  attributes: {
    greeting: {
      type: 'string',
      default: 'Hello, world!'
    }
  },
  edit(props) {
    // Your code here to add TextControl
  },
  save() {
    return null;
  }
});

Need a hint?

Use props.attributes.greeting for the value and props.setAttributes to update it inside onChange.

3

Render greeting in save function

In the save function, return a <p> element that displays the greeting attribute value using props.attributes.greeting.

Wordpress

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

registerBlockType('myplugin/greeting-block', {
  attributes: {
    greeting: {
      type: 'string',
      default: 'Hello, world!'
    }
  },
  edit(props) {
    return (
       props.setAttributes({ greeting })}
      />
    );
  },
  save(props) {
    // Your code here to render greeting
  }
});

Need a hint?

Return a <p> element with the greeting text inside the save function.

4

Complete block registration

Ensure the block registration includes the edit and save functions properly returning the JSX elements. The block should be fully functional with attribute, edit, and save.

Wordpress

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

// Your code here to finalize the block registration

Need a hint?

Make sure the block registration includes all parts: attributes, edit, and save functions.