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>Registering Categories</h4>
<p>Categories are registered independently using <code>block_style_modifiers_register_category()</code> before any modifiers that belong to them. Modifiers then reference the category by its slug (string).</p>
<pre><code>block_style_modifiers_register_category( $slug, $args )
</code></pre>
<ul>
<li><code>$slug</code> – Language-independent identifier for grouping (required, first argument)</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>Step 1: Register Categories</h4>
<pre><code>block_style_modifiers_register_category( 'hover-effects', [
    'label'       => __( 'Hover Effects', 'my-theme' ),
    'description' => __( 'Transform-based hover interactions', 'my-theme' ),
    'exclusive'   => true,
] );

block_style_modifiers_register_category( 'responsive', [
    'label'       => __( 'Responsive', 'my-theme' ),
    'description' => __( 'Responsive visibility controls', 'my-theme' ),
    'exclusive'   => false,
] );
</code></pre>
<h4>Step 2: Register Modifiers (Reference Category by Slug)</h4>
<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'    => 'hover-effects',
] );
</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' => 'responsive',
] );
</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.

4wpdev

Anatoliy Dovgun

<h4>Demo</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JDGOF2B2zqQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>4WP Style Switcher reads <strong>style variations</strong> from the active block theme (<code>theme.json</code> and <code>/styles/*.json</code>).</p>
<p>A plugin by <a href="https://4wp.dev/" rel="nofollow ugc">4wp.dev</a>. <strong>4WP</strong> is our project brand; the letters “WP” appear only as part of that brand name, not as a reference to WordPress. This plugin is not affiliated with, endorsed, or sponsored by WordPress.</p>
<p>Source code and releases: <a href="https://github.com/4wpdev/4wp-style-switcher" rel="nofollow ugc">github.com/4wpdev/4wp-style-switcher</a></p>
<h4>Development</h4>
<p>Human-readable PHP source is in the public GitHub repository above. The plugin ZIP includes <code>src/</code> (PSR-4 autoload via <code>src/Autoload.php</code> when <code>vendor/</code> is absent). No npm build step — front-end scripts ship as plain JS in <code>assets/</code>.</p>
<p><strong>Live demo (WordPress Playground):</strong> https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/4wpdev/4wp-style-switcher/v1.0.0/.wordpress-org/assets/blueprints/blueprint.json</p>
<p>The demo site <strong>Style Switcher</strong> uses Twenty Twenty-Five: About, Morning, Afternoon, and Evening pages with per-page styles, A/B light vs dark, a bottom-right visitor switcher, and Light/Dark in the header and footer menus.</p>
<p><strong>Page style (editor)</strong> — pick a variation for a page; optionally lock it so visitors cannot override it.</p>
<p><strong>Frontend switcher</strong> — visitors choose from allowed variations; the choice is stored in localStorage and synced to a cookie for server-side rendering.</p>
<p><strong>Light / Dark (navigation block)</strong> — add the Light/Dark block inside Navigation; map two variations (sun/moon icons).</p>
<p><strong>A/B testing</strong> — split new visitors between two variations; daily aggregate stats monitor the traffic split.</p>
<h4>Privacy</h4>
<p>When the visitor switcher or A/B testing is enabled, the plugin may store the selected style variation in a browser cookie (<code>forwp_ss_style</code>) and in localStorage on the visitor device. No personal data is sent to third-party services. A/B stats are aggregated counts stored in your WordPress database.</p>
<h3>Blocks</h3>
<p>This plugin provides 1 block.</p>
<ul>
<li>
<p><strong>Light / Dark</strong> — menu toggle between two mapped theme style variations (sun/moon icons).<strong>Hooks (developers)</strong></p>
</li>
<li>
<p><code>forwp_style_switcher_variations</code> — filter theme variation list.</p>
</li>
<li><code>forwp_style_switcher_ab_assigned</code> — after A/B cohort assignment.</li>
<li><code>forwp_style_switcher_analytics_track</code> — analytics events.</li>
<li><code>forwp_style_switcher_ab_assignment_enabled</code> — filter A/B assignment.</li>
</ul>


4WP Style Switcher

Apply theme.json style variations per page or let visitors switch styles on the frontend (FSE block themes).

Block Style Modifiers vs 4WP Style Switcher