Với sự ra mắt của Block Bindings API, WordPress đã tiến một bước lớn trong việc biến Gutenberg trở thành một hệ thống soạn thảo linh hoạt thực sự. Tính năng mới này mở ra khả năng liên kết dữ liệu động (dynamic data binding) trực tiếp với các thuộc tính trong block mà không cần viết custom block hay hack thủ công bằng PHP/JS như trước đây.

---

Block Bindings API là gì?

Block Bindings API cho phép bạn “ràng buộc” (bind) dữ liệu từ một nguồn bên ngoài vào thuộc tính cụ thể của block. Nói cách khác, bạn có thể kết nối dữ liệu động như custom fields, metadata, hoặc các nguồn dữ liệu bên ngoài vào bất kỳ block nào – một cách linh hoạt và không xâm phạm đến cấu trúc lõi của block đó.

---

Vì sao Block Bindings quan trọng?

Trước đây, để hiển thị nội dung động, bạn thường phải:

• Viết block tùy chỉnh
• Inject dữ liệu thông qua render_callback
• Thao tác DOM hoặc post meta thủ công

Giờ đây, với Block Bindings API, bạn chỉ cần “liên kết” một attribute nào đó (ví dụ: nội dung đoạn văn, tiêu đề, ảnh…) với một source cụ thể, và WordPress sẽ tự xử lý phần còn lại.

---

Ứng dụng thực tế của Block Bindings

Dưới đây là những gì bạn có thể làm (và sắp làm được) với Block Bindings API:

• Gán nội dung block với ACF field
• Tự động đổ dữ liệu từ Custom Post Type (CPT)
• Kết nối dữ liệu từ REST API hoặc nguồn ngoài (GraphQL, WooCommerce…)
• Hiển thị thông tin động trong block core (như core/paragraph, core/image, core/heading…)

---

Cách hoạt động: Kiến trúc tổng quan

1. 

Data Source

Là nơi cung cấp dữ liệu: post meta, options, API ngoài…

2. 

Binding Target

Là attribute trong block mà bạn muốn liên kết (ví dụ: content, url, alt, headingLevel…)

3. 

Binding Registration

Bạn đăng ký nguồn dữ liệu (source) và định nghĩa cách lấy dữ liệu cho từng target.

---

Ví dụ minh hoạ: Binding nội dung đoạn văn với post meta

Trong 

block.json:

{
  "name": "core/paragraph",
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p",
      "binding": "core/post-meta"
    }
  }
}

Đăng ký binding source bằng JS:

import { registerBindingSource } from '@wordpress/block-bindings';

registerBindingSource( 'core/post-meta', {
  getValue: ( { sourceArgs } ) => {
    return wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ sourceArgs.key ];
  },
} );

Giờ đây, bạn có thể vào Gutenberg → chọn block Paragraph → chọn “Bind with: post meta → field: subtitle”, và dữ liệu sẽ tự động đồng bộ.

---

Tích hợp với UI: Block Bindings Sidebar

WordPress đang thử nghiệm giao diện trực quan cho việc bind:

• Giao diện chọn nguồn (source)
• Tự động hiển thị key từ custom field/meta
• Có thể xem trước dữ liệu và chỉnh sửa nếu cần

Điều này giúp người dùng cuối (non-tech) có thể thao tác mà không cần code.

---

Khả năng mở rộng trong tương lai

Mặc dù hiện tại Block Bindings API vẫn đang trong giai đoạn phát triển (dự kiến tích hợp đầy đủ trong WordPress 6.5+), nhưng roadmap của nó rất hứa hẹn:

• Hỗ trợ binding với bất kỳ attribute nào (không chỉ content)
• Giao diện kéo-thả binding trong block editor
• Kết hợp với ACF, JetEngine, MetaBox, WooCommerce… thông qua bridge hoặc integration
• Có thể dùng trong FSE (Full Site Editing): bind data cho header, footer, template part…

---

Block Bindings vs Block Variations vs Dynamic Block

Công nghệ	Mục đích chính
Block Variations	Tạo các biến thể block khác nhau với preset riêng
Dynamic Block	Render nội dung động thông qua PHP (server-side)
Block Bindings	Kết nối dữ liệu động vào attribute block cụ thể

=> Block Bindings có thể kết hợp với cả hai công nghệ còn lại để tạo ra block mạnh mẽ, linh hoạt và dễ bảo trì.

---

Tình trạng hiện tại (tháng 6/2025)

• Có sẵn trong Gutenberg plugin (phiên bản mới nhất)
• Chưa chính thức trong core WordPress (sẽ sớm được tích hợp)
• Chưa có UI hoàn chỉnh, nhưng có thể dùng qua hook/code
• Có thể thử nghiệm qua plugin block-bindings-plugin của nhóm phát triển WordPress

---

Kết luận: Đây chính là tương lai

Block Bindings API là bước tiến lớn trong hành trình biến Gutenberg thành một page builder thuần WordPress mạnh mẽ và giàu tính tùy biến. Nó không chỉ giúp developer tiết kiệm thời gian viết block phức tạp mà còn mở ra trải nghiệm động hóa nội dung cho người dùng cuối.

Nếu bạn đang xây dựng plugin, theme hoặc site có nhu cầu hiển thị nội dung động – đã đến lúc làm quen với Block Bindings API.

