Story
Build articles using visually distinct storytelling
Last modified: April 18, 2023
Extension name
t2/story
Block names
t2/story, t2/story-chapter, t2/story-cover, t2/story-hero, t2/story-gallery,
Notes for use in projects
- The post title is handled with a block, so if your theme auto outputs the post title this needs to be removed.
- Try to let the story take the entire viewport. This means removing any theme outputs above the entry content such as post title, breadcrumbs etc.
- If your site has a crowded header with a lot of links, consider hiding it on the story single and show on hover/focus
- If you have a clean header (for example consisting of just a logo and a hamburger). Consider making the header background transparent.
- All transitions and animations are handles with css, so overriding them with theme style in possible and encouraged.
- Styles are written to work ootb with the latest WordPress version. Some overrides might be needed if you are running an earlier version.
Properties (t2.json)
Disable the story post type.
Load blocks in the extension.
Define chapter loading scroll threshold.
Define relative gallery scroll speed.
Allowed inner blocks
Styling
Theme.json values
| Name | Function | Default | css-variable |
|---|---|---|---|
| story-hero-heading | Sets the fontsize for hero heading | clamp(2.5rem, 6vw, 26rem) | --t2-story-hero-heading / --wp--custom--t-2-story--hero-heading |
| story-gallery-horizontal-margin | Sets the distance between images, should be relative | 10vw | --t2-story-gallery-horizontal-margin / --wp--custom--t-2-story--gallery-horizontal-margin |
| story-gallery-figure-height | Sets the gallery figure height | 40vh | --t2-story-gallery-figure-height / --wp--custom--t-2-story--gallery-figure-height |
| story-gallery-figure-width | Sets the gallery figure width | auto | --t2-story-gallery-figure-width / --wp--custom--t-2-story--gallery-figure-width |
| story-body | Sets the fontsize for hero chapters | 1.2rem | --t2-story-hero-body / --wp--custom--t-2-story--body |
| story-bg | Set the story background color | #fff | --t2-story-hero-bg / --wp--custom--t-2-story--bg |
Styling tips and tricks
- Use theme.json to set defaults, and use the variables if you need dynamic control.
- To achieve simple masking animations the story needs to know what the background color is. Remember to set that variable.
- If different stories or chapters have different background colors, remember to also set the
--wp--custom--t-2-story--bgvariable when you are setting the background color CSS. - All animations uses CSS transitions/animations and can be overriden or modified from the theme by changing the CSS.
- Timing and other JS tweaks can be altered by using the t2 variables in the previous section. Please add an issue if you'd like to see more.