Gutenberg

Design a newsletter signup block pattern

A scenario prompt that structures a mid-content email signup section with core blocks, addressing the gap that core WordPress has no working signup form of its own and needs a plugin's embed handled carefully.

Works with Claude / GPT1,340 uses 4.4

The prompt

gutenberg-newsletter-signup-block-pattern
I want a newsletter signup section to insert into the middle of our blog posts:

Heading: "Get one useful marketing idea a week"
Subtext: "No fluff, unsubscribe anytime."
The actual form is a Mailchimp embed our email plugin provides as a shortcode:
[mc4wp_form id="582"]

[replace with your own heading, subtext, and your email plugin's shortcode or
embed block]

Build the surrounding structure in core blocks, and handle the embedded form
carefully:

1. Wrap the section in a `wp:group` with a background tint and rounded padding so
   it visually reads as a distinct callout, not just another paragraph in the
   article flow.
2. Add a `wp:heading` (level 3, since it's a sub-section within an article) and a
   `wp:paragraph` for the subtext.
3. For the actual form, use the core `wp:shortcode` block to hold the plugin's
   shortcode, not a `wp:html` (Custom HTML) block with the plugin's raw markup
   pasted in. A shortcode block re-resolves the plugin's current output every
   time the page renders, while pasted raw HTML from a Custom HTML block is a
   frozen snapshot that goes stale (broken styling, outdated field names) the
   next time the plugin updates.
4. If the shortcode itself is malformed (unbalanced quotes, a missing closing
   bracket), it will print as literal visible text on the page instead of
   rendering the form, and this fails silently, WordPress won't throw a visible
   error. Explicitly double check the bracket and quote balance in the shortcode
   text before finalizing.
5. Note directly in your output that core Gutenberg cannot capture email
   addresses on its own, this pattern only supplies the surrounding layout, an
   actual signup requires whatever email plugin or service is already providing
   that shortcode.
6. Output the complete group markup with the shortcode block placed inside it.

The Custom HTML versus Shortcode block distinction in step 3 is easy to overlook since both “just work” at first glance. The difference only shows up weeks later when the email plugin updates its form markup and the Custom HTML version quietly stops matching the plugin’s current styles or fields.