Dynamic Block là gì? Toàn tập về khối động trong WordPress Gutenberg

Dynamic block, hay còn gọi là khối động, là một trong những khái niệm cốt lõi trong hệ thống Block Editor (Gutenberg) của WordPress từ phiên bản 5.0 trở đi. Vậy dynamic block là gì và nó khác gì so với static block truyền thống? Đây là dạng block mà nội dung được sinh ra trong quá trình tải trang (server-side rendering) thay vì lưu sẵn dưới dạng HTML cố định trong database. Điều này giúp nội dung luôn cập nhật theo dữ liệu thực tế mà không cần chỉnh sửa thủ công từng khối.

Bản chất của Dynamic Block trong WordPress

Trong WordPress, block có hai loại chính: static block (tĩnh) và dynamic block (động). Static block lưu toàn bộ HTML sinh ra từ block editor vào post content. Khi hiển thị, WordPress chỉ việc lấy HTML đó ra. Ngược lại, dynamic block chỉ lưu các thuộc tính (attributes) như ID, số lượng hiển thị, màu sắc, v.v. Sau đó, khi render, PHP sẽ chạy một callback function (hàm xử lý) để tạo ra HTML hoàn chỉnh dựa trên các thuộc tính và dữ liệu hiện tại.

Ví dụ điển hình: block “Bài viết gần đây” (Latest Posts) trong Gutenberg thuộc dạng dynamic. Bạn chỉ cần chọn số lượng bài muốn hiển thị, không cần phải insert từng bài viết. Khi có bài mới được đăng, block tự động cập nhật mà không cần bạn vào lại trang soạn thảo.

Phân loại Dynamic Block phổ biến

Google cho thấy người dùng thường tìm kiếm “dynamic block là gì” trong ngữ cảnh phát triển theme và plugin WordPress. v. Đây là các block mặc định được xây dựng sẵn trong Gutenberg.

• Dynamic Block từ Plugin Third-party: Các plugin xây dựng block riêng (Ví dụ: Advanced Custom Fields block, Yoast SEO breadcrumb block, Woocommerce product grid).
• Custom Dynamic Block do Developer tự xây dựng: Dành cho các dự án cần logic phức tạp như hiển thị dữ liệu từ custom post type, nhập dữ liệu từ API, hoặc tích hợp hệ thống bên thứ ba.

Thành phần cấu tạo của một Dynamic Block

Để hiểu sâu hơn về dynamic block, cần nắm ba thành phần chính trong file block JavaScript và PHP:

Thành phần	Vai trò	Ghi chú
block.json	Khai báo metadata: tên block, title, icon, category, attributes, supports.	Bắt buộc cho cả static và dynamic block.
edit() (JavaScript)	Xây dựng giao diện chỉnh sửa trong block editor. Có thể tương tác trực tiếp, cập nhật attributes.	Giống với static block, nhưng không cần tạo HTML hoàn chỉnh.
render_callback (PHP)	Hàm xử lý khi render ngoài front-end (trang chính). Nhận attributes và trả về HTML.	Đây là điểm khác biệt: thay vì dùng save() trả về HTML lưu database, dynamic block dùng render_callback.
save() (JavaScript)	Đối với dynamic block, save() thường trả về null hoặc rỗng, vì HTML không được lưu.	Có thể giữ lạicác thuộc tính dạng comment để hỗ trợ phân tích.

Như vậy, quy trình hoạt động: Người dùng thêm block mới vào bài viết, chọn thuộc tính (ví dụ: số lượng bài viết hiển thị). JavaScript ghi lại các thuộc tính vào database. Khi người dùng xem trang web, WordPress gọi render_callback để tạo HTML dựa trên các thuộc tính đó và dữ liệu hiện tại.

Lợi ích và hạn chế của Dynamic Block

Lợi ích

• Luôn cập nhật – Nội dung block tự động thay đổi khi dữ liệu nguồn thay đổi (bài viết mới, giá sản phẩm thay đổi, v.v.).
• Tiết kiệm dung lượng database – Không lưu HTML thừa, chỉ lưu thuộc tính nhỏ gọn.
• Giảm công sức chỉnh sửa thủ công – Không cần sửa từng trang khi dữ liệu thay đổi.
• Linh hoạt trong xử lý dữ liệu phức tạp – Có thể gọi API, truy vấn WP_Query, lấy dữ liệu từ custom table.
• Hỗ trợ caching tốt hơn ở cấp server – Nếu kết hợp với full-page cache, block vẫn hiển thị đúng nội dung mới mà không cần cache toàn bộ trang.

Hạn chế

• Phụ thuộc vào server-side rendering – Mỗi lần load trang đều gọi PHP để tạo HTML, tăng thời gian xử lý nếu không cache đúng cách.
• Khó khăn trong việc preview front-end ở block editor – Gutenberg hiển thị iframe dựa trên HTML lưu tạm, dynamic block cần gọi render_callback ngay trong editor, đôi khi gây chậm.
• Debug khó hơn – Nếu render_callback bị lỗi, toàn bộ block có thể không hiển thị mà không có thông báo rõ ràng.
• Yêu cầu kiến thức PHP và JavaScript – Developer cần biết cả hai ngôn ngữ để xây dựng custom dynamic block.

