Gutenberg block editor basics in Wordpress

Introduction

The Gutenberg block editor helps you build content by stacking blocks like text, images, and buttons. It makes editing easier and more visual.

Creating a blog post with different sections like paragraphs, images, and quotes.

Building a landing page with buttons, headings, and media.

Adding a gallery of photos to a page without coding.

Making a newsletter layout with columns and text blocks.

Editing content visually without worrying about HTML.

Syntax

Wordpress

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

registerBlockType defines a new block with a unique name.

The edit function shows what you see while editing.

Examples

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

Wordpress

registerBlockType('myplugin/simple-text', {
  title: 'Simple Text',
  icon: 'text',
  category: 'text',
  edit: () => <p>Type your text here.</p>,
  save: () => <p>Type your text here.</p>,
});

A block that displays an image both in editor and on the site.

Wordpress

registerBlockType('myplugin/image-block', {
  title: 'Image Block',
  icon: 'format-image',
  category: 'media',
  edit: () => <img src="https://example.com/image.jpg" alt="Example" />, 
  save: () => <img src="https://example.com/image.jpg" alt="Example" />,
});

Sample Program

This block shows a friendly message in the editor and on the published page. It uses useBlockProps for proper styling and accessibility.

Wordpress

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('myplugin/hello-block', {
  title: 'Hello Block',
  icon: 'smiley',
  category: 'widgets',
  edit: () => {
    const blockProps = useBlockProps();
    return <p {...blockProps}>Hello from the Gutenberg editor!</p>;
  },
  save: () => {
    const blockProps = useBlockProps.save();
    return <p {...blockProps}>Hello from the saved content!</p>;
  },
});

Important Notes

Always use unique names for blocks to avoid conflicts.

Use useBlockProps to add necessary HTML attributes for accessibility and styling.

The edit function runs in the editor, while save defines what appears on the live site.

Summary

Gutenberg blocks let you build content visually by stacking pieces called blocks.

Each block has an edit view for editing and a save view for the final content.

Using blocks makes content creation easier and more flexible without coding HTML.