Giới thiệu WordPress 6.0 (05/2022)

Chủ đề Progress:

Ngày 24/05/2022, WordPress 6.0 ra mắt đánh dấu một cột mốc quan trọng, có thể nói là khá thành công trên lộ trình Full Site Editing mà đội ngũ phát triển WordPress hướng đến.

Trước hết hãy nhắc lại về Full Site Editing & Gutenberg Roadmap:

Full Site Editing là gì?

Trong WordPress, Full Site Editing là khả năng thiết kế, tuỳ biến toàn bộ Website ngay trên WordPress Editor – cụ thể là Gutenberg Block Editor.

Full Site Editing không chỉ là xu hướng tất yếu của WordPress mà gần như là xu hướng tất yếu của thiết kế web trong tương lai, là một phần trong thời đại No-Code, Low-Code sắp tới, khi mà cả Website và ứng dụng Web đều có thể được xây dựng với đầy đủ tính năng & thiết kế chuyên nghiệp mà không cần phải đụng đến dòng code nào (hoặc rất ít).

Webflow, Bubble hay Google Cloud’s App Sheet và cả Mailchimp, là một trong số các nền tảng No-Code, Low-Code điển hình.

Webflow No-code Web Design

Gutenberg Roadmap

Gutenberg có một lộ trình dài hơi (Gutenberg Roadmap), khởi đầu từ khi ra mắt phiên bản thử nghiệm của dưới dạng plugin năm 2017. Sau đó, Gutenberg sẽ trải qua 4 giai đoạn chính để hoàn thiện:

  • Giai đoạn 1 – Easy Editing (Block Editor): từ 2018 – 2019, Gutenberg giai đoạn này hỗ trợ người dùng các tính năng để dễ dàng biên tập, chỉnh sửa nội dung bài viết và trang web, cung cấp các blocks hỗ trợ ở cấp độ cơ bản như Text Blocks, Image Block,…
  • Giai đoạn 2 – Customization (Full Site Editing): từ 2019 – 2023, Gutenberg hỗ trợ các tính năng Full Site Editing, bao gồm hệ thống Block Directory, Blocks Pattern, Block-based Themes. WordPress 6.0 hiện đang ở chặn cuối của hành trình này.
  • Giai đoạn 3 – Collaboration (Multi-Author): dự kiến hoàn thành trong 2023, cho phép nhiều người cùng tham gia xây dựng Website WordPress trên Gutenberg.
  • Giai đoạn 4 – Multi-Lingual Sites: dự kiến xong cuối 2023 hoặc đầu 2024, hỗ trợ xây dựng website đa ngôn ngữ.

Lộ trình phát triển Gutenberg - Gutenberg Roadmap

Trong suốt lộ trình này, ngoài các bản fix lỗi bảo mật, cải thiện hiệu năng thì mọi tính năng mới của WordPress đều tập trung cho Gutenberg Block Editor.

Dễ nhận ra, trong lộ trình 4 giai đoạn kéo dài 5 năm thì giai đoạn 2 – hỗ trợ các tính năng Full Site Editing chiếm đến 4 năm, bởi đây là hạt nhân quyết định thành bại của Gutenberg.

 

WordPress 6.0 có gì mới

Phiên bản WordPress 6.0 sẽ tập trung nâng cấp, cải thiện các tính năng Full Site Editing vừa được giới thiệu ở WordPress 5.9 (01/2022) và bổ sung thêm các tính năng và blocks mới, ta sẽ điểm qua các thay đổi đáng chú ý trong phiên bản này:

1. Global Styles Switching/ Swith Theme Styles

Tính năng thay đổi Color Scheme được giới thiệu từ trước cho phép thay đổi nhanh tông màu của toàn bộ Website ngay trên Block Editor (Gutenberg).

Ở WordPress 6.0, tính năng này được mở rộng cho cả Font chữ và Layout, cho phép thay đổi toàn bộ Style của Website chỉ với một click:

Tất nhiên, nhà phát triên theme hoặc plugin tuỳ ý tích hợp sẵn số lượng Style để người dùng chọn lựa. Ví dụ theme default Twenty Twenty Two, cho phép chuyển qua lại giữa các style sau:

Theme Styles (Layout, Font, Color) là thứ quyết định chất lượng thiết kế, thường những nhà thiết kế Web chuyên nghiệp mới có thể tạo từ đầu Theme Styles chất lượng, việc phối hợp giữ màu sắc, font chữ và layout không chỉ để cho giao diện (UI) bắt mắt mà còn phải tuân theo các qui tắc thiết kế để tối ưu trải nghiệm người dùng (UX – User Experience).

Nhiều theme nổi tiếng dẫ hỗ trợ Font & Color Switching từ năm 2020, nhưng bao gồm cả Layout thì rất hiếm.

