Các nút tạo kiểu trong Chủ đề khối WordPress

Một lát sau, Ganesh Dahal đã viết một bài đăng ở đây trên CSS-Tricks trả lời một tweet hỏi về việc thêm bóng hộp CSS trên các khối và phần tử WordPress. Có rất nhiều nội dung tuyệt vời trong đó tận dụng các tính năng mới được cung cấp trong WordPress 6.1 cung cấp các điều khiển để áp dụng bóng đổ cho mọi thứ trực tiếp trong Trình chỉnh sửa khối và Giao diện người dùng Trình chỉnh sửa trang.

Ganesh đã chạm nhẹ vào các yếu tố nút trong bài đăng đó. Tôi muốn chọn nó và đi sâu hơn vào các cách tiếp cận để tạo kiểu cho các nút trong chủ đề khối WordPress. Cụ thể, chúng tôi sẽ mở ra một theme.json tệp và chia nhỏ các cách tiếp cận khác nhau để tạo kiểu cho các nút trong lược đồ.

Tại sao các nút, bạn yêu cầu? Đó là một câu hỏi hay, vì vậy hãy bắt đầu với điều đó.

Các loại nút khác nhau

Khi chúng ta nói về các nút trong ngữ cảnh của Trình chỉnh sửa khối WordPress, chúng ta phải phân biệt giữa hai loại khác nhau:

1. Các khối con bên trong khối Buttons
2. Các nút được lồng bên trong khối khác (ví dụ: khối Biểu mẫu nhận xét bài đăng)

Nếu chúng ta thêm cả hai khối này vào một mẫu, chúng sẽ có giao diện giống nhau theo mặc định.

Nhưng đánh dấu là rất khác nhau:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Như chúng ta có thể thấy, các tên thẻ HTML là khác nhau. Đó là các lớp phổ biến - .wp-block-button và .wp-element-button — đảm bảo kiểu dáng nhất quán giữa hai nút.

Nếu chúng tôi đang viết CSS, chúng tôi sẽ nhắm mục tiêu đến hai lớp này. Nhưng như chúng ta đã biết, các chủ đề khối WordPress có cách quản lý kiểu khác nhau và đó là thông qua theme.json tập tin. Ganesh cũng đề cập đến điều này rất chi tiết, và bạn nên đọc bài báo của anh ấy.

Vì vậy, làm cách nào để xác định kiểu nút trong theme.json mà không cần viết CSS thực tế? Chúng ta hãy làm cùng nhau.

Tạo các kiểu cơ sở

theme.json là một tập hợp lược đồ có cấu trúc được viết trong các cặp thuộc tính: giá trị. Các thuộc tính cấp cao nhất được gọi là "các phần" và chúng ta sẽ làm việc với styles tiết diện. Đây là nơi mà tất cả các hướng dẫn phong cách đi.

Chúng tôi sẽ tập trung cụ thể vào elements trong styles. Bộ chọn này nhắm mục tiêu các phần tử HTML được chia sẻ giữa các khối. Đây là shell cơ bản mà chúng ta đang làm việc với:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Vì vậy, những gì chúng ta cần làm là xác định một button thành phần.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Đó button tương ứng với các phần tử HTML được sử dụng để đánh dấu các phần tử nút ở giao diện người dùng. Các nút này chứa các thẻ HTML có thể là một trong hai loại nút của chúng tôi: một thành phần độc lập (tức là khối Nút) hoặc một thành phần được lồng trong một khối khác (ví dụ: khối Nhận xét Bài đăng).

Thay vì phải tạo kiểu cho từng khối riêng lẻ, chúng tôi tạo các kiểu được chia sẻ. Hãy tiếp tục và thay đổi màu nền và văn bản mặc định cho cả hai loại nút trong chủ đề của chúng ta. Có một color đối tượng trong đó, lần lượt, hỗ trợ background và text các thuộc tính nơi chúng tôi đặt các giá trị mà chúng tôi muốn:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Thao tác này sẽ thay đổi màu của cả hai loại nút:

Nếu mở DevTools và xem CSS mà WordPress tạo cho các nút, chúng tôi sẽ thấy rằng .wp-element-button lớp thêm các kiểu chúng tôi đã xác định trong theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Đó là những màu mặc định của chúng tôi! Tiếp theo, chúng tôi muốn cung cấp cho người dùng phản hồi trực quan khi họ tương tác với nút.

Triển khai các kiểu nút tương tác

Vì đây là một trang web về CSS, tôi cá là nhiều người trong số các bạn đã quen thuộc với trạng thái tương tác của các liên kết và nút. Chúng ta có thể :hover con trỏ chuột qua chúng, tab chúng vào :focus, bấm vào chúng để làm cho chúng :active. Heck, thậm chí còn có một :visited trạng thái để cung cấp cho người dùng dấu hiệu trực quan rằng họ đã nhấp vào trang này trước đây.

Những người đang có Lớp giả CSS và chúng tôi sử dụng chúng để nhắm mục tiêu các tương tác của liên kết hoặc nút.

Trong CSS, chúng ta có thể tạo kiểu cho một :hover trạng thái như thế này:

a:hover { /* Styles */
}

