If you build WordPress sites for a living, you already know the truth: custom blocks are the best way to deliver flexible, performant layouts that clients can actually edit… but they’re painfully repetitive to build.
The slow part usually isn’t the “hard” code — it’s the setup:
- translating a design into editable fields
- creating ACF field groups manually
- scaffolding the block structure
- wiring up templates and conditionals
- testing, tweaking, refreshing, and repeating
This post walks through a practical, agency-friendly workflow to build a production-ready ACF-powered Gutenberg block in ~10 minutes, using AI — without touching a page builder.
Why ACF blocks (still) win for agencies
Page builders are fast until they aren’t.
When you’re shipping client sites at scale, you start caring about:
- clean markup and predictable layout
- performance and Core Web Vitals
- reusable components across projects
- stable editing experience for clients
- control over exactly what’s editable (and what isn’t)
ACF blocks give you all of that — but historically they’ve come with a development tax.
AI changes the economics.
The “10-minute block” workflow
Here’s the flow we’ll use:
- Choose a block to build (simple but real)
- Describe the block + its fields (prompt)
- Generate the ACF field group + block scaffold
- Preview the block instantly
- Iterate safely with change summaries + linting
- Export it to reuse on other sites
To keep it realistic, we’ll build a Feature Grid block — one of the most common blocks agencies build over and over.
Step 1: Pick a real block you actually reuse (1 minute)
Choose something you know you’ll ship again:
- Feature grid
- Pricing table
- Testimonials
- Logos strip
- CTA band
- FAQ accordion
- Two-column “image + text” section
We’ll do:
Feature Grid block
- Heading + intro
- Repeater with icon + title + description
- Responsive 3-column layout on desktop
Step 2: Write a prompt that produces clean field structure (2 minutes)
The biggest AI mistake people make is prompting like a marketer instead of a developer.
The goal isn’t “make it beautiful.”
The goal is: turn design intent into structured, editable fields.
Use this prompt format:
- What the block is for
- What’s editable
- What repeats
- What’s optional
- Layout expectations
Copy/paste prompt template
Create a “Feature Grid” Gutenberg block using ACF.
Fields: heading (text), intro (textarea).
Add a repeater called features with: icon (image), title (text), description (textarea).
Add an optional toggle “Show CTA” and if enabled show: CTA label (text) + CTA URL (link).
Layout: 3 columns desktop, 2 columns tablet, 1 column mobile.
That single prompt usually gets you 90% of the way there.
Step 3: Generate the block (60 seconds)
At this point the AI should generate:
- block metadata (block.json)
- ACF field group (fields.php)
- render template (render.php)
- base styles (style.css) if needed
The key win: you’re skipping the entire “setup” phase and jumping straight to a working block.
Step 4: Preview instantly and validate the essentials (2 minutes)
The fastest way to waste time is to tweak styling before structure is correct.
First validate these basics:
✅ Field structure checks
- Are the field names sensible?
- Is the repeater structured properly?
- Are optional fields controlled by a toggle?
- Are image fields optional, and handled safely?
✅ Rendering checks
- If heading is empty, does it render cleanly?
- If a feature item has no icon, does layout break?
- If repeater has 0 items, does the block fail gracefully?
✅ Mobile checks
- Does it stack correctly on smaller screens?
- Are long titles handled without blowing out the grid?
When you can answer “yes” to those, it’s already usable.
Step 5: Iterate safely (2 minutes)
This is where AI tooling becomes agency-grade: iteration without fear.
Instead of manually editing three files and hoping you didn’t miss something, do controlled micro-iterations:
Example iteration prompts
Add a field
Add a “theme color” picker option for the block and output it as a CSS variable on the wrapper.
Improve empty states
If no features exist, output a placeholder message in the editor preview only. Do not show on frontend.
Refine markup
Wrap the grid in a container and add proper heading hierarchy (H2 for heading, paragraph for intro). Do not change existing field names.
The best practice is “one change per prompt” — it keeps output predictable and avoids AI overreach.
If something breaks:
- linting / PHP parsing catches it early
- errors can be sent back to AI
- version history lets you roll back cleanly
That’s the difference between “AI is a toy” and “AI is a dev tool.”
Step 6: Export it so you never build it again (1 minute)
Once the block is stable, export it in the format that fits your agency workflow:
Export to theme
Best when the block is specific to one site and lives with that theme.
Export as ZIP
Best for sharing with a team or moving into a repo manually.
Export as a plugin
Best for agencies building a reusable block library.
This is the move that saves you the most time long-term:
build once → reuse everywhere → improve over time.
What “10 minutes” actually means (and what it doesn’t)
You won’t ship a complete website pixel perfect.
But you absolutely can ship:
- feature grids
- CTAs
- testimonial sections
- logo clouds
- FAQ blocks
- pricing tables
- post query blocks
And those are the blocks agencies build constantly.
The real win isn’t the first block.
It’s that after you build five of these, you’ve basically created an internal library your team can deploy to new projects.
The takeaway
AI doesn’t replace proper development.
What it replaces is the grind:
- scaffolding
- repetitive field wiring
- template boilerplate
- tedious iteration loops
- “check manually… again”
If you’re building Gutenberg sites with ACF, the goal is simple:
Stay in WordPress. Stay in flow. Ship faster.