A brief becomes a real page.Build and edit with the WordPress block editor
Create a draft from native blocks and keep it valid in Gutenberg.
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
- A working connection; Elementor is not required.
Let’s do this, step by step.
Step 01
Inspect blocks and patterns
Ask the AI to list installed blocks and inspect a heading, paragraph, and group.
Gutenberg uses blocks instead of Elementor widgets. The AI needs the actual blocks and saved format available on this site.
Step 02
Create the draft
Create one WordPress draft and add a heading, introduction, service section, and contact link using native blocks.
Keep the example small. Use normal editable blocks rather than placing the entire page in a single custom HTML block.
Step 03
Read before editing
Read the saved block tree. Use its current positions to update or move a block.
Block positions can change when something is inserted or moved. Read the tree again after edits so the next change targets the right block.
Step 04
Try a pattern
Inspect an installed pattern, then insert it at a specific position in the draft.
A pattern is a ready-made arrangement of blocks. Check its content and links after insertion; it is a starting point, not a finished page.
Step 05
Validate in the editor
Open Gutenberg and check for invalid-content warnings. Preview desktop and phone widths.
A page can look fine on the frontend while its blocks are invalid in the editor. Check both before deciding it is ready.
You’re done when…
The draft opens without invalid-block warnings and remains editable on desktop and mobile.
Keep the reference handy.
The docs cover tool details and requirements for this lesson.