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.

Kamal Hosen

Sayedul Sayem

Gobinda Tarafdar

<p>Custom CSS for Elementor is a handy tool for writing CSS codes within different devices like Desktops, Tablets & Mobile for Elementor Widgets. It will help you to not bother with writing media queries several times. Custom CSS for Elementor plugin comes with the default media query system.</p>
<p>See the plugin’s GitHub repository <a href="https://github.com/sayedulsayem/custom-css-for-elementor" rel="nofollow ugc">Custom CSS for Elementor</a></p>
<h3>📢 Big Announcement –</h3>
<p>After getting several requests we have added live preview mode while styling with CSS. Now you can see the reflection instantly. No hassle of continual preview checks in the front end.</p>
<p>Enjoy styling with CSS without any hassle.</p>
<h3><strong>Required Tools</strong></h3>
<ul>
<li>Elementor Free Only</li>
</ul>
<h3>📘 <strong>How to Use Custom CSS for Elementor</strong></h3>
<p>First of all, it’s a plug-and-play tool. You will not get any setting page. So, after installing the Custom CSS for Elementor tool, just navigate to any Elementor Widget editing panel, then jump on the Advanced tab section; you will get a new accordion of Custom CSS for Elementor. Unfold the accordion, and you will get three different fields to write CSS codes for your widgets. If you want to show different designs for different devices, choose the device panels according to your needs.</p>
<p>Direction: Edit any Elementor Widget > Advanced Tab > Custom Css for Elementor</p>
<p>Note: According to general CSS logic, if you write CSS for a bigger screen (Desktop), it will be automatically implemented on smaller devices chronologically. If you want to change anything for a smaller screen, you have to write different CSS for smaller screens.</p>
<p>In our Custom CSS for Elementor addon, if you want to add global CSS, just write CSS code in the desktop/global panel, and the code will be automatically implied to the other screen. If you want to change the CSS for Tablets, you have to write different CSS in our Tablet CSS panel. And same goes for mobile devices. If you want to change the CSS for Mobile devices, write different CSS in the Mobile CSS panel of our tool.</p>
<p>Don’t forget to check the Screenshots below to get a clear overview of the tool.</p>
<h3>❓ <strong>Why You Need This</strong></h3>
<p>If you know the Elementor’s plenty of Dom creation issues, you will know the pain. But you can reduce so many bloated codes if you use simple CSS. But writing CSS for various devices, you need to be an expert on CSS as you have to deal with the Media Query every time. But our Custom CSS for Elementor addon will be the savior for you. We are handling the pain part of yours. Moreover, to add custom CSS, you don’t need to go to the Additional CSS of the theme customizer if you are using Elementor Free to manage your site as we build this tool for you. It’s just an advanced version of the Elementor Pro’s Default Custom CSS panel.</p>
<h3>🔥 <strong>What Are the Key Features of Elementor Custom CSS Plugin</strong></h3>
<p>As the essential tool, we have shared with you. But in short, here are the other features of the custom CSS addon for Elementor,</p>
<ul>
<li>It’s a lightweight plugin that will use Elementor CSS files to enqueue custom CSS. Won’t generate any new CSS to reduce server requests.</li>
<li>You can face lacking options during change style through style control, but our Custom CSS for Elementor Addon will allow you to write CSS to overcome these lackings.</li>
<li>We prepared this tool by maintaining a World-class safety methodology. Also, we have run the malicious test, and it passed all the tests. </li>
<li>It works with any Elementor widget and other third-party Elementor addons widgets too.</li>
</ul>
<h3>💻 How to Change Breakpoints in WordPress</h3>
<p>To modify breakpoints for tablet and mobile devices in WordPress, you can add custom code to your theme’s <code>functions.php</code> file. Breakpoints determine when your website layout switches between different screen sizes, ensuring optimal display across devices.</p>
<h4>Changing Tablet Breakpoint</h4>
<p>To adjust the breakpoint for tablets, follow these steps:</p>
<ol>
<li>Open your WordPress theme’s <code>functions.php</code> file.</li>
<li>
<p>Add the following PHP code snippet:</p>
<p><code>add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) {<br />
$default_breakpoints['tablet'] = 768; // change this value<br />
return $default_breakpoints;<br />
}, 20, 1);</code></p>
</li>
<li>Save the file.</li>
</ol>
<h4>Changing Mobile Breakpoint</h4>
<p>To customize the breakpoint for mobile devices, use the following instructions:</p>
<ol>
<li>Navigate to your theme’s <code>functions.php</code> file.</li>
<li>
<p>Insert the following PHP code:</p>
<p><code>add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) {<br />
$default_breakpoints['mobile'] = 425; // change this value<br />
return $default_breakpoints;<br />
}, 20, 1);</code></p>
</li>
<li>Save the changes.</li>
</ol>
<p>By adjusting these breakpoints, you can fine-tune your website’s responsiveness and ensure a seamless viewing experience across various devices.</p>
<h3><strong>PRIVACY POLICY</strong></h3>
<p>We are not collecting any of your personal data or any kind of logs. So there will be no chance to violate your privacy through this plugin.</p>
<h3><strong>For Technical Support</strong></h3>
<p>We all know nothing is perfect. But we all make everything perfect for everyone by sharing and caring. If you find any bug before giving us a negative rating, please report us <a href="https://wordpress.org/support/plugin/custom-css-for-elementor/" rel="ugc">here</a>. We will definitely try to resolve your issue asap. Without your support, we cannot run this project so longer smoothly.</p>
<h3><strong>ABOUT THE MAKER</strong></h3>
<p>I am <a href="https://sayedulsayem.com/" rel="nofollow ugc">Sayedul Sayem</a>, a Bangladeshi full-stack WordPress developer and free and open source enthusiast. As Custom CSS for Elementor is an open-source project, you can encourage me by giving me a <a href="https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=5" rel="ugc">5* rating</a>. Nothing also, you can contact me on my <a href="https://www.linkedin.com/in/sayedulsayem/" rel="nofollow ugc">LinkedIn</a> for consultation or just to say hello. I love talking to new people. So don’t hesitate.</p>


Custom CSS for Elementor

Makes CSS scoping for single widgets convenient without adding a tons CSS all over the place.

Simple and brilliant idea

This is a very useful and convenient plugin for elementor users.

Awesome Idea

This plugin helps you push custom CSS in any native Elementor widget, solving style control limitations.

BlockGlow — Per-block Custom CSS vs Custom CSS for Elementor