Có gì mới trong WordPress 5.9 – Chỉnh sửa toàn bộ trang web, Kiểu toàn cầu, Khối, Mẫu, API, Cải tiến giao diện người dùng và hơn thế nữa

WordPress 5.9 Josephine đã có mặt ở đây! Phiên bản WordPress đầu tiên của năm ban đầu được lên kế hoạch phát hành vào ngày 14 tháng 12 năm 2021. Do một số vấn đề mở và lỗi chưa được giải quyết, bản phát hành cuối cùng đã bị trì hoãn và cuối cùng đã được phát hành vào ngày 25 tháng 1 năm 2022.

Nếu bạn đang tự hỏi có gì mới trong WordPress 5.9, câu trả lời ngắn gọn là Chỉnh sửa toàn bộ trang web (FSE).

Và thực sự, nhiều tính năng 5.9 chỉ khả dụng nếu bạn đang sử dụng chủ đề hỗ trợ Chỉnh sửa toàn trang, chẳng hạn như chủ đề mặc định hoàn toàn mới, Twenty Twenty-Two.

Với WordPress 5.9, chúng ta đi vào trung tâm của giai đoạn thứ hai của lộ trình Gutenberg: giai đoạn Tùy chỉnh , chủ yếu tập trung vào chỉnh sửa Toàn trang, Mẫu khối, Thư mục khối và các chủ đề dựa trên Khối.

Với 5.9, sẽ ra mắt vào tháng tới, chúng tôi – tôi muốn nói – tại MVP, Sản phẩm khả thi tối thiểu trong giai đoạn tùy chỉnh này của Gutenberg.

Những lời này của Matt Mullenweg tại State of the Word năm 2021 tóm tắt tốt nhất các tính năng chính của bản phát hành WordPress mới.

Điều đó nói rằng, có gì mới với bản phát hành WordPress đầu tiên của năm 2022?

Hãy cùng tìm hiểu!

Global Styles: Giao diện đồ họa cho theme.json

Với việc phát hành WordPress 5.8 vào năm 2021, thao tác với tệp theme.json đã trở thành cách tiêu chuẩn để các nhà phát triển chủ đề tùy chỉnh cài đặt và kiểu của trình chỉnh sửa.

WordPress 5.9 đưa mọi thứ lên cấp độ tiếp theo bằng cách giới thiệu một giao diện đồ họa cho phép người dùng tùy chỉnh các cài đặt trước kiểu cho trang web của họ, trên toàn cầu hoặc ở cấp khối mà không cần viết một dòng mã nào.

Cơ chế Global Styles sẽ thay đổi đáng kể cách bạn quen với việc tùy chỉnh giao diện trang web của mình, vì Global Styles ảnh hưởng đến một số khía cạnh của thiết kế trang web WordPress.

Trước hết, giao diện Global Styles thay thế Customizer và hiện là cách duy nhất để tùy chỉnh cài đặt và phong cách với các chủ đề khối. Tương tự, các trang quản trị tùy chọn chủ đề phức tạp sẽ không còn cần thiết nữa. Điều này cung cấp một cách tiêu chuẩn mới để định cấu hình cài đặt và kiểu chủ đề, đồng thời, sẽ hợp lý hóa quy trình phát triển chủ đề.

Với Global Styles, người dùng WordPress có quyền kiểm soát nhiều hơn đối với việc trình bày các trang web của họ, cả trên toàn cầu và trên mỗi loại khối, ngoài ngữ cảnh của các trang hoặc bài đăng riêng lẻ.

Một thanh bên mới hiện có sẵn trong trình chỉnh sửa trang web, ở trên cùng, bạn sẽ tìm thấy một bảng xem trước nhỏ và bốn thành phần theo thứ tự sau:

• Kiểu chữ
• Màu sắc
• Cách trình bày
• Khối

Chúng tôi có thể mong đợi các thành phần mới sẽ được bổ sung theo thời gian.

Chúng ta hãy xem xét kỹ hơn giao diện mới.

[CTA]

Xem trước kiểu

Phần tử đầu tiên trong thanh bên Global Styles là một bảng xem trước. Bảng điều khiển này cho phép bạn kiểm tra kết quả của các tùy chỉnh của mình và đặc biệt hữu ích khi các thay đổi của bạn áp dụng cho các phần tử không hiển thị trong canvas của trình chỉnh sửa trang web.

Hình ảnh sau đây cho thấy ba kiểu kết hợp khác nhau được so sánh:

Kiểu chữ

Bảng Kiểu chữ là nơi bạn kiểm soát kiểu chữ của trang web của mình. Tất nhiên, các điều khiển có sẵn trong bảng điều khiển này phụ thuộc vào cài đặt theme.json của bạn.

Ví dụ: chủ đề Hai mươi mốt khối (Khối TT1) khai báo các thuộc tính kiểu chữ sau:

"settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

Hình ảnh tiếp theo hiển thị các cài đặt Kiểu chữ kết quả trong thanh bên Kiểu toàn cầu:

Hãy đi sâu hơn một chút và xem cách chủ đề Khối TT1 khai báo fontFamilies

"fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Bạn có thể kiểm tra các họ phông chữ này trong bảng xem trước Kiểu chung:

Màu sắc

Trong phần Màu sắc, bạn có thể xem và chỉnh sửa bảng màu cũng như tùy chỉnh màu của một số thành phần trang web.

Bằng cách nhấp vào các phần tử đó, bạn có quyền truy cập vào bảng điều khiển mới, nơi bạn có thể chọn màu từ ba bảng màu: Bảng màu cốt lõi, Chủ đề và Tùy chỉnh (đọc thêm trong Màu mặc định, Màu chủ đề và Màu tùy chỉnh).

