A brief becomes a real page.Build with Otter Blocks
Build an Otter draft and regenerate its page styles.
Video coming soon
Your next step is ready.
Follow the complete written guide below.
The video will join it here when it’s ready.
Before you start
- EMCP Pro and a verified AI connection.
- Otter 3.2.5–3.2.x; Otter Pro only for premium vendor blocks.
- A Gutenberg draft.
Let’s do this, step by step.
Step 01
Enable and save the pack
Open Setup → Page Builders. Switch on Otter Blocks under 2. Gutenberg block plugins. Choose Save changes. A Not detected card lists missing requirements.
Start with the required plugin or theme active. Switch on this block pack and click Save changes. This does not convert existing content.
Step 02
Enable the actions and reconnect
Open Setup → Tools → Otter Blocks. Inspect read and write switches; enable the actions needed for this practice task, then Save changes and reconnect your AI app.
Open this integration’s Tools tab. Check both read and write actions; Pro read tools can also start off on a fresh install. Save your choices and reconnect the app so it reads the updated list.
Step 03
Read the current blocks
Ask the AI to inspect Otter Blocks's context, installed block schemas, and the draft's mixed block tree.
Read the draft before making changes. Keep its latest content version and block positions so edits do not overwrite newer work.
Step 04
Choose installed blocks or a local pattern
Inspect registered blocks and a locally available pattern. Use premium blocks only when they are actually available.
The installed catalog tells you what this site supports. A pattern may reference remote images, which are not automatically downloaded.
Step 05
Save content and rebuild styles
Insert complete native blocks, then use the supported page-style rebuild and read back the result.
Otter needs its saved markup and styles to agree. For Atomic Wind features, verify the browser-generated styles in the native editor too.
Step 06
Review feature switches separately
Read available settings before changing a supported feature switch. Keep content and site-wide feature changes separate.
A site-wide feature toggle can affect other pages. If all you need is a content edit, leave those settings alone.
Step 07
Check the native editor
Read the saved blocks and open Gutenberg. Check for invalid-content warnings, then inspect desktop and phone previews.
A working frontend does not prove the blocks remain editable. Check the native editor, spacing, links, and images before publishing. Saves on published pages can take effect immediately.
You’re done when…
The Otter Blocks section is editable in Gutenberg, has no invalid-block warnings, and displays correctly.
Keep the reference handy.
The docs cover tool details and requirements for this lesson.
You only need the guide for the app or builder you use. Ready to build? Try an Elementor draft or use Gutenberg.