Mary Rose Elbambo

<p>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.</p>
<p>Key features:</p>
<ul>
<li>Adds two block attributes to every block: <code>blockglowCustomCSS</code> and <code>blockglowId</code>.</li>
<li>Inspector panel with a CodeMirror-backed code editor (if WordPress provides it) or a fallback textarea supporting Tab and Shift+Tab outdent.</li>
<li>Live preview inside the block editor: custom CSS is scoped to the block in the editor so you can see the effect while editing.</li>
<li>CSS files are saved to <code>wp-content/uploads/blockglow/blockglow-<id>.css</code> and enqueued on the front end as a linked stylesheet; files are removed automatically when you clear the Custom CSS field.</li>
<li>Graceful fallback to inline styles when file writing isn’t possible.</li>
</ul>
<p>How scoping works:</p>
<p>BlockGlow creates a unique <code>blockglowId</code> for each block instance and scopes your CSS with a wrapper selector like:</p>
<pre><code>[data-blockglow-id="bg-xxxxxxx"] { /* your declarations */ }
</code></pre>
<p>For convenience you can use <code>&</code> as the wrapper shorthand in the editor. Example:</p>
<pre><code>& .my-class { color: red; }
</code></pre>
<p>The plugin will replace <code>&</code> with the wrapper selector for both editor preview and front-end output.</p>
<h3>Arbitrary section</h3>
<p>Development notes:</p>
<ul>
<li>Editor script: <code>assets/js/blockglow-editor.js</code> — registers attributes, provides the inspector panel and injects editor-scoped styles.</li>
<li>Main plugin file: <code>blockglow.php</code> — enqueues editor assets and filters <code>render_block</code> to attach per-block CSS files or inline styles.</li>
<li>Upload path: <code>wp_upload_dir()</code> + <code>/blockglow/</code>.</li>
<li>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.</li>
<li>Per-post bundling: BlockGlow now generates a single stylesheet per post (<code>blockglow-post-<ID>.css</code>) on post save which contains the combined CSS from all blocks in that post. This reduces HTTP requests and improves performance.</li>
<li>Admin UI: A new submenu under Tools <span aria-hidden="true" class="wp-exclude-emoji">→</span> “BlockGlow CSS” lists generated files and allows administrators (capability is filterable) to delete them.</li>
<li>Capability: File generation/deletion is restricted by a filterable capability <code>blockglow_manage_files_cap</code> (default <code>manage_options</code>). You can change this capability via the filter if you want other roles to manage files.</li>
<li>If you’d like help preparing the plugin for WordPress.org (example <code>readme.txt</code> adjustments, SVN packaging, or adding screenshots), ping me and I can prepare the required assets and instructions.</li>
</ul>
<h3>Source Code</h3>
<p>The plugin includes built/minified assets under <code>assets/dist/</code> for distribution. The human-readable source for JavaScript is included in the plugin under <code>assets/js/</code> (e.g. <code>assets/js/blockglow-editor.js</code> and <code>assets/js/blockglow-admin.js</code>). The plugin also contains a <code>package.json</code> and <code>vite.config.js</code> in the plugin root describing how to rebuild these assets locally using <code>npm install</code> and <code>npm run build</code> or <code>npm run watch</code>.</p>
<p>If you need the sources to be hosted externally, provide a URL and I will add it here (for example an upstream GitHub repository).</p>
<h3>Installation Notes for WordPress.org</h3>
<p>To publish on WordPress.org you will need:</p>
<ul>
<li>A fully-formed <code>readme.txt</code> (this file) using the plugin directory readme format.</li>
<li>Screenshots (1.png, 2.png, etc.) placed in the assets/ directory when committing to SVN, or uploaded via the plugin admin UI after publishing.</li>
<li>A stable tag or commit to <code>trunk/</code> in SVN. Typical workflow:
<ol>
<li>Create a new plugin slug on https://wordpress.org/plugins/ and follow the email to get SVN access.</li>
<li>Check out the plugin SVN repository, add your plugin files into <code>trunk/</code>, put screenshots into <code>assets/</code>, and tag a version.</li>
<li>Commit and wait for the plugin page to become live.</li>
</ol>
</li>
</ul>
<h3>Support</h3>
<p>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.</p>


BlockGlow — Per-block Custom CSS

Adds a "Custom CSS" inspector panel to every Gutenberg block and saves per-block CSS files to uploads for front-end enqueuing.

Nick Halsey

<p>WordPress core provides custom CSS functionality in the customizer that’s specific to the current theme; you can switch themes freely with each theme’s additional CSS remaining in place. Sometimes, you need some CSS to apply regardless of the current theme persistently. This plugin adds a plugin CSS option for CSS that’s global and persists across theme changes.</p>
<p>With the Customizer, your CSS is instantly live-previewed, offering the ability to see exactly how your site will look before you publish your changes. The plugin CSS option is stored as an <code>option</code>. Prior to WordPress 4.7 (which introduced additional CSS in core), theme-specific CSS was stored as a <code>theme_mod</code>, in 4.7 and newer this is migrated to the core CSS functionality (which is theme-specific).</p>


Modular Custom CSS

WordPress core provides custom CSS functionality in the customizer that's specific to the current theme; you can switch themes freely with each t …

BlockGlow — Per-block Custom CSS vs Modular Custom CSS