Gutenberg Block Registration - Basic Block

Register a basic Gutenberg block with edit and save functionality.

Block Registration

block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/my-block",
  "title": "My Block",
  "category": "common",
  "icon": "smiley",
  "description": "A custom Gutenberg block",
  "supports": {
    "html": false
  },
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

index.js:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import metadata from './block.json';

registerBlockType(metadata.name, {
    edit: ({ attributes, setAttributes }) => {
        const { content } = attributes;
        const blockProps = useBlockProps();
        
        return (
            <div {...blockProps}>
                <RichText
                    tagName="p"
                    value={content}
                    onChange={(value) => setAttributes({ content: value })}
                    placeholder={__('Enter content...', 'my-plugin')}
                />
            </div>
        );
    },
    save: ({ attributes }) => {
        const { content } = attributes;
        const blockProps = useBlockProps.save();
        
        return (
            <div {...blockProps}>
                <RichText.Content tagName="p" value={content} />
            </div>
        );
    },
});

Features

• RichText editing
• Block attributes
• Proper save function
• i18n support
• Block props handling