Create reusable block pattern

Create a reusable block pattern for product announcement posts that includes a full-width hero with heading, subtitle, CTA button linked to the product page, and a three-column feature list. Make the pattern available in the editor under My Patterns, name it Product Announcement, and document in two short lines how editors should swap the hero image and change the CTA URL. Verify adding it to a draft post reproduces spacing correctly at mobile widths.

Before I submit the new pattern to the content team, make it approval-ready. Move the savings or key benefit into a highlighted line at the top, make the CTA visibly distinct, and expose which text fields editors must update. Provide a short checklist that flags common mistakes: leaving placeholder copy, missing alt text on the hero, and breaking the three-column layout on small screens.

I just created a reusable pattern with a three-column features row, and when editors preview on phones two columns stack while the design expects one per row. I am not sure whether block settings or theme CSS controls the breakpoint. I worry editors will publish broken layouts. What is the likely cause and the precise changes to the pattern or theme CSS so the columns behave as intended at mobile widths?

Despite having useful block patterns, editors keep copying content from old posts and recreating layouts, which wastes time and drifts styling. Where are we failing in adoption — pattern discoverability, naming, or training — and what single habit or change would make editors start using patterns reliably?