In theme.json, chúng ta sẽ mở rộng phần khai báo nút hiện có với các lớp giả này.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Lưu ý bản chất "cấu trúc" của điều này. Về cơ bản, chúng tôi đang làm theo một phác thảo:

Bây giờ chúng ta có một định nghĩa đầy đủ về kiểu tương tác và mặc định của nút. Nhưng nếu chúng ta muốn tạo kiểu cho một số nút được lồng trong các khối khác thì sao?

Các nút tạo kiểu được lồng trong các khối riêng lẻ

Hãy tưởng tượng rằng chúng ta muốn tất cả các nút có kiểu cơ bản, với một ngoại lệ. Chúng tôi muốn nút gửi của khối Biểu mẫu đăng nhận xét có màu xanh lam. Làm thế nào chúng ta sẽ đạt được điều đó?

Khối này phức tạp hơn khối Nút vì nó có nhiều phần chuyển động hơn: biểu mẫu, đầu vào, văn bản hướng dẫn và nút. Để nhắm mục tiêu nút trong khối này, chúng tôi phải tuân theo cùng một loại cấu trúc JSON mà chúng tôi đã làm cho button phần tử, nhưng được áp dụng cho khối Biểu mẫu nhận xét bài đăng, được ánh xạ tới core/post-comments-form thành phần:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Lưu ý rằng chúng tôi không còn làm việc trong elements nữa không. Thay vào đó, chúng tôi đang làm việc bên trong blocks được dành riêng để định cấu hình các khối thực tế. Ngược lại, các nút được coi là một phần tử toàn cầu vì chúng có thể được lồng vào nhau trong các khối, mặc dù chúng cũng có sẵn dưới dạng một khối độc lập.

Cấu trúc JSON hỗ trợ các phần tử bên trong các phần tử. Vì vậy, nếu có một button phần tử trong khối Biểu mẫu nhận xét bài đăng, chúng tôi có thể nhắm mục tiêu nó trong khối core/post-comments-form khối:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Bộ chọn này có nghĩa là chúng tôi không chỉ nhắm mục tiêu một khối cụ thể — chúng tôi đang nhắm mục tiêu một phần tử cụ thể có trong khối đó. Bây giờ chúng ta có một tập hợp các kiểu nút mặc định được áp dụng cho tất cả các nút trong chủ đề và một tập hợp các kiểu áp dụng cho các nút cụ thể có trong khối Biểu mẫu nhận xét bài đăng.

Kết quả là CSS được tạo bởi WordPress có bộ chọn chính xác hơn:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

Và nếu chúng ta muốn định nghĩa các phong cách tương tác khác nhau cho nút Post Comment Form thì sao? Nó giống như cách chúng tôi đã làm với các kiểu mặc định, chỉ những kiểu được xác định bên trong core/post-comments-form khối:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Còn các nút không ở dạng khối thì sao?

WordPress tự động tạo và áp dụng các lớp phù hợp để xuất các kiểu nút này. Nhưng nếu bạn sử dụng một chủ đề WordPress “lai” hỗ trợ các khối và chỉnh sửa toàn bộ trang web, nhưng cũng chứa các mẫu PHP “cổ điển” thì sao? Hoặc nếu bạn tạo một khối tùy chỉnh hoặc thậm chí có một mã ngắn kế thừa có chứa các nút thì sao? Không ai trong số này được xử lý bởi Công cụ kiểu WordPress!

Đừng lo lắng. Trong tất cả các trường hợp đó, bạn sẽ thêm .wp-element-button class trong đánh dấu mẫu, khối hoặc mã ngắn. Các kiểu do WordPress tạo ra sau đó sẽ được áp dụng trong các trường hợp đó.

Và có thể có một số tình huống mà bạn không kiểm soát được việc đánh dấu. Ví dụ: một số plugin khối có thể hơi quá cố chấp và tự do áp dụng kiểu dáng của riêng mình. Đó là nơi bạn thường có thể chuyển đến tùy chọn “Nâng cao” trong bảng cài đặt của khối và áp dụng lớp ở đó:

Kết thúc

Trong khi viết “CSS” trong theme.json lúc đầu có thể cảm thấy khó xử, tôi thấy rằng nó trở thành bản chất thứ hai. Giống như CSS, có một số thuộc tính hạn chế mà bạn có thể áp dụng rộng rãi hoặc rất hẹp bằng cách sử dụng các bộ chọn phù hợp.

Và đừng quên ba ưu điểm chính của việc sử dụng theme.json:

1. Các kiểu được áp dụng cho các nút ở cả giao diện người dùng và trình chỉnh sửa khối.
2. CSS của bạn sẽ tương thích với các bản cập nhật WordPress trong tương lai.
3. Các kiểu được tạo hoạt động với chủ đề khối và chủ đề cổ điển giống nhau — không cần sao chép bất kỳ thứ gì trong một biểu định kiểu riêng.

Nếu bạn đã sử dụng theme.json phong cách trong các dự án của bạn, xin vui lòng chia sẻ kinh nghiệm và suy nghĩ của bạn. Tôi mong được đọc bất kỳ ý kiến ​​​​và phản hồi!

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/