Block editorLesson 1 of 5 · 6 steps

Build with Spectra

Add a Spectra section without disturbing the surrounding blocks.

Video coming soon

Your next step is ready.

Follow the complete written guide below.
The video will join it here when it’s ready.

Start the written lesson

Before you start

EMCP Free and a verified AI connection.
Spectra plugin active; Astra is not required.
A Gutenberg draft.

Let’s do this, step by step.

Step 01

Enable and save the pack

Open Setup → Page Builders. Switch on Spectra 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 → Spectra. 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 Spectra'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

Insert a native section

Ask for one feature section using the discovered Spectra heading and container blocks.

Let the integration create native IDs and default values. Keep the other Gutenberg blocks in place.

Step 05

Make a focused update

Read fresh block positions and replace the intended block with complete native saved markup.

An update needs the whole selected block, including its nested content. Do not replace only a few attributes and drop the saved structure.

Step 06

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