Trong bảng điều khiển này, bạn sẽ có thể đặt và sửa đổi màu cho phần tử hiện tại.

Cách trình bày

Nhóm công cụ cuối cùng dành cho các tùy chỉnh bố cục. Trong bối cảnh toàn cầu, điều này được giới hạn cho vùng chứa trang web.

Khối

Với việc triển khai cơ chế Kiểu toàn cục, giờ đây bạn cũng có thể thay đổi giao diện cho các khối cụ thể, chẳng hạn như Đoạn (kiểu chữ và màu sắc), Nút (bố cục) và Cột (màu sắc và bố cục).

Lưu ý rằng các kiểu khối chỉ có thể được tùy chỉnh từ giao diện Global Styles nếu khối tuyên bố hỗ trợ cho chức năng cụ thể trong tệp block.json tương ứng. Ví dụ: khối core/post-title hiện hỗ trợ các kiểu sau:

"supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Vì khối core/post-title hỗ trợ màu sắc, khoảng cách và kiểu chữ, bạn sẽ tìm thấy các mục nhập tương ứng trong cài đặt Kiểu chung của khối Tiêu đề bài đăng.

Hình ảnh sau đây cho thấy các cài đặt kiểu chữ, bạn có thể dễ dàng so sánh với đoạn mã trên:

Cần lưu ý rằng WordPress 5.9 chỉ cung cấp lần triển khai đầu tiên của giao diện Global Styles. Như Matias Ventura đã chỉ ra, chúng ta có thể mong đợi sự phát triển hơn nữa của tính năng điều khiển kiểu mới:

Trong tương lai, sẽ có các luồng được tích hợp vào hệ thống cho phép bạn chuyển từ kiểu cục bộ sang kiểu toàn cầu – như thực hiện các tùy chỉnh cho một khối nút và chọn áp dụng chúng thay đổi toàn cầu trên tất cả các nút thuộc loại đó.

Vì vậy, chúng tôi có thể sớm thấy những cải tiến lớn. Hình ảnh dưới đây chỉ là một ví dụ về những gì chúng ta có thể mong đợi:

Các cải tiến bổ sung có thể bao gồm khả năng cho các chủ đề cung cấp các bảng màu thay thế và nhiều biến thể phong cách toàn cầu.

Tuần trước, tôi đã xây dựng một số biến thể màu sắc + phông chữ của Twenty Twenty-Two thành các chủ đề con siêu đơn giản. Chúng thực sự nhẹ và tôi thích ý tưởng cung cấp cho mọi người một trang web hoàn toàn khác chỉ với một cú nhấp chuột. Https: //t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

– kjellr (@kjellr) ngày 15 tháng 11 năm 2021

Các nhà phát triển có thể tìm hiểu sâu hơn về cơ chế tạo kiểu chung trong bài viết hỗ trợ Cài đặt & Kiểu chung (theme.json). Bạn sẽ tìm thấy các ví dụ bổ sung trong phần giới thiệu của chúng tôi về chủ đề mặc định Twenty Twenty-Two.

Khối điều hướng

Khối Điều hướng được mệnh danh là “một trong những khối chủ đề có tác động mạnh nhất” và chúng tôi không ngại nói rằng chúng tôi đồng ý.

Khối này đã ở trong giai đoạn phôi thai được một thời gian (xem thêm Vấn đề theo dõi và Theo dõi Khối Điều hướng i2). Tuy nhiên, hiện tại tất cả các vấn đề đang chờ xử lý và các trình chặn được liệt kê là những điều cần phải có của WordPress 5.9 đã được khắc phục, cuối cùng chúng ta có thể bắt đầu sử dụng một trong những tính năng mạnh mẽ nhất được hợp nhất vào cốt lõi với WordPress 5.9.
[CTA]

Tổng quan nhanh về giao diện khối điều hướng

Việc sử dụng khối mới lúc đầu có thể hơi khó hiểu, nhưng khi bạn đã hiểu rõ về nó, bạn sẽ đánh giá được toàn bộ tiềm năng của nó.

Khi bạn lần đầu tiên thêm khối Điều hướng, trình giữ chỗ khối cung cấp ba tùy chọn để chọn menu dựa trên khối hiện có, tạo menu với tất cả các trang hoặc bắt đầu làm mới với menu trống.

Menu Điều hướng mới cũng cho phép bạn nhập các menu được tạo thông qua Màn hình Trình đơn Giao diện có sẵn với các chủ đề cổ điển.

Điều này có nghĩa là nếu bạn đang chuyển đổi từ chủ đề cổ điển sang chủ đề khối, bạn sẽ không phải xây dựng lại các menu hiện có của mình. Bạn chỉ cần chọn một trong những “Menu cổ điển” hiện có của mình và nó sẽ được tự động chuyển đổi thành menu điều hướng dựa trên khối.

Bạn có thể thêm khối Điều hướng ở bất kỳ đâu trên các trang của mình. Ví dụ: bạn có thể thấy hữu ích trong các bài viết dài để tạo mục lục, cho phép người dùng chuyển đến các phần nội dung cụ thể.

Các Liên kết Điều hướng mới được thêm ngay lập tức vào khối Điều hướng bằng cách nhấp vào biểu tượng dấu cộng ( + ) ở phía bên phải (xem thêm ghi chú phát hành Gutenberg 11.7), trừ khi các loại khối khác đã được thêm vào menu.

Nhấp vào nút Chỉnh sửa trong thanh công cụ khối Liên kết Điều hướng sẽ chuyển đổi một mục menu thành một liên kết tùy chỉnh. Điều này cho phép bạn thêm, chỉnh sửa, sắp xếp lại và xóa các mục riêng lẻ.

