Thiết kế block pattern — 5 bước cho shop WordPress

Block pattern là markup tái sử dụng — user paste 1 click từ Block Inserter vào page, sau đó tự edit text, image, color theo nội dung cụ thể. Bài này hướng dẫn 5 bước thiết kế block pattern 2026 cho shop WordPress: lập kế hoạch pattern library, viết file PHP với markup chuẩn, register category, test trong Block Inserter, và publish lên WordPress Pattern Directory.

Vì sao pattern là cầu nối Site Editor và client tự sửa

Site Editor cho client edit toàn site bằng UI visual — nhưng đối mặt với canvas trắng, khách không biết bắt đầu từ đâu. Pattern giải quyết bài toán này bằng cách cung cấp combination block đã configure sẵn — user pick từ tab Patterns, paste vào page là có ngay layout chuẩn.

Khác với reusable block (sync mọi nơi), pattern paste vào page sẽ thành block độc lập editable. Hai chế độ phù hợp use case khác nhau — pattern cho variation đa dạng, reusable block cho consistent fix cứng.

3 use case pattern phù hợp shop WordPress

• Hero variants nhiều design: 5-10 hero khác nhau (split image, full-bleed video, gradient, minimal text) — user pick theo trang.
• Section template phổ biến: Featured products grid, Testimonial slider, FAQ accordion — markup chuẩn đẹp sẵn.
• CTA block xoay vòng: Newsletter signup, contact form, demo request, download app — đổi CTA theo campaign mà không sửa code.

Khi nào KHÔNG nên đầu tư pattern library

Pattern library tốn thời gian thiết kế và maintain — chỉ ROI khi site có nhiều page hoặc nhiều người edit content. Ba bối cảnh dưới không cần đầu tư pattern, dùng core block trực tiếp đủ.

• Site 1-3 page tĩnh: landing page đơn lẻ — dev build trực tiếp trong template, không cần pattern để user reuse.
• Chỉ dev edit content: nếu client không bao giờ tự sửa, pattern không có giá trị — markup HTML trong template đủ.
• Ngân sách dưới 8 giờ thiết kế: pattern library production-ready cần 16-40 giờ — dự án nhỏ không bù lại được.

Bước 1 — Lập kế hoạch pattern library theo use case shop

Trước khi viết code, plan pattern set dựa trên page type shop sẽ có. Pattern thừa làm user khó pick từ list dài, pattern thiếu khiến user phải build manual mất công.

Pattern set chuẩn cho shop WordPress trung bình

Quy tắc đặt tên slug pattern

Slug pattern dùng làm ID nội bộ — phải unique trong toàn site và tuân theo convention namespace để tránh xung đột với pattern từ plugin khác. Format chuẩn là {theme-slug}/{pattern-name}.

• Namespace theme: bắt đầu bằng slug theme (vd web22-shop/) — tránh trùng pattern WordPress core hoặc plugin.
• Tên ngắn gọn descriptive: hero-split, cta-newsletter, footer-minimal — đọc qua biết ngay pattern gì.
• Không Việt hoá slug: giữ slug tiếng Anh để tránh issue encoding URL — Việt hoá chỉ phần title hiển thị cho user.

Pattern phân tầng theo độ phức tạp

Phân tầng pattern theo độ phức tạp giúp user mới chọn được pattern đơn giản trước, user thành thạo chọn pattern phức tạp. Đặt thứ tự display trong category để pattern đơn giản hiện trước.

• Pattern đơn giản: 1-3 block core (heading + paragraph + button) — user mới dễ customize.
• Pattern trung bình: 4-8 block với column layout — user có kinh nghiệm 1-2 tháng.
• Pattern phức tạp: 10+ block với nested column và group — user advanced hoặc dev tham khảo.

Bước 2 — Viết file PHP pattern với markup chuẩn

Pattern file là PHP với header comment chứa metadata, theo sau là markup block dạng comment Gutenberg. WordPress 6+ auto register mọi file PHP trong folder /patterns/ của theme — không cần đăng ký thủ công trong functions.php.

patterns/hero-split.php — pattern hero split image

<?php
/**
 * Title: Hero Split Image
 * Slug: web22-shop/hero-split
 * Categories: featured, hero
 * Description: Hero với image bên trái, text + CTA bên phải
 * Keywords: hero, landing, cta
 * Block Types: core/group
 * Viewport Width: 1280
 */
