Block theme và classic theme là hai paradigm xây dựng theme WordPress khác hẳn nhau về kiến trúc — block dùng HTML template kèm theme.json và Site Editor, classic dùng PHP template kèm Customizer. Bài này so sánh 8 khía cạnh quan trọng, benchmark performance thực tế, và đưa recommendation cụ thể cho 5 use case shop WordPress VN 2026.
Hai paradigm WordPress đang cùng tồn tại 2026
WordPress 5.9 ra Full Site Editing vào tháng 1/2022, mở đầu kỷ nguyên block theme dùng HTML thay PHP template. Classic theme tồn tại từ 2003 với template engine PHP, dùng hierarchy file đặt tên theo quy ước WordPress core duyệt qua mỗi request.
Hai paradigm coexist song song năm 2026 vì mỗi cái có thế mạnh riêng. Block theme thắng về performance và UX cho client tự sửa, classic theme thắng về độ chín muồi của hệ sinh thái plugin và quyền kiểm soát code tới byte cuối cùng.
Block theme — paradigm FSE 2022 trở đi
Theme có cấu trúc dựa trên file HTML template trong folder templates và parts. Design system khai báo qua theme.json declarative, user edit toàn site qua Site Editor visual không cần touch code.
- Template format HTML: file .html chứa block markup, không có logic PHP — đọc bằng mắt dễ hơn template PHP nhiều condition.
- Design system declarative: theme.json khai báo color, font, spacing — Site Editor sinh UI picker tự động cho user chọn.
- Style cascade 4 tầng: theme.json → block.json → user override Site Editor → style.css custom — predictable hơn hook chain classic.
Classic theme — paradigm PHP từ 2003
Theme dùng file PHP đặt tên theo template hierarchy (header.php, single.php, archive.php). Customization qua Customizer cho theme option, widget area cho dynamic content, hook + filter chain cho mọi thay đổi logic.
- Template format PHP: file .php có thể nhúng logic, query custom, conditional render — flexibility cao nhưng cũng khó audit khi project lớn.
- Design system imperative: functions.php gọi add_theme_support, register_nav_menu — code-driven, không expose UI cho user.
- Hook chain phức tạp: action + filter có thể chèn 10-15 lớp transform — debug khó khi không biết hook nào chạy trước.
Bảng so sánh 8 khía cạnh chính
Tám khía cạnh được chọn vì ảnh hưởng trực tiếp đến quyết định chọn paradigm cho dự án mới. Bảng dưới so sánh side-by-side để dễ scan, sau đó các section sau phân tích sâu từng nhóm khía cạnh.
| Khía cạnh | Block theme | Classic theme |
|---|---|---|
| Template format | HTML (.html) | PHP (.php) |
| Design system config | theme.json declarative | functions.php imperative |
| User edit toàn site | Site Editor visual | Customizer + widget area |
| Learning curve dev | Trung bình (block markup + JSON) | Cao (PHP + WP API) |
| Performance mặc định | Tốt (CSS variable, lazy block) | Tuỳ theme (premium thường cồng kềnh) |
| Hệ sinh thái plugin 2026 | Đang trưởng thành (90% plugin support) | Mature (mọi plugin support) |
| WooCommerce support | Có (WC 8.3+) | Có (mọi version) |
| Customization power | Cao (qua UI) | Cao (qua code) |
Khía cạnh quan trọng nhất theo loại dự án
- Dự án client tự quản: User edit toàn site là khía cạnh quan trọng nhất — Site Editor visual thắng tuyệt đối Customizer cũ.
- Dự án dev maintain dài hạn: Learning curve và customization power qua code quyết định — classic theme vẫn có chỗ đứng cho team PHP-heavy.
- Dự án performance-first: Performance mặc định + CSS bundle size là yếu tố then chốt — block theme thắng ngay từ default config.
Benchmark performance — số liệu cụ thể
Performance là khía cạnh dễ đo bằng số liệu Lighthouse và bundle analyzer. Bảng dưới so sánh 3 nhóm theme phổ biến trên cùng setup hosting và content tương đương.
| Metric | Block theme | Classic theme premium | Classic theme custom |
|---|---|---|---|
| CSS bundle | 30-80KB | 200-500KB | 50-100KB |
| JS bundle | 10-30KB | 200-300KB | 30-50KB |
| Lighthouse mobile | 85-95 | 50-75 | 80-92 |
| LCP target | <1,5s | 2,5-4s | <2s |
| Time to build | 40-80 giờ | 0 giờ (mua sẵn) | 80-150 giờ |
Vì sao block theme nhanh hơn classic premium
Block theme load CSS theo block xuất hiện trên page — page không có block carousel thì không load CSS carousel. Classic theme premium ngược lại bundle toàn bộ CSS cho mọi feature từ slider tới popup tới mega menu vào 1 file để dùng được mọi nơi.
- Lazy CSS per block: WordPress 5.8 trở lên enqueue CSS theo block render — giảm payload CSS so với bundle full.
- CSS variable thay class lớn: theme.json sinh variable thay vì class .has-primary-bg với 20 declaration — markup gọn, render nhanh.
- Không jQuery dependency: block theme dùng vanilla JS hoặc React — không kéo theo 80KB jQuery như nhiều theme premium 2018-2022.
Khi classic theme custom có thể nhanh hơn block
Classic theme custom code tay bởi dev senior vẫn có thể đạt LCP dưới 1 giây — nhanh hơn block theme average. Lợi thế đến từ quyền kiểm soát mọi byte HTML/CSS/JS xuất ra và không bị overhead của block markup wrapper.
- Markup minimal: dev tự viết HTML semantic không có div wrapper thừa của block — giảm size HTML render.
- Critical CSS inline: dev inline 5-10KB critical CSS vào head, defer rest — LCP first paint nhanh hơn block theme default.
- Không layer wrapper Gutenberg: block luôn có wp-block-* class kèm wrapper — classic theme custom bỏ được lớp này.
Hệ sinh thái 2026 — plugin và WooCommerce compatibility
Hệ sinh thái là khía cạnh thay đổi nhanh từng quý — số liệu trong bài tính tới đầu 2026. Plugin top 100 WordPress đã support block theme khoảng 90%, nhóm 10% còn lại chủ yếu là plugin legacy chưa update từ 2022.
Plugin nhóm đã hỗ trợ block theme đầy đủ
- SEO plugin: Yoast, Rank Math, SEOPress đều có block riêng cho FAQ, HowTo, breadcrumb tích hợp Site Editor.
- Form plugin: Gravity Forms, Fluent Forms, WPForms đã ra block riêng — drag drop vào page editor.
- Page builder: Elementor, Beaver Builder vẫn chạy được trên block theme nhưng giảm dần thị phần — user mới chọn Site Editor trực tiếp.
- Cache plugin: WP Rocket, LiteSpeed Cache, W3 Total Cache đã optimize cho block theme — cache HTML render block tốt.
WooCommerce — câu chuyện riêng
WooCommerce 8.3 phát hành tháng 12/2023 đánh dấu cột mốc support block theme đầy đủ. Trước đó WC dùng template PHP riêng (woocommerce.php, single-product.php) không tương thích với Site Editor.
- WC 8.3+ block-based template: single-product.html, archive-product.html, cart.html, checkout.html đều dùng được trong Site Editor.
- WC block legacy: Featured Product, Product Categories block đã có từ WC 3.0 — dùng được trong block editor mọi theme.
- Extension chưa đầy đủ: WC Subscriptions, WC Bookings còn dùng template PHP riêng — phải kết hợp hybrid khi dùng extension này.
Recommendation cho 5 use case shop WordPress VN
Recommendation cụ thể theo quy mô đơn hàng và mức độ tuỳ biến cần thiết. Mỗi use case có ngữ cảnh kinh doanh khác nên lựa chọn theme khác — không có công thức “block theme cho mọi shop”.
| Use case | Khuyến nghị | Lý do chính |
|---|---|---|
| Shop nhỏ dưới 100 đơn/ngày, content-heavy | Block theme miễn phí (Twenty Twenty-Four) | Setup nhanh, performance tốt, dễ user edit |
| Shop 100-1000 đơn/ngày custom design | Block theme tự build | Brand identity riêng, performance tier 1 |
| Shop trên 1000 đơn/ngày enterprise | Hybrid block theme + custom plugin | Scale tốt, flexibility cao cho dev team |
| Landing page đơn giản dưới 5 trang | Classic theme premium nhẹ (Astra free) | Setup 2-4 giờ, ROI tức thời |
| Danh mục dự án hoặc blog cá nhân | Block theme miễn phí | Site Editor cho phép tự sửa không cần dev |
Khi nào dứt khoát chọn block theme
- Dự án mới 2026: không có legacy code, không cộng đồng dev classic ép buộc — chọn block theme là default đúng cho mọi shop quy mô vừa và nhỏ.
- Client muốn tự sửa layout: Site Editor giảm ticket “đổi banner cho anh” — block theme là lựa chọn duy nhất hợp lý.
- Yêu cầu Lighthouse trên 90: block theme đạt 85-95 mặc định, classic theme cần tinh chỉnh 40-80 giờ mới đạt mức tương đương.
Khi nào nên giữ classic theme
- Site legacy nhiều năm tuổi: đã đầu tư PHP template phức tạp với 50-100 file — migrate sang block tốn 100-200 giờ, ROI thấp nếu site đang chạy ổn.
- Dùng extension WooCommerce chưa block-ready: Subscriptions, Bookings, Memberships — đợi extension support full block rồi migrate.
- Dev team chỉ biết PHP: chuyển sang block đòi kiến thức React + JSON + Site Editor — đào tạo lại đội tốn 1-2 tháng, có thể không kinh tế.
Workflow migrate classic sang block theme
Migration không tự động — cần audit + re-implement design system + re-test toàn bộ page type. Pattern phổ biến cho site cần upgrade performance hoặc cho client tự quản nội dung.
5 bước migration chuẩn
| Bước | Action | Thời gian |
|---|---|---|
| 1 | Audit theme hiện tại (CSS/JS bundle, custom code, plugin dependency) | 4-8 giờ |
| 2 | Dev block theme mới trên staging, recreate design system qua theme.json | 40-80 giờ |
| 3 | Migrate content (post, product) — content giữ nguyên, layout cần re-set | 10-20 giờ |
| 4 | Test mọi page type: home, archive, single, single-product, cart, checkout | 8-16 giờ |
| 5 | Switch theme production giờ thấp điểm, monitor 24-48 giờ | 2-4 giờ |
3 rủi ro thường gặp khi migrate
Migration có vài rủi ro lặp lại qua nhiều dự án — biết trước để chuẩn bị mitigation. Backup database trước mọi thao tác switch là quy tắc không tranh cãi.
- Layout custom widget mất: widget area trong classic theme không map 1-1 sang Site Editor block — phải re-build template parts thủ công.
- Plugin shortcode break: shortcode plugin có thể hiện không đúng trong block markup — test từng shortcode trên staging trước switch live.
- SEO meta tag thay đổi: theme cũ có thể inject Open Graph custom — kiểm tra plugin SEO render đúng sau switch để tránh drop traffic.
Checklist 6 mục trước khi switch theme production
Switch theme production phải tuân theo checklist nghiêm ngặt — bỏ qua một bước có thể dẫn tới downtime hoặc mất data layout. Sáu mục dưới là chuẩn cho dự án migrate từ classic sang block.
- Backup full database và folder theme cũ: dùng UpdraftPlus hoặc mysqldump trước switch — rollback nhanh trong 15-30 phút nếu cần.
- Verify staging giống production: staging phải có same plugin version + content latest — test không có giá trị nếu staging cũ 1-2 tháng.
- Schedule switch giờ thấp điểm: chọn 2-5h sáng VN — tránh peak traffic, giảm thiệt hại nếu issue.
- Bật maintenance mode 30 phút: plugin WP Maintenance Mode hoặc .htaccess — chặn user trong lúc switch.
- Monitor 4 metric chính sau switch: thời gian hoạt động, error log, conversion rate, LCP — bằng UptimeRobot + GA4 + Search Console.
- Có sẵn rollback plan: document 5-7 bước rollback rõ ràng — team biết phải làm gì trong 5 phút nếu phát sinh critical issue.
Câu hỏi thường gặp
Switch từ classic sang block theme có mất content không?
Không mất. Post, page, product nằm trong database WordPress hoàn toàn độc lập với theme.
Switch theme nghĩa là render markup khác, content nguyên vẹn không bị động đến.
Layout custom (CSS riêng, widget area, sidebar) cần re-implement trong block theme vì cấu trúc không tương thích. Backup database và theme cũ trước khi switch là quy tắc bắt buộc — rollback nhanh nếu phát sinh issue.
Block theme có dùng PHP custom code được không?
Có hoàn toàn. functions.php hoạt động bình thường, hook + filter + action work giống classic theme. Block theme khác classic ở template format (HTML thay PHP) và design system (theme.json thay add_theme_support), không cấm PHP code.
Dev có thể viết PHP function trong functions.php để register custom block, enqueue script, hook vào filter — workflow giống hệt classic theme. Sự khác biệt chỉ ở phần template render và cách user edit qua Site Editor.
Plugin theme premium đã chuyển sang block chưa?
Đang chuyển dần. Astra và GeneratePress đã có version block theme từ 2023, support Site Editor đầy đủ.
Avada và Flatsome còn dùng builder riêng (Fusion Builder, UX Builder) chưa migrate hoàn toàn sang block. Theme premium thường conservative, đợi market trưởng thành trước khi commit migrate.
Tính tới đầu 2026 khoảng 60-70% theme premium phổ biến đã có block version hoặc hybrid mode. Phần còn lại vẫn giữ paradigm classic do user base lớn và không muốn rủi ro migrate.
Site Editor có dễ dùng cho user non-tech không?
Cần học. UI Block Editor đã quen với user soạn post và page từ WordPress 5.0 trở đi.
Site Editor mở rộng cho header, footer, template — khái niệm template parts và global styles cần thời gian làm quen. Learning curve khoảng 2-5 giờ cho user content-savvy biết WordPress cơ bản.
User mới hoàn toàn cần đào tạo 1-2 ngày để comfortable. Site Editor không thay được dev cho design system custom phức tạp — chỉ thay cho thao tác edit thông thường.
Theme custom build mất bao lâu — block vs classic?
Block theme custom mất 40-80 giờ cho shop quy mô vừa, classic theme custom mất 80-150 giờ cho cùng phạm vi. Block theme nhanh hơn nhờ theme.json gom design system một file và HTML template đọc dễ.
Classic theme bù lại bằng quyền kiểm soát chi tiết hơn ở từng template PHP. Phù hợp khi yêu cầu logic render phức tạp hoặc tích hợp legacy system cần PHP-level hook.
Cộng test responsive 3 breakpoint và tối ưu Lighthouse, tổng thời gian production cho shop WooCommerce rơi vào 120-180 giờ với block. Cùng phạm vi đó với classic theme rơi vào 180-250 giờ.
Tài nguyên và bước tiếp theo
Hiểu trade-off block vs classic chỉ là bước đầu — sau khi chốt paradigm cần đi sâu vào theme.json, template hierarchy và block tuỳ chỉnh để dựng theme hoàn chỉnh. Các bài liên quan trong cụm WordPress Development:
- theme.json 2026 — design system config cho block theme — schema v2, settings vs styles, cascade per block.
- Template hierarchy WordPress — 6 context và pattern override — quy tắc pick template áp dụng cho cả 2 paradigm.
- Custom block FSE — 5 bước build block React — khi pattern markup không đủ, cần block React riêng.
- Thiết kế block pattern — 5 bước cho shop — pattern là cầu nối user và block theme.
- Dịch vụ thiết kế website WordPress chuyên nghiệp — tham khảo gói thi công theme custom trọn gói.
Cần đội Web22 dev theme/plugin WordPress custom theo nhu cầu shop của bạn? Thi công WordPress theo yêu cầu — block theme 2026 — báo giá rõ ràng theo phạm vi, không phát sinh sau khi ký hợp đồng.
