WordPress 7.1 Beta 1 vừa ra mắt ngày 15/7/2026, mang theo một tính năng mà cộng đồng đã chờ đợi từ lâu: Interactive State Styling. Bạn có thể style hover, focus, active cho block trực tiếp trong editor, hoàn toàn không cần viết một dòng CSS nào.
\n\n
Trong bài này, mình sẽ hướng dẫn bạn từ A đến Z cách dùng tính năng này, từ cách kích hoạt, thao tác thực tế, cho đến những lưu ý quan trọng khi áp dụng lên production.
\n\n
WordPress 7.1 Interactive Styling là gì?
\n\n
Interactive State Styling là tính năng mới trong WordPress 7.1, cho phép bạn định dạng các trạng thái tương tác của block (như :hover, :focus, :active) trực tiếp trong Site Editor. Thay vì phải viết CSS custom như trước, bạn chỉ cần chọn block, mở panel Styling, chọn state cần tùy chỉnh và thay đổi màu sắc, background, spacing ngay trong giao diện. Tính năng này hỗ trợ cả Global Styles và từng block instance riêng biệt.
\n\n
Tại sao tính năng này lại quan trọng?
\n\n
Trước WordPress 7.1, nếu bạn muốn nút button đổi màu khi rê chuột vào, cách duy nhất là thêm Custom CSS hoặc cài plugin bên thứ ba. Điều này gây ra mấy vấn đề: CSS custom khó quản lý, không hiển thị preview trong editor, và dễ bị ghi đè khi update theme. Với Interactive Styling, mọi thứ đều visual, có preview real-time, và được lưu trong theme.json nên đồng bộ với toàn bộ design system của site.
\n\n
Cách cài đặt WordPress 7.1 Beta 1 để test
\n\n
Trước khi bắt đầu, bạn cần chuẩn bị môi trường test. Không cài Beta lên site production, hãy dùng staging site hoặc local environment.
\n\n
Có 3 cách để cài WordPress 7.1 Beta 1:
\n\n
Cách 1 – WP-CLI (khuyến nghị):
\n\n
wp core update --version=7.1-beta1\n\n
Cách 2 – WordPress Beta Tester Plugin:
\n\n
Cài plugin WordPress Beta Tester, sau đó chọn “Bleeding edge” channel và “Beta/RC Only” stream trong Settings > Beta Testing.
\n\n
Cách 3 – Direct Download:
\n\n
Tải file zip trực tiếp từ wordpress.org/wordpress-7.1-beta1.zip và upload lên hosting qua WP Admin > Updates > Re-install.
\n\n
Sau khi cài xong, bạn cần kích hoạt block theme (như Twenty Twenty-Six) để dùng đầy đủ tính năng Site Editor.
\n\n
Hướng dẫn styling hover state cho Button block
\n\n
Đây là phần chính. Mình sẽ hướng dẫn chi tiết từng bước để style hover state cho Button block – block đầu tiên hỗ trợ đầy đủ Interactive Styling trong WordPress 7.1.
\n\n
Bước 1: Mở Site Editor (Appearance > Editor) và chọn template bạn muốn chỉnh sửa, ví dụ Single Post.
\n\n
Bước 2: Click vào Button block cần style. Trong sidebar bên phải, bạn sẽ thấy panel “Settings” và “Styles”. Mở tab Styles.
\n\n
Bước 3: Kéo xuống dưới, bạn sẽ thấy mục mới là “Interactive” với 3 tùy chọn: Hover, Focus, Active. Click vào Hover.
\n\n
Bước 4: Khi bật Hover, editor sẽ chuyển sang hover preview mode – chuột của bạn sẽ được simulate như đang hover lên block. Bây giờ bạn có thể thay đổi:
\n\n
- \n
- Background color: Đổi sang màu đậm hơn màu mặc định
- Text color: Chuyển sang màu tương phản
- Border: Thêm hoặc đổi màu border
- Spacing (padding/margin): Tăng nhẹ để tạo hiệu ứng “nổi lên”
- Typography: Đổi font weight hoặc text decoration
\n
\n
\n
\n
\n
\n\n
Bước 5: Khi hài lòng, click Save ở góc trên bên phải. WordPress sẽ lưu thay đổi vào theme.json của user’s global styles.
\n\n
Mọi thay đổi đều có preview real-time trong editor, nên bạn thấy ngay kết quả mà không cần mở tab mới.
\n\n
\n\n
Navigation Link là block thứ hai hỗ trợ Interactive Styling ở level block trong Beta 1. Focus state đặc biệt quan trọng cho accessibility – người dùng điều hướng bằng keyboard cần thấy rõ link nào đang được focus.
\n\n
Cách thực hiện tương tự Button block:
\n\n
Bước 1: Chọn Navigation Link block trong header template part.
\n\n
Bước 2: Mở tab Styles, tìm mục Interactive, chọn Focus.
\n\n
Bước 3: Thiết lập outline hoặc underline rõ ràng. Mình khuyến nghị dùng:
\n\n
- \n
outline: 2px solid #current-colortương đương- Text decoration: underline
- Background color nhẹ (như rgba màu chính, opacity 0.1)
\n
\n
\n
\n\n
Bước 4: Test bằng phím Tab trên keyboard để xác nhận focus state hiển thị đúng.
\n\n
Đây là bước quan trọng để site đạt WCAG 2.1 AA về visual focus indicator. Trước đây, đa số theme WordPress bỏ qua focus state hoặc làm rất sơ sài.
\n\n
Cách dùng Global Styles để style hover cho toàn site
\n\n
Nếu bạn muốn áp dụng hover style đồng nhất cho tất cả button trên site, dùng Global Styles thay vì style từng block. Cách này hiệu quả hơn nhiều.
\n\n
Bước 1: Trong Site Editor, click vào icon Styles ở góc trên bên phải (hình bàn cờ).
\n\n
Bước 2: Chọn “Blocks” > “Button”.
\n\n
Bước 3: Bạn sẽ thấy tab “Interactive” với Hover, Focus, Active. Chọn Hover và thiết lập style mặc định cho toàn bộ button trên site.
\n\n
Bước 4: Save. Mọi button block bây giờ đều kế thừa hover style này, trừ khi bạn override ở level block riêng biệt.
\n\n
Ưu điểm của Global Styles là tính nhất quán. Khi bạn muốn đổi màu hover cho toàn site, chỉ cần thay đổi ở một chỗ duy nhất.
\n\n
Theme.json cấu hình interactive states như thế nào?
\n\n
Cho developer và theme author, WordPress 7.1 lưu trữ interactive states trong theme.json. Dưới đây là cấu trúc JSON để định nghĩa hover state cho button:
\n\n
{\n "$schema": "https://schemas.wp.org/trunk/theme.json",\n "version": 3,\n "styles": {\n "blocks": {\n "core/button": {\n "color": {\n "background": "#2563eb",\n "text": "#ffffff"\n },\n ":hover": {\n "color": {\n "background": "#1d4ed8",\n "text": "#ffffff"\n },\n "spacing": {\n "padding": {\n "top": "1.1rem",\n "right": "2.2rem",\n "bottom": "1.1rem",\n "left": "2.2rem"\n }\n }\n },\n ":focus": {\n "outline": {\n "color": "#2563eb",\n "width": "2px",\n "style": "solid",\n "offset": "2px"\n }\n }\n }\n }\n }\n}\n\n
Bạn cũng có thể định nghĩa viewport breakpoints tùy chỉnh trong theme.json:
\n\n
{\n "settings": {\n "responsive": {\n "breakpoints": {\n "mobile": "480px",\n "tablet": "768px",\n "desktop": "1024px"\n }\n }\n }\n}\n\n
Điều này cho phép theme author kiểm soát chính xác cách responsive controls hoạt động trên theme của mình.
\n\n
Những block nào chưa hỗ trợ Interactive Styling?
\n\n
Tính đến Beta 1, chỉ có Button và Navigation Link hỗ trợ block-level interactive states. Các block khác như Image, Heading, Paragraph, Group chưa có panel Interactive ở level block. Tuy nhiên, bạn vẫn có thể style hover/focus/active cho link bên trong paragraph thông qua panel “Elements” ở Global Styles.
\n\n
Kiến trúc của tính năng này được thiết kế modular, nên các block tiếp theo sẽ được thêm dần trong Gutenberg 23.7, 23.8 và các bản WordPress 7.1.x sau này. Theo roadmap, navigation menu item active state cũng đã được thêm vào qua theme.json.
\n\n
Responsive Styling kết hợp Interactive Styling
\n\n
WordPress 7.1 cũng mang đến Responsive Styling – cho phép bạn thiết lập style khác nhau cho từng kích thước màn hình. Kết hợp với Interactive Styling, bạn có thể tạo ra trải nghiệm cực kỳ tinh xảo.
\n\n
Ví dụ thực tế: Button hover trên desktop đổi background color, nhưng trên mobile (không có hover) thì tăng kích thước nhẹ để visual feedback tốt hơn khi tap.
\n\n
Cách thực hiện:
\n\n
Bước 1: Chọn Button block, mở tab Styles.
\n\n
Bước 2: Bên cạnh mỗi property (Background, Text color, Padding…), bạn sẽ thấy icon Responsive (hình điện thoại/tablet/desktop). Click vào để chuyển giữa các viewport.
\n\n
Bước 3: Chọn viewport Tablet, sau đó mở panel Interactive > Active. Thiết lập style cho state active trên tablet.
\n\n
Bước 4: Lặp lại cho viewport Mobile với các giá trị phù hợp hơn cho touch device.
\n\n
Kết hợp hai tính năng này giúp bạn loại bỏ gần hết nhu cầu viết media query trong Custom CSS.
\n\n
Cách kiểm tra Interactive Styling trên trình duyệt
\n\n
Sau khi save style trong editor, bạn cần kiểm tra trên frontend để đảm bảo mọi thứ hiển thị đúng. Đây là bước nhiều người bỏ qua nhưng rất quan trọng.
\n\n
Kiểm tra Hover: Mở trang frontend, rê chuột lên block. Kiểm tra cả transition (WordPress 7.1 tự thêm transition: all 0.3s ease mặc định, bạn có thể thay đổi trong panel).
\n\n
Kiểm tra Focus: Click vào address bar của trình duyệt, nhấn phím Tab liên tục cho đến khi focus đến block cần kiểm tra. Visual focus indicator phải hiển thị rõ ràng.
\n\n
Kiểm tra Active: Nhấn và giữ chuột (click down nhưng không nhả) lên block để thấy active state.
\n\n
Kiểm tra Responsive: Mở DevTools (F12), toggle device toolbar (Ctrl+Shift+M), chọn các breakpoint khác nhau. Test hover/focus/active trên từng viewport.
\n\n
Nếu style không áp dụng đúng, hãy kiểm tra cache (plugin cache, Cloudflare, browser cache) và !important từ theme hoặc plugin cũ có đang override không.
\n\n
Lưu ý quan trọng khi dùng Interactive Styling
\n\n
Mình đã test kỹ tính năng này và tìm ra mấy điểm cần lưu ý:
\n\n
1. Chỉ hoạt động với Block Themes: Tính năng này yêu cầu theme hỗ trợ theme.json version 2 trở lên. Classic theme không có Site Editor sẽ không dùng được.
\n\n
2. Plugin page builder không tương thích: Nếu bạn dùng Elementor, Divi Builder hoặc WPBakery, Interactive Styling của WordPress core sẽ không ảnh hưởng đến block do các plugin này tạo. Mỗi plugin có hệ thống styling riêng.
\n\n
3. Cẩn thận với fluid typography: Nếu theme của bạn dùng clamp() cho font-size (fluid typography), việc thiết lập fixed font-size cho hover state trên một viewport cụ thể có thể “phá” hiệu ứng scaling tự động. Hãy cân nhắc dùng giá trị clamp() hoặc để trống property không cần thay đổi.
\n\n
4. Performance: Interactive Styling sinh ra CSS inline trong <style> tag, không tạo thêm HTTP request. Tuy nhiên, nếu bạn style quá nhiều states cho quá nhiều block, file CSS có thể phình to. Hãy chọn lọc.
\n\n
5. Backup trước khi test: Beta là phần mềm chưa ổn định. Luôn backup database và files trước khi cài Beta lên staging. Tham khảo hướng dẫn chuẩn bị test WordPress 7.1 Beta 1 mà mình đã viết trước đó để biết chi tiết.
\n\n
Kết luận: Nên dùng Interactive Styling ngay không?
\n\n
Nếu bạn đang dùng block theme và sắp nâng cấp lên WordPress 7.1 (ra mắt 19/8/2026), Interactive Styling là tính năng đáng giá nhất để thử ngay. Nó loại bỏ nhu cầu viết Custom CSS cho 80% các trường hợp hover/focus/active thông thường, giúp workflow thiết kế trực quan và nhanh hơn đáng kể.
\n\n
Tuy nhiên, vì tính năng này vẫn ở giai đoạn Beta, hãy test kỹ trên staging trước. Đặc biệt lưu ý tính tương thích với plugin cũ và theme tùy chỉnh. Khi WordPress 7.1 chính thức ra mắt vào tháng 8, tính năng này sẽ hoàn thiện hơn với nhiều block hỗ trợ hơn.
\n\n
Nếu bạn gặp vấn đề khi test, hãy report bug lên Alpha/Beta forum của WordPress.org để contribute community.
