WP Copilot
Search… /
Gutenberg

Write a block pattern for a product feature showcase section

A scenario prompt that builds four alternating image-and-text feature blocks for a SaaS product page using the Media & Text block, with attention to reading order for keyboard and screen reader users.

Works with Claude / GPT780 uses★ 4.2

The prompt

gutenberg-product-feature-showcase-pattern 
Our product page needs to showcase four core features, each with a screenshot
and a short description, alternating image-left and image-right down the page:

1. "Real-time collaboration" - "See your team's edits appear instantly, no
   refresh needed." screenshot-collab.png
2. "Custom dashboards" - "Build the exact view your team checks every morning."
   screenshot-dashboard.png
3. "Automated reports" - "Get a summary in your inbox every Monday, zero setup."
   screenshot-reports.png
4. "Granular permissions" - "Control exactly who sees what, down to the field
   level." screenshot-permissions.png

[replace with your own feature names, descriptions, and screenshots]

Build this as four `wp:media-text` blocks stacked down the page:

1. Alternate the `mediaPosition` attribute between each feature ("left" for
   feature 1, "right" for feature 2, and so on), so the page visually zigzags
   instead of every feature having the image on the same side.
2. Inside each Media & Text block's text side, use a `wp:heading` (level 3) for
   the feature name and a `wp:paragraph` for the description, don't put both in a
   single paragraph with the name manually bolded, that's not a real heading and
   breaks the page's outline.
3. Flag this explicitly rather than letting it slip through: the Media & Text
   block's "media on right" setting is a purely visual flip, it does not change
   the underlying markup order, the image still comes before the text in the
   actual DOM regardless of which side it displays on. For a keyboard or screen
   reader user tabbing through linearly, that means every single feature is
   announced image-then-text even on the ones where it visually looks like
   text-then-image. Note this isn't something to "fix" exactly, since it's how
   the block works, but call it out so nobody assumes the reading order alternates
   along with the visual layout.
4. Give each screenshot descriptive alt text tied to what it actually shows
   ("Dashboard builder screen with drag-and-drop widget panel"), not the feature
   name repeated as alt text, since sighted users already have the heading right
   next to the image and a screen reader user needs the image description to add
   information the heading doesn't already give them.
5. Output all four `wp:media-text` blocks in sequence, alternating media position
   as described.

The DOM-order caveat in step 3 is worth surfacing to whoever’s building the page even if there’s no fix for it, since it’s the kind of detail that only becomes obvious after a screen reader test, well after the page has already shipped.