Meet Nectarblocks

Trong hoạt động phát triển website, lựa chọn page builder ảnh hưởng trực tiếp đến hiệu năng vận hành và trải nghiệm quản trị lâu dài. Suốt một thời gian dài, các classic page builder như WPBakery hay Elementor là lựa chọn phổ biến, nhưng các công cụ này hoạt động như một hệ thống độc lập đè lên cấu trúc cốt lõi của WordPress, tạo gánh nặng mã nguồn và làm chậm tốc độ tải trang thực tế.

Sự ra đời của Gutenberg, page builder mặc định của WordPress, đã thay đổi cục diện. Để tối ưu trải nghiệm quản trị cho khách hàng, Perxel chuyển sang dùng NectarBlocks trong các dự án custom theme. Bài viết này là đánh giá thực tế của Perxel sau quá trình sử dụng, không phải bài giới thiệu tính năng lấy từ trang chủ nhà phát triển.

Một layer bổ sung, không phải một hệ thống riêng

NectarBlocks không phải một page builder độc lập làm thay đổi bản chất hệ thống. Công cụ này hoạt động như một layer bổ sung, mở rộng tính năng trực tiếp trên nền Gutenberg core. Điều này mang lại sự đảm bảo kỹ thuật lớn: người quản lý website vẫn dùng song song các block mặc định của Gutenberg, không lo website bị khóa chặt vào một page builder lạ hay gặp lỗi khi WordPress cập nhật phiên bản mới.

Giao diện biên tập trong thực tế

Mục đích cốt lõi của NectarBlocks là cho phép dựng bố cục và kiểm soát các thuộc tính hiển thị ngay trong giao diện quản trị của WordPress. Thay vì giới hạn ở các khối nội dung đơn giản, công cụ này can thiệp sâu vào các thuộc tính CSS ngay trong khu vực soạn thảo: chia dòng, chia cột, responsive theo từng thiết bị, hiệu ứng hover, và animation.

Giao diện biên tập NectarBlocks ngay trong WordPress admin: cây cấu trúc layer bên trái, canvas xem trực tiếp ở giữa, panel cấu hình style và spacing bên phải.

Có thể hình dung công cụ này hoạt động tương tự Webflow ngay trên nền tảng WordPress. Người quản lý website can thiệp chi tiết vào khoảng cách (margin, padding), căn lề (flexbox, grid) và hiệu ứng trực tiếp trong khu vực soạn thảo, mà vẫn giữ được sự gọn nhẹ của mã nguồn hệ thống.

Từ block có sẵn đến code riêng cho từng dự án

Ngoài row, column, text và image, NectarBlocks còn cung cấp một bộ block khá đầy đủ: Post Grid để hiển thị danh sách bài viết, Carousel và Marquee cho nội dung trượt ngang, Accordion, Testimonial, Icon, Video Lightbox, và một bộ block riêng cho WooCommerce. Công cụ cũng hỗ trợ animation khi cuộn trang, global styles để đồng bộ màu sắc và font chữ toàn site, và kết nối dữ liệu động qua Advanced Custom Fields (ACF).

Trong các dự án custom theme của Perxel, phần lớn các block này không được dùng trực tiếp. Việc phát triển một custom theme đúng nghĩa đòi hỏi lập trình viên viết mã nguồn tùy biến hoàn toàn dựa trên bản vẽ Figma để đảm bảo tính độc bản cho thương hiệu, nên Perxel không dùng các bản thiết kế dựng sẵn của NectarBlocks.

Perxel chỉ dùng nhóm block layout cơ bản (hàng, cột, văn bản, hình ảnh) để định hình khung xương trang trong admin. Mọi phần đặc thù theo thiết kế, animation, testimonial hay giao diện sản phẩm, đều được lập trình riêng bằng code để hiển thị chính xác so với bản vẽ gốc, thay vì dùng bản dựng sẵn của page builder.

Kiểm soát SEO ngay trong block hình ảnh