?>
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:columns {"verticalAlignment":"center"} -->
  <div class="wp-block-columns are-vertically-aligned-center">
    <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
    <div class="wp-block-column" style="flex-basis:50%">
      <!-- wp:image {"sizeSlug":"large"} -->
      <figure class="wp-block-image size-large">
        <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/hero-split.webp'); ?>"
             alt="<?php esc_attr_e('Hero image', 'web22-shop'); ?>"
             width="600" height="400"/>
      </figure>
      <!-- /wp:image -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
    <div class="wp-block-column" style="flex-basis:50%">
      <!-- wp:heading {"level":1,"fontSize":"x-large"} -->
      <h1><?php esc_html_e('Heading hero ấn tượng', 'web22-shop'); ?></h1>
      <!-- /wp:heading -->

      <!-- wp:paragraph -->
      <p><?php esc_html_e('Subheading mô tả giá trị chính', 'web22-shop'); ?></p>
      <!-- /wp:paragraph -->

      <!-- wp:buttons -->
      <div class="wp-block-buttons">
        <!-- wp:button {"backgroundColor":"primary"} -->
        <div class="wp-block-button">
          <a class="wp-block-button__link has-primary-background-color has-background">
            <?php esc_html_e('Mua ngay', 'web22-shop'); ?>
          </a>
        </div>
        <!-- /wp:button -->
      </div>
      <!-- /wp:buttons -->
    </div>
    <!-- /wp:column -->
  </div>
  <!-- /wp:columns -->
</div>
<!-- /wp:group -->

7 trường header comment quan trọng

Header comment đầu file PHP định nghĩa metadata pattern — WordPress parse các dòng này để hiển thị trong Block Inserter. Bảy trường dưới là chuẩn cho pattern production, một số trường tuỳ chọn nhưng nên dùng.

• Title: tên pattern hiển thị cho user — Việt hoá để client thấy dễ hiểu (vd “Hero phân cột”).
• Slug: ID nội bộ format namespace/name — bắt buộc unique trong toàn site.
• Categories: category để filter trong Block Inserter — có thể nhiều category cách nhau bằng dấu phẩy.
• Description: mô tả ngắn pattern dùng cho gì — hiện trong tooltip khi hover.
• Keywords: từ khoá để user search trong Inserter — vd “hero, landing, cta”.
• Block Types: báo WordPress pattern này nhúng được vào block nào — vd core/group hoặc core/post-content.
• Viewport Width: width preview render — chuẩn 1280 cho desktop, 375 cho pattern mobile-only.

Quy tắc viết markup pattern dễ customize

Pattern tốt là pattern user customize được mà không cần đụng vào markup. Cấu trúc đơn giản, dùng core block phổ biến, tránh inline style cứng — giúp user edit qua UI Site Editor thay vì code.

• Dùng core block phổ biến: wp:heading, wp:paragraph, wp:image, wp:button — user quen UI, customize dễ.
• Tránh inline style cứng: dùng class preset từ theme.json (has-primary-background-color) thay vì style=”background:#0066cc” — đồng bộ design system.
• Wrap text trong gettext: esc_html_e + textdomain cho text — pattern support đa ngôn ngữ qua plugin WPML/Polylang.

Bước 3 — Register category và auto-load pattern

WordPress auto load mọi file PHP trong folder /patterns/ của theme từ WP 6.0 — không cần code register_block_pattern thủ công. Pattern category custom thì cần register qua functions.php để filter Inserter hoạt động.

functions.php — register pattern category custom

add_action('init', function() {
  register_block_pattern_category('hero', [
    'label' => __('Hero', 'web22-shop'),
  ]);

  register_block_pattern_category('featured-product', [
    'label' => __('Sản phẩm nổi bật', 'web22-shop'),
  ]);

  register_block_pattern_category('cta', [
    'label' => __('CTA', 'web22-shop'),
  ]);
});

Manual register khi không dùng /patterns/ folder

add_action('init', function() {
  register_block_pattern('web22-shop/cta-newsletter', [
    'title'       => __('CTA Newsletter', 'web22-shop'),
    'description' => __('Email signup form', 'web22-shop'),
    'categories'  => ['cta'],
    'keywords'    => ['newsletter', 'email', 'signup'],
    'content'     => '<!-- wp:group -->...<!-- /wp:group -->',
  ]);
});

Khi nào dùng auto-load vs manual register

