As someone deeply involved in user experience but not a traditional developer, I recently took over our company’s WordPress site. I inherited a site that technically worked, but from design systems and UX point of view, it felt rigid, inflexible, and hard to scale.
Don’t get me wrong — WordPress powers over 40% of the web, and for good reason. It’s versatile, backed by a massive community, and has more plugins than I can count. But when you approach WordPress with the UX mindset of crafting tailored experiences, reusing elegant components, and designing for consistent storytelling across pages… it can feel like trying to paint a mural with crayons.
One of the things I’ve really wanted is componentized design—reusable testimonial blocks, callouts, and CTAs—things I could plug in and reuse across different campaigns or product pages without reinventing the wheel. That’s how I’d think in Figma or a design system. But out of the box, WordPress’s Gutenberg blocks don’t always get me there, especially with the limited customization some themes lock you into.
So I started wondering… can AI actually help design for UX in WordPress?
Turns out: yes. Below is a custom WordPress block inspired by a testimonial I wanted to reuse across our site. I fed ChatGPT an image of the layout, which helped turn it into a flexible, reusable Gutenberg block. This is the kind of creative partnership between UX and AI that I get excited about.
WordPress Custom Block: Testimonial with Image and Quote
Here’s a fully functioning Gutenberg block written in JSX using React (compatible with @wordpress/scripts). You can drop this into a custom plugin or your theme’s blocks folder.
testimonial-block.js
jsx
CopyEdit
import { registerBlockType } from ‘@wordpress/blocks’;
import { RichText, MediaUpload, InspectorControls } from ‘@wordpress/block-editor’;
import { Button, PanelBody } from ‘@wordpress/components’;
import ‘./style.css’;
registerBlockType(‘custom/testimonial-block’, {
title: ‘Testimonial with Image and Quote’,
icon: ‘format-quote’,
category: ‘widgets’,
attributes: {
imageUrl: { type: ‘string’ },
imageAlt: { type: ‘string’},
callout: { type: ‘string’, source: ‘html’, selector: ‘.callout-text’},
quote: { type: ‘string’, source: ‘html’, selector: ‘.quote-text’},
author: { type: ‘string’, source: ‘html’, selector: ‘.author’},
},
edit: ({ attributes, setAttributes }) => {
const { imageUrl, imageAlt, callout, quote, author } = attributes;
return (
<>
<InspectorControls>
<PanelBody title= “Image Settings”>
<MediaUpload
onSelect={(media) => setAttributes({ imageUrl: media.url, imageAlt: media.alt })}
allowedTypes={[‘image’]}
render={({ open }) => (
<Button onClick={open} isSecondary>
{imageUrl ? ‘Change Image’: ‘Choose Image’}
</Button>
)}
/>
</PanelBody>
</InspectorControls>
<div className=”testimonial-block”>
{imageUrl && <img src={imageUrl} alt={imageAlt} className=”testimonial-image” />}
<div className=”testimonial-content”>
<RichText
tagName= “p”
className=”callout-text”
value={callout}
onChange={(val) => setAttributes({ callout: val })}
placeholder= “Callout text (e.g. delivery for over 110,000 EOPs…)”
/>
<RichText
tagName= “blockquote”
className=”quote-text”
value={quote}
onChange={(val) => setAttributes({ quote: val })}
placeholder= “Testimonial quote…”
/>
<RichText
tagName= “p”
className= “author”
value={author}
onChange={(val) => setAttributes({ author: val })}
placeholder= “Author name and organization”
/>
</div>
</div>
</>
);
},
save: ({ attributes }) => {
const { imageUrl, imageAlt, callout, quote, author } = attributes;
return (
<div className=”testimonial-block”>
{imageUrl && <img src={imageUrl} alt={imageAlt} className=”testimonial-image” />}
<div className=”testimonial-content”>
<p className=”callout-text”>{callout}</p>
<blockquote className=”quote-text”>{quote}</blockquote>
<p className=”author”>{author}</p>
</div>
</div>
);
},
});
CSS: style.css
css
CopyEdit
.testimonial-block {
display: flex;
flex-wrap: wrap;
gap: 2rem;
background: #f9f9fc;
border-radius: 12px;
padding: 2rem;
align-items: center;
}
.testimonial-image {
max-width: 300px;
border-radius: 12px;
}
.testimonial-content {
flex: 1;
min-width: 300px;
}
.callout-text {
background: #4d3489;
color: #fff;
padding: 1rem;
border-radius: 8px;
font-weight: bold;
}
.quote-text {
font-style: italic;
color: #3f3f78;
margin: 1rem 0;
}
.author {
font-weight: 500;
color: #555;
}
To Use This Block:
- Create a folder in your theme or plugin called /blocks/testimonial-block/
- Save the JS file as testimonial-block.js and the CSS as style.css
- Register the block using @wordpress/scripts or enqueue it via functions.php
- Use it inside any page/post with Gutenberg
Final Thoughts
WordPress doesn’t have to limit your creativity as a UX pro. With just a bit of help — even from AI — you can turn static ideas into dynamic, reusable, user-centered components. And if you’re not a developer? Doesn’t matter. You’ve got vision — and now you’ve got tools to turn that vision into reality.
Want to turn more of your ideas into WordPress blocks? I’m happy to help.