Một chi tiết nhỏ nhưng đáng giá của NectarBlocks nằm ở block hình ảnh. Alt text, tỷ lệ ảnh và thuộc tính liên kết (rel, target mở tab mới) đều xuất hiện ngay trong panel cấu hình, thay vì phải mở phần cài đặt riêng hoặc dễ bị bỏ qua vì không thấy field nhập liệu.

Panel cấu hình block hình ảnh: Alt Text, Resolution, Image Ratio và thuộc tính liên kết đều nằm sẵn trong khu vực chỉnh sửa.

Alt text là một trong những yếu tố SEO cơ bản nhưng thường bị bỏ sót nhất khi người quản lý website tự đăng bài. Đặt trường này ngay cạnh ảnh, thay vì ẩn trong một tab riêng, giúp tăng khả năng người biên tập thực sự điền vào.

Hiệu năng thực tế

Vì NectarBlocks hoạt động như một layer bổ sung trên Gutenberg core thay vì một hệ thống riêng, mã nguồn sinh ra khá gọn nhẹ. Ảnh chụp PageSpeed Insights dưới đây đo trên chính trang chủ nectarblocks.com, không phải một website do Perxel bàn giao, nhưng cho thấy phần lõi công nghệ mà công cụ này dựa vào không kéo theo gánh nặng hiệu năng đáng kể.

PageSpeed Insights đo trên trang chủ nectarblocks.com.

Điểm số PageSpeed thực tế trên từng dự án còn phụ thuộc vào nội dung, hình ảnh và gói hosting mà khách hàng sử dụng sau khi bàn giao, nên đây chỉ là bằng chứng minh họa cho phần lõi công nghệ, không phải điểm số cho mọi website Perxel bàn giao.

Mô hình bản quyền và tính liên tục vận hành

NectarBlocks là page builder trả phí theo gói năm hoặc trọn đời, không miễn phí như Gutenberg gốc. Trong các dự án Perxel triển khai, chi phí bản quyền đã được bao gồm trong chi phí lập trình ban đầu, khách hàng không cần tự chi trả hay gia hạn định kỳ.

Cơ chế bản quyền của NectarBlocks cũng đảm bảo tính liên tục vận hành lâu dài:

• Tính năng thiết kế vẫn hoạt động bình thường. Kể cả khi hết hạn bản quyền, người quản lý website vẫn chỉnh sửa văn bản, hình ảnh, thay đổi layout hoặc tạo thêm trang mới dựa trên hệ thống block hiện có mà không bị giới hạn.
• Giới hạn khi hết hạn bản quyền. Hệ thống ngừng nhận bản cập nhật tự động mới nhất và không truy cập được thư viện template đám mây của nhà phát triển.

Với các dự án do Perxel bàn giao, giới hạn này gần như không ảnh hưởng đến vận hành, vì toàn bộ giao diện đã được viết code riêng theo thiết kế Figma độc bản, không phụ thuộc vào thư viện template mẫu.

Trải nghiệm biên tập cho người quản lý website

• Nhập liệu trực quan. Người quản lý website dễ dàng thay đổi văn bản, cập nhật hình ảnh hay thêm nội dung mới trực tiếp trên giao diện trực quan mà không cần biết code.
• Bảo toàn cấu trúc giao diện. Toàn bộ logic hiển thị và phong cách thiết kế đặc thù đã được Perxel lập trình chi tiết trong mã nguồn custom của theme, nên việc cập nhật nội dung hàng ngày không vô tình làm hỏng cấu trúc hiển thị chung.

Kết luận

NectarBlocks là công cụ hiệu quả để mở rộng năng lực của Gutenberg mặc định mà không đánh đổi sự gọn nhẹ và hiệu năng tải trang của WordPress core. Với Perxel, phần lớn giá trị nằm ở khung layout cơ bản và trải nghiệm biên tập cho khách hàng, còn mọi chi tiết thiết kế thực tế vẫn do lập trình viên viết riêng để bám sát ý tưởng gốc từ Figma.

Footnotes

1. NectarBlocks
2. NectarBlocks: Meet NectarBlocks
3. WordPress: Block editor (Gutenberg)