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

Kadim Gültekin

<p>Block Style Modifiers is a simple WordPress plugin that allows you to add multiple block styles to Gutenberg blocks.</p>
<p>Style Modifiers are additive CSS classes that:</p>
<ul>
<li>Can be applied in addition to a Block Style</li>
<li>Can be selected multiple at the same time</li>
<li>Support both checkbox (non-exclusive) and radio (exclusive) behavior per category</li>
<li>Are predefined and documented by themes or plugins</li>
<li>Preserve class order, allowing advanced CSS control</li>
</ul>
<h4>Category Behavior</h4>
<p>Style modifiers are organized into categories with two behaviors:</p>
<ul>
<li><strong>Non-exclusive categories</strong> (checkbox): Multiple modifiers can be selected simultaneously (default: <code>exclusive: false</code>)</li>
<li><strong>Exclusive categories</strong> (radio): Only one modifier from the category can be selected at a time (<code>exclusive: true</code>)</li>
</ul>
<h4>Structured Category Object</h4>
<p>Categories must be defined as objects with:</p>
<ul>
<li><code>slug</code> – Language-independent identifier for grouping (required)</li>
<li><code>label</code> – Translatable UI label (required)</li>
<li><code>description</code> – Optional category description</li>
<li><code>exclusive</code> – Boolean flag for radio behavior (default: false)</li>
</ul>
<h3>Features</h3>
<ul>
<li>Register multiple style modifiers for any block type</li>
<li>Apply multiple style modifiers to a single block</li>
<li>Global style modifiers that apply to all blocks</li>
<li>Inline CSS support for easy styling of modifiers</li>
<li>Structured category objects with exclusive/non-exclusive behavior</li>
<li>Theme-independent default modifiers via Block Style Modifier Pack</li>
</ul>
<h4>Default Modifiers</h4>
<p>Block Style Modifiers includes theme-independent default modifiers that work with any WordPress theme:</p>
<p><strong>Philosophy:</strong><br />
* Enhance behavior, not visual design<br />
* No borders, shadows, spacing, or color palettes<br />
* Work with any theme without conflicts<br />
* Atomic and performant<br />
* Respect prefers-reduced-motion</p>
<p><strong>Available Categories:</strong></p>
<p><strong>Animations (Exclusive)</strong> – Entrance animations for wrapper blocks<br />
* Fade In – Smooth fade entrance<br />
* Slide Up – Slide from bottom<br />
* Slide Down – Slide from top<br />
* Slide Left – Slide from right<br />
* Slide Right – Slide from left<br />
* Scale In – Scale up animation<br />
* Rotate In – Rotate with fade<br />
* Flip In X – 3D flip animation<br />
Applied to: Group, Row, Stack, Grid, Column, Columns (wrapper blocks only)</p>
<p><strong>Animation Delay (Exclusive)</strong> – Control animation timing<br />
* Fast (0.2s)<br />
* Normal (0.4s)<br />
* Slow (0.8s)</p>
<p><strong>Hover Effects (Exclusive)</strong> – Transform-based hover interactions<br />
* Zoom In on Hover<br />
* Subtle Rotate on Hover<br />
* Bounce on Hover<br />
* Shake on Hover<br />
* Brighten on Hover<br />
* Darken on Hover<br />
* Grayscale to Color on Hover (Image/Cover only)<br />
* Blur to Focus on Hover (Image/Cover only)<br />
Applied to: Image, Cover, Media & Text (content blocks only)</p>
<p><strong>Text Effects (Exclusive)</strong> – Micro-interactions for text<br />
* Underline Reveal on Hover<br />
* Soft Text Fade on Hover<br />
Applied to: Paragraph, Heading (text blocks only)</p>
<p>All default modifiers respect accessibility preferences and are disabled when prefers-reduced-motion is set.</p>
<p><strong>Architecture Note:</strong> Animations are only available for wrapper blocks (Group, Row, Stack, etc.) while Hover Effects are for content blocks (Image, Cover, Media & Text). This separation prevents CSS property conflicts and ensures all modifiers work seamlessly together.</p>
<p>You can easily extend or override these defaults by registering your own style modifiers in your theme or custom plugin.</p>
<h3>Usage</h3>
<ul>
<li>Define your style modifiers using the <code>block_style_modifiers_register_style</code> function via your theme’s <code>functions.php</code> file or a custom plugin.</li>
<li>Select style modifiers in the block editor sidebar under “Block Style Modifiers”.</li>
<li>Style modifiers will be applied as additional CSS classes to the block’s wrapper element.</li>
<li>It is possible that reordering of classes may affect CSS specificity and styling.</li>
</ul>
<p><strong>Note:</strong> There is available an experimental plugin includes blocks style modifiers:  <a href="https://github.com/Arkenon/block-style-modifier-pack" rel="nofollow ugc">Block Style Modifier Pack</a> plugin to function.</p>
<h3>Registering a Block Style Modifier</h3>
<p>You can easily register your own style modifiers in your theme or custom plugin.</p>
<p>Here are some examples of how to register style modifiers with different category behaviors:</p>
<h4>Exclusive Category (Radio Behavior)</h4>
<pre><code>block_style_modifiers_register_style( [ 'core/image', 'core/cover' ], [
    'name'        => 'zoom-on-hover',
    'label'       => __( 'Zoom on Hover', 'my-theme' ),
    'class'       => 'bsm-zoom-on-hover',
    'description' => __( 'Zoom into image on hover', 'my-theme' ),
    'category'    => [
        'slug'        => 'hover-effects',
        'label'       => __( 'Hover Effects', 'my-theme' ),
        'description' => __( 'Transform-based hover interactions', 'my-theme' ),
        'exclusive'   => true,
    ],
] );
</code></pre>
<h4>Non-Exclusive Category (Checkbox Behavior)</h4>
<pre><code>block_style_modifiers_register_style( '*', [
    'name'     => 'hide-sm',
    'label'    => __( 'Hide on Small Screens', 'my-theme' ),
    'class'    => 'bsm-hide-sm',
    'category' => [
        'slug'        => 'responsive',
        'label'       => __( 'Responsive', 'my-theme' ),
        'description' => __( 'Responsive visibility controls', 'my-theme' ),
        'exclusive'   => false,
    ],
] );
</code></pre>
<p>That’s it! You can now select multiple style modifiers for your blocks in the Block Editor.</p>
<h3>Example Result in Markup</h3>
<pre><code>class="wp-block-cover has-custom-content-position is-position-bottom-left bsm-zoom-hover bsm-fade-in bsm-delay-normal"
</code></pre>
<p>It is important to note that the order of classes may affect CSS specificity and styling. You can easily reorder your modifiers with drag/drop functionality in the Block Editor.</p>
<h3>Source Code</h3>
<p>It is available on GitHub:<br />
* GitHub: https://github.com/Arkenon/block-style-modifiers</p>


Block Style Modifiers

Add multiple block styles to Gutenberg blocks with ease.

Smart CSS Auto Loader vs Block Style Modifiers