Những điều cần biết về Full Site Editing (FSE) – P1 – Tổng quan

Khi phiên bản WordPress 5.0 được công bố vào cuối năm 2018, trình soạn thảo quen thuộc Classic của WordPress đã được thay thế bằng một cái mới mang tên Gutenberg. Trình soạn thảo mới này là một sự thay đổi lớn trong cách xây dựng nội dung trên các website WordPress với việc chuyển sang sử dụng các block (khối). Nhưng đó mới chỉ là bắt đầu.

Bạn còn nhớ chứ, Gutenberg đã từng vạch ra 4 giai đoạn phát triển cụ thể như này:

  1. Easier Editing – xử lý phần Core;
  2. Customization – Full Site editing, Block Patterns, Block Directory, Block Themes;
  3. Collaboration – Kết nối tốt hơn với Google Doc để viết nội dung;
  4. Multi-lingual – Bổ sung thêm phần Core cho các trang đa ngôn ngữ.

Và sau gần 3 năm, có vẻ như Gutenberg vẫn đi đúng lộ trình với việc đã dần hoàn thiện giai đoạn 2 với việc ra mắt tính năng quan trọng nhất là Full Site Editing ở phiên bản WordPress 5.8 ngày 20/07/2021 (trước đó đã ra bản thử nghiệm hồi đầu năm 2020).

Full Site Editing là gì?

Full Site Editing (FSE) là một khái niệm để chỉ khả năng xây dựng toàn bộ website dựa trên việc sử dụng các block. Thực ra, đây là một khái niệm tổng hợp của một bộ ba tính năng mới đang được WordPress phát triển, đó là: Block themes, Template editing, và Global styles.

Trước đây, bạn vẫn thường phải di chuyển qua lại giữa Customizer, Widget, Menu, … để tùy biến website. Thì bây giờ, bạn không cần làm điều đó nữa. FSE mang lại cho bạn một giải pháp giúp bạn có một nơi tập trung để xử lý toàn bộ các việc trên, tức là xây dựng toàn bộ giao diện cho website chỉ tại một nơi duy nhất là Site Editor. Và với FSE, các thao tác cũng đơn giản chỉ là kéo thả các block.

Trong tương lai, các phần như Customizer có thể cũng sẽ không còn tồn tại trên các website WordPress nữa. Thay vào đó, block sẽ ở mọi nơi, không chỉ giới hạn ở trong khu vực bài viết như trước đây nữa.

Full Site Editing cho phép bạn tạo các trang hoặc cả website ở Site Editor.

Thói quen của những người dùng WordPress sẽ cần phải thay đổi, có lẽ vậy. Dù bạn là ai, một developer, một designer, một nhà phát triển theme hay plugin, hay chỉ đơn giản là một người dùng website WordPress đi chăng nữa, thì cũng cần phải bắt kịp làn sóng này.

Những khái niệm thường thấy khi làm quen với Full Site Editing (FSE)

Blocks

Kể từ khi Gutenberg ra đời thì Block cũng đã không còn quá xa lạ nữa rồi. Chúng có thể là các đoạn văn bản, là hình ảnh, video, audio, … trong các bài viết. Bạn có thể kéo thả để di chuyển, sắp xếp chúng theo thứ tự hoặc theo cột, thậm chí là gộp nhóm.

Nhưng với FSE, Block mang một ý nghĩa rộng hơn. Bạn có thể dùng nó để tạo các global element như là site logo, tagline, header, footer, menu, sidebar, … Lúc này, Block không còn là một phần trong các bài viết nữa. Nó đã dần trở thành các phần cơ bản để tạo nên một website WordPress hoàn chỉnh.

Dù là Block trong bài viết, hay là Block để dựng giao diện web, thì chúng cũng đều cho phép bạn tạo nội dung tĩnh (static) hoặc động (dynamic). Với các nội dung động, Block sẽ hiển thị các nội dung khác nhau cho những người dùng khác nhau hoặc những vị trí hiển thị khác nhau, … hoặc theo điều kiện khác mà bạn thiết lập. Ví dụ như với Query Loop Block này chẳng hạn, mình dùng nó để hiển thị ra danh sách các bài blog hoặc CPT.