Gutenberg – trình soạn thảo mặc định của WordPress – đã đánh dấu một bước ngoặt lớn trong cách chúng ta xây dựng nội dung. Với hệ thống “block-based” mạnh mẽ, Gutenberg không chỉ đơn thuần là công cụ viết bài mà còn trở thành nền tảng dựng giao diện hiện đại.

Tuy nhiên, để tận dụng hết tiềm năng của Gutenberg, bạn cần biết cách tạo ra các block tùy biến theo đúng nhu cầu người dùng hoặc dự án. Trong bài viết này, chúng ta sẽ khám phá toàn diện quy trình và nghệ thuật phía sau việc xây dựng các Gutenberg block tùy chỉnh.

---

Tại sao nên tạo Gutenberg block tùy biến?

Mặc dù Gutenberg đi kèm hàng chục block mặc định như đoạn văn, ảnh, gallery, heading… nhưng trong thực tế, bạn rất dễ gặp các yêu cầu như:

• Block hiển thị danh sách bài viết theo category
• Block pricing table theo design riêng
• Block testimonial, team member, portfolio…
• Block tích hợp API bên ngoài (ví dụ: hiển thị giá crypto, feed mạng xã hội, review sản phẩm…)

Đây là lúc custom block phát huy sức mạnh.

Tự tạo block giúp bạn:

• Làm chủ trải nghiệm giao diện
• Tối ưu hiệu suất
• Đảm bảo tính linh hoạt khi khách hàng yêu cầu chỉnh sửa

---

Các cách xây dựng Gutenberg block

WordPress cung cấp nhiều phương pháp để tạo block, tùy theo trình độ kỹ thuật và mục tiêu dự án:

1. Sử dụng InnerBlocks và block template

Phù hợp với trường hợp đơn giản, bạn chỉ định cấu trúc sẵn block con trong 1 block cha.

<InnerBlocks
  template={[
    ['core/heading', { level: 3 }],
    ['core/paragraph', { placeholder: 'Nhập nội dung...' }],
  ]}
  templateLock="all"
/>

2. Register block với @wordpress/create-block

Công cụ CLI chính thống của WordPress, giúp bạn scaffolding nhanh một block:

npx @wordpress/create-block ten-block-cua-ban

Nó tạo ra:

• File JS cho edit/save block
• File block.json định nghĩa metadata
• Hệ thống build với Webpack sẵn sàng

3. Viết hoàn toàn bằng tay (Advanced)

Phù hợp cho team lớn, plugin phức tạp. Bạn tự cấu hình Webpack, Babel, PostCSS để tối ưu performance, code splitting, dynamic block loading…

---

Cấu trúc cơ bản của một block

Một Gutenberg block thông thường gồm:

1. block.json – Metadata: tên, category, icon, support…
2. Edit component (edit.js) – Giao diện trong trình soạn thảo
3. Save component (save.js) – Cách render ra frontend
4. Styles (style.scss) – Style cho editor và frontend

Ví dụ đơn giản:

block.json

{
  "name": "custom/pricing-table",
  "title": "Pricing Table",
  "category": "design",
  "icon": "money",
  "editorScript": "file:./index.js"
}

edit.js

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

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <h3>Gói Pro</h3>
      <p>Giá: 299.000đ/tháng</p>
    </div>
  );
}

save.js

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

export default function Save() {
  return (
    <div {...useBlockProps.save()}>
      <h3>Gói Pro</h3>
      <p>Giá: 299.000đ/tháng</p>
    </div>
  );
}

Một số API hữu ích khi làm block

WordPress cung cấp nhiều API giúp việc xây dựng block trở nên dễ dàng và linh hoạt:

• useBlockProps – Gắn props mặc định
• RichText, MediaUpload, InnerBlocks – Thành phần giao diện
• InspectorControls – Tùy chọn hiển thị trong sidebar
• useSelect & useDispatch – Kết nối với store, quản lý state phức tạp

---

Thực tiễn tốt khi phát triển block

✅ Tách riêng phần logic và trình bày

Giúp dễ maintain và tái sử dụng code.

✅ Hạn chế inline style

Thay vào đó, sử dụng SCSS hoặc CSS Module để tối ưu performance.

✅ Hỗ trợ responsive và accessibility

Dùng các thẻ semantic, kiểm tra khả năng truy cập với keyboard/screen reader.

✅ Sử dụng 

block.json

 đầy đủ

Tận dụng các flag như supports, example, attributes để tối ưu trải nghiệm editor.

---

Gutenberg vs Page Builder: Cuộc chơi đã thay đổi

Khi Gutenberg mới ra mắt, nhiều người cho rằng nó sẽ không thể thay thế các page builder như Elementor, WPBakery. Nhưng hiện nay, với sự phát triển mạnh mẽ của block API, full site editing (FSE), và cộng đồng block library mở rộng như Kadence, GenerateBlocks, Stackable…, Gutenberg đã trở thành chuẩn tương lai của WordPress.

---

Lời kết

Xây dựng Gutenberg block tùy biến là kỹ năng quan trọng đối với mọi developer WordPress hiện đại. Nó không chỉ giúp bạn tạo nên giao diện đẹp mắt, tối ưu trải nghiệm người dùng mà còn mở ra cơ hội tạo ra sản phẩm thương mại mạnh mẽ (plugin, theme, block suite…).

Đừng chỉ dừng lại ở việc sử dụng block – hãy tạo ra block của riêng bạn.