[WordPress] 外掛分享： Pattern CSS – The CSS Editor For Blocks

內容簡介

外掛介紹總結：這個WordPress外掛可以讓你在任何Block或Pattern上新增自定義的CSS樣式，包括可重複使用的Pattern（可同步或獨立）。與其他類似工具不同的是，你的CSS將被優化、最小化並直接內聯到僅在該Block使用的頁面上。

以下是根據提供的內容製作的問題與答案：

問題：這個WordPress外掛有哪些特點？

答案：
- 將樣式範圍限制在Block內，不會影響父級/兄弟Block的樣式。
- 快速處理。CSS在瀏覽器中被最小化和優化。
- 安全性高。無效或非標準的CSS永遠不會被保存（通過WebAssembly沙盒進行驗證）。
- 支持可重複使用的（同步或非同步）Pattern。
- 在進行更改時即可在頁面上查看變化。
- 結合相鄰的規則（以減少大小）。
- 簡化根據規範縮小顏色和數學函數。

問題：有什麼使用提示嗎？

答案：
- 使用[block]直接針對當前的Block，而不是其子元素。
- 創建可重複使用的Pattern作為Block的起始點。
- 使用!important覆蓋部分主題樣式（謹慎使用）。

問題：如何結合規則？

答案：
[block] {
color: red;
}
.bar {
color: red;
}
/* 輸出結果： */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}

問題：如何修復冗餘屬性？

答案：
[block] {
padding-top: 5px;
padding-left: 50px;
padding-bottom: 15px;
padding-right: 5px;
}
/* 輸出結果： */
.pcss-3aa0f0fc{padding:5px 5px 15px 50px}

外掛標籤

開發者團隊

📦 歷史版本下載

1.0.01.0.11.1.01.2.01.2.11.2.21.2.31.2.41.2.51.2.61.3.01.4.01.5.01.5.11.5.21.5.3trunk

原文外掛簡介

The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles.
This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted.
Star it on GitHub
Follow me on Twitter @kevinbatdorf
How to

Every block will have a new “Pattern CSS” settings panel
Open it and add any CSS. It will be scoped to the block
To target the block directly, you must use the [block] selector
To target any element inside the block, use the normal CSS selector
Use !important to override your theme styles (use sparingly)

Global Editor

Access global styles under the options menu (three dots) in the top right corner of the editor
Additionaly, you can open from the Pattern CSS block editor controls

Features

Powered by WebAssembly for fast and secure CSS parsing
Smart loading. Only loads the CSS when the block is present
Styles persist when changing themes
Scopes styles to the block so that parent/sibling blocks are not affected
It’s fast
CSS is minified and optimized
It’s safe. Invalid, non-spec CSS is never persisted
Supports reusable (synced or not-synced) patterns
See changes on the page as you make them
Combines adjacent rules (to decrease size)
Minifies colors and math functions to simplify according to spec
Supports CSS nesting

Basic Example
/* Target the block directly */
[block] {
background: antiquewhite;
padding: 2rem;
}
/* Target any inner elements */
a {
text-decoration-color: burlywood;
text-decoration-thickness: 2px;
text-decoration-style: solid !important;
}
a:hover {
text-decoration-color: darkgoldenrod;
}

/* Output: */
.pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b}

Supports Media Queries
@media (prefers-color-scheme: dark) {
[block] {
border-color: blue;
}
}

/* Output: */
@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}

Combines Rules
[block] {
color: red;
}
.bar {
color: red;
}

/* Output: */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}

Fixes redundant properties
[block] {
padding-top: 5px;
padding-left: 50px;
padding-bottom: 15px;
padding-right: 5px;
}

/* Output: */
.pcss-3aa0f0fc{padding:5px 5px 15px 50px}

Supports CSS nesting
[block] {
padding: 1rem;
a {
color: red;
}
background: white;
/* Including media queries */
@media (prefers-color-scheme: dark) {
background: black;
color:white;
}
}

/* Output: */
.pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}}

Check browser support for CSS nesting

延伸相關外掛