So sánh Static Block và Dynamic Block

Để thấy rõ sự khác biệt, bảng dưới đây tổng hợp các tiêu chí quan trọng.

Tiêu chí	Static Block	Dynamic Block
Cách lưu content	Lưu toàn bộ HTML vào post_content	Chỉ lưu attributes (mảng JSON nhỏ)
Render front-end	Xuất trực tiếp HTML đã lưu	Gọi render_callback PHP để sinh HTML
Nội dung thay đổi	Phải edit lại block trong từng bài	Tự động cập nhật nếu dữ liệu thay đổi
Hiệu suất (không cache)	Nhanh (không cần xử lý logic)	Chậm hơn nếu render phức tạp
Phù hợp với	Nội dung tĩnh (văn bản, hình ảnh, cột cố định)	Nội dung từ database (danh sách bài, sản phẩm, menu, lịch)
Độ phức tạp khi phát triển	Thấp (chỉ cần JavaScript)	Cao (cả JS và PHP, phải callback)

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

Khối động được ứng dụng rộng rãi trong các tình huống cần hiển thị dữ liệu thay đổi thường xuyên hoặc được quản lý tập trung:

• Hiển thị bài viết mới nhất – Dùng để làm sidebar hoặc section “Bài viết liên quan”. Block mặc định Latest Posts là dynamic.
• Lưới sản phẩm thương mại điện tử – Các block của WooCommerce hiển thị sản phẩm bán chạy, giảm giá, sản phẩm nổi bật đều là dynamic.
• Bộ lọc tác giả hoặc danh mục – Hiển thị danh sách bài viết của một tác giả cụ thể, hoặc theo danh mục, tag.
• Nội dung từ API bên thứ ba – Lấy dữ liệu thời tiết, tỷ giá ngoại tệ, lịch sự kiện, v.v. từ API và render liên tục.
• Custom Post Type Archive – Xây dựng block hiển thị dự án, portfolio, testimonial từ custom post type.
• Tích hợp số liệu thống kê – Hiển thị số lượng thành viên, bài viết, comment trong một block.

Hướng dẫn xây dựng Dynamic Block cơ bản (dành cho Developer)

Giả sử $attributes[‘numberOfPosts’]: 5; $recent = new WP_Query( array( ‘posts_per_page’ => $number ) ); if ( $recent->have_posts() ): $output = ‘<ul class=”latest-posts”>’; while ( $recent->have_posts() ): $recent->the_post(); $output.= ‘<li><a href=”‘. get_permalink(). ‘”>’. get_the_title(). ‘</a></li>’; endwhile; $output.= ‘</ul>’; wp_reset_postdata(); return $output; else: return ‘<p>Không có bài viết nào.</p>’; endif;
}

Lưu ý: Không dùng code block trong bài viết, nhưng tôi muốn trình bày code tham khảo một cách tự nhiên.

Có, dynamic block gọi PHP để render nội dung mỗi khi trang được tải. Nếu không cache, tốc độ có thể chậm hơn so với static block. Tuy nhiên, với các block được tối ưu (truy vấn nhẹ, có caching), sự khác biệt là không đáng kể.

Làm thế nào để debug một dynamic block khi nó không hiển thị?

Kích hoạt WP_DEBUG để xem lỗi PHP. Kiểm tra xem render_callback có trả về đúng HTML không, và có lỗi theme/plugin trùng tên không. Trong block editor, mở console (F12) để xem thông báo lỗi từ REST API.

Dynamic Block có hoạt động trên mọi theme WordPress không?

Về mặt kỹ thuật, có. Nhưng nếu theme không hỗ trợ Gutenberg editor (ví dụ dùng Classic Editor plugin), block sẽ không hiển thị. Tuy nhiên, front-end vẫn render bình thường nếu WordPress hiểu cách xử lý block.

Tôi có thể chuyển một static block thành dynamic block không?

Hoàn toàn được. Bạn chỉ cần thêm render_callback trong block.json và bỏ phần save() trả về HTML. Tuy nhiên, các bài viết đã dùng block cũ sẽ cần cập nhật lại (re-save) hoặc chạy script migration để attributes được giữ nguyên.

Dynamic block có hỗ trợ responsive và CSS tùy chỉnh không?

Có. Giống như static block, dynamic block có thể khai báo supports (align, color, spacing) trong block.json. CSS được tải từ file riêng hoặc inline style. Nội dung render_callback có thể sử dụng class và style dễ dàng.

Kết luận

Dynamic block (khối động) là một công cụ mạnh mẽ trong WordPress hiện đại, cho phép hiển thị nội dung luôn tươi mới và tiết kiệm tài nguyên lưu trữ. Hiểu rõ dynamic block là gì giúp bạn tận dụng tối đa sức mạnh của Gutenberg, từ việc dùng block mặc định đến xây dựng custom block cho riêng mình. Dù có một số hạn chế về hiệu suất và độ phức tạp, nhưng với những hướng dẫn và lưu ý trên, bạn hoàn toàn có thể khắc phục và làm chủ loại block này. Hãy bắt tay vào xây dựng dynamic block ngay hôm nay để trải nghiệm sự linh hoạt mà nó mang lại cho website WordPress của bạn.