Block development basics in Wordpress - Mini Project: Build & Apply

Block development basics

📖 Scenario: You are creating a simple custom block for the WordPress block editor. This block will display a greeting message that can be customized by the user.

🎯 Goal: Build a basic WordPress block that registers a block named greeting-block and displays a customizable greeting message inside the editor and on the site.

📋 What You'll Learn

Create a block registration with registerBlockType using the name myplugin/greeting-block.

Add an attribute called message of type string with a default value.

Use the edit function to show a text input for the message attribute.

Use the save function to output the greeting message inside a p tag.

💡 Why This Matters

🌍 Real World

Custom blocks let WordPress users add tailored content easily in the block editor, improving site flexibility and user experience.

💼 Career

Knowing block development is essential for WordPress developers creating themes and plugins that extend editor capabilities.

1

Create block registration with initial attributes

Write the code to register a block using registerBlockType with the name myplugin/greeting-block. Add an attribute called message of type string with the default value 'Hello, world!'.

Wordpress

// Register the block with name and attributes
// Your code here

Need a hint?

Use wp.blocks.registerBlockType with the block name and an attributes object containing message.

2

Add edit function with text input for message

Add an edit function to the block registration that uses props.attributes.message and props.setAttributes. Inside, return a TextControl component from wp.components that updates the message attribute when changed.

Wordpress

wp.blocks.registerBlockType('myplugin/greeting-block', {
  attributes: {
    message: {
      type: 'string',
      default: 'Hello, world!'
    }
  },
  // Add edit function here
  // Your code here
});

Need a hint?

Use TextControl from wp.components inside the edit function to let users change the message.

3

Add save function to output the message

Add a save function to the block registration that returns a p element containing the message attribute value.

Wordpress

const { TextControl } = wp.components;

wp.blocks.registerBlockType('myplugin/greeting-block', {
  attributes: {
    message: {
      type: 'string',
      default: 'Hello, world!'
    }
  },
  edit: (props) => {
    const { attributes: { message }, setAttributes } = props;
    return (
      wp.element.createElement(TextControl, {
        label: 'Greeting message',
        value: message,
        onChange: (newMessage) => setAttributes({ message: newMessage })
      })
    );
  },
  // Your code here
});

Need a hint?

The save function should return a p tag with the message text using wp.element.createElement.

4

Complete block registration with all parts

Ensure the block registration includes the attributes, edit, and save functions exactly as specified. The block name must be myplugin/greeting-block. The edit function uses TextControl to edit message. The save function outputs the message inside a p tag.

Wordpress

const { TextControl } = wp.components;

wp.blocks.registerBlockType('myplugin/greeting-block', {
  attributes: {
    message: {
      type: 'string',
      default: 'Hello, world!'
    }
  },
  edit: (props) => {
    const { attributes: { message }, setAttributes } = props;
    return (
      wp.element.createElement(TextControl, {
        label: 'Greeting message',
        value: message,
        onChange: (newMessage) => setAttributes({ message: newMessage })
      })
    );
  },
  save: (props) => {
    const { attributes: { message } } = props;
    return wp.element.createElement('p', null, message);
  }
});
// Your code here

Need a hint?

Double-check that all parts are included and the block name is correct.