For years I built client sites the “normal” way. Need a custom testimonial section? I would either: Use a page builder (and hate the bloat), Write a shortcode (and feel dirty), Or attempt a real native Gutenberg block… and spend 4–6 hours fighting block.json, React hooks, InnerBlocks, responsive attributes, and PHP render_callback just to get something that didn’t break on save.
I wanted native blocks — fast, lightweight, fully accessible, with proper block.json registration, clean React edit components, and optional server-side rendering in PHP. But the boilerplate was brutal. Then, in late April 2026, everything changed.
The Day I Discovered Cursor + Claude 4 Sonnet
I saw a short X thread from a developer I respect saying: “I just built a 7-feature pricing table block with toggle, schema markup, and animated counters in 11 minutes using Cursor + Claude 4 Sonnet. I’m never going back.”
I was skeptical. I’d tried Grok, ChatGPT, Copilot, and even the new WordPress Telex experiment. They were ok, not that impressive.
But I downloaded Cursor (the AI-first code editor), pointed it at a fresh plugin folder, and switched the model to Claude 4 Sonnet.
My first prompt was deliberately simple: Create a production-ready native Gutenberg block called Feature Grid. Use modern block.json. Support 3–6 columns, icon (Dashicon or SVG), heading, description, optional button. Add color controls for background, text, and accent. Make it fully responsive (1-col mobile, 2-col tablet, 3-col desktop).
42 seconds later Cursor had created the block.json
It even included proper wp.i18n, escaping, accessibility attributes, and a clean InnerBlocks wrapper. I was speechless.
The Blocks I’ve Built Since Then (Any Layout I Can Imagine)
Once I saw what was possible, I went crazy. Here are some of the blocks I’ve shipped to real client sites in the last 10 days:
1. Testimonial Carousel with Star Ratings + Autoplay
Drag-and-drop testimonials
5-star rating system (stored as attribute)
Autoplay + pause on hover + navigation arrows
Schema.org markup generated in render.php
Fully responsive + swipe on mobile
Time taken: 14 minutes (including 3 iterations)
2. Pricing Table with Monthly/Annual Toggle
React state for toggle
Animated price change
Highlighted “Most Popular” column
Custom color controls + hover effects
Server-side rendered for SEO
Time taken: 19 minutes
3. Interactive FAQ Accordion with JSON-LD Schema
Smooth CSS animations
Open multiple / single mode toggle
Auto-generates proper FAQ schema
Searchable (client-side filter)
Time taken: 12 minutes
4. Masonry-Style Image Gallery with Lightbox
Drag multiple images
Masonry layout via CSS Grid + JS
Click opens native lightbox (no extra library)
Caption + alt text editing inside the block
Time taken: 17 minutes
5. Feature Comparison Table (like the ones on Notion / Linear)
Add/remove rows & columns dynamically
Check/cross icons with color
Mobile-responsive (cards on mobile)
Time taken: 23 minutes
Every single one of these is 100% native Gutenberg, and it works perfectly in the Site Editor, Full Site Editing, and classic themes.
How I Prompt Claude 4 in Cursor (The Secret Sauce)
I now use a consistent workflow that gives me near-perfect results every time:
Step 1 – Project Rules (I created a .cursor/rules file)
Always use apiVersion: 3 and modern block.json schema
- Prefer render.php for dynamic content when possible
- Follow WordPress Coding Standards strictly
- Include proper escaping, sanitization, and i18n
- Make every block fully accessible (ARIA, keyboard nav, color contrast)
- Output complete, ready-to-build folder structure
Step 2 – The Master Prompt Template
You are an expert WordPress Gutenberg block developer.
Create a production-ready native block called [Block Name].
Requirements:
1. [list every feature, control, layout behavior]
2. Use block.json with apiVersion 3
3. Full responsive design (mobile-first)
4. Color, typography, and spacing controls
5. Accessibility best practices
6. Clean, commented code
I then iterate in Cursor’s chat sidebar:
– Add InnerBlocks support so users can put buttons inside each card
– Make the carousel use the new Interactivity API instead of vanilla JS
– Add a ‘Show on mobile only’ toggle attribute
Claude 4 Sonnet or Opus handles context across multiple files better than any model I’ve tried. It remembers what we already built and suggests smart improvements. Which is awesome. Now life gets easier, specially web developers who struggles to use Gutenberg. Hahaha!
Now I spend that time on design and user experience instead of boilerplate. The best part? I’m actually learning faster. Claude explains why it chose certain patterns (I used useBlockProps with className merging because…). I’ve leveled up my own Gutenberg skills dramatically in just two weeks.
Honest Limitations (Because I’m Not Selling You Anything)
You still need to test in a real WordPress environment (Claude is amazing but not perfect with every edge case of the Site Editor). Complex blocks sometimes need 2–3 follow-up prompts. And sometimes, the JSON output is broken, because AIs are not perfect, they also make mistakes like their human creators. You should understand the basics of Gutenberg. This is not “no-code” development. It’s “super-code”, development. These limitations are tiny compared to the 80–90% time savings.
My Honest Recommendation as of June 2026. If you are a WordPress developer who has ever thought:
“I wish I could just describe the block I want and have it appear…”
Then stop everything and install Cursor + switch to Claude 4 Sonnet today. It’s not just faster. It fundamentally changed what I believe is possible for a solo developer to ship. I went from avoiding custom blocks to actively suggesting them to clients because now they are fun instead of painful.
Enjoy vibe coding!