Hướng dẫn Viết Block Sử Dụng InnerBlocks Trong WordPress

Hướng Dẫn Sử Dụng InnerBlocks Trong WordPress: Tạo Block Tùy Chỉnh Chuyên Nghiệp

Giới thiệu về InnerBlocks trong WordPress

InnerBlocks là một thành phần quan trọng trong hệ thống Gutenberg, cho phép tạo các layout phức tạp bằng cách chèn các block con (child blocks) vào bên trong một block cha. Tính năng này cực kỳ hữu ích khi bạn muốn xây dựng các block linh hoạt, lặp lại được và dễ tùy chỉnh – từ bố cục bài viết, danh sách dịch vụ, đến các section phức tạp trong theme.

Bài viết này sẽ hướng dẫn bạn cách tạo một block tùy chỉnh sử dụng InnerBlocks, cách hoạt động của nó và cách mở rộng block để sử dụng trong thực tế.

Cài đặt môi trường phát triển WordPress

Để bắt đầu phát triển block Gutenberg, bạn cần chuẩn bị môi trường WordPress đầy đủ:

  1. Cài đặt một website WordPress trên localhost (LocalWP, XAMPP, Laragon hoặc Docker).
  2. Sử dụng theme hỗ trợ Gutenberg (nên dùng theme mặc định như Twenty Twenty-Four).
  3. Cài đặt plugin Gutenberg nếu bạn dùng phiên bản WordPress cũ.
  4. Cài sẵn Node.js nếu muốn build block nâng cao (không bắt buộc cho ví dụ cơ bản).

Tạo khối tùy chỉnh sử dụng InnerBlocks

Dưới đây là hướng dẫn chi tiết để tạo một block có sử dụng InnerBlocks từ A–Z.

Bước 1: Tạo thư mục chứa block

Trong thư mục theme hoặc plugin của bạn, tạo một folder mới. Ví dụ:

/wp-content/themes/my-theme/custom-blocks/

Bước 2: Tạo file PHP và đăng ký block

Trong folder đó, tạo file my-custom-block.php và thêm đoạn mã sau:

<?php
function my_custom_block_register() {
    register_block_type( 'my-plugin/my-custom-block', array(
        'editor_script'    => 'my-custom-block-editor-script',
        'render_callback'  => 'my_custom_block_render',
        'supports'         => array(
            'align' => true,
        ),
        'attributes'       => array(
            'content' => array(
                'type'    => 'string',
                'default' => '',
            ),
        ),
    ) );
}
add_action( 'init', 'my_custom_block_register' );
?>

Bước 3: Thêm InnerBlocks trong render

InnerBlocks cho phép bạn chèn các block con vào bên trong block cha. Đây là phần quan trọng nhất của block:

<?php
function my_custom_block_render( $attributes ) {
    ob_start();
?>

<div class="my-custom-block">
    <h2>Khối Tùy Chỉnh của Tôi</h2>
    <div class="my-custom-inner">
        <?php echo InnerBlocks::render(); ?>
    </div>
</div>

<?php
    return ob_get_clean();
}
?>

Bước 4: Tải file JavaScript cho trình soạn thảo

Thiết lập script để block hoạt động trong Gutenberg:

<?php
function my_custom_block_enqueue() {
    wp_enqueue_script(
        'my-custom-block-editor-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-block-editor' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_enqueue' );
?>

Bước 5: Tạo file block.js

File JavaScript này dùng để hiển thị block trong trình soạn thảo:

const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;

registerBlockType('my-plugin/my-custom-block', {
    title: 'Khối Tùy Chỉnh của Tôi',
    icon: 'star',
    category: 'layout',

    edit: () => {
        return (
            <div className="my-custom-block-editor">
                <InnerBlocks />
            </div>
        );
    },

    save: () => {
        return <InnerBlocks.Content />;
    }
});

Kiểm tra khối InnerBlocks trong WordPress

Sau khi đã hoàn tất khối:

  1. Mở trình soạn thảo Gutenberg.
  2. Nhấn + để thêm block mới.
  3. Tìm block “Khối Tùy Chỉnh của Tôi”.
  4. Chèn block và thêm các block con bên trong InnerBlocks.

Mở rộng và nâng cấp khối InnerBlocks

Khi đã quen với InnerBlocks, bạn có thể nâng cấp block của mình để chuyên nghiệp hơn:

  • Thêm template mặc định: Tự tạo layout sẵn cho người dùng.
  • Giới hạn block con: Chỉ cho phép thêm đúng các block bạn muốn.
  • Tạo styles / variations: Cho phép chuyển theme block trực tiếp.
  • Kết hợp ACF Blocks: Tăng thêm trường tùy chỉnh nâng cao.

Kết luận

InnerBlocks là công cụ mạnh mẽ giúp bạn tạo các block WordPress linh hoạt, dễ tái sử dụng và phù hợp cho các layout phức tạp. Chỉ với vài bước cơ bản, bạn đã có thể xây dựng một block tùy chỉnh chuyên nghiệp và sử dụng trong bất kỳ dự án WordPress nào.

Hãy thử áp dụng InnerBlocks vào các block bạn đang phát triển – chắc chắn bạn sẽ tạo ra các giao diện đẹp, dễ dùng và hiện đại hơn.