內容簡介
下面是關於 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.
Arbitrary section
Development notes:
Editor script: assets/js/blockglow-editor.js — registers attributes, provides the inspector panel and injects editor-scoped styles.
Main plugin file: blockglow.php — enqueues editor assets and filters render_block to attach per-block CSS files or inline styles.
Upload path: wp_upload_dir() + /blockglow/.
File writes/deletes: BlockGlow uses the WordPress Filesystem API (WP_Filesystem) when available for compatibility with hosts using FTP/SFTP; when unavailable it will attempt direct writes. Editing capability is required (edit_posts) or operations performed via REST save.
Per-post bundling: BlockGlow now generates a single stylesheet per post (blockglow-post-
Admin UI: A new submenu under Tools → “BlockGlow CSS” lists generated files and allows administrators (capability is filterable) to delete them.
Capability: File generation/deletion is restricted by a filterable capability blockglow_manage_files_cap (default manage_options). You can change this capability via the filter if you want other roles to manage files.
If you’d like help preparing the plugin for WordPress.org (example readme.txt adjustments, SVN packaging, or adding screenshots), ping me and I can prepare the required assets and instructions.
Source Code
The plugin includes built/minified assets under assets/dist/ for distribution. The human-readable source for JavaScript is included in the plugin under assets/js/ (e.g. assets/js/blockglow-editor.js and assets/js/blockglow-admin.js). The plugin also contains a package.json and vite.config.js in the plugin root describing how to rebuild these assets locally using npm install and npm run build or npm run watch.
If you need the sources to be hosted externally, provide a URL and I will add it here (for example an upstream GitHub repository).
Installation Notes for WordPress.org
To publish on WordPress.org you will need:
A fully-formed readme.txt (this file) using the plugin directory readme format.
Screenshots (1.png, 2.png, etc.) placed in the assets/ directory when committing to SVN, or uploaded via the plugin admin UI after publishing.
A stable tag or commit to trunk/ in SVN. Typical workflow:
Create a new plugin slug on https://wordpress.org/plugins/ and follow the email to get SVN access.
Check out the plugin SVN repository, add your plugin files into trunk/, put screenshots into assets/, and tag a version.
Commit and wait for the plugin page to become live.
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.
