內容簡介
下面是關於 BlockGlow 外掛的總結：
- BlockGlow 添加了一個名為 "BlockGlow — Custom CSS" 的選項面板到每個區塊的檢查器中，可用於將自定義 CSS 定義範圍限制到單個區塊實例。
- 此外，該外掛將 CSS 存儲在上傳文件夾中（uploads/blockglow/），在前端呈現時加載生成的 CSS 文件。若上傳目錄不可寫入或文件寫入失敗，BlockGlow 將回退到輸出內聯樣式的方式。
由此可得以下問題與答案：
1. BlockGlow 外掛的主要功能有哪些？
- 答：BlockGlow 外掛添加了兩個區塊屬性到每個區塊（block）：blockglowCustomCSS 和 blockglowId，並為每個區塊提供了一個檢查器面板，其中包含基於 CodeMirror 的代碼編輯器或支持 Tab 和 Shift+Tab 凸出的文本區域，以實時預覽自定義 CSS 樣式。此外，CSS 文件將被保存到 wp-content/uploads/blockglow/blockglow-<id>.css，並在前端作為鏈接樣式表加載；當清除自定義 CSS 字段時，相應的文件將被自動刪除。
2. BlockGlow 外掛如何工作的？
- 答：BlockGlow 外掛為每個區塊實例創建了一個獨特的 blockglowId，並使用類似 [data-blockglow-id="bg-xxxxxxx"] 的包裹選擇器將您的 CSS 進行範圍限定。在編輯器中，你可以方便地使用＆作為包裹簡寫，外掛將在編輯器預覽和前端輸出中替換＆為包裹選擇器。
3. 如果需要支援或提出改進意見，應該怎麼做？
- 答：如果您遇到問題或有改進意見（例如：限制誰可以編輯每個區塊的 CSS、將樣式集中到單個標頭文件中，或添加一個管理生成的 CSS 文件的管理員 UI），請在存儲庫中開啟問題或在此回覆，我將協助解決。
外掛標籤
開發者團隊
② 後台搜尋「BlockGlow — Per-block Custom CSS」→ 直接安裝（推薦）
原文外掛簡介
BlockGlow adds a “BlockGlow — Custom CSS” panel to the inspector of every block. Use it to scope custom CSS to a single block instance. The plugin stores CSS in the uploads folder (under uploads/blockglow/) and enqueues the generated CSS file when rendering on the front end. If the uploads directory isn’t writable or file write fails, BlockGlow will fall back to outputting inline styles.
Key features:
Adds two block attributes to every block: blockglowCustomCSS and blockglowId.
Inspector panel with a CodeMirror-backed code editor (if WordPress provides it) or a fallback textarea supporting Tab and Shift+Tab outdent.
Live preview inside the block editor: custom CSS is scoped to the block in the editor so you can see the effect while editing.
CSS files are saved to wp-content/uploads/blockglow/blockglow-
Graceful fallback to inline styles when file writing isn’t possible.
How scoping works:
BlockGlow creates a unique blockglowId for each block instance and scopes your CSS with a wrapper selector like:
[data-blockglow-id="bg-xxxxxxx"] { /* your declarations */ }
For convenience you can use & as the wrapper shorthand in the editor. Example:
& .my-class { color: red; }
The plugin will replace & with the wrapper selector for both editor preview and front-end output.
Support
If you find issues or want improvements (for example: limiting who can edit per-block CSS, collecting styles into a single head include, or adding an admin UI to manage generated CSS files), open an issue in the repository or reply here and I will assist.
