Gutenberg

Design a hero section pattern using only core blocks

A scenario prompt that builds a full-width hero for a product launch page from Cover, Heading, Paragraph, and Buttons blocks, with no custom HTML and no plugin blocks.

Works with Claude / GPT1,420 uses 4.5

The prompt

gutenberg-hero-section-block-pattern
We're launching a new project management app next week and need a hero section
at the top of the landing page. Marketing gave me this copy:

Headline: "Plan less. Ship more."
Subhead: "The project tool that gets out of your team's way."
Primary button: "Start free trial" (links to /signup)
Secondary button: "Watch demo" (links to /demo)
Background: a photo of a team standing at a whiteboard, file name team-whiteboard.jpg

[replace with your own headline, subhead, button labels/links, and background image]

Build this as core-block-only Gutenberg markup, no custom HTML block, no
third-party pattern library. Work through it in this order:

1. Wrap the section in a `wp:cover` block set to full width (`alignfull`), using
   the background image as the cover's media. Set a dark overlay (dimRatio around
   40-50) so white heading text stays readable against a busy photo, don't just
   drop white text on the raw image and hope it's legible everywhere the photo is
   bright.
2. Inside the cover, nest a `wp:heading` (level 1, since this is the page's main
   heading) for the headline, a `wp:paragraph` for the subhead, and a `wp:buttons`
   block containing two `wp:button` blocks, one filled (primary) and one outline
   (secondary).
3. Give the background image real alt text describing the scene ("Team collaborating
   at a whiteboard") even though it's decorative background, some themes still
   expose cover images to assistive tech and an empty alt on a large hero image is
   a common audit flag.
4. Check block nesting depth: cover > buttons > button is fine, but don't nest an
   extra unnecessary group inside the cover, that's a validation-error trap when
   the theme's cover block template doesn't expect an extra wrapper.
5. Output the full `<!-- wp:cover -->` ... `<!-- /wp:cover -->` markup, ready to
   paste into the code editor view.

Cover blocks are the right tool here instead of a Group with a CSS background image, since Cover handles the overlay, focal point, and responsive image sizing natively without extra CSS. Test the pattern with a genuinely bright and a genuinely dark photo before locking in the overlay percentage, one value rarely suits both.