# ✅ Checklist: Build Content-Oriented Dynamic Layout cho WordPress B2B

> **Mục đích:** Đảm bảo layout WordPress B2B được xây dựng đúng chuẩn — linh hoạt, động, dễ quản lý nội dung mà không cần lập trình.

---

## 📋 Phần 1: Content Audit

> *Kiểm tra và lập bản đồ toàn bộ nội dung trước khi build bất kỳ thứ gì.*

- [ ] **1.1 Liệt kê tất cả Content Types cần thiết**
  - Xác định rõ: Post, Page, hay cần Custom Post Type (CPT) riêng?
  - *Ví dụ B2B thường gặp: Products, Case Studies, Team Members, Partners, Testimonials*

- [ ] **1.2 Kiểm tra Custom Fields đã đủ cho từng Content Type chưa**
  - Dùng ACF, Pods hoặc Meta Box để định nghĩa fields
  - *Ghi chú: Mỗi CPT cần ít nhất 1 field group riêng — tránh dùng chung gây rối loạn dữ liệu*

- [ ] **1.3 Xác định Taxonomy (phân loại) cho từng Content Type**
  - Phân biệt rõ: dùng Category (có hierarchy) hay Tag (phẳng)?
  - *Ví dụ: Product Category, Industry Segment, Service Region*

- [ ] **1.4 Kiểm tra mối quan hệ giữa các Content Types**
  - Có CPT nào cần liên kết với CPT khác không? (Relationship field)
  - *Ví dụ: Case Study → liên kết tới Product và Client*

- [ ] **1.5 Kiểm tra content mẫu (sample content) đã nhập đủ chưa**
  - Mỗi Content Type cần tối thiểu **3–5 entries thực tế** để test layout
  - *Ghi chú: Dùng nội dung thật, không dùng Lorem Ipsum — B2B layout rất nhạy cảm với độ dài text*

---

## 🎨 Phần 2: theme.json Setup

> *Thiết lập "luật" thiết kế toàn cục — làm một lần, áp dụng cho toàn bộ site.*

- [ ] **2.1 Cấu hình Typography System**
  - Định nghĩa font families, font sizes (fluid typography khuyến khích)
  - *Ví dụ cấu trúc cần có:*
    ```json
    "typography": {
      "fontFamilies": [...],
      "fontSizes": [
        { "slug": "small", "size": "clamp(0.875rem, 1vw, 1rem)" },
        { "slug": "body", "size": "clamp(1rem, 1.5vw, 1.125rem)" },
        { "slug": "heading-lg", "size": "clamp(1.75rem, 3vw, 2.5rem)" }
      ]
    }
    ```
  - *Ghi chú: Dùng `clamp()` để responsive tự động — giảm công override ở breakpoint*

- [ ] **2.2 Cấu hình Color Palette & Gradients**
  - Định nghĩa color tokens theo vai trò, không theo màu sắc
  - *Cấu trúc nên theo:*
    ```
    primary, secondary, accent
    background, surface, border
    text-primary, text-muted, text-inverse
    success, warning, danger (cho B2B dashboard/status)
    ```
  - *Ghi chú: Đặt tên theo vai trò (ví dụ: `brand-primary`) thay vì màu (`blue-500`) — dễ rebrand sau này*

- [ ] **2.3 Cấu hình Spacing Scale**
  - Thiết lập spacing presets nhất quán (padding, margin, gap)
  - *Ví dụ:*
    ```json
    "spacing": {
      "spacingSizes": [
        { "slug": "xs", "size": "0.5rem" },
        { "slug": "sm", "size": "1rem" },
        { "slug": "md", "size": "1.5rem" },
        { "slug": "lg", "size": "2.5rem" },
        { "slug": "xl", "size": "4rem" }
      ]
    }
    ```

- [ ] **2.4 Cấu hình Layout Constraints & Block Defaults**
  - Đặt `contentSize`, `wideSize` cho toàn site
  - Thiết lập `appearanceTools: true` để mở khóa border, shadow controls
  - Cấu hình block-level defaults để giảm override lặp lại
  - *Ghi chú: Set `"layout": { "contentSize": "780px", "wideSize": "1200px" }` — B2B thường cần wide layout cho data-heavy sections*

