This is the simplest “happy path” from zero to working block.
Step 1 — Create the block
Go to SurgeWP → Blocks → Create New.
You’ll typically provide:
- A block name (human-friendly)
- A description of what it does
- Optionally, a screenshot
At this point you’re not worrying about ACF setup yet — you’re describing intent.
Step 2 — Prompt the AI
Write a prompt that describes:
- What the block looks like
- What content must be editable
- Any repeatable items (cards, slides, features)
- Any conditional behaviours (optional sections, toggles, featured states)
A strong prompt might be:
Build a “Feature Grid” block. It has a heading, short intro text, and 6 feature items. Each item has an icon, title, and one-line description. Make the feature items repeatable. Provide a layout that works in a 3-column grid on desktop and stacks on mobile.
SurgeWP will generate:
- ACF field structure that matches your intent
- Block template / render code
- Supporting assets where appropriate
Step 3 — Review the output
After generation, your job is to verify:
- Are the ACF fields correct and named sensibly?
- Does the render output match expectations?
- Are there missing states (e.g., featured/active styling)?
- Are there unnecessary fields you want removed?
This is where SurgeWP’s change summaries and previews become your safety net.
Step 4 — Preview the block
Open the block preview and validate:
- Default rendering doesn’t break
- Empty fields degrade gracefully
- Repeater fields behave correctly
- Responsive layout is acceptable
Step 5 — Iterate safely
If anything is off, you don’t start over. You instruct SurgeWP to modify the block:
Update this block: add an optional CTA button under the intro text. Add a toggle “Show CTA” and only render the button if enabled.
This is where SurgeWP really saves time — the block evolves quickly without manual rewiring.