Peter Raschendorfer

<p>The Smart CSS Auto Loader Plugin allows you to load additional CSS files without the need to change the theme</p>
<h3>Retired Plugin</h3>
<p>Development, maintenance and support of this plugin has been retired in october 2023. You can use this plugin as long as is works for you.</p>
<p>There will be no more updates and I won’t answer any support questions. Thanks for your understanding.</p>
<p>Feel free to fork this plugin.</p>
<h3>Usage</h3>
<p>To load additional stylesheets just put them into a directory named <strong>cssautoload</strong> (case-sensitive!). This directory can be placed in three different locations that are loaded in the following order:</p>
<ul>
<li>Theme independent : in the <code>wp-content</code> directory</li>
<li>Theme dependent : in the Theme’s directory</li>
<li>Child Theme dependent (if using a Child Theme) : in the Child Theme’s directory</li>
</ul>
<p>Only files with extension .css are added, all other files are ignored. Also files beginning with an underscore (_) are ignored.</p>
<h3>CSS for different media</h3>
<p>CSS allows to have different styles for different target devices. Files placed directly in the <code>cssautoload</code> directory are added with the media type ‘all’, suitable for all devices. To use a different media type just create a subdirectory with the name of the target media type (case-sensitive!). Te following CSS media types are supported according to the official CSS standard:</p>
<ul>
<li><code>all</code> for all devices – you don’t need to create the <code>all</code> directory, you also can put the files directly into the cssautoload root directory</li>
<li><code>braille</code> for braille tactile feedback devices</li>
<li><code>embossed</code> for paged braille printers</li>
<li><code>handheld</code> for handheld devices</li>
<li><code>print</code> for printouts or print preview on screen</li>
<li><code>projection</code> for projected presentations</li>
<li><code>screen</code> for screens</li>
<li><code>speech</code> for speech synthesizers</li>
<li><code>tty</code> for media using a fixed-pitch character grid</li>
<li><code>tv</code> for television-type devices</li>
</ul>
<p>Other subdirectories in <code>cssautoload</code> directory are ignored. Also subdirectories in the media subdirectories are not supported.</p>
<h3>Plugin Privacy Information</h3>
<ul>
<li>This plugin does not set cookies</li>
<li>This plugin does not collect or store any data</li>
<li>This plugin does not send any data to external servers</li>
</ul>


Smart CSS Auto Loader

Sheikh Ashrafuzzman

<p><strong>Block Responsive</strong> is the ultimate WordPress plugin for creating mobile-friendly, responsive websites with Gutenberg blocks. This comprehensive responsive design tool gives you complete control over how your content appears across all devices, making it easy to build responsive layouts without any coding knowledge.</p>
<p>Perfect for creating <strong>mobile-responsive websites</strong>, this plugin automatically adds responsive breakpoints and device-specific styling options to every core WordPress block. Whether you’re optimizing for mobile SEO, improving tablet user experience, or fine-tuning desktop layouts, Block Responsive provides the responsive web design tools you need.</p>
<h3>Key Features</h3>
<h3>📱 <strong>Display Controls</strong></h3>
<p>Hide/show blocks on specific devices (mobile, tablet, desktop)<br />
Simple toggle controls with device-specific icons<br />
Visual feedback for hidden blocks</p>
<h3>🎨 <strong>Responsive Styling Options</strong></h3>
<p><strong>Alignment Controls</strong>: Block alignment settings for different screen sizes<br />
<strong>Colors Controls</strong>: Text color, background color, and link color with device-specific settings<br />
<strong>Background Image Controls</strong>: Responsive background image settings<br />
<strong>Typography Controls</strong>: Font size, line height, letter spacing, and text transform for each device<br />
<strong>Dimensions Controls</strong>: Padding, margin, width, and height controls for responsive layouts<br />
<strong>Border & Shadow Controls</strong>: Border radius, border width, and shadow effects per device</p>
<h3>How It Works</h3>
<ol>
<li><strong>Block Inspector Integration</strong>: Responsive controls appear in the block inspector panel</li>
<li><strong>Device-Specific Settings</strong>: Configure different styles for mobile, tablet, and desktop</li>
<li><strong>Real-time Preview</strong>: See changes immediately in the editor</li>
<li><strong>Frontend Rendering</strong>: Automatically generates and applies responsive CSS</li>
</ol>
<h3>Have feedback, suggestions, or feature ideas?</h3>
<p>Feel free to share them with me at <strong><a href="mailto:hello@ashrafuzzaman.com" rel="nofollow ugc">hello@ashrafuzzaman.com</a>.</strong> I’d love to hear your thoughts!</p>


Block Responsive – Make Editor Blocks Responsive Easily


Tested it for a few minutes, and I can already picture all the different ways this can be used - job well done, really !


This should be in the core.

Transform any WordPress block into a fully responsive element with device-specific controls for mobile, tablet, and desktop optimization.

Smart CSS Auto Loader vs Block Responsive – Make Editor Blocks Responsive Easily