Module 3: Advanced Gutenberg

Beyond Core Blocks

Clients need custom layouts. You can build them using native React.

Key Concepts

• Native Blocks: React/JSX-based block development (Performant).
• block.json: Metadata for your blocks.
• Server-Side Rendering: For dynamic content.

1. Why Native Blocks?

We are avoiding ACF Blocks to ensure maximum performance and full compatibility with the Site Editor. Native blocks use React and compile to static JS.

2. Scaffolding with @wordpress/create-block

Generate a new block plugin:

npx @wordpress/create-block my-custom-block

3. block.json Configuration

Define your block's metadata:

{
    "name": "my-plugin/notice",
    "title": "Notice",
    "category": "common",
    "attributes": {
        "message": { "type": "string" }
    }
}

4. The Edit Component (React)

Build the editor interface using standard React hooks and WP components:

import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
    return (
        <div { ...useBlockProps() }>
            <TextControl
                value={ attributes.message }
                onChange={ ( val ) => setAttributes( { message: val } ) }
            />
        </div>
    );
}

5. The Save Component

Define how the block is saved to the database (static HTML):

export default function Save({ attributes }) {
    return <div { ...useBlockProps.save() }>{ attributes.message }</div>;
}

6. Dynamic Blocks (Server-Side Render)

For content that changes (like NocoDB data), use PHP to render:

// block.json
"render": "file:./render.php"

7. Fetching NocoDB Data in Blocks

In your `render.php`, fetch data and display it:

$data = get_transient('nocodb_data');
if (!$data) {
    // Fetch from API...
}
echo '<div>' . esc_html($data['field']) . '</div>';

8. Block Attributes & State

Manage complex state using the Redux-like data stores provided by `@wordpress/data`.

9. Styles & Scripts

Enqueue assets only when the block is present on the page to keep the site fast.

10. Block Patterns

Group multiple blocks together into pre-defined layouts that users can insert with one click.