Lập trình WordPress nâng cao: Block Editor (Gutenberg)

Block Editor (Gutenberg) – phần nâng cao và hiện đại nhất trong lập trình WordPress hiện nay.

Từ phiên bản 5.0 trở đi, WordPress mặc định dùng Block Editor (Gutenberg) thay cho trình soạn thảo cổ điển. Bạn có thể tạo khối tùy chỉnh (custom block) giống như Elementor nhưng nhẹ hơn và native.

Gutenberg là gì?

Gutenberg là trình soạn thảo dựa trên block, mỗi đoạn nội dung (tiêu đề, hình ảnh, danh sách, cột…) là một block.

Lập trình viên có thể:

• Tạo block riêng tùy chỉnh
• Tùy biến các block có sẵn
• Dùng React để viết block nâng cao (nhưng bạn có thể bắt đầu bằng PHP trước)

Tổng quan cách tạo Custom Block:

Cách đơn giản nhất (dùng [Block API với PHP + Plugin])

Bước 1: Cài plugin hỗ trợ

Khuyên dùng: [Blockmeister – Lazy Block Generator] hoặc [Block Lab]
👉 Hoặc làm thủ công như dưới đây:

1. Tạo block bằng PHP (Classic – không cần React)

Tạo folder plugin mới:
📁 wp-content/plugins/gfon-block
→ Tạo file: gfon-block.php

📋 Copy<?php
/*
Plugin Name: Gfon Block Cơ Bản
*/

function gfon_register_block() {
    wp_register_script(
        'gfon-block-js',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-editor', 'wp-element')
    );

    register_block_type('gfon/hello-block', array(
        'editor_script' => 'gfon-block-js',
        'render_callback' => 'gfon_render_hello_block'
    ));
}
add_action('init', 'gfon_register_block');

function gfon_render_hello_block() {
    return '<div style="padding:10px; background:#f9f9f9; border-left:5px solid #0073aa;">🎉 Xin chào từ block của Gfon!</div>';
}

Tạo file block.js:

📋 Copyconst { registerBlockType } = wp.blocks;

registerBlockType('gfon/hello-block', {
    title: '🧩 Gfon – Block Xin Chào',
    icon: 'smiley',
    category: 'widgets',
    edit: () => {
        return wp.element.createElement(
            'p',
            null,
            '🖊 Đây là phần hiển thị trong khung soạn thảo.'
        );
    },
    save: () => {
        return null; // Chúng ta dùng render_callback PHP nên không cần save()
    }
});

Kết quả:

• Sau khi kích hoạt plugin → vào trình soạn thảo → kéo block “Gfon – Block Xin Chào”
• Block này sẽ hiển thị HTML như bạn đã định nghĩa trong render_callback

2. Nâng cấp: thêm tùy chọn nhập nội dung

Khi bạn muốn người dùng nhập text, chọn ảnh, v.v. → bạn sẽ dùng các attributes và RichText, InspectorControls trong JS.

(Ví dụ nâng cao mình có thể gửi riêng nếu bạn cần tạo block nhập tiêu đề, text, ảnh, màu nền,…)

3. Dùng ACF Block (cách dễ & mạnh)

Cài plugin: Advanced Custom Fields PRO
→ Cho phép bạn tạo block như sau:

📋 Copyacf_register_block_type(array(
    'name'              => 'gfon-feature-box',
    'title'             => '🔧 Gfon Feature Box',
    'description'       => 'Box có icon, tiêu đề và nội dung',
    'render_template'   => 'template-parts/blocks/feature-box.php',
    'category'          => 'widgets',
    'icon'              => 'admin-customizer',
    'keywords'          => array( 'box', 'feature' )
));

Trong file feature-box.php, bạn dùng ACF như bình thường:

📋 Copy<div class="feature-box">
    <h3><?php the_field('tieu_de'); ?></h3>
    <p><?php the_field('mo_ta'); ?></p>
</div>

ACF Block rất mạnh, ít cần viết JS, dễ dùng cho người mới lập trình block.

Tổng kết