Đây là tính năng mà các nhà phát triển theme và cả người dùng phổ thông cực kỳ hưởng ứng.

Bạn có thể hình dung các theme có tính tuỳ biến mạnh như Astra, GeneratePress, OceanWP sẽ tuyệt vời thế nào khi thời gian tới họ tích hợp sẵn hàng chục hoặc hàng trăm Theme Styles, chúng ta có thể dùng nhanh Themes Styles chất lượng cao cho nhiều dự án thiết kế khác nhau.

2. Export Theme – Reusable Theme

Tính năng ít được chú ý nhưng thực sự cực kỳ bá đạo sẽ được giới thiệu ở WordPress 6.0 là Export Theme trên Site Editor.

Export Theme ho phép người dùng export toàn bộ theme và các cấu hình thiết lập hiện có ngay trên Site Editor, thành một file theme hoàn chỉnh và có thể import nó lên một site mới khi cần dùng lại.

Theme Export - Site Editor

Tính năng này không giống với việc tải theme về và export file cấu hình json của theme (theme option export) như đã biết trước đây. Cụ thể:

  • Với Full Site Editing, ta có thể tạo từ đầu toàn bộ các templates của WordPress, từ header, footer, sidebar, single page, archive page, 404 page,.. Việc này từ WordPress 5.9 đã có thể thực hiện trên Site Editor (cũng giống Block Editor nhưng dùng để tạo các template).
  • Sau khi tạo các template cho toàn bộ Website trên Site Editor, ta có thể export như một theme hoàn chỉnh – tạm gọi là theme thế hệ mới, và có thể import nó lên Site Editor trên site khác.

Bản theme này không phụ thuộc vào theme và plugin đang dùng, mà nó hoạt động hoàn toàn dựa vào Gutenberg Editor, tức từ bây giờ, chúng ta có thể tự thiết kế một Theme WordPress ngay trên Site Editor và dùng có thể dùng nó trên mọi Website WordPress khác.

Tất nhiên theme và plugin chính thống trên WordPress vẫn có thể hỗ trợ tính năng & thiết kế cho bản theme này các blocks của chúng.

Nếu bạn tham khảo nền tảng Node-Code – Webflow, bạn dễ dàng thấy nhiều nhà phát triển bán các template để người dùng import thành một website hoàn chỉnh. Tương lai gần, chúng ta có thể tạo các theme ‘thế hệ mới’ ngay trên Site Editor, rồi export để bán lại cho người dùng.

Theme Export sẽ mở đường cho No-Code Theme Development trên WordPress, những nhà phát triển theme tương lai có thể sẽ không cần một chút kiến thức về lập trình nào, cả back-end (PHP) lẫn Front-End (HTML/CSS/JS). Ô mai Gót!

3. Webfonts API

Tính năng mới Webfonts API, hỗ trợ cho các nhà phát triển theme, plugin, để họ có thể tích hợp fonts ngay trên WordPress và thực hiện Load fonts locally.

Hầu hết các Website hiện nay đều dùng Webfonts như các font từ Google Fonts, Typekits,.. vì font từ các thư viện Webfonts đẹp, hiện đại và dễ đọc, ít nhàm chán như các font tích hợp sẵn trên hệ điều hành thiết bị (System fonts).

Tuy nhiên, vấn đề cố hữu của Webfont là chúng thường được tải trực tiếp từ thư viện của nhà cung cấp như Google Font Libary, điều này khiến cho quá trình load trang web chậm đi đôi chút và phát sinh thêm một http request ra bên ngoài.

Những ai làm nhiệm vụ tối ưu tốc độ Website đều quen thuộc với vấn đề này. Chúng ta thường xử lý bằng cách chọn preload fonts hoặc tải font về upload lên máy chủ rồi khai báo lệnh import vào file functions.php của theme, cả 2 cách đều không phải giải pháp tốt nhất.

Gần đây một số theme như Astra cho phép Load font locally khi bạn dùng Webfonts, tức Astra sẽ tải font về server rồi load trực tiếp từ đó.

Tính năng Webfonts API sẽ giúp việc này dễ dàng hơn cho tất cả các nhà phát triển theme hay plugin.

4. Các Block mới trên WordPress 6.0

Ở WordPress 5.8 & 5.9, các block cơ bản cho Full Site Editing đã được giới và nhóm lại thành Theme Blocks, như Query Loop block, Site Title, Post Title, Post Author…

Ở WordPress 6.0 chúng ta có thêm một số block mới, để giúp thiết kế các phần nhỏ khác của Website WordPress:

Comment Query Loop 

Block này cho phép hiển thị và tuỳ biến danh sách bình luận, chúng ta có thể tuỳ biến phần comment khi tạo các template trên Site Editor:

Read More 

