Story

Build articles using visually distinct storytelling

link Extension name

t2/story

link Extension Filters

1. t2/extension/story/post_type_args
   Allows to override programmatically the story post type args before registration.

   Parameters:

   • $post_type_args (array): The arguments array used to register the custom post type. Contains keys such as label, public, supports, etc. You can modify these values to customize the post type registration.

link Block names

t2/story, t2/story-chapter, t2/story-cover, t2/story-hero, t2/story-gallery,

link 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.

link Properties (t2.json)

• postType

  booleantrue

  Disable the story post type.

• loadBlocks

  booleantrue

  Load blocks in the extension.

• chapterThreshold

  float0.2

  Define chapter loading scroll threshold.

• galleryScrollMultiplier

  float1.25

  Define relative gallery scroll speed.

• allowedBlocks

  string[]'t2/story-chapter', 't2/story-cover', 't2/story-gallery'

  Allowed inner blocks

link

features

• rewriteSlug

  mixed'story'

  Rewrite slug string for the story post type.

• rewriteWithFront

  mixedtrue

  Rewrite with front for the story post type.

• hasArchive

  mixedfalse

  If the story post type has archive.

link Styling

link Theme.json values

link 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--bg variable 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.