Một trong những mục tiêu chính của Trình chỉnh sửa trang web WordPress (và, vâng, đó hiện là "tên chính thức) là để di chuyển kiểu dáng khối cơ bản từ CSS sang JSON có cấu trúc. Các tệp JSON có thể đọc được bằng máy, giúp Trình chỉnh sửa trang web dựa trên JavaScript có thể sử dụng tệp này để định cấu hình kiểu chung của chủ đề trực tiếp trong WordPress.
Nó không phải là tất cả các cách đó chưa! Nếu chúng ta nhìn vào chủ đề mặc định của Hai Mươi Hai Mươi Hai (TT2), có hai vấn đề chính chưa được giải quyết: tương tác kiểu dáng (như :hover, :active, :focus), Và lề và phần đệm của vùng chứa bố cục. Bạn có thể thấy những cái đó đã được sửa tạm thời như thế nào trong TT2 style.css tập tin hơn là làm cho nó vào theme.json tập tin.
WordPress 6.1 đã khắc phục các sự cố đó và điều tôi muốn làm là xem xét cụ thể vấn đề sau. Giờ đây, chúng ta có các kiểu được định dạng JSON cho lề và phần đệm của vùng chứa bố cục, điều này mở ra cho chúng ta các cách linh hoạt và mạnh mẽ hơn để xác định khoảng cách trong bố cục chủ đề của chúng tôi.
Chúng ta đang nói về loại khoảng cách nào?
Trước hết, chúng tôi đã có phần đệm cấp gốc đó là một cách thú vị để mô tả phần đệm trên yếu tố. Điều đó thật tuyệt vì nó đảm bảo khoảng cách nhất quán trên một phần tử được chia sẻ trên tất cả các trang và bài đăng.
Nhưng còn nhiều điều hơn thế nữa bởi vì bây giờ chúng ta có một cách để các khối bỏ qua phần đệm đó và tự căn chỉnh theo chiều rộng đầy đủ. Đó là nhờ sắp xếp nhận biết đệm đó là một tính năng chọn tham gia mới trong theme.json. Vì vậy, ngay cả khi bạn có phần đệm cấp gốc, bạn vẫn có thể cho phép một hình ảnh (hoặc một số khối khác) thoát ra và có chiều rộng đầy đủ.
Điều đó đưa chúng ta đến một thứ khác mà chúng ta nhận được: bố trí hạn chế. Ý tưởng ở đây là bất kỳ khối nào được lồng trong bố cục đều tôn trọng chiều rộng nội dung của bố cục — là cài đặt chung — và không chảy ra bên ngoài bố cục. Chúng tôi có thể ghi đè hành vi đó trên cơ sở từng khối bằng cách sắp xếp, nhưng chúng tôi sẽ giải quyết vấn đề đó.
Hãy bắt đầu với…
phần đệm cấp gốc
Một lần nữa, điều này không phải là mới. Chúng tôi đã có khả năng đặt phần đệm trên yếu tố trong theme.json kể từ khi thử nghiệm Plugin Gutenberg đã giới thiệu nó trong phiên bản 11.7. Chúng tôi đặt nó trên styles.spacing đối tượng, nơi chúng ta có margin và padding các đối tượng để xác định khoảng cách trên cùng, bên phải, dưới cùng và bên trái trên cơ thể:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Đây là một thiết lập toàn cầu. Vì vậy, nếu chúng ta mở DevTools và kiểm tra phần tử, chúng ta sẽ thấy các kiểu CSS sau:
body {
margin-top: 60px;
margin-right: 30px;
margin-bottom: 60px;
margin-left: 30px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}Mát mẻ. Nhưng vấn đề ở đây là làm thế nào trên thế giới chúng ta có thể cho phép một số khối thoát ra khỏi khoảng cách đó để lấp đầy toàn màn hình, từ cạnh này sang cạnh khác. Đó là lý do tại sao khoảng cách ở đó, phải không? Nó giúp ngăn chặn điều đó xảy ra!
Nhưng thực sự có rất nhiều trường hợp bạn có thể muốn thoát ra khỏi khoảng cách đó trong một trường hợp một lần khi làm việc trong Trình chỉnh sửa khối. Giả sử chúng tôi đặt một khối Hình ảnh trên một trang và chúng tôi muốn nó có chiều rộng đầy đủ trong khi phần còn lại của nội dung tôn trọng phần đệm cấp gốc?
Đi vào…
Sắp xếp nhận biết đệm
Trong khi cố gắng tạo chủ đề WordPress mặc định đầu tiên xác định tất cả các kiểu trong theme.json tập tin, nhà thiết kế chính Kjell Reigstad minh họa các khía cạnh thách thức của việc thoát ra khỏi phần đệm cấp gốc trong phần này Sự cố GitHub.
Các tính năng mới trong WordPress 6.1 đã được tạo để giải quyết vấn đề này. Hãy đi sâu vào những điều tiếp theo.
useRootPaddingAwareAlignments
A mới useRootPaddingAwareAlignments property được tạo ra để giải quyết vấn đề. Nó thực sự được giới thiệu lần đầu tiên trong plugin Gutenberg v13.8. Các yêu cầu kéo ban đầu là một mồi tốt đẹp về cách nó hoạt động.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},Ngay lập tức, lưu ý rằng đây là một tính năng mà chúng tôi phải chọn tham gia. Thuộc tính được đặt thành false theo mặc định và chúng tôi phải đặt nó một cách rõ ràng true để kích hoạt nó. Cũng lưu ý rằng chúng ta có appearanceTools đặt thành true là tốt. Điều đó cho phép chúng tôi kiểm soát giao diện người dùng trong Trình chỉnh sửa trang web để tạo kiểu cho đường viền, màu liên kết, kiểu chữ và, vâng, khoảng cách bao gồm lề và phần đệm.
Cài đặt appearanceTools đặt thành true tự động chọn các khối vào lề và phần đệm mà không cần phải thiết lập một trong hai settings.spacing.padding or setting.spacing.margin đến true.
Khi chúng tôi kích hoạt useRootPaddingAwareAlignments, chúng tôi được cung cấp các thuộc tính tùy chỉnh với các giá trị đệm gốc được đặt trên phần tử ở mặt trước. Thật thú vị, nó cũng áp dụng phần đệm cho .editor-styles-wrapper class để khoảng cách được hiển thị khi làm việc trong Block Editor phía sau. Tuyệt đấy!
Tôi đã có thể xác nhận các thuộc tính tùy chỉnh CSS đó trong DevTools trong khi tìm hiểu xung quanh.
Cho phép useRootPaddingAwareAlignments cũng áp dụng phần đệm trái và phải cho bất kỳ khối nào hỗ trợ các giá trị chiều rộng “nội dung” và “rộng” trong hình ảnh Kiểu toàn cầu ở trên. Chúng ta cũng có thể định nghĩa các giá trị đó trong theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Nếu cài đặt Kiểu chung khác với cài đặt được xác định trong theme.json, thì Kiểu chung sẽ được ưu tiên. Bạn có thể tìm hiểu tất cả về cách quản lý kiểu chủ đề khối trong bài viết cuối cùng của tôi.
contentSizelà chiều rộng mặc định cho các khối.wideSizecung cấp tùy chọn bố cục “rộng” và thiết lập một cột rộng hơn để kéo dài các khối.
Vì vậy, ví dụ mã cuối cùng đó sẽ cung cấp cho chúng ta CSS sau:
/* The default content container */
.wp-container-[id] > * {
max-width: 640px;
margin-left: auto !important;
margin-right: auto !important;
}
/* The wider content container */
.wp-container-[id] > .alignwide {
max-width: 1000px;
}[id] cho biết một số duy nhất được tạo tự động bởi WordPress.
Nhưng hãy đoán xem chúng ta còn nhận được gì nữa? Căn chỉnh đầy đủ là tốt!
.wp-container-[id] .alignfull {
max-width: none;
}Thấy không? Bằng cách kích hoạt useRootPaddingAwareAlignments và xác định contentSize và wideSize, chúng tôi cũng nhận được một lớp CSS căn chỉnh đầy đủ cho tổng số ba cấu hình vùng chứa để kiểm soát độ rộng của các khối được thêm vào các trang và bài đăng.
Điều này áp dụng cho các khối dành riêng cho bố cục sau: Cột, Nhóm, Nội dung bài đăng và Vòng lặp truy vấn.
Kiểm soát bố cục khối
Giả sử chúng ta thêm bất kỳ khối nào dành riêng cho bố cục đã nói ở trên vào một trang. Khi chúng tôi chọn khối, giao diện người dùng cài đặt khối cung cấp cho chúng tôi cài đặt bố cục mới dựa trên settings.layout giá trị chúng tôi xác định trong theme.json (hoặc Giao diện người dùng kiểu toàn cầu).
Chúng ta đang xử lý các khối rất cụ thể ở đây — những khối có thể có các khối khác được lồng vào bên trong. Vì vậy, các cài đặt Bố cục này thực sự là về việc kiểm soát chiều rộng và căn chỉnh của các khối lồng nhau đó. Cài đặt "Khối bên trong sử dụng chiều rộng nội dung" được bật theo mặc định. Nếu chúng ta tắt nó đi, thì chúng ta không có max-width trên thùng chứa và các khối bên trong nó đi từ cạnh này sang cạnh khác.
Nếu chúng ta bật công tắc, thì các khối lồng nhau sẽ tuân theo một trong hai contentWidth or wideWidth giá trị (thêm về điều đó trong một chút). Hoặc chúng ta có thể sử dụng các đầu vào số để xác định tùy chỉnh contentWidth và wideWidth các giá trị trong trường hợp một lần này. Đó là sự linh hoạt tuyệt vời!
khối rộng
Các cài đặt mà chúng ta vừa xem được đặt trên khối chính. Khi chúng tôi đã lồng một khối vào bên trong và chọn nó, chúng tôi có các tùy chọn bổ sung trong khối đó để sử dụng contentWidth, wideWidthhoặc đi hết chiều rộng.
contentWidth cài đặt, được gắn nhãn “Không” trong menu ngữ cảnh, nhưng cũng có thể được đặt thành wideWidth (được gắn nhãn “Chiều rộng”) hoặc “Chiều rộng đầy đủ”.Lưu ý cách WordPress nhân các thuộc tính tùy chỉnh CSS đệm cấp gốc với -1 để tạo lề âm khi chọn tùy chọn “Full width”.
.alignfull class đặt lề âm trên một khối lồng nhau để đảm bảo nó chiếm toàn bộ chiều rộng của chế độ xem mà không xung đột với cài đặt đệm cấp gốc.Sử dụng bố cục hạn chế
Chúng tôi vừa đề cập đến khoảng cách và căn chỉnh mới mà chúng tôi nhận được với WordPress 6.1. Chúng dành riêng cho các khối và bất kỳ khối lồng nhau nào trong các khối. Nhưng WordPress 6.1 cũng giới thiệu các tính năng bố cục mới để có tính linh hoạt và nhất quán hơn nữa trong các mẫu của chủ đề.
Trường hợp điển hình: WordPress đã cơ cấu lại hoàn toàn các loại bố cục Flex và Flow của nó và cung cấp cho chúng tôi một bị hạn chế bố trí loại giúp căn chỉnh bố cục khối trong chủ đề dễ dàng hơn bằng cách sử dụng cài đặt độ rộng nội dung trong Giao diện người dùng kiểu toàn cầu của Trình chỉnh sửa trang.
Bố cục linh hoạt, lưu lượng và hạn chế
Sự khác biệt giữa ba loại bố cục này là kiểu mà chúng xuất ra. Isabel Brison có một bài viết xuất sắc phác thảo một cách độc đáo sự khác biệt, nhưng hãy diễn giải chúng ở đây để tham khảo:
- Bố cục dòng chảy: Thêm khoảng cách dọc giữa các khối lồng nhau trong
margin-blockhướng đi. Các khối lồng nhau đó cũng có thể được căn chỉnh sang trái, phải hoặc ở giữa. - Bố cục hạn chế: Giao dịch chính xác giống như bố cục Dòng, nhưng với các ràng buộc về chiều rộng trên các khối lồng nhau dựa trên
contentWidthvàwideWidthcài đặt (hoặc trongtheme.jsonhoặc Kiểu toàn cầu). - Bố cục linh hoạt: Điều này không thay đổi trong WordPress 6.1. Nó sử dụng Hộp linh hoạt CSS để tạo bố cục chạy theo chiều ngang (trong một hàng) theo mặc định, nhưng cũng có thể chạy theo chiều dọc để các khối xếp chồng lên nhau. Khoảng cách được áp dụng bằng cách sử dụng CSS
gapbất động sản.
Phương tiện chặn kiểu bố cục mới này tạo tên lớp ngữ nghĩa cho mỗi bố cục:
| Lớp bố trí ngữ nghĩa | Loại bố cục | khối được hỗ trợ |
|---|---|---|
.is-layout-flow |
Bố cục dòng chảy | Cột, Nhóm, Nội dung bài đăng và Vòng lặp truy vấn. |
.is-layout-constrained |
Bố cục hạn chế | Cột, Nhóm, Nội dung bài đăng và Vòng lặp truy vấn. |
.is-layout-flex |
Bố cục linh hoạt | Cột, Nút, Biểu tượng Xã hội |
Justin Tadlock có một bài viết sâu rộng về các loại bố cục khác nhau và các lớp ngữ nghĩa, bao gồm các trường hợp sử dụng và ví dụ.
Cập nhật chủ đề của bạn để hỗ trợ bố cục hạn chế
Nếu bạn đang sử dụng chủ đề khối do chính mình tạo, bạn sẽ muốn cập nhật nó để hỗ trợ bố cục hạn chế. Tất cả chỉ cần trao đổi một vài thứ trong theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Đây là những chủ đề khối được phát hành gần đây đã bật cài đặt khoảng cách với useRootPaddingAwareAlignments và có một bản cập nhật theme.json tệp xác định bố cục bị ràng buộc:
Vô hiệu hóa kiểu bố cục
Các kiểu bố cục cơ bản là các tính năng mặc định có trong WordPress 6.1 Core. Nói cách khác, chúng được kích hoạt ngay lập tức. Nhưng chúng ta có thể vô hiệu hóa chúng nếu cần với đoạn mã nhỏ này trong functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Cảnh báo lớn ở đây: cũng vô hiệu hóa hỗ trợ cho các loại bố cục mặc định xóa tất cả kiểu dáng cơ sở cho các bố cục đó. Điều đó có nghĩa là bạn sẽ cần cuộn các kiểu của riêng mình để giãn cách, căn chỉnh và bất kỳ thứ gì khác cần thiết để hiển thị nội dung trong các ngữ cảnh khối và mẫu khác nhau.
Kết thúc
Là một fan hâm mộ tuyệt vời của hình ảnh có chiều rộng đầy đủ, các tính năng căn chỉnh nhận biết phần đệm và bố cục WordPress 6.1 mới có trong WordPress XNUMX là hai trong số những tính năng yêu thích nhất của tôi. Được kết hợp với các công cụ khác bao gồm, kiểm soát lề và đệm tốt hơn, kiểu chữ chất lỏngvà các khối Danh sách và Trích dẫn được cập nhật, trong số những khối khác, là bằng chứng chắc chắn rằng WordPress đang hướng tới trải nghiệm tạo nội dung tốt hơn.
Bây giờ, chúng ta phải chờ xem trí tưởng tượng và sự sáng tạo của các nhà thiết kế và người tạo nội dung thông thường sử dụng những công cụ đáng kinh ngạc này như thế nào và đưa nó lên một tầm cao mới.
Do quá trình lặp lại quá trình phát triển trình chỉnh sửa trang web đang diễn ra, chúng ta phải luôn lường trước một chặng đường khó khăn phía trước. Tuy nhiên, là một người lạc quan, tôi háo hức muốn xem điều gì sẽ xảy ra trong phiên bản WordPress 6.2 sắp tới. Một số điều mà tôi đang theo dõi sát sao là những thứ như tính năng đang được xem xét để đưa vào, hỗ trợ cho định vị dính, tên lớp bố trí mới cho trình bao bọc khối bên trong, tùy chọn căn chỉnh chân trang được cập nhậtvà thêm các tùy chọn bố cục luồng và ràng buộc vào các khối Cover.
T Vấn đề GitHub #44720 liệt kê các cuộc thảo luận liên quan đến bố cục dự kiến cho WordPress 6.2.
Tài nguyên bổ sung
Tôi đã tham khảo và tham khảo rất nhiều nguồn trong khi tìm hiểu tất cả những điều này. Đây là danh sách lớn những điều tôi thấy hữu ích và nghĩ rằng bạn cũng có thể thích thú.
