Atomic Wind Blocks (Experimental)

📝 Note: This is part of the Otter Blocks plugin, which you can get from here.

⚠️ Experimental Feature: Atomic Wind Blocks is an experimental feature that is still under active development. Behavior, block names, and available options may change in future versions. It is strongly recommended to test this feature on a staging site before enabling it on a live production site.

Atomic Wind Blocks is an experimental set of five new Gutenberg blocks introduced in Otter Blocks. These blocks use a utility-first CSS approach powered by Tailwind CSS, giving you fine-grained control over styling directly inside the block editor. This guide explains how to enable the feature and provides an overview of each block and its supporting capabilities.

🔧 How to Enable Atomic Wind Blocks

Atomic Wind Blocks must be manually enabled from the Otter Settings panel before the blocks become available in the editor.

1. In your WordPress Dashboard, navigate to Otter > Settings.
2. Click on the Dashboard tab.
3. Locate the Enable Atomic Wind Blocks toggle and turn it on.
4. Click Save Changes.

Once enabled, a new Atomic Wind category will appear in the Gutenberg block inserter, containing the five new blocks.

🧱 Included Blocks

The Atomic Wind category adds five new blocks to your editor:

• Box — A flexible layout container for grouping and arranging other blocks. Use it to build structured sections with full control over spacing, background, and borders.
• Icon — A flexible icon block that lets you insert and style icons independently of other elements.
• Image — A high-performance image block optimized for speed and visual quality, with extended styling options compared to the default WordPress image block.
• Link — A versatile block for creating buttons and inline text links, with full styling control over appearance and interactive states.
• Text — A block for headings and paragraphs, designed to give you precise typographic control using the Tailwind-based styling system.

🎨 Tailwind-Based Styling Approach

Atomic Wind Blocks use a utility-first CSS approach inspired by Tailwind CSS. Instead of writing custom CSS or relying on a theme's predefined styles, you apply small, composable utility classes directly through the block's settings panel.

Key points about how styling works:

• Styles are generated using the Tailwind CSS pipeline, meaning only the CSS classes you actually use are included in the output — keeping page load times low.
• You can control layout, spacing, typography, color, borders, and more through the block options without touching any code.
• Because styles are utility-first, the blocks are theme-independent — they look consistent regardless of the active WordPress theme.

📝 Note: The Tailwind-based styling system is what makes these blocks "atomic" — each style property is controlled individually, giving you a high degree of flexibility. This is different from how standard Gutenberg blocks apply styles.

✨ Key Features

Atomic Wind Blocks ship with several supporting features that extend what you can do with each block:

• Animations — Add built-in entrance and state-based animations to blocks without any custom code. Choose from a variety of animation effects that trigger as elements enter the viewport or respond to user interaction.
• States — Define distinct styles for interactive states such as Hover, Focus, and others. This makes it straightforward to build interactive buttons, links, and containers that respond visually to user actions.
• Query Builder — Use the advanced query builder to power dynamic content display. This feature gives you fine-grained control over which content is shown based on conditions, making it suitable for building dynamic layouts and templates.

🛟 Troubleshooting

• The Atomic Wind block category is not visible in the editor — Make sure you have saved the settings after enabling the toggle. Try refreshing the editor page after saving.
• Styles are not applying as expected — Because styles are generated via the Tailwind CSS pipeline, clearing your site's caching plugin after making changes may be required to see the latest output.
• The feature is causing unexpected behavior on your site — As an experimental feature, conflicts with other plugins or themes are possible. Disable the toggle in Otter > Settings > General to turn off Atomic Wind Blocks and restore the previous state.

⚠️ Important: Always test experimental features on a staging environment first. Enabling Atomic Wind Blocks on a live site before verifying compatibility may result in layout or style issues that are visible to your visitors.