Block development basics in Wordpress

Introduction

Blocks let you build content pieces easily in WordPress. They make editing simple and flexible without coding every time.

You want to add custom content layouts in WordPress posts or pages.

You need reusable content sections that users can edit visually.

You want to create interactive or styled content without writing HTML each time.

You want to extend WordPress editor with your own content types.

You want to improve user experience by making content editing intuitive.

Syntax

Wordpress

wp.blocks.registerBlockType('namespace/block-name', {
  title: 'Block Title',
  icon: 'smiley',
  category: 'common',
  edit: () => {
    return wp.element.createElement('p', null, 'Hello from the editor!');
  },
  save: () => {
    return wp.element.createElement('p', null, 'Hello from the saved content!');
  },
});

registerBlockType is the main function to create a block.

edit defines what shows in the editor, save defines what is saved in the post content.

Examples

A basic block that shows static text in editor and saved content.

Wordpress

wp.blocks.registerBlockType('myplugin/simple-text', {
  title: 'Simple Text',
  icon: 'editor-paragraph',
  category: 'formatting',
  edit: () => wp.element.createElement('p', null, 'Type your text here'),
  save: () => wp.element.createElement('p', null, 'Type your text here'),
});

This block shows a message that is defined inside the edit function and saved as static content.

Wordpress

wp.blocks.registerBlockType('myplugin/dynamic-message', {
  title: 'Dynamic Message',
  icon: 'megaphone',
  category: 'widgets',
  edit: () => {
    const message = 'Hello, WordPress!';
    return wp.element.createElement('p', null, message);
  },
  save: () => {
    return wp.element.createElement('p', null, 'Hello, WordPress!');
  },
});

Sample Program

This block shows a friendly greeting both in the editor and on the published page. It uses the basic block structure with edit and save functions returning simple paragraphs.

Wordpress

wp.blocks.registerBlockType('myplugin/greeting-block', {
  title: 'Greeting Block',
  icon: 'smiley',
  category: 'widgets',
  edit: () => {
    return wp.element.createElement('p', null, 'Welcome to your custom block!');
  },
  save: () => {
    return wp.element.createElement('p', null, 'Welcome to your custom block!');
  },
});

Important Notes

Always use unique namespaced block names like 'myplugin/block-name' to avoid conflicts.

The edit function runs in the editor and can use React features.

The save function returns the HTML saved in the post content and shown on the site.

Summary

Blocks let you create reusable content pieces in WordPress visually.

Use registerBlockType with edit and save functions to define blocks.

Blocks improve editing experience and make content flexible without coding each time.