Read More là block chèn vào bất kỳ chỗ nào của nội dung, nó sẽ ẩn phần nội dung phía dưới và chỉ hiển thị khi người đọc click vào Read More:

Block này rất hữu ích khi nội dung của một trang quá dài, hoặc khi bạn chỉ muốn hiển thị phần giới thiệu của của nội dung trước, việc load phần còn lại phụ thuộc vào người đọc có muốn đọc tiếp hay không.

No Result in Query Loop

Trên WordPress 6.0, No Result block được dùng cho mục đích hiển thị thông báo khi Query Loop không trả về kết quả nào, nó là block con của Query Loop, nên chỉ hiển thị trên Gutenberg khi chúng ta sử dụng Query Loop.

Hiện tại thì No Result chưa có nhiều ứng dụng thực tế.

Avatar Block & Post Author Biography Block

Hai block nhỏ nữa được giới thiệu là Avatar và Post Author Biography. Hai block này cho phép tuỳ chỉnh nâng cao hơn phần giới thiệu tác giả bài viết, hỗ trợ cho việc tạo Single post template hoàn chỉnh hơn.

Riêng Avata block, bạn có thể hiển thị cho một người dùng nhất định hoặc tác giả bài viết:

5. Các tính năng mới trên Gutenberg từ WordPress 6.0

Những tính năng mới giúp việc thiết kế trên Gutenberg hiệu quả hơn cũng được giới thiệu ở lần ra mắt này:

Multi Select – Select Text on Multi Blocks

Tính năng chọn văn bản (bôi đen để xoá, copy, cut) trên nhiều block cùng lúc là thứ người dùng mong mỏi từ lâu.

Vì trên Gutenberg, mọi thứ đều là một block riêng lẻ, nên mỗi đoạn văn bản là mỗi block riêng lẻ, do đó ở các phiên bản Gutenberg trước, bạn không thể chọn cùng lúc một phần văn bản ở block này với block khác như trên Classic Editor (TinyMCE), mà mỗi lần chọn sẽ phải chọn toàn bộ text của block.

Đây là rào cản lớn đối với tốc độ soạn thảo nội dung, vốn đã quen với việc bôi đen & chọn bất kỳ phần nội dung nào mình thích trên Editor.

Rất may, cuối cùng ở WordPress 6.0, chúng ta cũng có thể thao tác chọn văn bản linh hoạt trên Block Editor:

Multi Select – Select Multi Blocks on List View

Cho phép chọn nhiều block cùng lúc trên Panel List View, tức bạn có thể chọn một nhóm blocks trên List View để di chuyển vị trí của chúng hoặc thực hiện các tác vụ liên quan.

Để chọn nhiều block, ta giữ phím Shift rồi click vào các block muốn chọn:

Lock Reusable Blocks

Reusable Blocks là các block được chỉ định dùng chung trên nhiều trang ở cùng website WordPress, khi thay đổi block này ở một trang bất kỳ thì thay đổi sẽ áp dụng trên toàn bộ các trang dùng nó.

Ứng dụng thường gặp là các block hiển thị banner quảng cáo, Call To Action, Form đăng ký,… những thứ mà ta có thể dùng chung trên nhiều trang.

Vì tính chất đặc biệt như vậy, nếu chúng ta xây dưng trang web cho khách hàng và có sử dụng reusable block, thì lỡ khách hàng táy máy chỉnh sửa hoặc lỡ tay xoá block này trên trang nào đó, thì mọi trang khác sẽ bị ảnh hưởng.

Đó là lý do tính năng Lock Reusable Blocks xuất hiện, cho phép khoá các block này. Với các tuỳ chọn cao nhất là khoá hoàn toàn, rồi khoá di chuyển hoặc không cho xoá:

Tất nhiên, khi cần chỉnh sửa, ta sẽ Unlock nó rồi chỉnh sửa.

Blocks Pattern EveryWhere

Blocks Pattern là các template có sẵn để người dùng sử dụng khi thiết kế trên Gutenberg.

Giai đoạn cuối 2021 đầu 2022, WordPress giới thiệu trang thư viện Pattern chính chủ – Block Pattern Directory, bao gồm các thiết kế mẫu cho Block Editor, hứa hẹn tạo một cuộc cách mạng cho thiết kế trên Gutenberg trong thời gian tới, cụ thể:

  • Cho phép người dùng tạo block pattern và upload, chia sẻ lên thư viện.
  • Cho phép sao chép sử dụng block pattern miễn phí: bạn chỉ cần chọn pattern mình thích dùng ở Block Pattern Directory, nhấp vào nút copy và rồi paste vô chính Block Editor trên trang web của mình, sau đó chỉnh sửa lại tuỳ thích, quá tuyệt vời.

