Một số tiêu đề bài viết về việc sử dụng block.json trong WordPress:

Tìm Hiểu block.json Trong WordPress: Cách Hoạt Động Và Lý Do Nên Sử Dụng

Khi phát triển theme hoặc tạo block tùy chỉnh trong WordPress, block.json là một trong những thành phần quan trọng nhất. Đây là file cấu hình giúp WordPress hiểu block của bạn hoạt động như thế nào, có thuộc tính gì và được hiển thị ra sao. Việc nắm vững block.json giúp bạn phát triển block nhanh hơn, tối ưu hơn và dễ bảo trì hơn.

block.json là gì?

block.json là file định nghĩa cấu hình của mỗi block trong hệ thống Gutenberg. Nhờ file này, WordPress có thể tự động nhận diện block, load script, style và các thiết lập cần thiết mà không phải viết nhiều mã PHP như trước đây.

Nói cách khác, block.json chính là “bộ não” của block Gutenberg.

Cấu trúc cơ bản của block.json

Dưới đây là những trường phổ biến mà một file block.json thường sử dụng:

  • name: Tên định danh block theo dạng "namespace/blockname".
  • title: Tiêu đề sẽ xuất hiện trong danh sách block của Gutenberg.
  • description: Mô tả ngắn gọn giúp người dùng hiểu chức năng của block.
  • category: Loại block như text, media, layout…
  • icon: Icon hiển thị trên giao diện editor (Dashicons hoặc SVG).
  • attributes: Các thuộc tính block được hỗ trợ.
  • editorScript / editorStyle: File JS/CSS dùng cho editor.
  • style / script: File CSS/JS dùng cho frontend.

Ví dụ block.json đơn giản

{
    "name": "mytheme/my-block",
    "title": "Khối Nội Dung",
    "description": "Một block tùy chỉnh cơ bản.",
    "category": "widgets",
    "icon": "admin-customizer",
    "attributes": {
        "content": {
            "type": "string",
            "default": "Nội dung mặc định"
        }
    }
}

Đây là file cấu hình tối giản để WordPress hiểu block của bạn.

Cách tạo block.json cho block tùy chỉnh

Để bắt đầu tạo block tùy chỉnh, bạn làm theo các bước sau:

  1. Tạo thư mục block: Đặt trong thư mục /blocks của theme hoặc plugin.
  2. Tạo file block.json: Thêm các trường cấu hình theo nhu cầu của bạn.
  3. Thêm file JS/CSS: Các file như index.js, editor.css, style.css.
  4. Đăng ký block: Thêm vào functions.php đoạn mã: 

function mytheme_register_blocks() {
    register_block_type( __DIR__ . '/blocks/my-block' );
}
add_action( 'init', 'mytheme_register_blocks' );

WordPress sẽ tự động đọc block.json và thiết lập block cho bạn.

Thiết lập attributes trong block.json

Attributes giúp block “nhớ” dữ liệu của người dùng. Bạn có thể thiết lập nhiều loại thuộc tính:

  • string – lưu văn bản
  • number – lưu số
  • boolean – true/false
  • array – danh sách giá trị
  • object – cấu trúc dữ liệu phức tạp

Ví dụ thuộc tính tùy chỉnh kích thước font:


"fontSize": {
    "type": "string",
    "default": "18px"
}

Lợi ích của việc sử dụng block.json

  • Tự động hóa tốt hơn: WordPress tự load script/style dựa trên block.json.
  • Dễ quản lý: Mọi thông tin của block nằm trong một file duy nhất.
  • Giảm code PHP: Không cần viết nhiều logic register block bằng PHP.
  • Tương thích cập nhật: Đáp ứng chuẩn phát triển mới của WordPress/Gutenberg.
  • Tối ưu cho theme hiện đại: Khả năng tái sử dụng và mở rộng mạnh hơn.

Lưu ý khi sử dụng block.json

  • Cú pháp JSON nghiêm ngặt: Sai dấu phẩy hoặc dấu ngoặc sẽ làm block không hoạt động.
  • Kiểm tra quyền đường dẫn: Đảm bảo đường dẫn trong register_block_type đúng.
  • Kiểm tra file JS/CSS: Nếu thiếu file, editor có thể báo lỗi.

Kết luận

block.json là thành phần quan trọng trong hệ thống Gutenberg và là chìa khóa để phát triển block hiện đại trong WordPress. Việc hiểu rõ cấu trúc và cách hoạt động của file này sẽ giúp bạn tạo block nhanh hơn, nhẹ hơn và chuyên nghiệp hơn. Nếu bạn đang xây dựng theme hoặc plugin tùy chỉnh, đừng bỏ qua block.json — nó là tiêu chuẩn mới của WordPress.