---

## 🧩 Phần 3: Block Patterns

> *Tạo các "khuôn" layout có thể tái sử dụng — biên tập viên chỉ cần điền nội dung.*

- [ ] **3.1 Tạo Pattern cho từng Section chính**
  - Mỗi section quan trọng cần 1 pattern riêng
  - *Danh sách pattern cần thiết cho B2B:*
    - Hero Section (with CTA + stats)
    - Feature/Service Grid (3–4 columns)
    - Case Study Highlight Card
    - Testimonial / Social Proof Row
    - CTA Banner (full-width)
    - Pricing Table Row
    - Team Member Card Grid
    - Partner/Client Logo Strip

- [ ] **3.2 Đăng ký Patterns đúng cách và phân Category rõ ràng**
  - Dùng `register_block_pattern()` và `register_block_pattern_category()`
  - *Ví dụ cấu trúc:*
    ```php
    register_block_pattern_category('b2b-sections', [
      'label' => __('B2B Sections', 'your-theme')
    ]);

    register_block_pattern('your-theme/hero-with-stats', [
      'title'      => 'Hero with Stats',
      'categories' => ['b2b-sections'],
      'content'    => '<!-- wp:group -->...'
    ]);
    ```
  - *Ghi chú: Nhóm pattern theo chức năng (Sections, Cards, Forms) — biên tập viên tìm nhanh hơn*

- [ ] **3.3 Kiểm tra Patterns hiển thị đúng trên tất cả breakpoints**
  - Test ở 3 mức: Desktop (1280px+), Tablet (768px), Mobile (375px)
  - Kiểm tra text không bị tràn, hình không bị crop sai
  - *Ghi chú: B2B users thường đọc trên desktop — nhưng mobile vẫn cần pass — ưu tiên theo analytics thực tế*

- [ ] **3.4 Chuyển đổi Patterns thường dùng thành Synced Patterns (Reusable Blocks)**
  - Các patterns cần cập nhật đồng loạt (header CTA, footer disclaimer, contact banner) → lưu là **Synced Pattern**
  - Các patterns chỉ dùng làm template khởi điểm → giữ là **Non-synced Pattern**
  - *Ghi chú: Giải thích rõ cho content team sự khác biệt này — sửa Synced Pattern sẽ ảnh hưởng toàn bộ trang đang dùng nó*

---

## ⚙️ Phần 4: Dynamic Blocks

> *Cấu hình các block tự động lấy và hiển thị nội dung — không hardcode.*

- [ ] **4.1 Cấu hình Query Loop Block cho từng CPT**
  - Thiết lập đúng: Post Type, Posts Per Page, Order By, Offset
  - Tạo layout template (List / Grid) phù hợp với từng CPT
  - *Ví dụ cần cấu hình cho B2B:*
    - Case Studies → Grid 3 cột, sort by date, filter by Industry
    - Team Members → Grid 4 cột, sort by menu_order
    - Testimonials → Carousel hoặc Masonry layout

- [ ] **4.2 Cấu hình Block Bindings / Dynamic Tags cho Custom Fields**
  - Kết nối các block (Heading, Paragraph, Image, Button) với custom field tương ứng
  - *Dùng Block Bindings API (WordPress 6.5+) hoặc plugin như:*
    - ACF Blocks (nếu dùng ACF)
    - Kadence Dynamic Content
    - GenerateBlocks Pro
  - *Ghi chú: Kiểm tra kỹ fallback value — nếu field trống, block không được hiển thị "undefined" hay bỏ trắng khó hiểu*

- [ ] **4.3 Thiết lập Conditional Display (hiển thị có điều kiện)**
  - Block/Section chỉ hiển thị khi thỏa điều kiện (user role, field value, page type, post status)
  - *Ví dụ B2B thường gặp:*
    - "Download Brochure" button → chỉ hiện với logged-in users
    - Price section → chỉ hiện nếu field "show_pricing" = true
    - "Partner Portal" CTA → chỉ hiện với user role = partner
  - *Ghi chú: Dùng plugin như Visibility Logic for Gutenberg hoặc code với `render_callback` cho CPT-specific blocks*

