Một thông báo đã làm rung chuyển cộng đồng người dùng Flatsome: Flatsome 4 Alpha Playground đã chính thức ra mắt. Đây không chỉ là một bản cập nhật thông thường. Đây là một cuộc tái thiết toàn diện, một bước nhảy vọt mang tính chiến lược để đưa Flatsome từ vị thế “vua” của kỷ nguyên Page Builder sang vị thế dẫn đầu trong kỷ nguyên Block Editor và Full Site Editing (FSE) của WordPress.
Trải nghiệm Tương Lai Ngay Bây Giờ!
Khám Phá Flatsome 4 Playground
(Lưu ý: Sân chơi này sử dụng công nghệ WordPress Playground, nên tốc độ tải có thể chậm hơn so vớ cài đặt WordPress thực tế. Hãy kiên nhẫn!)
Trong vài tuần tới, sân chơi này sẽ là nơi để cộng đồng khám phá và thử nghiệm phiên bản 4 trực tiếp trên trình duyệt mà không cần bất kỳ cài đặt nào. Đây là cơ hội vô giá để chúng ta “chạm tay” vào tương lai, để hiểu cách Flatsome tích hợp với Flatsome Blocks và các khả năng Chỉnh sửa Toàn trang (FSE) mới.
Với mục tiêu phát hành Flatsome 4.0 vào đầu năm tới, chúng ta cần phân tích sâu hơn: Điều gì đang thực sự diễn ra? Tại sao Flatsome phải “đập đi xây lại”? Và điều này ảnh hưởng thế nào đến hàng triệu website đang sử dụng Flatsome 3 (phiên bản UX Builder hiện tại)?
Phân Tích Chuyên Sâu: Cuộc “Đại Phẫu” Bắt Buộc Của Flatsome
Để hiểu Flatsome 4, chúng ta phải nhìn lại sự thành công và cả những “xiềng xích” của Flatsome 3 (và các phiên bản trước đó).
1. Di Sản Của Flatsome 3: Thiên Tài UX Builder và “Món Nợ” Shortcode
Không thể phủ nhận, UX Builder là một kiệt tác. Nó nhanh, trực quan, “WYSIWYG” (What You See Is What You Get) gần như hoàn hảo. Nó cho phép hàng triệu người không biết code có thể xây dựng các trang web thương mại điện tử phức tạp.
Nhưng, “trái tim” của UX Builder được xây dựng trên một công nghệ đang dần lỗi thời: Shortcodes.
Mỗi phần tử bạn kéo-thả (Banner, Slider, Row, Column) về cơ bản là một shortcode phức tạp, ví dụ
1 | [ux_banner ...]. |
- Vấn đề của Shortcode:
- Khóa chặt người dùng (Vendor Lock-in): Nếu bạn tắt theme Flatsome, toàn bộ nội dung trang web của bạn sẽ biến thành một mớ hỗn độn các mã
[...]vô nghĩa. - Hiệu năng: WordPress phải “phân tích” (parse) từng shortcode này bằng PHP ở phía máy chủ để chuyển đổi chúng thành HTML. Với các trang phức tạp, quá trình này tiêu tốn tài nguyên và làm tăng Thời gian Phản hồi của Máy chủ (TTFB).
- Hệ sinh thái đóng (Walled Garden): UX Builder là một “khu vườn đóng”. Nó không “chơi” tốt với các trình tạo trang khác, và quan trọng hơn, nó không tương thích với trình soạn thảo cốt lõi mới của WordPress: Gutenberg (Block Editor).
- Khóa chặt người dùng (Vendor Lock-in): Nếu bạn tắt theme Flatsome, toàn bộ nội dung trang web của bạn sẽ biến thành một mớ hỗn độn các mã
2. Cơn Bão Gutenberg và Full Site Editing (FSE)
Kể từ WordPress 5.0, Gutenberg đã thay đổi cuộc chơi. WordPress đã chính thức tuyên bố rằng “tương lai là block”. Block là các thành phần nội dung gốc (native), được viết bằng HTML/CSS/JavaScript (React) hiện đại.
Full Site Editing (FSE) là bước tiến tiếp theo, cho phép người dùng chỉnh sửa *toàn bộ* trang web của họ—bao gồm cả Header, Footer, và các mẫu trang (templates)—chỉ bằng cách sử dụng block.
Flatsome đứng trước một ngã ba đường:
- Giữ nguyên UX Builder: Dần dần trở nên lỗi thời, lạc hậu so với xu hướng chung của WordPress, và mất đi người dùng mới.
- Tích hợp Gutenberg: Cố gắng “vá” Gutenberg vào UX Builder, tạo ra một mớ hỗn độn, không đồng nhất.
- Đập đi xây lại (The Big Rebuild): Chấp nhận block là tương lai, xây dựng lại toàn bộ theme và builder dựa trên nền tảng block.
Họ đã chọn phương án 3. Đó là một quyết định dũng cảm, tốn kém, nhưng là con đường duy nhất để đảm bảo tương lai (future-proof) cho Flatsome trong 10 năm tới.
Kiến Trúc Mới Của Flatsome 4: Ba Trụ Cột Cốt Lõi
Flatsome 4 được chia thành ba phần riêng biệt nhưng liên kết chặt chẽ. Đây là một kiến trúc hiện đại, tuân thủ các tiêu chuẩn mới nhất của WordPress.
1. Giao diện Flatsome (Flatsome Theme) & Sức mạnh của theme.json
Đây là sự thay đổi nền tảng lớn nhất về mặt kiến trúc.
- Flatsome 3 (Hiện tại): Tất cả các tùy chọn (màu sắc, phông chữ, khoảng cách) được lưu trong Bảng Tùy chọn (Theme Options) và cất trong cơ sở dữ liệu (database). Khi tải trang, PHP phải truy vấn các tùy chọn này và “in” (print) một khối CSS nội tuyến (inline CSS) khổng lồ vào phần
<head>của trang web. Đây là một điểm nghẽn về hiệu năng. - Flatsome 4 (Tương lai): Tất cả các cài đặt thiết kế toàn cục (global styling) được định nghĩa trong một tệp duy nhất:
theme.json. WordPress sẽ tự động đọc tệp này và chuyển đổi chúng thành các Biến CSS (CSS Variables), ví dụ--wp--preset--color--primary.
Tác động đến hiệu năng:
Đây là một cuộc cách mạng. Thay vì một khối CSS nội tuyến lớn, tệp theme.json tạo ra một hệ thống biến CSS gọn gàng, có thể được lưu trữ (cache) hiệu quả. Nó giảm thiểu đáng kể các truy vấn cơ sở dữ liệu và dung lượng CSS cần tải, giúp cải thiện trực tiếp chỉ số First Contentful Paint (FCP). Hơn nữa, nó đảm bảo tính nhất quán tuyệt đối trên toàn bộ trang web—từ block của Flatsome đến block của bên thứ ba.
Những gì bạn có thể thử ngay: Tùy chỉnh phông chữ, màu sắc… trực tiếp bên trong Flatsome Builder mới và thấy chúng được áp dụng toàn cục.
2. Trình tạo Flatsome (Flatsome Builder): Gutenberg Mang “Linh Hồn” UX Builder
Đây là sự thay thế trực tiếp cho UX Builder. Về mặt kỹ thuật, nó là một “Gutenberg fork”.
“Fork” nghĩa là đội ngũ Flatsome đã lấy mã nguồn mở của Gutenberg và tùy chỉnh lại giao diện người dùng (UI) để nó mang lại trải nghiệm quen thuộc như UX Builder (ví dụ: thanh công cụ bên trái, kéo-thả trực quan).
- So sánh với Flatsome 3 (UX Builder): Bạn bị giới hạn trong các phần tử (elements) mà Flatsome cung cấp. Bạn muốn thêm một block “Mục lục” (Table of Contents) xịn sò từ plugin bên thứ ba? Rất khó khăn.
- Flatsome 4 (Flatsome Builder): Bạn có toàn bộ sức mạnh của UX Builder (về mặt trải nghiệm) VÀ sự linh hoạt vô hạn của Gutenberg. Bạn có thể cài đặt bất kỳ plugin block nào (Kadence Blocks, Stackable, GenerateBlocks…) và sử dụng chúng *ngay bên trong* Flatsome Builder. Hệ sinh thái của bạn được mở rộng từ vài chục phần tử lên… hàng ngàn block.
Đây là chiến lược “tốt nhất của cả hai thế giới”: giữ lại trải nghiệm người dùng mà khách hàng cũ yêu thích, đồng thời mở cửa hoàn toàn với hệ sinh thái block hiện đại.
3. Các Block của Flatsome (Flatsome Blocks): Viết Lại Từ Đầu
Tất cả các “shortcode/element” cũ của Flatsome (Banner, Slider, Icon Box, Product Grid…) đã được viết lại hoàn toàn dưới dạng block gốc (native blocks).
Tác động đến hiệu năng (Đây là phần quan trọng nhất):
- Flatsome 3: Tải một (hoặc vài) tệp JavaScript và CSS *nguyên khối* (monolithic) rất lớn, chứa mã cho *tất cả* các phần tử, ngay cả khi bạn chỉ dùng một cái Banner. Điều này làm tăng chỉ số Total Blocking Time (TBT) và Largest Contentful Paint (LCP).
- Flatsome 4: Tận dụng kiến trúc của WordPress 6.x. Mỗi block (ví dụ:
flatsome/banner) tự định nghĩa các tệp JS và CSS riêng của nó. WordPress đủ thông minh để chỉ tải các tệp JS/CSS cho những block *thực sự có mặt* trên trang đó. Nếu trang của bạn không có Slider, mã JS của Slider sẽ không được tải.
Kết quả là dung lượng trang (page size) giảm đáng kể, số lượng request giảm, và trang web trở nên “nhẹ” và nhanh hơn rất nhiều. Các block mới cũng được xây dựng bằng CSS hiện đại (như Flexbox, Grid) và Interactivity API (API Tương tác) cốt lõi của WordPress, thay vì phụ thuộc vào các thư viện JS cũ.
Bạn có thể thử ngay: Các block mới như Header, Navigation, Mega Menu, Marquee, Popover… đã có sẵn trong Playground.
Chiến Lược Chuyển Đổi Thiên Tài: “Hybrid Mode” vs. “Block Mode”
Đây là câu trả lời cho câu hỏi lớn nhất: “Vậy website cũ của tôi thì sao?”. Đội ngũ Flatsome đã đưa ra một giải pháp “cai nghiện” shortcode cực kỳ thông minh.
1. Chế độ Lai (Flatsome Hybrid Mode)
Đây là gì? Chính là Flatsome 3 mà bạn đang sử dụng, nhưng được “bổ sung” thêm khả năng tương thích với Flatsome Builder và Flatsome Blocks.
Chiến lược: Đây là “cây cầu” an toàn cho các website hiện có. Bạn có thể tiếp tục sử dụng UX Builder như bình thường. Nhưng nếu muốn, bạn có thể cài đặt Flatsome Builder và bắt đầu “thay thế” dần dần.
Ví dụ: Bạn có thể giữ nguyên các trang sản phẩm được xây bằng UX Builder, nhưng quyết định xây dựng lại Header và Footer bằng block-based mới để tận dụng Mega Menu mới. Hoặc bạn tạo một Landing Page mới hoàn toàn bằng block.
Phân tích hiệu năng: Đây là chế độ “nặng” nhất, vì nó phải tải *cả* thư viện shortcode cũ của UX Builder VÀ kiến trúc block mới. Nhưng đây là sự đánh đổi cần thiết để đảm bảo quá trình chuyển đổi an toàn, không rủi ro cho hàng triệu trang web đang hoạt động.
→ Đây là lựa chọn BẮT BUỘC cho các trang web hiện có muốn nâng cấp.
2. Chế độ Block (Flatsome Block Mode) – MỚI
Đây là gì? Một phiên bản Flatsome “thuần khiết” (pure). Ở chế độ này, toàn bộ UX Builder cũ, hệ thống shortcode, và các tệp JS/CSS cũ sẽ bị vô hiệu hóa hoàn toàn.
Chiến lược: “All-in” vào block. Đây là tương lai.
Phân tích hiệu năng: Đây sẽ là phiên bản Flatsome nhanh nhất, nhẹ nhất từ trước đến nay. Không còn “rác” (bloat) của công nghệ cũ. Chỉ có theme.json và các block được tối ưu hóa. Hiệu suất của nó (về mặt lý thuyết) sẽ vượt xa Flatsome 3 và cạnh tranh sòng phẳng với các theme block-based tối giản hàng đầu như Kadence hay GeneratePress.
→ Đây là lựa chọn được khuyến nghị cho các trang web XÂY DỰNG MỚI.
Tác Động Tới Lập Trình Viên (Developers) và Tương Lai
Sự thay đổi này cũng tác động mạnh mẽ đến quy trình làm việc của các lập trình viên và các agency chuyên về Flatsome.
- Từ PHP Hooks/Shortcodes đến React/Blocks: Thay vì “hook” vào các hàm PHP của Flatsome hoặc tạo shortcode tùy chỉnh, quy trình chuẩn mới sẽ là tạo ra các custom block (sử dụng React/JSX). Đây là một bộ kỹ năng hoàn toàn mới mà các developer sẽ phải cập nhật.
- Dữ liệu động (Dynamic Data): Lộ trình (roadmap) đề cập đến “dynamic data & block binding”. Đây là tính năng “thay đổi cuộc chơi”. Nó cho phép bạn liên kết các thuộc tính của block (như nội dung văn bản, hình ảnh) trực tiếp với các trường dữ liệu tùy chỉnh (Custom Fields – ACF, MetaBox). Ví dụ: bạn có thể thiết kế một mẫu trang sản phẩm và “liên kết” một block
Headingvới trườngten_san_pham_customcủa bạn mà không cần một dòng code PHP nào. - Tương lai là WooCommerce Blocks: Lộ trình cũng đề cập đến “WooCommerce templates & blocks”. Đây là mục tiêu cuối cùng. Toàn bộ trải nghiệm WooCommerce—từ trang cửa hàng, trang chi tiết sản phẩm, đến trang giỏ hàng và thanh toán—sẽ được xây dựng bằng block. Điều này mang lại sự tùy biến chưa từng có, vượt xa những gì UX Builder có thể làm.
Kết Luận: Một Bước Đi Cần Thiết Để Tiếp Tục Dẫn Đầu
Flatsome 4, ngay cả ở giai đoạn Alpha, đã cho thấy một tầm nhìn rõ ràng: Từ bỏ sự thoải mái của “khu vườn đóng” để đón nhận tiêu chuẩn mở của tương lai.
Việc chuyển đổi sang kiến trúc block-based và theme.json không chỉ là một “tính năng mới”, đó là một sự “tái sinh” tập trung vào 3 trụ cột: Hiệu năng, Tính linh hoạt và Khả năng tương thích tương lai.
Dĩ nhiên, đây mới là bản Alpha. Sẽ còn rất nhiều lỗi và các tính năng còn thiếu. Nhưng đây là thời điểm vàng để cộng đồng tham gia, thử nghiệm và cung cấp phản hồi. Những gì bạn thấy CHƯA PHẢI LÀ CUỐI CÙNG, nhưng nó là nền móng cho 10 năm thành công tiếp theo của Flatsome.
Hãy Là Một Phần Của Tương Lai!
Đội ngũ phát triển đang rất cần phản hồi của bạn. Hãy truy cập Sân chơi, “phá phách” mọi thứ và cho họ biết trải nghiệm của bạn.