Ví dụ block tạo nội dung động: Query Loop Block hiển thị danh sách các bài đăng trên blog hoặc CPT

Block Patterns và Reusable Blocks

Block Patterns là một nhóm các block được ghép lại theo một layout hoàn chỉnh. Tức là toàn bộ các block này đã được tạo nội dung, sắp xếp, định dạng, thiết lập, … trước rồi kết hợp thành một mẫu khá hoàn thiện để có thể sử dụng được ngay.

Bạn có thể lưu các Block Patterns để dùng lại nhiều lần, trên cả post và page. Như vậy, bạn có thể tạo ra các phần nội dung phức tạp cho bài viết, cho các trang chỉ với vài cú click. Mọi thứ rất dễ dàng.

Khi sử dụng, bạn có thể chỉnh sửa nội dung của các block, điều chỉnh các thiết lập cho phù hợp mà không ảnh hưởng tới các pattern cùng loại đã từng được tạo ra trước đó.

Block Pattern của FSE là một nhóm các block được ghép lại theo một layout hoàn chỉnh

Gần giống với Block Patterns là Reusable Blocks. Người dùng có thể tạo một block với nội dung và thiết lập được định sẵn, sau đó lưu lại để tái sử dụng cho các lần sau. Những block như vậy được gọi là Reusable Blocks. Nhưng khi bạn thay đổi nội dung của block ở một nơi nào đó bất kỳ trên trang, thì kéo theo đó là sẽ là sự thay đổi nội dung của tất cả các block đó trên website luôn nhé. Điều này hơi khác so với Block Patterns.

Việc kết hợp sử dụng linh hoạt cả Block Patterns và Reusable Blocks sẽ mang đến cho bạn sự thuận tiện và tối ưu hơn trong quá trình sử dụng, chứ không nhất thiết chỉ dùng một trong hai.

Templates / Block Templates

Như chúng ta đã biết, một website WordPress có thể có nhiều template khác nhau, và mỗi template là một file riêng. Việc template nào được hiển thị trên một trang nào đó sẽ được quyết định dựa trên Template Hierarchy.

Trước đây, các template thường được viết ở dạng file PHP. Nhưng với FSE, thì lại dùng HTML. Nội dung của các file template lúc này sẽ bao gồm một danh sách các block, nên được gọi là Block Template.

Trong FSE, nội dung của các file template bao gồm một danh sách các block, gọi là Block Template.

Một template của theme truyền thống sẽ có cấu trúc kiểu này:

├── theme-name

│   ├── template-parts

│   │   ├── content.php

│   ├── templates

│   │   ├── template-cover.php

│   │   ├── template-full-width.php

│   ├── index.php

│   ├── style.css

Còn một theme FSE thì lại có cấu trúc kiểu này:

├── theme-name

│   ├── block-template-parts

│   │   ├── header.html

│   │   ├── footer.html

│   ├── block-templates

│   │   ├── index.html

│   ├── index.php

│   ├── style.css

User-Defined Template (Template do người dùng tự tạo)

Với FSE, người dùng có thể tự tạo các template ngay từ giao diện trình soạn thảo (Site Editor). Họ có thể nhìn thấy trực tiếp các thay đổi trên giao diện khi tạo template. Họ cũng sẽ không cần phải tạo child theme, hay viết code, hay là thuê developer làm thay như trước đây nữa.

Đặc biệt, các template này sẽ được lưu vào database dưới dạng custom post type tên là wp_template. Vì vậy, chúng hoàn toàn có thể được xuất dữ liệu (export) và nhập dữ liệu (import) vào một website khác để sử dụng lại. Nếu bạn có nhiều website và muốn dùng chung các template, thì quá tiện rồi.

Người dùng có thể tạo các template riêng từ Site Editor nhờ FSE.

Block Themes / Block-Based Themes (Các theme được phát triển hoàn toàn dựa trên các Block)

“A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.”Gutenberg Handbook.

Dịch: Một block theme là một theme WordPress với các template được tạo ra hoàn toàn từ các block mà không chỉ dành riêng các phần nội dung của các bài viết của các loai post type khác nhau như page, post, … mà bao gồm cả các block dùng để chỉnh sửa toàn bộ các phần khác của website như là header, footer, sidebar, …

