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

前言介紹

  • 這款 WordPress 外掛「Pattern CSS – The CSS Editor For Blocks」是 2023-11-03 上架。
  • 目前有 90 個安裝啟用數。
  • 上一次更新是 2025-03-06，距離現在已有 59 天。
  • 外掛最低要求 WordPress 6.7 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 有 6 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

kbat82 |

外掛標籤

css | editor | inline | margin | styles |

內容簡介

外掛介紹總結：這個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}

原文外掛簡介

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.
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)

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

Star it on GitHub
DM me on Twitter @kevinbatdorf
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

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Pattern CSS – The CSS Editor For Blocks」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.0.1 | 1.1.0 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.3.0 | trunk |

延伸相關外掛（你可能也想知道）

  • Elementor Website Builder – More Than Just a Page Builder 》, 全球超過 1000 萬個網站的領先網站建立平台, Elementor 是專為 WordPress 設計的領先網站建立平台，使網站製作者能夠使用直覺式的視覺建立工具建立專業、像...。
  • Classic Editor 》Classic Editor 是由 WordPress 團隊維護的官方外掛程式，可還原之前（也就是「經典」）的 WordPress 編輯器和「編輯文章」畫面，使使用者可以使用延伸這個畫...。
  • Advanced Editor Tools 》高級編輯工具（以前稱為 TinyMCE Advanced）引入了一個「經典段落」區塊，供區塊編輯器（Gutenberg）使用。, 如果您還沒有準備好切換到區塊編輯器，或者有插...。
  • Classic Widgets 》Classic Widgets 是由 WordPress 團隊維護的官方外掛，能夠恢復先前（即「經典」）的 WordPress widgets 設定畫面。該外掛將於 2024 年或必要時保持支援和維...。
  • Spectra Gutenberg Blocks – Website Builder for the Block Editor 》a.com/tutorials/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Spectra tutorials, you can easily learn how to ...。
  • User Role Editor 》「User Role Editor」WordPress 外掛讓您輕鬆更改使用者角色和權限。, 只需打開您希望新增到所選角色的能力核取方塊，然後按「更新」按鈕以保存您的更改。完...。
  • Disable Gutenberg 》此外掛可禁用新的 Gutenberg 編輯器 (也稱為區塊編輯器)，並以經典編輯器取代它。你可以完全禁用 Gutenberg，或從文章、頁面、角色、文章類型和主題模板中有...。
  • Gutenberg Blocks with AI by Kadence WP – Page Builder Features 》Kadence Blocks 是一個 WordPress 外掛，它附加自訂區塊和選項，擴展了 Gutenberg 編輯功能，使您能夠輕鬆創建美麗的網站，而不需要任何程式編寫。Kadence Bl...。
  • Page Builder: Pagelayer – Drag and Drop website builder 》. Pagelayer是一個WordPress網站建構工具，為您提供最佳的設計體驗和快速效能，不論您是初學者或專業人士都能愛上它。, Pagelayer是一款很棒的網頁建構工具，...。
  • Black Studio TinyMCE Widget 》此外掛添加了一個新的 Visual Editor 小工具類型，讓您能夠在側邊欄中輕鬆地插入豐富的文字和媒體對象。使用 Black Studio TinyMCE Widget 時，您將能夠使用W...。
  • Unyson 》, 您覺得這款外掛有幫助嗎？請考慮給它一個五星評價。, , Unyson - 一個免費的拖放框架，附帶許多內建的擴充功能，可以協助您輕鬆快速地開發高級主題。, 贊助...。
  • GenerateBlocks 》將不同的功能整合至編輯器，但並不會因為過多的一維方塊造成內容過於臃腫。使用 GenerateBlocks，您只需深入學習少量的方塊，即可用於創建任何內容。, Genera...。
  • Colibri Page Builder 》Colibri Page Builder 為 ColibriWP 佈景主題新增拖放式頁面建立功能。, 授權, 除非另有指定，所有佈景主題檔案和腳本皆採用 GNU 通用公眾授權證 (GNU Genera...。
  • AddQuicktag 》這個外掛讓在 HTML 和可視化編輯器中添加快捷標籤非常容易。您可以將您的快捷標籤匯出為可供其他插件版本匯入的 JSON 格式文件。, WordPress 的 WP-AddQuickt...。
  • Brizy – Page Builder 》, , Brizy 是一個快速且易於使用的頁面建構器，任何人都可以使用。不需要設計師或開發人員技能。一旦你使用 Brizy ，你就再也不會覺得有任何其它容易了!, 重...。

文章
Filter
Apply Filters
Close
Mastodon