{"id":269832,"date":"2026-01-08T12:56:58","date_gmt":"2026-01-08T12:56:58","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/block-style-modifiers\/"},"modified":"2026-02-06T12:48:11","modified_gmt":"2026-02-06T12:48:11","slug":"block-style-modifiers","status":"publish","type":"plugin","link":"https:\/\/twd.wordpress.org\/plugins\/block-style-modifiers\/","author":16124314,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.7","stable_tag":"1.0.7","tested":"6.9.4","requires":"6.1","requires_php":"7.4","requires_plugins":null,"header_name":"Block Style Modifiers","header_author":"Kadim G\u00fcltekin","header_description":"Adds additive, multi-select style modifiers to Gutenberg blocks.","assets_banners_color":"9babd2","last_updated":"2026-02-06 12:48:11","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/github.com\/Arkenon","rating":0,"author_block_rating":0,"active_installs":20,"downloads":283,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"arkenon","date":"2026-01-08 13:10:17"},"1.0.2":{"tag":"1.0.2","author":"arkenon","date":"2026-01-08 13:35:00"},"1.0.3":{"tag":"1.0.3","author":"arkenon","date":"2026-01-09 11:02:42"},"1.0.4":{"tag":"1.0.4","author":"arkenon","date":"2026-01-09 11:11:54"},"1.0.7":{"tag":"1.0.7","author":"arkenon","date":"2026-02-06 12:48:11"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3435145,"resolution":"128x128","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3435145,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3435145,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1","1.0.2","1.0.3","1.0.4","1.0.7"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3435153,"resolution":"1","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[204721,148857,13420,148076,253581],"plugin_category":[],"plugin_contributors":[221878],"plugin_business_model":[],"class_list":["post-269832","plugin","type-plugin","status-publish","hentry","plugin_tags-block-styles","plugin_tags-block-editor","plugin_tags-custom-styles","plugin_tags-gutenberg","plugin_tags-style-variations","plugin_contributors-arkenon","plugin_committers-arkenon"],"banners":{"banner":"https:\/\/ps.w.org\/block-style-modifiers\/assets\/banner-772x250.jpg?rev=3435145","banner_2x":"https:\/\/ps.w.org\/block-style-modifiers\/assets\/banner-1544x500.jpg?rev=3435145","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/block-style-modifiers\/assets\/icon-128x128.png?rev=3435145","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/block-style-modifiers\/assets\/screenshot-1.png?rev=3435153","caption":""}],"raw_content":"<!--section=description-->\n<p>Block Style Modifiers is a simple WordPress plugin that allows you to add multiple block styles to Gutenberg blocks.<\/p>\n\n<p>Style Modifiers are additive CSS classes that:<\/p>\n\n<ul>\n<li>Can be applied in addition to a Block Style<\/li>\n<li>Can be selected multiple at the same time<\/li>\n<li>Support both checkbox (non-exclusive) and radio (exclusive) behavior per category<\/li>\n<li>Are predefined and documented by themes or plugins<\/li>\n<li>Preserve class order, allowing advanced CSS control<\/li>\n<\/ul>\n\n<h4>Category Behavior<\/h4>\n\n<p>Style modifiers are organized into categories with two behaviors:<\/p>\n\n<ul>\n<li><strong>Non-exclusive categories<\/strong> (checkbox): Multiple modifiers can be selected simultaneously (default: <code>exclusive: false<\/code>)<\/li>\n<li><strong>Exclusive categories<\/strong> (radio): Only one modifier from the category can be selected at a time (<code>exclusive: true<\/code>)<\/li>\n<\/ul>\n\n<h4>Structured Category Object<\/h4>\n\n<p>Categories must be defined as objects with:<\/p>\n\n<ul>\n<li><code>slug<\/code> - Language-independent identifier for grouping (required)<\/li>\n<li><code>label<\/code> - Translatable UI label (required)<\/li>\n<li><code>description<\/code> - Optional category description<\/li>\n<li><code>exclusive<\/code> - Boolean flag for radio behavior (default: false)<\/li>\n<\/ul>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>Register multiple style modifiers for any block type<\/li>\n<li>Apply multiple style modifiers to a single block<\/li>\n<li>Global style modifiers that apply to all blocks<\/li>\n<li>Inline CSS support for easy styling of modifiers<\/li>\n<li>Structured category objects with exclusive\/non-exclusive behavior<\/li>\n<li>Theme-independent default modifiers via Block Style Modifier Pack<\/li>\n<\/ul>\n\n<h4>Default Modifiers<\/h4>\n\n<p>Block Style Modifiers includes theme-independent default modifiers that work with any WordPress theme:<\/p>\n\n<p><strong>Philosophy:<\/strong>\n* Enhance behavior, not visual design\n* No borders, shadows, spacing, or color palettes\n* Work with any theme without conflicts\n* Atomic and performant\n* Respect prefers-reduced-motion<\/p>\n\n<p><strong>Available Categories:<\/strong><\/p>\n\n<p><strong>Animations (Exclusive)<\/strong> - Entrance animations for wrapper blocks\n* Fade In - Smooth fade entrance\n* Slide Up - Slide from bottom\n* Slide Down - Slide from top\n* Slide Left - Slide from right\n* Slide Right - Slide from left\n* Scale In - Scale up animation\n* Rotate In - Rotate with fade\n* Flip In X - 3D flip animation\nApplied to: Group, Row, Stack, Grid, Column, Columns (wrapper blocks only)<\/p>\n\n<p><strong>Animation Delay (Exclusive)<\/strong> - Control animation timing\n* Fast (0.2s)\n* Normal (0.4s)\n* Slow (0.8s)<\/p>\n\n<p><strong>Hover Effects (Exclusive)<\/strong> - Transform-based hover interactions\n* Zoom In on Hover\n* Subtle Rotate on Hover\n* Bounce on Hover\n* Shake on Hover\n* Brighten on Hover\n* Darken on Hover\n* Grayscale to Color on Hover (Image\/Cover only)\n* Blur to Focus on Hover (Image\/Cover only)\nApplied to: Image, Cover, Media &amp; Text (content blocks only)<\/p>\n\n<p><strong>Text Effects (Exclusive)<\/strong> - Micro-interactions for text\n* Underline Reveal on Hover\n* Soft Text Fade on Hover\nApplied to: Paragraph, Heading (text blocks only)<\/p>\n\n<p>All default modifiers respect accessibility preferences and are disabled when prefers-reduced-motion is set.<\/p>\n\n<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 &amp; Text). This separation prevents CSS property conflicts and ensures all modifiers work seamlessly together.<\/p>\n\n<p>You can easily extend or override these defaults by registering your own style modifiers in your theme or custom plugin.<\/p>\n\n<h3>Usage<\/h3>\n\n<ul>\n<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>\n<li>Select style modifiers in the block editor sidebar under \"Block Style Modifiers\".<\/li>\n<li>Style modifiers will be applied as additional CSS classes to the block's wrapper element.<\/li>\n<li>It is possible that reordering of classes may affect CSS specificity and styling.<\/li>\n<\/ul>\n\n<p><strong>Note:<\/strong> There is available an experimental plugin includes blocks style modifiers:  <a href=\"https:\/\/github.com\/Arkenon\/block-style-modifier-pack\">Block Style Modifier Pack<\/a> plugin to function.<\/p>\n\n<h3>Registering a Block Style Modifier<\/h3>\n\n<p>You can easily register your own style modifiers in your theme or custom plugin.<\/p>\n\n<p>Here are some examples of how to register style modifiers with different category behaviors:<\/p>\n\n<h4>Exclusive Category (Radio Behavior)<\/h4>\n\n<pre><code>block_style_modifiers_register_style( [ 'core\/image', 'core\/cover' ], [\n    'name'        =&gt; 'zoom-on-hover',\n    'label'       =&gt; __( 'Zoom on Hover', 'my-theme' ),\n    'class'       =&gt; 'bsm-zoom-on-hover',\n    'description' =&gt; __( 'Zoom into image on hover', 'my-theme' ),\n    'category'    =&gt; [\n        'slug'        =&gt; 'hover-effects',\n        'label'       =&gt; __( 'Hover Effects', 'my-theme' ),\n        'description' =&gt; __( 'Transform-based hover interactions', 'my-theme' ),\n        'exclusive'   =&gt; true,\n    ],\n] );\n<\/code><\/pre>\n\n<h4>Non-Exclusive Category (Checkbox Behavior)<\/h4>\n\n<pre><code>block_style_modifiers_register_style( '*', [\n    'name'     =&gt; 'hide-sm',\n    'label'    =&gt; __( 'Hide on Small Screens', 'my-theme' ),\n    'class'    =&gt; 'bsm-hide-sm',\n    'category' =&gt; [\n        'slug'        =&gt; 'responsive',\n        'label'       =&gt; __( 'Responsive', 'my-theme' ),\n        'description' =&gt; __( 'Responsive visibility controls', 'my-theme' ),\n        'exclusive'   =&gt; false,\n    ],\n] );\n<\/code><\/pre>\n\n<p>That's it! You can now select multiple style modifiers for your blocks in the Block Editor.<\/p>\n\n<h3>Example Result in Markup<\/h3>\n\n<pre><code>class=\"wp-block-cover has-custom-content-position is-position-bottom-left bsm-zoom-hover bsm-fade-in bsm-delay-normal\"\n<\/code><\/pre>\n\n<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>\n\n<h3>Source Code<\/h3>\n\n<p>It is available on GitHub:\n* GitHub: https:\/\/github.com\/Arkenon\/block-style-modifiers<\/p>\n\n<!--section=installation-->\n<ol>\n<li>You have a couple options:\n\n<ul>\n<li>Go to Plugins -&gt; Add New and search for \"Block Style Modifiers\". Once found, click \"Install\".<\/li>\n<li>Download the Block Style Modifiers from wordpress.org and make sure the folder us zipped. Then upload via Plugins -&gt; Add New -&gt; Upload.<\/li>\n<\/ul><\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Add your custom style modifiers using the <code>register_block_style_modifier<\/code> function in your theme's <code>functions.php<\/code> file or a custom plugin.<\/li>\n<\/ol>\n\n<!--section=changelog-->\n<h4>1.0.7<\/h4>\n\n<ul>\n<li>Added: 5 new animation types (Slide Down, Slide Left, Slide Right, Rotate In, Flip In X)<\/li>\n<li>Added: 4 new hover effects (Shake, Brighten, Darken, Blur to Focus)<\/li>\n<li>Improved: Architecture - Animations now only apply to wrapper blocks (Group, Row, Stack, etc.)<\/li>\n<li>Improved: Architecture - Hover effects now only apply to content blocks (Image, Cover, Media &amp; Text)<\/li>\n<li>Fixed: CSS property conflicts between animations and hover effects<\/li>\n<li>Fixed: Grayscale effect renamed to \"Grayscale to Color on Hover\" for clarity<\/li>\n<li>Removed: Overlay hover effect (redundant with Darken effect)<\/li>\n<li>Performance: Optimized will-change properties for better GPU acceleration<\/li>\n<li>Accessibility: All new effects respect prefers-reduced-motion<\/li>\n<\/ul>\n\n<h4>1.0.6<\/h4>\n\n<ul>\n<li>Added: Structured category object support (slug, label, description, exclusive)<\/li>\n<li>Added: Exclusive category behavior (radio selection within categories)<\/li>\n<li>Added: Non-exclusive category behavior (checkbox selection - default)<\/li>\n<li>Breaking: Category must now be a structured object (string format no longer supported)<\/li>\n<li>Updated: Documentation with structured category examples<\/li>\n<li>Added: Default modifiers<\/li>\n<\/ul>\n\n<h4>1.0.5<\/h4>\n\n<ul>\n<li>Added: Structured category object support (slug, label, description, exclusive)<\/li>\n<li>Added: Exclusive category behavior (radio selection within categories)<\/li>\n<li>Added: Non-exclusive category behavior (checkbox selection - default)<\/li>\n<li>Breaking: Category must now be a structured object (string format no longer supported)<\/li>\n<li>Updated: Documentation with structured category examples<\/li>\n<li>Updated: Block Style Modifier Pack with theme-independent default modifiers<\/li>\n<li>Improved: Category-based grouping and selection UI<\/li>\n<\/ul>\n\n<h4>1.0.4<\/h4>\n\n<p>Updated: readme.txt<\/p>\n\n<h4>1.0.3<\/h4>\n\n<p>Updated: readme.txt<\/p>\n\n<h4>1.0.2<\/h4>\n\n<p>Updated: readme.txt<\/p>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Added: Source code section in readme.<\/li>\n<li>Escaped: $inline_style variable to prevent potential security issues.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release of Block Style Modifiers.<\/li>\n<\/ul>","raw_excerpt":"Add multiple block styles to Gutenberg blocks with ease.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/269832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=269832"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/arkenon"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=269832"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=269832"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=269832"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=269832"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=269832"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=269832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}