- [ ] **4.4 Cấu hình Dynamic Featured Image và Media Fields**
  - Đảm bảo block Image/Cover trong Query Loop lấy đúng featured image của từng post
  - Nếu CPT có image gallery field → cấu hình hiển thị thumbnail đầu tiên làm fallback
  - *Ghi chú: Đặt ảnh placeholder mặc định — B2B content thường thiếu ảnh ở giai đoạn đầu*

- [ ] **4.5 Cấu hình Filter và Pagination cho Query Loop**
  - Thêm Filter by Taxonomy (cho user tự lọc nội dung)
  - Chọn kiểu phân trang: Classic Pagination vs. Load More vs. Infinite Scroll
  - *Ghi chú: B2B users cần filter mạnh (filter by industry, solution type, company size) — cân nhắc dùng FacetWP hoặc Filter Everything plugin nếu filter phức tạp*

---

## 🧪 Phần 5: Editor Testing

> *Test không phải với developer — test với người thực sự sẽ dùng editor hàng ngày.*

- [ ] **5.1 Test toàn bộ luồng tạo nội dung với Non-Developer User**
  - Mời 1 người từ content/marketing team thực hiện thao tác:
    - Tạo mới 1 Case Study entry từ đầu
    - Điền tất cả custom fields
    - Publish và kiểm tra front-end
  - Ghi lại tất cả chỗ họ bị lúng túng, không biết làm gì tiếp theo
  - *Ghi chú: Quan sát — không giải thích hay gợi ý trong lúc test. Đây là UX audit thật sự*

- [ ] **5.2 Kiểm tra Block Patterns có dễ tìm và dễ dùng không**
  - User có tự tìm thấy Pattern Library không?
  - Tên và description của từng pattern có đủ rõ không?
  - Preview thumbnail có hiển thị đúng không?
  - *Ghi chú: Nếu user cần hỏi "pattern này để làm gì" → tên/description cần viết lại*

- [ ] **5.3 Kiểm tra Dynamic Content hiển thị đúng sau khi nhập liệu**
  - Sau khi điền custom fields và save → front-end hiển thị đúng không?
  - Kiểm tra các trường hợp edge case:
    - Field bỏ trống
    - Text quá dài (>200 ký tự cho title)
    - Ảnh không đúng tỉ lệ khuyến nghị
    - Taxonomy chưa được gán
  - *Ghi chú: Edge cases thường bị bỏ qua nhưng là thứ content team gặp nhiều nhất trong thực tế*

- [ ] **5.4 Kiểm tra Editor Performance và UX tổng thể**
  - Thời gian load editor khi mở trang phức tạp (nhiều blocks) < 3 giây
  - Không có block nào báo lỗi "This block contains unexpected content"
  - Toolbar và sidebar không bị overlap hay ẩn control quan trọng
  - Thao tác Undo/Redo hoạt động đúng
  - *Ghi chú: Editor chậm hoặc lỗi UI sẽ làm content team mất tin tưởng vào toàn bộ hệ thống — fix trước khi bàn giao*

---

## 📌 Tổng Kết & Bàn Giao

| Phần | Tổng items | Ghi chú |
|------|-----------|---------|
| 1. Content Audit | 5 items | Phải xong **trước** khi làm bất kỳ phần nào khác |
| 2. theme.json | 4 items | Làm một lần, ảnh hưởng toàn bộ site |
| 3. Block Patterns | 4 items | Xây xong trước khi training content team |
| 4. Dynamic Blocks | 5 items | Cần developer review kỹ nhất |
| 5. Editor Testing | 4 items | Bắt buộc test với người dùng thực |
| **Tổng** | **22 items** | |

---

> 💡 **Lưu ý khi bàn giao:** Sau khi hoàn thành checklist, chuẩn bị thêm **1 tài liệu Content Guide ngắn** (1–2 trang) cho content team — gồm: cách tạo từng CPT, quy tắc đặt tên file, kích thước ảnh chuẩn cho từng section. Đây là thứ sẽ cứu bạn khỏi 90% support ticket sau này.