Expandable Blocks
Better-structure your content with an expand/collapse pattern.
A short and sweet one today, we're happy to introduce to you the Expandable block.

The Expandable block lets you create expandable-or-collapsible blocks in your content. Super useful for things like FAQs or multi-stepped documentation that would otherwise make for long and unruly pages.
Select the 'Expandable' option in the editor palette (
CMD + /
on Mac, CTRL + /
on Windows) to add the block wherever you need it.Enter a title or short description for the block, hit
Return
or tap the block's chevron icon to expand the block and start adding more content.The expandable block is best used when you know you have discrete pieces of content that won't all be relevant to any single reader at a given time. It's great for things like FAQs and multi-stepped content.
Heads up: these steps include example install and bash commands. Don't run them, just in case.
Let's extend the work we did in Step 2 to include some props from elsewhere in our code.
import SuperCool from 'super-cool'
const props = {
introText: 'Hello Shrek',
}
export const HelloWorld = SuperCool(
<h1>{props.introText}</h1>
).withProps(props)
SuperCool.render(HelloWorld, '#main');
We've had a lot of feedback asking for blocks like this and while it's a pretty simple addition to the editor, there's a bunch of new possibilities to explore when creating your content.
Last modified 10mo ago