How we test WordPress block patterns, Pattern Paste Canonical: https://patternpaste.com/how-we-test/ Behind the patterns # How we test WordPress block patterns How Pattern Paste checks WordPress block patterns: theme inheritance, responsive layouts, block validity and interactive fallbacks, and the limits. ## Start with a supported setup Pattern Paste is made for the WordPress block editor, also called Gutenberg, and a block theme on WordPress 6.7 or later. Check the supported version range on each pattern page. Classic themes and page builders are outside our supported setup. Layout patterns use core WordPress blocks and need no extra plugin. Adaptive patterns inherit your theme’s colours and type. Styled variations declare their own colours or type, and interactive patterns need the included companion plugin. These are separate choices, shown on the pattern page. ## The same blocks in different themes These existing WordPress renders show an unchanged sample made from a Group, heading, paragraph and button. The sample declares no colour, font family or font size. Its appearance changes with the theme. Twenty Twenty-Five Twenty Twenty-Four This example demonstrates theme inheritance for this sample. It does not prove that every pattern works in every theme. Read the comparison and its limitations (https://patternpaste.com/blog/why-block-patterns-look-different-from-demo/). ## What our verification workflow checks The standard theme checks use Twenty Twenty-Five and Twenty Twenty-Four. Responsive checks use viewport widths of 1920, 1280, 820, 390 pixels. These are the verification widths; the preview toolbar offers a separate set of browsing sizes. Block validity Parse the markup with WordPress and check registration and saved block structure. A layout that looks correct can still contain invalid block attributes. Theme inheritance Check colour and typography declarations against the pattern’s stated behaviour, then inspect the styles the browser resolves in WordPress. An authored palette is checked as an authored palette. Responsive layout Measure overflow, geometry and interaction targets at the verification widths, and review rendered screenshots for clipping, awkward crops and spacing. Contrast Measure text and background colour pairs from rendered styles. A colour reference in the source is not enough to establish what a visitor sees. Rendering errors Check for WordPress notices and rendering failures that may not be obvious in the screenshot. Verification is tied to the pattern and the inputs used for its checks. A changed pattern needs fresh evidence. This page describes the process; it is not a live pass certificate for every catalogue item or a claim that every intervening WordPress release has been tested. ## Interactive patterns have an extra dependency Install the Pattern Paste companion plugin before pasting a pattern labelled Needs plugin. Its custom block supplies the interactive behaviour. The interactive workflow checks motion and reduced-motion behaviour, and separately checks the content with the plugin absent. The fallback promise is readable headings, text and images in a plain layout. It does not promise the same animation or composition after deactivation. Browse interactive patterns (https://patternpaste.com/interactive/) or follow the installation and copying steps (https://patternpaste.com/how-it-works/). ## Check the result on your own site Our checks cannot cover every theme, plugin, saved Global Styles setting or content change. A styled variation can keep its palette while your theme still changes its spacing and dimensions. Automated contrast and layout checks are not a complete accessibility audit or certification. - Paste a pattern during your trial (https://patternpaste.com/patterns/) into a draft page in your block theme. - Replace the example text and images, then check long headings, image crops and links. - Inspect the page on desktop and mobile. Test keyboard navigation and any disclosure, navigation or motion controls. - Recheck contrast when you change colours or place text over a new image. Find a WordPress block pattern (https://patternpaste.com/patterns/) or read the product and compatibility questions (https://patternpaste.com/faq/).