• Auto-load /patterns/ folder: phù hợp pattern theme — file PHP gọn, dễ maintain, version control rõ ràng.
• Manual register trong plugin: phù hợp plugin block — không có theme folder /patterns/, register qua hook init.
• Manual register pattern dynamic: khi markup pattern phụ thuộc setting site (vd brand color từ option) — generate content trong runtime.

Bước 4 — Test pattern trong Block Inserter

Test pattern trong môi trường editor thực tế — verify hiển thị đúng trong Inserter, render đúng sau khi insert, customize được mọi element. Bỏ qua bước này dễ ship pattern bị lỗi mà user không insert được.

Checklist test 8 bước

1. Save file PHP trong folder /patterns/ — WordPress auto detect không cần restart.
2. Mở admin WordPress → Pages → Add New page mới.
3. Click nút “+” mở Block Inserter, chuyển sang tab “Patterns”.
4. Dropdown category — chọn category pattern (Hero, Featured, CTA).
5. Hover lên pattern thumbnail — verify preview render đúng kích thước viewport.
6. Click pattern → verify insert vào page với markup hoàn chỉnh.
7. Customize text inline, đổi image upload, đổi color qua sidebar — verify mọi element editable.
8. Save draft → click Preview xem frontend → confirm markup render giống editor.

3 lỗi thường gặp khi test pattern

Pattern có vài pattern lỗi lặp lại — biết trước để debug nhanh. Ba lỗi dưới chiếm 60-70% case troubleshoot khi mới làm quen với block pattern.

• Pattern không xuất hiện trong Inserter: sai cú pháp header comment hoặc thiếu category — check tab Patterns + filter “All” để xem có pattern không.
• Block markup invalid: sai cú pháp wp:group hoặc thiếu closing comment — Gutenberg báo “block recovery” khi insert.
• Image URL hardcode bị broken: dùng path tuyệt đối thay vì get_template_directory_uri() — pattern break khi theme đổi folder.

Bước 5 — Publish lên WordPress Pattern Directory

WordPress Pattern Directory tại wordpress.org/patterns/ là public library — submit pattern để dev khác dùng và tăng visibility cho theme. Pattern approved hiện trong Block Inserter của mọi WordPress site có bật Pattern Directory integration.

Submit workflow

• Đăng ký account wordpress.org: dùng email cá nhân hoặc team — account này cũng dùng được cho plugin directory.
• Mở wordpress.org/patterns/new-pattern/: giao diện editor visual giống Block Editor.
• Paste markup pattern: copy block markup từ file PHP local, paste vào editor.
• Add metadata: title, description, category, keywords — phải có ít nhất 3 keyword.
• Preview pattern render: dùng preview viewport ở góc trên — verify mobile + tablet + desktop OK.
• Submit: bấm Submit → vào queue review của WordPress team — thời gian phê duyệt 1-7 ngày.
• Pattern approved: hiện trong Block Inserter mọi site WP — dev khác search được qua keyword.

Tiêu chí approve của Pattern Directory

WordPress team review pattern theo set tiêu chí khá strict — pattern reject vì design quality, accessibility, hoặc license. Biết tiêu chí trước giúp pass review lần đầu, tránh resubmit tốn 1-2 tuần chờ.

• Design quality: pattern phải có giá trị thẩm mỹ và usability — không paste markup tạp nham.
• Accessibility cơ bản: contrast color đủ AA, image có alt text, heading có hierarchy đúng — bắt buộc.
• License GPL compatible: mọi asset trong pattern (image, font) phải có license GPL hoặc compatible — dùng image stock free như Pexels, Unsplash.
• Không tracking script: markup không được nhúng analytics, ads, tracker — pattern phải pure HTML/CSS.

Câu hỏi thường gặp

Tài nguyên và bước tiếp theo

Pattern là cầu nối quan trọng giữa design system theme và client tự edit content — sau khi nắm 5 bước này, mở rộng sang custom block và theme.json để hoàn thiện hệ thống. Các bài liên quan trong cụm WordPress Development:

• Custom block FSE — 5 bước build block React — khi pattern không đủ cần custom block có state.
• theme.json 2026 — design system config cho block theme — pattern kế thừa token từ theme.json đồng bộ.
• Block theme vs Classic theme — so sánh 8 khía cạnh — pattern là feature riêng của block theme.
• Template hierarchy WordPress — 6 context và pattern override — pattern insert được vào mọi template trong hierarchy.
• 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? Dịch vụ dev theme/plugin WordPress custom tại Web22 — báo giá rõ ràng theo phạm vi, không phát sinh sau khi ký hợp đồng.