Timeline spread: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-spread.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # Timeline spread Three eras, each given a whole editorial spread: a photograph on one side and, on the other, the date range set at display size with a title and a paragraph of copy under it. The picture changes sides between eras, and a currentColor hairline runs the full measure between one spread and the next, so three spreads read as three chapters of one document rather than three unrelated sections. Example images are included and can be replaced in the editor. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The three eras. Duplicate a wrapper group to add a fourth. - The photographs. Three media frames with example photographs. - The date ranges. Plain text, so 1946 to 1972, 1946-72 or The first quarter century all set. - The copy. Two to three sentences per era. - The arrangement. Ship this one where the eras want a rhythm, and timeline-chapters where they want equal weight: three wide plates across the whole measure with the date and the copy filed underneath. The signature moment ## The alternation and the ruled seam The picture changes sides between eras, and a hairline runs the full measure between them. Era one has the photograph left, era two right, era three left, so the eye is thrown across the page each time a chapter ends. That alternation on its own would read as three separate sections that happen to sit near each other; the seam is what stops it. Between one spread and the next runs a 1px currentColor rule across the whole 1240px measure, with the same spacing preset above and below it, so the three spreads read as three chapters of one document. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure - The 45/55 split - The scale collision - The seam 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 Three eras of one history, each given a whole editorial spread. Every era is a core/media-text: a photograph on one side, and on the other the date range at display size with a title and a real paragraph under it. Core blocks only: core/group, core/media-text, core/heading and core/paragraph. ### The signature moment: the alternation and the ruled seam The picture changes sides between eras, and a hairline runs the full measure between them. Era one has the photograph left, era two right, era three left, so the eye is thrown across the page each time a chapter ends. That alternation on its own would read as three separate sections that happen to sit near each other; the seam is what stops it. Between one spread and the next runs a 1px currentColor rule across the whole 1240px measure, with the same spacing preset above and below it, so the three spreads read as three chapters of one document. Both halves are needed and neither is decoration. Take the rules away and the alternation is just inconsistency. Take the alternation away and you have timeline-chapters, which is a different and quieter product. The seam is a group's own border-top, not a core/separator: Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub, and a group border is not affected. It is currentColor for the same reason the rest of the catalogue's rules are: it cannot resolve to nothing, it follows your text colour, and it inverts with the section if you recolour it. Make it yoursVariations and the edits to make first ### What to change first - The three eras. Duplicate a wrapper group to add a fourth. Two things to keep: give the new one a border-top like the middle eras, and flip its mediaPosition so the alternation carries on. The first era carries no rule and the last carries no bottom padding; those two belong to whichever eras are first and last. - The photographs. Three media frames with example photographs. Landscape crops sit best, because the picture is 45% of the spread and its own aspect ratio sets the height of the row. - The date ranges. Plain text, so 1946 to 1972, 1946-72 or The first quarter century all set. Anything much longer than about twenty characters wants the clamp floor lowering. - The copy. Two to three sentences per era. One sentence leaves the text column short beside a tall picture; five turns a spread into an article. - The arrangement. Ship this one where the eras want a rhythm, and timeline-chapters where they want equal weight: three wide plates across the whole measure with the date and the copy filed underneath. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. base for the ground, contrast for every piece of type, both ending on a colour WordPress guarantees. The seams are currentColor. - Your spacing scale. Every gap in the section, including the space either side of each hairline, is a spacing preset, so a theme with a generous scale gets longer chapters. ### What it decides for itself - Full bleed with a 1240px measure, and a 34rem measure for the copy inside each spread. - The 45/55 split and the alternation of which side the picture is on. - The scale collision between the date range and everything else. - The seam: currentColor, 1px, on the wrapper group rather than on a separator block. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.75rem, 3.4vw, 3rem) Technical notesBlock mechanics, responsive behaviour and constraints ### How an era is structured Each era is one wrapper group holding one core/media-text: - The wrapper carries the seam (border-top) and the vertical rhythm. The first era has no rule and no top padding, because the heading above it is the section's own opening; the last has no bottom padding, because the section's padding closes it. The two inner wrappers carry equal spacing-70 above and below, so both hairlines sit in the middle of an even gap. - The media is 45% of the spread (mediaWidth: 45, serialised as grid-template-columns: 45% auto, or auto 45% when the media is on the right), vertically centred against the words. It includes a public mediaUrl for an example photograph, without a site-specific mediaId. Choose Replace to select your own media. - The words sit in a nested constrained group at 34rem inside the content column, so the copy runs at about 65 characters rather than the width of the column. Inside it: the date range, then the title, then one paragraph. The date range is the loud element. It clamps between 28px and 48px with -0.03em tracking, against a title that tops out at 24px and body copy with a 16px floor. That scale jump is what makes a date read as a chapter number without anything being numbered. Type never touches the photograph. core/media-text keeps the picture and the words in two grid cells, so nothing is set over an image whose luminance nobody can predict. That is the whole reason this composition is safe with a buyer's own photographs in it. ### What happens at 390px core/media-text is not core/columns: it stacks at 600px, not 782px, and isStackedOnMobile is left at core's default. So between 601px and 782px the spreads are still two columns and only get tighter, and below 600px each era becomes one column with the picture first and the words beneath it, in every era. Core puts the figure in grid row 1 regardless of mediaPosition, so the alternation does not survive a phone: at 390 this pattern is a run of three picture-then-text chapters, which is the right reading order and is close to what timeline-chapters shows at every width. The seams do survive, because they are borders on the wrapper groups and stacking does not touch them, so the section still reads as three chapters on a phone. The content column keeps core's own padding: 0 8%, which gives the copy a 31px gutter at 390, and the 34rem measure stops applying because the column is narrower than it. ### Why it is a history and not a process Nothing is numbered, nothing is counted down, and there is no next step. The eras are real date ranges rather than positions in a sequence, and the last one is open ("2002 to now") because the yard is still working. It is also not the other two timelines. timeline-rail is six one-sentence moments hung on a vertical rule; timeline-decades is twenty packed lines under four decade heads. This one is three eras and nothing else, each with a photograph and a paragraph, which is a density decision before it is a styling one: where a rail shows the shape of a history, a spread shows three of its rooms. ### Notes - Core blocks only. No plugin, no script, no separator, no