Bạn cũng có thể chuyển đổi liên kết thành các khối bằng cách nhấp vào nút Chuyển đổi trên thanh công cụ khối. Điều này cho phép bạn thêm các khối cụ thể trực tiếp vào menu điều hướng.

Khối liên kết tùy chỉnh, khoảng cách, biểu trưng trang web, liên kết trang chủ, biểu tượng xã hội và khối tìm kiếm hiện được hiển thị cho người dùng khi thêm khối vào menu điều hướng.

Trong thanh bên Cài đặt, bạn sẽ tìm thấy một bộ tùy chọn toàn diện để kiểm soát một số khía cạnh của menu điều hướng của bạn.

Bảng điều khiển Bố cục bao gồm các điều khiển để căn chỉnh, định hướng và bao bọc.

Khối Điều hướng cũng có bảng cài đặt Hiển thị được cải tiến với tùy chọn cho menu burger luôn bật.

Bạn cũng có thể tùy chỉnh văn bản và màu nền cho các menu và menu con của mình.

Một bổ sung hữu ích khác gần đây được thêm vào khối Điều hướng là hỗ trợ Block Gap, bổ sung khả năng cho người dùng kiểm soát khoảng cách giữa các mục menu.

Bảng Kiểu chữ cung cấp một tập hợp các điều khiển cho họ phông chữ, giao diện, chiều cao dòng, trang trí và chữ cái. Tất cả các điều khiển này có thể được bật / tắt từ menu thả xuống xuất hiện khi bạn nhấp vào biểu tượng dấu chấm lửng ở bên phải.

Khối điều hướng: Nâng cao

Dữ liệu khối điều hướng được lưu trữ trong cơ sở dữ liệu bằng cách sử dụng loại bài đăng chuyên dụng wp_navigation .

Tại sao điều này lại thú vị đối với người dùng WordPress và nó hoạt động như thế nào?

Giả sử bạn đã tạo menu điều hướng bao gồm hai liên kết tùy chỉnh và hộp tìm kiếm. Với chủ đề Twenty Twenty-Two được cài đặt, menu có thể trông như thể hiện trong hình ảnh sau:

