WPBits

Custom CSS for Blocks allows you to easily write custom CSS for any block or post on your WordPress website, giving you complete control over the design of your content. You can take advantage of SASS support to write clean, efficient code. And, with optimized inline output on demand, you can ensure that your website loads quickly and efficiently for your visitors.

Custom CSS for Blocks

Simon Mista

Compile SCSS (Sass) to CSS straight from the WordPress admin. Theme SCSS Compiler manages as many SCSS → CSS file pairs as your theme needs, under Tools → Theme SCSS Compiler. It uses the bundled scssphp library, so there is no Node.js, no build step and no command line. SCSS is the modern Sass syntax: plain CSS plus nesting, variables and <code>@import</code>.
<h4>Features</h4>
<ul>
<li>Multiple file pairs – as many SCSS → CSS pairs as your theme needs, paths relative to the active theme.</li>
<li>Frontend or Admin per pair – each pair enqueues on <code>wp_enqueue_scripts</code> or <code>admin_enqueue_scripts</code>.</li>
<li>Per-file versioning – every pair has its own version, applied through the <code>style_loader_src</code> filter. Your theme files stay untouched.</li>
<li>Smart change detection – a version only bumps when that pair’s compiled CSS really changed.</li>
<li><code>@import</code>-aware recompile – every partial (<code>@import</code>, <code>@use</code>, <code>@forward</code>) is tracked. Edit a partial and the next admin page load recompiles.</li>
<li>Compressed or expanded output – minified for production, readable for development.</li>
<li>Auto-compile – missing or stale CSS is rebuilt on the next admin page load, so a deploy never leaves you with unstyled pages.</li>
<li>Auto-enqueue – the plugin calls <code>wp_enqueue_style()</code> for each pair and skips files already registered, so output is never duplicated.</li>
<li>Manual compile button – one click, live feedback, persistent error display.</li>
<li>Concurrent-compile lock – two admins compiling at once can’t corrupt the CSS.</li>
<li>Code-first config – set every option as a PHP constant in <code>wp-config.php</code>, your theme, or <code>.env</code> / Bedrock.</li>
<li>Admin-only – every endpoint needs <code>manage_options</code>. Change that with the <code>tscsscompiler_capability</code> filter.</li>
<li>Modern and accessible – PHP 8.1+, WCAG 2.1 AA admin UI, German translation included.</li>
</ul>
<h4>Privacy / GDPR</h4>
This plugin makes no external HTTP requests, sets no cookies, runs no telemetry and does not track users. All processing happens locally on your server. The bundled libraries (scssphp, league/uri, symfony/filesystem, PSR HTTP interfaces) are MIT licensed and GPL-compatible; their source is included in the plugin’s <code>vendor/</code> directory.

Theme SCSS Compiler

Compile SCSS / Sass to CSS in the WP admin. Multiple file pairs, per-file versioning, @import-aware change detection, optional auto-compile.

Custom CSS for Blocks vs Theme SCSS Compiler