{"id":642,"date":"2025-04-02T11:40:07","date_gmt":"2025-04-02T11:40:07","guid":{"rendered":"https:\/\/adhdux.com\/?p=642"},"modified":"2025-03-25T12:25:05","modified_gmt":"2025-03-25T12:25:05","slug":"designing-for-ux-in-wordpress-a-non-developers-take","status":"publish","type":"post","link":"https:\/\/adhdux.com\/?p=642","title":{"rendered":"Designing for UX in WordPress \u2013 A Non-Developer’s Take"},"content":{"rendered":"\n

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<\/em>, but from design systems and UX point of view, it felt rigid, inflexible, and hard to scale.<\/p>\n\n\n\n

Don’t get me wrong \u2014 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\u2026 it can feel like trying to paint a mural with crayons.<\/p>\n\n\n\n

One of the things I’ve really wanted is componentized design\u2014reusable testimonial blocks, callouts, and CTAs\u2014things 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.<\/p>\n\n\n\n

So I started wondering\u2026 can AI actually help design for UX in WordPress?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

WordPress Custom Block: Testimonial with Image and Quote<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

testimonial-block.js<\/h3>\n\n\n\n

jsx<\/p>\n\n\n\n

CopyEdit<\/p>\n\n\n\n

import { registerBlockType } from ‘@wordpress\/blocks’;<\/p>\n\n\n\n

import { RichText, MediaUpload, InspectorControls } from ‘@wordpress\/block-editor’;<\/p>\n\n\n\n

import { Button, PanelBody } from ‘@wordpress\/components’;<\/p>\n\n\n\n

import ‘.\/style.css’;<\/p>\n\n\n\n

registerBlockType(‘custom\/testimonial-block’, {<\/p>\n\n\n\n

  title: ‘Testimonial with Image and Quote’,<\/p>\n\n\n\n

  icon: ‘format-quote’,<\/p>\n\n\n\n

  category: ‘widgets’,<\/p>\n\n\n\n

  attributes: {<\/p>\n\n\n\n

    imageUrl: { type: ‘string’ },<\/p>\n\n\n\n

    imageAlt: { type: ‘string’},<\/p>\n\n\n\n

    callout: { type: ‘string’, source: ‘html’, selector: ‘.callout-text’},<\/p>\n\n\n\n

    quote: { type: ‘string’, source: ‘html’, selector: ‘.quote-text’},<\/p>\n\n\n\n

    author: { type: ‘string’, source: ‘html’, selector: ‘.author’},<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

  edit: ({ attributes, setAttributes }) => {<\/p>\n\n\n\n

    const { imageUrl, imageAlt, callout, quote, author } = attributes;<\/p>\n\n\n\n

    return (<\/p>\n\n\n\n

      <><\/p>\n\n\n\n

        <InspectorControls><\/p>\n\n\n\n

          <PanelBody title= “Image Settings”><\/p>\n\n\n\n

            <MediaUpload<\/p>\n\n\n\n

              onSelect={(media) => setAttributes({ imageUrl: media.url, imageAlt: media.alt })}<\/p>\n\n\n\n

              allowedTypes={[‘image’]}<\/p>\n\n\n\n

              render={({ open }) => (<\/p>\n\n\n\n

                <Button onClick={open} isSecondary><\/p>\n\n\n\n

                  {imageUrl ? ‘Change Image’: ‘Choose Image’}<\/p>\n\n\n\n

                <\/Button><\/p>\n\n\n\n

              )}<\/p>\n\n\n\n

            \/><\/p>\n\n\n\n

          <\/PanelBody><\/p>\n\n\n\n

        <\/InspectorControls><\/p>\n\n\n\n

        <div className=”testimonial-block”><\/p>\n\n\n\n

          {imageUrl && <img src={imageUrl} alt={imageAlt} className=”testimonial-image” \/>}<\/p>\n\n\n\n

          <div className=”testimonial-content”><\/p>\n\n\n\n

            <RichText<\/p>\n\n\n\n

              tagName= “p”<\/p>\n\n\n\n

              className=”callout-text”<\/p>\n\n\n\n

              value={callout}<\/p>\n\n\n\n

              onChange={(val) => setAttributes({ callout: val })}<\/p>\n\n\n\n

              placeholder= “Callout text (e.g. delivery for over 110,000 EOPs…)”<\/p>\n\n\n\n

            \/><\/p>\n\n\n\n

            <RichText<\/p>\n\n\n\n

              tagName= “blockquote”<\/p>\n\n\n\n

              className=”quote-text”<\/p>\n\n\n\n

              value={quote}<\/p>\n\n\n\n

              onChange={(val) => setAttributes({ quote: val })}<\/p>\n\n\n\n

              placeholder= “Testimonial quote…”<\/p>\n\n\n\n

            \/><\/p>\n\n\n\n

            <RichText<\/p>\n\n\n\n

              tagName= “p”<\/p>\n\n\n\n

              className= “author”<\/p>\n\n\n\n

              value={author}<\/p>\n\n\n\n

              onChange={(val) => setAttributes({ author: val })}<\/p>\n\n\n\n

              placeholder= “Author name and organization”<\/p>\n\n\n\n

            \/><\/p>\n\n\n\n

          <\/div><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

      <\/><\/p>\n\n\n\n

    );<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

  save: ({ attributes }) => {<\/p>\n\n\n\n

    const { imageUrl, imageAlt, callout, quote, author } = attributes;<\/p>\n\n\n\n

    return (<\/p>\n\n\n\n

      <div className=”testimonial-block”><\/p>\n\n\n\n

        {imageUrl && <img src={imageUrl} alt={imageAlt} className=”testimonial-image” \/>}<\/p>\n\n\n\n

        <div className=”testimonial-content”><\/p>\n\n\n\n

          <p className=”callout-text”>{callout}<\/p><\/p>\n\n\n\n

          <blockquote className=”quote-text”>{quote}<\/blockquote><\/p>\n\n\n\n

          <p className=”author”>{author}<\/p><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

      <\/div><\/p>\n\n\n\n

    );<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

});<\/p>\n\n\n\n

CSS: style.css<\/h3>\n\n\n\n

css<\/p>\n\n\n\n

CopyEdit<\/p>\n\n\n\n

.testimonial-block {<\/p>\n\n\n\n

  display: flex;<\/p>\n\n\n\n

  flex-wrap: wrap;<\/p>\n\n\n\n

  gap: 2rem;<\/p>\n\n\n\n

  background: #f9f9fc;<\/p>\n\n\n\n

  border-radius: 12px;<\/p>\n\n\n\n

  padding: 2rem;<\/p>\n\n\n\n

  align-items: center;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.testimonial-image {<\/p>\n\n\n\n

  max-width: 300px;<\/p>\n\n\n\n

  border-radius: 12px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.testimonial-content {<\/p>\n\n\n\n

  flex: 1;<\/p>\n\n\n\n

  min-width: 300px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.callout-text {<\/p>\n\n\n\n

  background: #4d3489;<\/p>\n\n\n\n

  color: #fff;<\/p>\n\n\n\n

  padding: 1rem;<\/p>\n\n\n\n

  border-radius: 8px;<\/p>\n\n\n\n

  font-weight: bold;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.quote-text {<\/p>\n\n\n\n

  font-style: italic;<\/p>\n\n\n\n

  color: #3f3f78;<\/p>\n\n\n\n

  margin: 1rem 0;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.author {<\/p>\n\n\n\n

  font-weight: 500;<\/p>\n\n\n\n

  color: #555;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

To Use This Block:<\/h3>\n\n\n\n
    \n
  1. Create a folder in your theme or plugin called \/blocks\/testimonial-block\/<\/li>\n\n\n\n
  2. Save the JS file as testimonial-block.js and the CSS as style.css<\/li>\n\n\n\n
  3. Register the block using @wordpress\/scripts or enqueue it via functions.php<\/li>\n\n\n\n
  4. Use it inside any page\/post with Gutenberg<\/li>\n<\/ol>\n\n\n\n

    Final Thoughts<\/h2>\n\n\n\n

    WordPress doesn’t have to limit your creativity as a UX pro. With just a bit of help \u2014 even from AI \u2014 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 \u2014 and now you’ve got tools to turn that vision into reality.<\/p>\n\n\n\n

    Want to turn more of your ideas into WordPress blocks? I’m happy to help.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 \u2014 WordPress powers over 40% of the<\/p>\n

    Continue reading<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[10,6,7,4,165],"class_list":["post-642","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-uxdesign","tag-uxresearch","tag-uxstrategy","tag-uxui","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=642"}],"version-history":[{"count":1,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/642\/revisions\/643"}],"wp:attachment":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}