Ghi chú: Thuở ban đầu khi FSE mới ra bản thử nghiệm, thì Block Theme được gọi với cái tên là Block-Based Theme, nên ở đâu đó bạn vẫn được nghe với cái tên là Block-Based Theme nhé.

Ví dụ như theme TT1 Blocks, là phiên bản Block Theme của theme Twenty Twenty-One, có cấu trúc các tập tin như sau:

Cấu trúc của một Block Theme - theme TT1 Blocks

Bạn thấy đấy, phần lõi của các Block Theme này sẽ là các Block Template và Block Template Part như ở trong hình, và tất nhiên là ở dạng file HTML. Các phần này vẫn giữ concept giống như ở các theme truyền thống, nhưng Block Template Part được tách thành một module riêng do nó sẽ cần xuất hiện nhiều lần ở các template khác nhau.

Hiện nay chưa có nhiều Block Theme lắm, và hầu hết mới chỉ là thử nghiệm, bạn cũng có thể xem qua:

Global Styles

Global Styles đã được tích hợp vào ngay trong phần Site Editor. Bạn có thể thay đổi giao diện website bằng cách chỉnh sửa các yếu tố như màu sắc, kích cỡ, typo, background, của cả website hoặc là chọn style theo từng block, … mà không cần đi tới từng trang hay Customizer để chỉnh sửa nữa.

Vậy mới nói nhiều khả năng Customizer sẽ bị loại bỏ trong tương lai, bởi vì Global Styles đã làm được quá nhiều thứ để thay thế nó rồi.

Global Styles đã được tích hợp vào Site Editor của FSE

Có một điều thú vị nho nhỏ đó là để tạo ra các tùy chọn trong Global Styles panel, chúng ta sẽ sử dụng file theme.json. Đây là một file cấu hình nằm trong thư mục gốc của theme và được sử dụng để tạo ra các preset (tùy chọn mặc định sẵn) cho theme. Nếu bạn có ý định phát triển một Block Theme, thì tìm hiểu thêm về theme.json ở đây nhé.

Làm sao để trải nghiệm Full Site Editing (FSE)

Vậy là cũng sơ bộ vài khái niệm cơ bản để làm quen với FSE rồi. Bây giờ, bạn muốn dùng thử FSE chứ.

Nhưng trước tiên, hãy lưu ý là mặc dù ở WordPress 5.8 đã có FSE nhưng vẫn chưa nhiều tính năng, nên nếu bạn muốn có những trải nghiệm đầy đủ hơn thì cần dùng bản beta (MVP) nhé.

Bản beta được đưa ra trong chương trình FSE Outreach Program, bạn có thể tham gia để được thường xuyên cập nhật và trải nghiệm sớm nhất các phiên bản mới. Để dùng bản beta này, bạn sẽ cần những thứ sau:

  • Khuyến cáo nên sử dụng trên trang local
  • WordPress phiên bản từ 5.7.1 trở lên
  • Một Block Theme (chọn từ trong số những theme mình đã liệt kê ở trên nhé)
  • Plugin Gutenberg phiên bản từ 10.5 trở lên

Sau khi cài đặt đầy đủ, bạn sẽ thấy menu Site Editor (beta) ở trong Dashboard.

Menu Site Editor (beta) ở trong Dashboard.

Nếu bạn là một nhà phát triển theme, thì hãy thử trải nghiệm những thứ sau:

  • Query Block, bạn có thể xem video này để bắt đầu dễ dàng hơn;
  • Làm quen với Global Styles;
  • Tạo Block Templates, Block Patterns, Block Style Variations;
  • Thử và khám phá thêm về các Block Theme;
  • Đọc qua các bài viết này để hiểu thêm về việc phát triển theme dựa trên các block;
  • Xây dựng một Block Theme theo hướng dẫn này và các tài liệu này.

Còn nếu bạn là một nhà phát triển plugin, cũng đừng bỏ qua nhé, hãy thử tạo một block theo hướng dẫn này xem sao. Nếu plugin của bạn có gây ảnh hưởng gì đó đến navigation hay widget của website, thì hãy xem xét việc cải thiện các tính năng liên quan đến block cho các phần đó nhé. Bởi vì cả 2 phần này sẽ đều có liên quan đến FSE.