Khối Điều hướng ở trên được lưu trữ trong cơ sở dữ liệu dưới dạng bài đăng wp_navigation như sau:

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Việc lưu trữ nội dung khối Điều hướng vào cơ sở dữ liệu cho phép người dùng sử dụng các menu điều hướng giống nhau trên các chủ đề khối khác nhau. Nếu menu không hiển thị ngay lập tức, bạn chỉ cần chọn menu điều hướng mong muốn trong bộ chọn menu (xem thêm vấn đề # 36087 và PR # 36178).

Hình ảnh sau đây cho thấy menu ở trên với chủ đề Twenty Twenty-One Blocks:

Khối Điều hướng đã trải qua một số lần lặp lại. Bạn có thể đi sâu hơn vào từng cách triển khai trong ghi chú phát hành Gutenberg 11.7, 11.8 và 11.9.

Bạn cũng có thể đọc thêm về khối Điều hướng trong Ghi chú của nhà phát triển khối Điều hướng mới và bài viết hỗ trợ khối Điều hướng.
[CTA]

Thư viện Hình ảnh, Hình ảnh Nổi bật và Biểu tượng Trang web

Với mục tiêu làm cho hình ảnh hoạt động nhất quán hơn trên các ngữ cảnh khác nhau, WordPress 5.9 cung cấp các tính năng và cải tiến mới cho một số khối. Khối Thư viện đã được sửa đổi hoàn toàn, trong khi các thay đổi khác nhau đối với khối Hình ảnh Nổi bật và Biểu tượng Trang web cung cấp cho người dùng khả năng kiểm soát chi tiết hơn đối với các hình ảnh tương ứng.

Khối thư viện được cấu trúc lại

Trong WordPress 5.8, khả năng tùy chỉnh sự xuất hiện của hình ảnh trong các thư viện đã bị hạn chế phần nào. Không có cách nào để thay đổi kiểu ảnh hoặc áp dụng bộ lọc duotone.

Ngoài ra, các tính năng quan trọng bị thiếu trong hình ảnh thư viện, chẳng hạn như thêm liên kết tùy chỉnh vào từng hình ảnh trong thư viện.

Để hiểu rõ hơn lý do của sự bất đối xứng này giữa các hình ảnh trong hai ngữ cảnh khác nhau của một hình ảnh đơn lẻ và một hình ảnh trong thư viện, hãy cùng xem khối Thư viện trong Chế độ xem mã trong WordPress 5.8:

Lưu ý rằng chi tiết hình ảnh chỉ được lưu trữ trong dấu phân cách khối Thư viện (xem thêm Khối Gutenberg là gì?).

Điều này làm cho hình ảnh riêng lẻ hoạt động khác với hình ảnh trong phòng trưng bày.

Để làm cho hình ảnh hoạt động nhất quán trong hai bối cảnh khác nhau, WordPress 5.9 giới thiệu một khối Thư viện được cấu trúc lại hoàn toàn, hiện hoạt động giống như một vùng chứa cho một bộ sưu tập các phần tử hình thay vì một danh sách hình ảnh không có thứ tự.

Trong WordPress 5.9, các hình ảnh thư viện được lồng vào nhau bằng cách sử dụng API innerBlocks cốt lõi và mỗi hình ảnh lưu trữ tập hợp chi tiết của riêng nó, giống hệt như các hình ảnh riêng lẻ.

Đó là một cải tiến tuyệt vời, vì hình ảnh khối Thư viện hiện hỗ trợ các chức năng tương tự có sẵn trong các khối Hình ảnh cốt lõi , chẳng hạn như kích thước hình ảnh và bộ lọc duotone, cũng như các tính năng khối tiêu chuẩn, chẳng hạn như kéo và thả, sao chép, sao chép và xóa các chức năng .

Với khối Thư viện mới, bạn sẽ có thể tạo kiểu hình ảnh riêng lẻ. Điều này mang lại cho bạn nhiều cơ hội tùy chỉnh.

Hình ảnh bên dưới hiển thị nhiều ảnh trong một thư viện, mỗi ảnh có các góc được bo tròn khác nhau:

Bạn cũng có thể sử dụng các bộ lọc duotone khác nhau trên các hình ảnh khác nhau trong cùng một thư viện.

Và, tất nhiên, bạn có thể chỉ định một lớp CSS cụ thể cho mỗi hình ảnh, điều này cung cấp cho bạn những siêu năng lực bổ sung để thêm bất kỳ tùy chỉnh nào bạn cần vào hình ảnh thư viện của mình.

Để có cái nhìn sâu hơn về khối Thư viện mới, hãy xem thêm Ghi chú tái cấu trúc của khối Thư viện, các cải tiến sắp tới của Khối thư viện và ghi chú phát hành Gutenberg 11.4.

Cải tiến hình ảnh nổi bật

Một số cải tiến cũng đã được đưa vào khối Hình ảnh nổi bật.

Kiểm soát kích thước cơ bản

Khối Hình ảnh Nổi bật hiện có bảng cài đặt Thứ nguyên mới cung cấp các điều khiển chiều cao, chiều rộng và tỷ lệ.

Kiểm soát thứ nguyên cũng áp dụng cho các hình ảnh nổi bật trong các khối Vòng lặp truy vấn, như thể hiện trong hình ảnh sau:

Bộ lọc Duotone trên Hình ảnh Nổi bật

Chúng tôi đã đề cập ở trên rằng bây giờ chúng tôi có thể áp dụng bộ lọc duotone trong các hình ảnh được bao bọc trong khối Thư viện được cấu trúc lại mới.

Giờ đây, bắt đầu với WordPress 5.9, các bộ lọc duotone cũng có sẵn trong các khối Hình ảnh nổi bật trong bất kỳ ngữ cảnh nào, từ các mẫu bài đăng và trang cho đến các khối Vòng lặp truy vấn.

Tính năng này mở ra cánh cửa cho sự kết hợp màu sắc sáng tạo và nhất quán trên toàn bộ trang web.

Cắt hình ảnh trong biểu trưng trang web

Trước WordPress 5.9 (và Gutenberg 11.6), hình ảnh logo chỉ có thể được chỉnh sửa trước khi tải lên. Với WordPress 5.9, bạn có thể cắt, thu phóng và xoay hình ảnh được sử dụng trong khối Biểu trưng Trang web trực tiếp từ thanh công cụ khối.

Công cụ thiết kế mới, khối và cải tiến giao diện người dùng

Mười một phiên bản Gutenberg được hợp nhất thành cốt lõi với WordPress 5.9, cung cấp rất nhiều tính năng, cải tiến và sửa lỗi mà không thể đề cập hết chúng trong một bài viết.

Vì vậy, chúng tôi đã chọn một số trong số chúng tôi thấy đáng chú ý nhất. Để có tổng quan sâu hơn về các tính năng và cải tiến đó, bạn cũng có thể muốn xem các bài đăng phát hành cho Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 và 11.9.

Như đã nói, phần này sẽ bao gồm các thay đổi sau:

Biên giới hỗ trợ giao diện người dùng

Bắt đầu với WordPress 5.9, khi theme.json khai báo cài đặt border và một khối tuyên bố hỗ trợ đường viền thông qua API hỗ trợ khối, bảng điều khiển cài đặt mới sẽ cung cấp các điều khiển cho bán kính, chiều rộng, kiểu, màu và đơn vị đường viền (xem thêm Gutenberg 11.1) .

Khối Nhóm cốt lõi là một ví dụ điển hình về việc nâng cao giao diện người dùng hữu ích này. Tệp block.json của khối Nhóm bây giờ bao gồm các khai báo supports sau:

{ ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Tính năng này cho phép người dùng tạo các hiệu ứng đồ họa tuyệt vời trên trang web của họ với nỗ lực tối thiểu. Bạn có thể thấy nó hoạt động với chủ đề Twenty Twenty-Two mới.

Trong một bài đăng hoặc trang mới, hãy tạo một khối Nhóm mới và chọn nó. Bạn sẽ thấy bảng điều khiển Viền trong thanh bên cài đặt khối. Thay đổi chiều rộng và kiểu đường viền nếu cần và tận hưởng kết quả.

Nếu bạn là nhà phát triển chủ đề và muốn thêm tính năng này vào các chủ đề của mình, hãy mở tệp theme.json của bạn và khai báo hỗ trợ đường viền như được hiển thị trong mã sau:

{ "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Lưu tệp và quay lại bảng điều khiển WordPress của bạn. Trong một bài đăng hoặc trang mới, hãy tạo một khối Nhóm mới và chọn nó. Bây giờ bạn sẽ thấy bảng điều khiển Viền trong thanh bên cài đặt khối (xem thêm theme.json thử nghiệm này).

Cải tiến Chế độ xem Danh sách

Với WordPress 5.9, Chế độ xem danh sách đã được cải thiện và hiện có tính năng kéo và thả, các phần có thể thu gọn và neo HTML.

Kéo và thả trong Chế độ xem danh sách

Như đã đề cập trong yêu cầu kéo # 33320, kéo và thả đã được triển khai trong Chế độ xem danh sách nhưng đã bị vô hiệu hóa do các vấn đề về hiệu suất.

Bắt đầu với WordPress 5.9, tính năng kéo và thả trong Chế độ xem danh sách đã được triển khai lại. Bạn lại có thể kéo và thả các khối và nhóm khối ở bất kỳ đâu trong Chế độ xem danh sách. Đây là một cải tiến lớn về khả năng sử dụng của trình chỉnh sửa, vì nó cho phép bạn di chuyển các khối và nhóm khối xung quanh các trang của mình một cách nhanh chóng và dễ dàng. Nó là công cụ trong các bài báo và trang dạng dài và quản lý các cấu trúc phức tạp của các khối lồng nhau.

Chế độ xem danh sách Các phần có thể thu gọn

Một cải tiến đáng kể khác đối với Chế độ xem danh sách là khả năng mở rộng / thu gọn các phần của các khối lồng nhau. Điều này cho phép bạn dễ dàng điều hướng các cấu trúc khối phức tạp, mở rộng các nhóm khối đơn lẻ trong khi vẫn thu gọn tất cả các phần còn lại.

Bạn cũng có thể mở rộng và thu gọn các phần Chế độ xem danh sách bằng cách sử dụng mũi tên trái và phải.

HTML Anchors trên các mục trong chế độ xem danh sách

Tuy nhiên, một cải tiến hữu ích khác là khả năng thêm neo HTML vào các khối của bạn trong Chế độ xem danh sách và xem chúng trong nháy mắt.

Block Gap Spacing Control

Được giới thiệu lần đầu trong Gutenberg 11.4 và hiện đã được hợp nhất thành lõi với WordPress 5.9, điều khiển Khoảng cách khối mới cho phép bạn đặt khoảng cách tùy chỉnh giữa các mục trong một khối. Dưới đây, bạn có thể xem bản xem trước với các giá trị giãn cách khối khác nhau trong khối Cột với chủ đề mặc định Twenty Twenty-Two:

Khoảng cách khoảng cách ban đầu có sẵn cho các khối cụ thể, bao gồm các nút, hình ảnh, cột, tiêu đề và điều hướng, nhưng hỗ trợ sẽ được mở rộng cho nhiều khối hơn trong tương lai.

Chủ đề phải bật Khoảng cách khoảng cách trong theme.json bằng cách sử dụng thuộc tính ngoại hình mới. Bạn có thể đọc thêm về các công cụ tạo ngoại hình trong phần đi sâu vào Twenty Twenty-Two của chúng tôi. Xem thêm các yêu cầu kéo # 33991 và # 34630.

Xem trước URL phong phú để kiểm soát liên kết

Bằng cách tận dụng điểm cuối chi tiết url REST mới, điều khiển Liên kết hiện cung cấp bản xem trước URL phong phú hiển thị chi tiết cho tài nguyên mục tiêu liên kết.

Trong lần triển khai đầu tiên, tính năng này chỉ có sẵn trong thành phần văn bản đa dạng thức của Post Editor. Tại thời điểm viết bài này, nó cũng có sẵn trong Trình chỉnh sửa trang web, nhưng không có trong trình chỉnh sửa Điều hướng và tiện ích.

Tạo trang từ cửa sổ bật lên liên kết

WordPress 5.9 cũng có giao diện người dùng liên kết nội tuyến được cải tiến, hiển thị một nút hoàn toàn mới để tạo các trang mới trực tiếp từ cửa sổ bật lên liên kết nội tuyến. Tính năng này chỉ có sẵn trong Trình chỉnh sửa bài đăng.

Các cải tiến đối với Khối tìm kiếm

Khối Tìm kiếm hiện hiển thị cài đặt nút và màu đường viền.

Giờ đây, bạn cũng có thể tùy chỉnh màu nền và màu văn bản, màu đường viền và bán kính.

Điều khiển mới cho kích thước khối

Bảng cài đặt Thứ nguyên mới hiện có sẵn để người dùng kiểm soát không gian bị chiếm bởi một khối trên trang. Bảng điều khiển phải bao gồm các điều khiển chiều cao, chiều rộng, khoảng đệm, lề và có thể cả căn chỉnh, nhưng không phải tất cả các thuộc tính đều có sẵn cho mọi khối.

Các nhà phát triển khối sẽ tìm thấy thành phần <DimensionControl /> được ghi lại trên GitHub, nhưng lưu ý rằng nó vẫn được đánh dấu là một tính năng thử nghiệm và có thể có những thay đổi lớn tại thời điểm viết bài này.

Một khối nhóm tiện ích con mới đã được thêm vào màn hình tiện ích con

Một khối Nhóm tiện ích con mới hiện có sẵn trong trình chỉnh sửa tiện ích con dựa trên khối. Khối mới nhất cho phép bạn thêm một nhóm khối trong tiện ích con có tiêu đề trong Trình chỉnh sửa tiện ích và Trình tùy chỉnh của chủ đề cổ điển.

Bạn có thể đọc thêm về trình chỉnh sửa tiện ích trong Trình chỉnh sửa tiện ích dựa trên khối và Tiện ích chặn trong Trình tùy chỉnh.

Bố cục Flex và Khối hàng mới

Ban đầu được giới thiệu như một tính năng thử nghiệm với Gutenberg 11.2, bố cục flex đã được mở rộng thành một số khối, bao gồm các khối Liên kết xã hội và khối Nhóm.

Một số khối, chẳng hạn như khối Liên kết xã hội, hiện cung cấp một tập hợp các điều khiển thanh công cụ và cài đặt thanh bên cho phép bạn tùy chỉnh bố cục linh hoạt.

Chức năng tương tự này có sẵn trong khối Điều hướng và khối Hàng, một biến thể mới của khối Nhóm được giới thiệu với Gutenberg 11.5.

Hình ảnh sau đây cho thấy khối Hàng với các điều khiển bố cục trong thanh bên cài đặt:

Dưới đây, bạn có thể thấy cùng một khối Hàng trên giao diện người dùng và trong công cụ kiểm tra của Chrome.

Cải tiến mẫu khối

Được giới thiệu lần đầu với WordPress 5.5, các mẫu khối cho phép người dùng WordPress đưa các cấu trúc phức tạp sẵn sàng sử dụng của các khối lồng nhau vào nội dung của họ chỉ với một vài cú nhấp chuột.

Bây giờ, WordPress 5.9 chuyển mọi thứ lên một bước tiến tới dân chủ hóa thiết kế và trao quyền cho người dùng bằng cách giới thiệu một số cải tiến cho hệ thống mẫu khối.

Vì vậy, có gì mới với các mẫu khối trong WordPress 5.9?

Các mẫu nổi bật từ Thư mục mẫu

Trình chèn khối hiện hiển thị các Mẫu khối nổi bật được truy xuất động từ Thư mục mẫu, cung cấp cho người dùng cách nhanh chóng và dễ dàng để tìm các mẫu phổ biến để sử dụng trong nội dung của họ.

Tương tự, khi các mẫu đi trực tiếp vào bảng điều khiển WordPress, các nhà phát triển WordPress nên được khuyến khích tạo và xuất bản ngày càng nhiều mẫu theo thời gian, dẫn đến khả năng thiết kế ngày càng nâng cao cho người dùng.

Trình khám phá mẫu toàn màn hình mới

Khi số lượng các mẫu khối có sẵn trong Thư mục Mẫu tiếp tục tăng lên và nhiều chủ đề hơn sử dụng chúng, WordPress 5.9 giới thiệu một giao diện điều hướng mẫu khối mới: Pattern Explorer.

Nút Khám phá mới hiện mở ra một phương thức toàn màn hình cho phép người dùng duyệt, tìm kiếm và chèn các mẫu khối chỉ với một vài cú nhấp chuột. Kết quả là trải nghiệm người dùng được cải thiện.

Bạn cũng sẽ tìm thấy các ghi chú bổ sung và một số ví dụ về mẫu khối trong phần đi sâu của chúng tôi về chủ đề WordPress Twenty Twenty-Two.

Nếu bạn quan tâm và muốn tìm hiểu thêm, hãy nghe podcast Tập 16 và 21 của Josepha Haden Chomphosy và xem video Khám phá WordPress 5.9 trên YouTube của Anne McCarthy.

Chủ đề Hai mươi Hai mươi Hai và Chủ đề Khối WordPress

Với WordPress 5.9, bạn không cần phải cài đặt plugin Gutenberg nữa để kích hoạt Chỉnh sửa trang web đầy đủ trên trang web WordPress của mình. Bạn chỉ cần cho phép một chủ đề khối để tận dụng tất cả các tính năng của FSE.

Ngoài ra, WordPress 5.9 đã được đóng gói với một chủ đề mặc định hoàn toàn mới, Twenty Twenty-Two, và nó là một công cụ thay đổi trò chơi vì Twenty Twenty-Two là chủ đề khối mặc định đầu tiên từ trước đến nay.

Twenty Twenty-Two là một chủ đề rất linh hoạt và có thể tùy chỉnh. Nó cung cấp một hộp cát hoàn hảo để thử quy trình chỉnh sửa mẫu mới, các khối mới, cải tiến giao diện và tất cả các tính năng chỉnh sửa trang web được thêm vào cốt lõi, bắt đầu với WordPress 5.9.

Như đã đề cập ở trên, tất cả những gì bạn cần làm là cài đặt và kích hoạt một chủ đề khối, chẳng hạn như Twenty Twenty-Two. Khi chủ đề đang hoạt động, một mục menu Trình chỉnh sửa (beta) mới sẽ xuất hiện trong menu quản trị bảng điều khiển WordPress.

Giao diện Trình chỉnh sửa trang hiện có một Luồng chỉnh sửa trang được cải tiến. Từ giao diện chỉnh sửa, bạn sẽ có thể chỉnh sửa trực quan trang chủ, các mẫu và các phần mẫu của trang web, cũng như truy cập vào giao diện Global Styles.

Khi bạn kích hoạt một chủ đề khối, bạn sẽ không tìm thấy Công cụ tùy chỉnh. Đó là bởi vì Trình tùy chỉnh không hỗ trợ các chủ đề khối, mà chỉ sử dụng Trình chỉnh sửa trang web. Đó cũng là lý do tại sao bạn không thể xem trước các chủ đề khối không hoạt động .

Vì vậy, kể từ WordPress 5.9, điểm truy cập vào Trình tùy chỉnh không còn khả dụng trong menu quản trị khi một chủ đề khối đang hoạt động (trừ khi bạn đang sử dụng một plugin sử dụng nó).

Nếu bạn vẫn bị ràng buộc với các chủ đề truyền thống và lo lắng về khả năng tương thích ngược, hãy yên tâm: Bạn có thể tiếp tục sử dụng chủ đề của mình.

Bạn hiện có bốn danh mục chủ đề khác nhau để lựa chọn:

• Chủ đề khối : Chủ đề được thiết kế cho FSE
• Chủ đề chung : Chủ đề hoạt động với cả Trình tùy chỉnh và Trình chỉnh sửa trang web
• Chủ đề kết hợp : Các chủ đề cổ điển hỗ trợ các tính năng FSE như theme.json
• Chủ đề cổ điển : Chủ đề với các mẫu PHP, functions.php, v.v.

Do tác động của các chủ đề khối có thể sẽ ảnh hưởng đến hệ sinh thái WordPress, chúng tôi có toàn bộ bài viết về Twenty Twenty-Two và các chủ đề khối WordPress. Hãy chắc chắn kiểm tra nó để có cái nhìn tổng quan sâu hơn.

Cải tiến hiệu suất

Tại Kinsta, chúng tôi bị ám ảnh bởi tốc độ trang web. Đó là lý do tại sao chúng tôi rất vui mừng về những cải tiến hiệu suất đến với WordPress 5.9.

Những cải tiến này sẽ ảnh hưởng đến một số khu vực của CMS, từ trình chỉnh sửa khối đến các chủ đề chặn, tải chậm và hơn thế nữa. Hãy đi sâu vào.

Các cải tiến của Chặn Inserter

Kể từ WordPress 5.9, các loại khối, mẫu và danh mục được hiển thị một cách lười biếng trong Trình chèn khối. Trình duyệt tải nội dung ưu tiên cao hơn trước, mang lại cho người dùng trải nghiệm chỉnh sửa mượt mà hơn và cải thiện hiệu suất.

Các cải tiến hiệu suất đáng chú ý hơn nữa trong ngữ cảnh của trình chỉnh sửa khối ảnh hưởng đến các khối có thể sử dụng lại và Chế độ xem danh sách.

Tải ít CSS hơn

Đối với giao diện người dùng, WordPress 5.9 cắt giảm đáng kể lượng CSS được tải bởi các chủ đề khối, dẫn đến việc tải các trang nhanh hơn đáng kể.

Cải tiến chính cần được lưu ý trong bối cảnh này là sự ra đời của cơ chế cài đặt và kiểu theme.json , ngăn chặn các chủ đề sử dụng các bảng định kiểu lớn, bao gồm hàng trăm khai báo CSS. Số lượng mã CSS mà một chủ đề sử dụng hiện đã được giảm xuống một số thuộc tính tùy chỉnh CSS mà bất kỳ loại khối nào cũng có thể sử dụng lại.

Cải thiện hiệu suất tải lười biếng

Tải hình ảnh lười biếng lần đầu tiên được giới thiệu trong WordPress 5.5. Bắt đầu từ WordPress 5.7, chức năng tải chậm đã được mở rộng sang iframe, cho phép chủ sở hữu trang web xây dựng trang web nhanh hơn và cải thiện SEO của họ.

Dù sao, sau một phân tích về Sơn có nội dung lớn nhất (LCP), hóa ra là việc gán thuộc tính loading="lazy" cho tất cả các hình ảnh và iframe trên trang gây ra giảm hiệu suất một chút.

Đơn giản chỉ cần bỏ qua thuộc tính loading="lazy" không phải là một giải pháp vì làm như vậy sẽ dẫn đến việc mất các lợi thế rõ ràng của việc tải lười biếng.

Giải pháp tối ưu sẽ là chỉ bỏ qua thuộc tính loading="lazy" trên các hình ảnh xuất hiện trong màn hình đầu tiên. Tuy nhiên, vì thuộc tính loading="lazy" được chỉ định ở phía máy chủ, nên WordPress không thể xác định chính xác hình ảnh nào được hiển thị trong màn hình đầu tiên. Đó là thứ chủ yếu phụ thuộc vào chủ đề đang hoạt động.

Bây giờ, như một giải pháp cân bằng, bắt đầu với WordPress 5.9, thuộc tính loading="lazy" không được áp dụng cho hình ảnh nội dung đầu tiên hoặc khung nội tuyến. Một phân tích được thực hiện trên 50 chủ đề WordPress phổ biến cho thấy rằng giải pháp này dẫn đến cải thiện hiệu suất đáng kể và tải trang nhanh hơn tới 30%.

Felix Arntz giải thích cách nó hoạt động:

… Để cải thiện hiệu suất ngay lập tức mà không yêu cầu nhà phát triển tùy chỉnh hành vi, WordPress giờ đây sẽ bỏ qua “hình ảnh nội dung hoặc khung nội tuyến” đầu tiên trên trang khỏi trạng thái tải chậm. Thuật ngữ “hình ảnh nội dung hoặc khung nội tuyến” ở đây biểu thị bất kỳ hình ảnh hoặc khung nội tuyến nào được tìm thấy trong nội dung của bất kỳ bài đăng nào trong vòng lặp truy vấn chính hiện tại cũng như bất kỳ hình ảnh nổi bật nào của bài đăng đó. Điều này áp dụng cho cả nội dung “số ít” và “lưu trữ”: Trong ngữ cảnh “số ít”, hình ảnh hoặc khung nội tuyến đầu tiên của (duy nhất) bài đăng không được tải chậm, trong khi trong ngữ cảnh “lưu trữ”, hình ảnh hoặc khung nội tuyến đầu tiên của bài đăng đầu tiên trong truy vấn không được tải chậm.

Các nhà phát triển chủ đề hiện có thể sử dụng bộ lọc wp_omit_loading_attr_threshold mới để thay đổi số lượng hình ảnh / khung nội tuyến được bỏ qua khi tải chậm.

Nhiều biểu định kiểu trên mỗi khối

Các nhà phát triển khối và chủ đề có thể đăng ký nhiều bảng định kiểu trên mỗi khối và tải các kiểu từ các khối khác khi cần. Điều này cho phép tải các biểu định kiểu tùy thuộc vào nội dung trang, ngăn các chủ đề tải các biểu định kiểu lớn trên mọi trang.

Theo Ari Stathopoulos:

Các khối bây giờ sẽ có thể đăng ký nhiều bảng định kiểu và tải các kiểu từ các khối khác khi cần. Chủ đề sẽ có thể thêm các kiểu trên cơ sở mỗi khối thay vì tải các bảng định kiểu nguyên khối được ép buộc ở bất kỳ đâu. Điều này có tác động lớn hơn đến các chủ đề khối nơi tải biểu định kiểu được tối ưu hóa dựa trên nội dung trang và bố cục, nhưng cũng có thể được sử dụng bởi các chủ đề cổ điển.

Các tính năng bổ sung cho nhà phát triển

Ngoài nhiều tính năng và cải tiến giao diện người dùng đã được thảo luận cho đến nay, WordPress 5.9 cũng giới thiệu một số tính năng dành cho các nhà phát triển.

Một thuộc tính mới để khóa các khối

Các nhà phát triển chặn hiện có thể ngăn người dùng di chuyển hoặc xóa các khối riêng lẻ bằng cách thêm thuộc tính lock trong cài đặt khối:

{ ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Khi bật tính năng này, người dùng có thể chỉnh sửa nội dung khối, nhưng không thể di chuyển khối trên trang hoặc xóa nó khỏi khung trình chỉnh sửa. Hình ảnh sau đây cho thấy một khối tùy chỉnh với bộ điều khiển thanh công cụ tiêu chuẩn:

Việc xác định thuộc tính lock , như đã thấy trong đoạn mã trên, ẩn các trình di chuyển khối và các điều khiển Di chuyển đến và Xóa khỏi thanh công cụ khối. Hình ảnh dưới đây cho thấy kết quả cuối cùng trên màn hình:

Bạn cũng có thể khóa một khối cụ thể trong một mẫu khối. Ví dụ: hãy xem thêm Khóa khối trong WordPress 5.9.

API mới để truy cập các kiểu và cài đặt chung

WordPress 5.9 giới thiệu một API công khai PHP mới để đọc dữ liệu từ theme.json .

Đọc Cài đặt và Kiểu từ theme.json

Có hai chức năng mới để đọc dữ liệu từ các phần settings và styles được khai báo trong theme.json :

wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path là một mảng liệt kê đường dẫn đến cài đặt được chỉ định
• $context là một mảng thiết lập ngữ cảnh cho những dữ liệu đó. Các nhà phát triển có thể đọc từ một phần cài đặt khối cụ thể – ví dụ: array( 'block_name' => 'core/paragraph' ) . Khóa orygin được đặt thành base cho phép bỏ qua dữ liệu tùy chỉnh do người dùng lưu.

Đoạn mã mẫu sau sẽ trả về giá trị cài đặt contentSize . Trong Twenty Twenty-Two, nó sẽ là 650px :

wp_get_global_settings( array( 'layout', 'contentSize' ) );

Bằng cách đặt ngữ cảnh, bạn có thể truy xuất các kiểu cho các khối cụ thể. Đoạn mã sau cho biết cách truy xuất giá trị bán kính đường viền cho khối core/button :

function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

Hàm trên trả về giá trị thuộc tính bắt buộc trong khi xem xét cài đặt mặc định, cài đặt chủ đề và dữ liệu người dùng. Giá trị tùy chỉnh sẽ được cung cấp nếu người dùng định cấu hình bán kính viền nút trong giao diện Kiểu dáng chung.

Để bỏ qua dữ liệu người dùng, bạn sẽ sử dụng mã sau:

function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Lấy biểu định kiểu đã tạo

WordPress 5.9 cũng giới thiệu một chức năng mới để lấy biểu định kiểu từ các kiểu mặc định, chủ đề và tùy chỉnh:

wp_get_global_stylesheet( $types = array() );

$types là danh sách các kiểu cần tạo.

Bạn có thể đọc thêm về API mới trong New API để truy cập vào cài đặt và kiểu chung.

Các tính năng khác dành cho nhà phát triển

Các thay đổi bổ sung của WordPress 5.9 dành cho các nhà phát triển mà bạn có thể muốn biết bao gồm:

• Chặn chủ đề, một cách mới để xây dựng chủ đề trong WordPress 5.9
• Cập nhật cho Cài đặt, Kiểu và theme.json
• Các thay đổi và bộ lọc tập trung vào chủ đề trong WordPress 5.9
• Truy vấn khả năng mới trong WordPress 5.9
• Các thay đổi cốt lõi khác trong WordPress 5.9
• Các thay đổi khác về trình chỉnh sửa khối trong WordPress 5.9
• Kiểm soát nhiều hơn các Khu vực khối bên trong (với tư cách là nhà phát triển khối)

Bản tóm tắt

Chúng tôi sẽ kết thúc bài viết này với một ghi chú nhanh về thị phần WordPress. WordPress hiện có hơn 65% tất cả các trang web có hệ thống quản lý nội dung được biết đến và nằm ở phía bắc của 43% tất cả các trang web .

Những con số này rất ấn tượng, đặc biệt là khi so sánh với các đối thủ cạnh tranh gần nhất với thị phần ít hơn 5%, như Shopify.

Và điều này cũng có nghĩa là bạn không thể bỏ qua sự phát triển của WP CMS. Mỗi phiên bản mới của WordPress đều mang đến những tính năng mới, cải tiến giao diện, cải thiện hiệu suất và WordPress 5.9 cũng không phải là ngoại lệ. Tất cả những gì bạn cần để kiểm tra các tính năng mới là một chủ đề khối, như chủ đề mặc định Twenty Twenty-Two mới và bạn sẽ sẵn sàng sử dụng.

Cho bạn, ngay bây giờ! Bạn đã sẵn sàng chuyển sang chủ đề chặn và FSE chưa? Và những thay đổi yêu thích của bạn sắp tới với WordPress 5.9 là gì?