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.

📥 Imported templates and Starter Sites using Atomic Wind blocks

If you import a Gutenberg template or a Neve Starter Site and see generic block names such as Box, Text, Image, Link, or Icon, this is not an import failure. Those blocks are part of Otter's Atomic Wind feature.

Because Atomic Wind uses foundational building blocks instead of the classic Otter-style block names, the structure in the editor can look different even when the imported page is working correctly.

✍️ How to edit Atomic Wind content in imported pages

1. Open the page in the Block Editor and enable List View to quickly see nested blocks.
2. Expand parent Box blocks until you find the exact inner block you want to edit.
3. Select the inner Text, Image, Link, or Icon block to edit content directly.
4. Use the block toolbar and right sidebar to adjust layout, spacing, typography, colors, and other styles.
5. For utility-style classes, open the block settings and go to Advanced > Additional CSS Classes. You can add classes such as mb-5 (for example, a margin-bottom utility) to customize spacing.

🎨 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.

⚡ Interactivity & State Management (Experimental)

📝 Note: State management support is experimental. Its behavior may change as we continue improving it.

Atomic Wind blocks support state-based interactivity, which lets blocks communicate with each other on the page. A block configured as a State Trigger can activate or deactivate other blocks — such as tabs, accordions, or conditionally displayed content — without requiring any custom code.

Setting Up a State Trigger

To configure a block as a State Trigger, open its settings in the block editor sidebar and locate the Interactivity section. You can then configure the following options:

• State Key — A name that identifies which state this block controls. Other blocks that react to this state must use the same key.
• Action — Choose what happens when the trigger is activated:
  • Toggle — Switches the state between active and inactive each time the trigger is used.
  • Set — Changes the state to a specific value you define in the State Value field. Use this when you have multiple triggers that each activate a different state (for example, tab buttons).
• Default State — Enable this option to mark the block as the active state when the page first loads. Only one trigger per state key should have this enabled.

Example Use Cases

• Tabs — Set up multiple Link or Box blocks as State Triggers using the same state key, each with the Set action and a different state value. Each block in the tab content area can then listen to the matching state value to show or hide itself.
• Accordion — Use a Link or Text block as a Toggle trigger to expand and collapse a content area.
• Conditional content — Show different content blocks based on which State Trigger the visitor has activated.

🛟 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.

I can't edit an Atomic Wind element

• Make sure you selected the inner content block (Text, Image, Link, or Icon) and not only the parent Box container.
• Open List View and expand nested containers so you can target the exact block that contains the content.
• Confirm the block toolbar and settings sidebar are visible in the editor.
• If the element still appears uneditable, note the exact page URL and block name, then contact support with those details.

⚠️ 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.