Và dành cho tất cả mọi người, hãy cùng thử những điều sau nhé:

  • Sử dụng từng loại block khác nhau như là Posts Lists, Site Title, Template Part, Site Logo, Navigation, …
  • Khám phá Global Styles và thử thay đổi các thiết lập;
  • Khám phá chế độ chỉnh sửa template và thử chỉnh sửa các template;
  • Khám phá hàng loạt các lựa chọn tìm kiếm cho phần nội dung và template;
  • Dựng một website;
  • Dùng một Block Theme.

Ngoài ra, bạn cũng có thể tham khảo các video hướng dẫn dưới đây để xem FSE trong thực tế và trải nghiệm của các lập trình viên khác trong cộng đồng:

Nếu bạn muốn đóng góp một phần tiếng nói và chia sẻ những trải nghiệm của mình về FSE với cộng đồng, thì hãy tham gia vào chương trình FSE Outreach Program, Github, hoặc nhóm Slack #fse-outreach-experiment nhé.

Đôi dòng cảm nhận về FSE

Với FSE, dường như WordPress đang hướng tới một nhóm đối tượng người dùng đông đảo hơn, đó là nhóm những người không am hiểu về code. WordPress đang dần đơn giản hóa việc xây dựng website với các thao tác kéo thả đơn giản, không cần dùng đến code, để ai cũng có thể làm được.

Trước đó, từng có khá nhiều rào cản trong việc tùy chỉnh dù là những chỉnh sửa nhỏ trên các block riêng lẻ hay những thay đổi trên toàn website. Thì nay, FSE đã giúp người dùng WordPress dễ dàng tạo ra các layout cho website theo ý họ một cách linh hoạt và thuận tiện hơn rất nhiều.

Về phía người dùng, với những người tạo dựng website thì đây có lẽ sẽ chính là điểm mấu chốt giúp WordPress làm bật lên được lợi thế cạnh tranh so với các nền tảng khác đang có trên thị trường như Wix, Weebly, hay Squarespace.

Còn đối với các Designer và Agency về mảng xây dựng website thì sao? Họ sẽ được giải phóng khỏi những công việc liên quan đến kỹ thuật và dành nhiều thời gian hơn cho việc sáng tạo ra các thiết kế với UI/UX tốt hơn, độc đáo hơn, phù hợp với nhu cầu của khách hàng hơn. Cũng khá nhiều lợi ích đấy chứ.

Với những người làm theme hay plugin như mình đây, thì FSE có vẻ sẽ hơi gây bất lợi khi nó giải quyết gần hết các công việc mà theme developer thường làm mất rồi, và plugin thì cũng cần phải chạy theo để làm sao tương thích nữa. Thế nhưng, thực ra mình cũng đang không có gì quá lo lắng vì sự thay đổi này cả. FSE sẽ còn một chặng đường dài phía trước và chắc vẫn còn đủ thời gian cho mình và các bạn tìm hiểu, thích nghi và thay đổi dần các sản phẩm (nếu cần thiết) nếu chúng ta tiếp cận sớm ngay từ bây giờ. Vậy nên, cứ bình tĩnh, cập nhật thêm thông tin, theo sát tiến tình, và chịu khó đọc các tài liệu để tìm hiểu sâu hơn về FSE là được.

Lời kết

Mình rất hy vọng những thông tin tổng quan về Full Site Editing (FSE) này sẽ giúp bạn có cái nhìn tổng quan và hiểu hơn về tính năng này cũng như xu hướng phát triển sắp tới của WordPress. Vì dự án này vẫn đang liên tục phát triển, thử nghiệm, và cập nhật, nên mình sẽ tiếp tục cập nhật những diễn biến mới trên blog này nhé.

Tất nhiên đây cũng là một chủ đề hấp dẫn và được nhiều anh em quan tâm, nên mình sẽ không chỉ dừng ở các thông tin cơ bản như này. Sắp tới mình sẽ có thêm các bài viết khác sâu hơn về việc so sánh, đánh giá hiệu suất và tốc độ của website khi sử dụng Gutenberg, hoặc là các tài liệu liên quan đến Block Theme.

Các bạn nhớ theo dõi nhé!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *