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.
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.