Add multiple block styles to Gutenberg blocks with ease.

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>


Alternatives to Block Style Modifiers

Top alternatives