Bits of .NET

🧩 Gutenberg Block Development

Classic editor is limited. Gutenberg blocks are modern. Custom blocks for any content.

📝 Block Setup

# Create plugin structure
my-block/
├── block.json
├── index.js
├── style.css
└── my-block.php

# block.json
{
    "apiVersion": 2,
    "title": "My Custom Block",
    "name": "custom/my-block",
    "category": "design",
    "icon": "smiley",
    "editorScript": "file:./index.js",
    "style": "file:./style.css"
}

# Register block (PHP)
function register_my_block() {
    register_block_type(plugin_dir_path(__FILE__) . '/build');
}
add_action('init', 'register_my_block');

🎯 Building Blocks

// index.js
import { registerBlockType } from '@wordpress/blocks';
import { RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

registerBlockType('custom/my-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 Development Tips

• Use @wordpress/scripts for build
• Use block.json for configuration
• Use InspectorControls for settings
• Use RichText for editable content
• Test with WordPress 6.0+