Bits of .NET

🧩 Gutenberg = Modern Block Editor

Classic editor is limited. Gutenberg blocks are modern. Custom blocks for any content. User-friendly, flexible, powerful.

📝 Block Registration

// functions.php
function register_custom_blocks() {
    register_block_type(__DIR__ . '/build/block.json');
}
add_action('init', 'register_custom_blocks');

// block.json
{
    "apiVersion": 2,
    "title": "Custom Block",
    "name": "custom/block",
    "category": "design",
    "icon": "smiley",
    "description": "A custom block",
    "supports": {
        "html": false
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style.css"
}

🎯 Creating a Block

// index.js
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('custom/block', {
    edit: ({ attributes, setAttributes }) => {
        const { content } = attributes;
        
        return (
            <RichText
                tagName='div'
                value={content}
                onChange={(content) => setAttributes({ content })}
                placeholder='Write your content...'
            />
        );
    },
    save: ({ attributes }) => {
        const { content } = attributes;
        return <div dangerouslySetInnerHTML={{ __html: content }} />;
    }
});

// With Inspector Controls
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

registerBlockType('custom/block', {
    attributes: {
        content: { type: 'string' },
        title: { type: 'string' },
        color: { type: 'string' }
    },
    edit: ({ attributes, setAttributes }) => {
        const { content, title, color } = attributes;
        
        return (
            <>
                <InspectorControls>
                    <PanelBody title='Settings'>
                        <TextControl
                            label='Title'
                            value={title}
                            onChange={(title) => setAttributes({ title })}
                        />
                        <TextControl
                            label='Color'
                            value={color}
                            onChange={(color) => setAttributes({ color })}
                        />
                    </PanelBody>
                </InspectorControls>
                
                <div style={{ backgroundColor: color }}>
                    <h3>{title}</h3>
                    <RichText
                        tagName='div'
                        value={content}
                        onChange={(content) => setAttributes({ content })}
                        placeholder='Write content...'
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) => {
        const { content, title, color } = attributes;
        return (
            <div style={{ backgroundColor: color }}>
                <h3>{title}</h3>
                <div dangerouslySetInnerHTML={{ __html: content }} />
            </div>
        );
    }
});

💡 Block Types

• Static blocks (same content)
• Dynamic blocks (PHP-rendered)
• Reusable blocks (shared across posts)
• Block patterns (pre-made layouts)
• Block templates (default content)