Tính năng của Block Pattern Directory cũng mở đường cho sự xuất hiện của hàng ngàn thư viện Blocks mẫu đến từ các nhà thiết kế WordPress. Có thể vài năm tới chúng ta có thể dễ dàng lựa chọn trong hàng ngàn thiết kế mẫu chất lượng khi xây dựng dự án Website trên Gutenberg Editor.

Trang thư viện block Patterns được bổ sung thêm nhiều mẫu mỗi ngày:

Đến Gutenberg Pattern Directory

Ở phiên bản WordPress 6.0, khi mở Site Editor để tạo hoặc chỉnh sửa Templates thì Block Patterns được tích hợp sẵn và hiển thị gợi ý khi người dùng thêm một block mới, tức chúng ta không nhất thiết phải tìm và copy pattern muốn dùng từ Block Pattern Directory, mà có thể load trực tiếp trên Site Editor:

 

Responsive Group & Row Blocks (with Flexbox)

Group và Row Blocks là 2 block quan trọng nhất khi thiết kế trên Block Editor, cho phép chúng ta tạo các layout đa dạng. Ở đây có 2 tuỳ chọn là Row & Stack.

Trước đây thì các tuỳ chọn hiển thị 2 block này trên các kích cỡ màn hình khác nhau khá hạn chế, ở WordPress 6.0, việc tuỳ chỉnh responsive của Group và Row Blocks được nâng cấp linh hoạt hơn:

Và Group block giờ đã được hỗ trợ tuỳ chỉnh margin, padding và cả border:

Ở phiên bản Gutenberg 13.0 (phiên bản tích hợp trên WordPress core 6.0) thì WordPress chính thức hỗ trợ “Flexbox” với tính năng Stack variation cho Group Blocks.

Việc tạo layout với Flexbox là bước tiến lớn của Gutenberg, dùng ít code hơn và pagesize nhẹ hơn.

Chúng ta sẽ tìm hiểu kỹ hơn cái này trong các bài viết sau.

Về Flexbox

Nói sơ qua, Flexbox là một kiểu layout của CSS3, hỗ trợ thiết kế layout vô cùng mạnh mẽ mà kỹ thuật columns + rows trước giờ không thể so được, Flexbox Layout ít code hơn nhưng linh hoạt hơn, đặc biệt nó còn đạt được fully responsive – tức tự động điều chỉnh kích thức theo mọi kích cỡ màn hình mà không cần chỉ định cụ thể bằng media queries.

Các trang web hàng đầu thế giới đều đã chuyển qua thiết kế layout với Flexbox, những dịch vụ No-code như Webflow cũng tận dụng Flexbox để tạo ra các trang web nhẹ hơn và so sánh với WordPress như một điểm nhấn.

Flexbox

Tấ nhiên, WordPress cũng sẽ dần đi theo con đường đó, Flexbox thực sự trở thành cứu cánh cho thiết kế WordPress, đặc biệt là các page builder, giúp giải quyết vấn đề pagesize lớn, DOM bloat (sử dụng quá nhiều columns/ rows lồng nhau để thiết kế layout). Hơn nữa nó còn giúp tạo layout phức tạp & fully responsive.

Các theme và page builder nổi tiếng đang chuyển sang Flexbox, như Elementor 3.6 đã có bản thử nghiệm (Alpha), Astra, GeneratePress, Kadence,.. cũng đã dần dần hỗ trợ.

VHW sẽ có một bài viết thật chi tiết & dễ hiểu về Flexbox và vì sao nó đang thành cứu tinh của thiết kế web WordPress thời gian tới.

Hỗ trợ Featured Image cho Cover Block

Tính năng được khá nhiều người yêu cầu, cho phép dùng Featured Image của một post làm ảnh chính trên Cover Block.

Chi tiết hơn, ví dụ bạn tạo một bài viết và muốn ảnh featured hiện ở chỗ nào thì có thể tạo ở đó một cover block, rồi chỉ định nó sử dụng featured image làm ảnh chính.

cover block

Tính năng này hữu ích hơn nữa khi chúng ta tạo template cho single post trên Site Editor, lúc này ta có thể tuỳ ý bố trí tiêu đề bài viết, meta tag và featured image bằng cách sử dụng cover block.

More Filters for Query Loop Block

Query Loop Block được giới thiệu ở WordPress 5.9, dùng để hiển thị danh sách post với các tuỳ chọn khá cơ bản.

Ở phiên bản 6.0, chúng ta có nhiều tuỳ chọn hơn, như hiển thị bài viết theo category, tag hoặc một/ nhiều tác giả, và có thể thiết lập kích thước featured image nữa:

Ngoài những tính năng đã kể trên, còn có một số nâng cấp nhỏ khác để tối ưu việc thao tác sử dụng Gutenberg ví dụ cho phép chọn border cho column, spacing cho ảnh trên Gallery blocks…

Scroll to Top