Process switchback: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/steps-switchback.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Catalogue access Standard # Process switchback Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order. ## All patterns Search patterns Loading patterns… The signature moment ## The route changes direction at every landing Each landing has one heavy turning edge. Successive text groups shift between a broad inset and a narrow inset, so the route switches direction without reversing the numbered reading order. The indents shrink on a phone and the steps stay 1 to 4. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order. ### The signature moment: the route changes direction at every landing Each landing has one heavy turning edge. Successive text groups shift between a broad inset and a narrow inset, so the route switches direction without reversing the numbered reading order. The indents shrink on a phone and the steps stay 1 to 4. Theme behaviourInheritance, fixed decisions and contrast ### Display type Step numbers are 42px to 72px display paragraphs with close leading. Step titles and the section heading follow the theme heading ladder. Timing labels are 15px; descriptions follow medium. Technical notesBlock mechanics, responsive behaviour and constraints ### Theme inheritance The Core payload follows the theme’s base ground, contrast ink, heading face and button treatment. Its painter lets heading and link colour follow a recolour. Text is intended for 4.5:1 contrast, with 3:1 reserved for large display type. ### Styled look Silt #ECE4DA, charcoal #282522 and carmine #982F43, set in sturdy Arial. Carmine numbers follow the alternating landings and the final square action. Every action is deliberately filled or underlined. The Core payload preserves the same layout as the theme route. ### Editing Replace the four step titles, descriptions and timing notes in order. Duplicate an entire landing for a new step, then alternate its turning edge and inset. Questions ## Process switchback: common questions Does Process switchback need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Process switchback match my theme? Choose by variation. Theme takes your theme’s palette; Silt and carmine brings its own colours. How many variations does Process switchback have? 2: Theme and Silt and carmine. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Process switchback free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. 11KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. States no colour and no font of its own. (https://patternpaste.com/pattern/availability-calendar.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section How it works Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 4, font-size 3 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 9 How it works patterns (https://patternpaste.com/patterns/steps/) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps screens A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. How it works Preview pattern (https://patternpaste.com/pattern/steps-screens.html) Shot in Twenty Twenty-Five How it works No plugin needed ### TPO permission steps A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line. How it works Preview pattern (https://patternpaste.com/pattern/tpo-permission-steps.html) Shot in Twenty Twenty-Five How it works No plugin needed ### First visit to scale What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. How it works Preview pattern (https://patternpaste.com/pattern/first-visit-to-scale.html)