Block editorLesson 3 of 5 · 6 steps

Build with GenerateBlocks

Create a styled GenerateBlocks V2 section.

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 Pro and a verified AI connection.
GenerateBlocks V2 active; docs verified version 2.4.0.
A Gutenberg draft.

Let’s do this, step by step.

Step 01

Enable and save the pack

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

Build with matching styles

Ask the AI to add a native container and text using supported style inputs.

GenerateBlocks V2 needs both the style settings and the matching generated CSS. The insertion tools prepare those together.

Step 05

Preserve styling during edits

For updates, retain native IDs, style objects, and compiled CSS in the complete saved markup.

A text change should not break the style connection. Keep GeneratePress theme settings separate from the block content.

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