Block titles are finally here! Along with that, blocks are now centered on mobile, there's a taller vertical grid gap, and the global font-size has been decreased from 19px to 18px.
Block titles were something I was definitely undervaluing as a feature. Even if it's just a an auto-generated filename, they add so much context and memorability to what you're looking at. Overall things feel a lot more tidy with the titles & the spacing upgrades. Feel like the mobile presentation is honestly 2x better.
Next up is creating a good variant of Tailwind's prose plugin. I wanna get text blocks looking really good event with complex markdown, probably gonna be stealing the Apple Notes typography system for that.
Block titles aren't live yet, but here's a pretty cool view into the changes I've made to get them working: https://github.com/tvler/arena-next/compare/5f4d4af04c3663e5baefc62f5e8a92448715bfda..d6e3bc7bc272c60d8388c2749e05dcb90a8aea01
Basically, every block variant is now responsible for emitting its content, href and title values. These values can change at any time and can handle a block's loading state just by emitting nothing for all these values.
These values are rendered through a renderProps pattern, where the parent Block passes down a function to the variant expecting it to be called with the variant's values. Through some typescript magic, I'm able to enforce that the variants actually call & return this renderProp instead of just returning normal JSX. This is done by casting the renderProps return value as a slight extension of a ReactElement, and enforcing that a variant component returns this value instead of normally-inferred JSX.
export interface BlockVariantComponentChildrenReturn
extends React.ReactElement {
__isBlockVariantComponentChildrenReturn: true;
}
