Gutenberg

Build a full-width image gallery block pattern

A scenario prompt that lays out a twelve-photo portfolio gallery edge to edge, covering per-image alt text, caption structure, and the theme support required for a true full-bleed gallery.

Works with Claude / GPT890 uses 4.3

The prompt

gutenberg-full-width-image-gallery
I'm building a portfolio page for a photography client with twelve images that
should run full-width, edge to edge, in a grid.

Images: wedding-01.jpg through wedding-12.jpg, three columns, each with a short
location caption like "Coastal ceremony, Big Sur"

[replace with your own image list, grid width, and captions]

Build this as a `wp:gallery` block set to full width alignment:

1. Set the gallery's alignment to `alignfull` and the column count to 3. Note
   up front that `alignfull` only renders edge to edge if the active theme
   declares `align-wide` support in its `theme.json` or `add_theme_support`, if
   it doesn't, the block will still save the alignfull attribute but visually
   render constrained to the content width, flag this as something to verify on
   the live site rather than assuming the markup alone guarantees the full-bleed
   look.
2. Each image inside the gallery needs its own genuine alt text describing that
   specific photo ("Bride and groom exchanging rings at sunset"), not a generic
   "wedding photo" repeated twelve times, and not left blank. The Gallery block
   does not auto-generate meaningful alt text from file names, that's the most
   commonly skipped step when populating a gallery quickly.
3. Add the location caption to each image's individual caption field inside the
   gallery, not as a single caption on the gallery block as a whole, individual
   captions render as a `<figcaption>` under each photo.
4. Keep a consistent crop ratio (square or a fixed landscape ratio) across all
   twelve images before uploading, an uncropped mix of portrait and landscape
   photos in a fixed 3-column gallery produces uneven row heights and visible
   gaps.
5. Output the complete `wp:gallery` block markup with all twelve images, alt text,
   and captions filled in from the example list above.

The theme-support caveat in step 1 is worth checking before spending time fine-tuning a gallery layout: a perfectly good full-width gallery block can look “broken” (visually boxed in) on a theme that never declared wide alignment support, and that’s a theme.json fix, not a block markup fix.