Grid, tokens as CSS variables, Suspense-style SSR fetching
Tokens as CSS variables
You can now easily reference the style tokens you created in Plasmic as CSS custom properties (sometimes nicknamed “CSS variables”) in your own code.
The tokens are exposed in the ".plasmic_tokens" class selector inside the generated CSS, and generated with the format: “--plasmic-token-${tokenName}".
To reference the tokens, you just need to import the project CSS file, add the ".plasmic_tokens” class to some element, and you're ready to start referencing your tokens in your own code.
/* Project CSS file generated by Plasmic. */
.plasmic_tokens {
--plasmic-token-red: #FF0000,
}
// Your own JSX code. Example for codegen users:
import projectcss from "./path/to/project/css/file"
...
<div className={projectcss.plasmic_tokens} style={{color: 'var(--plasmic-token-red)'}}>
<p>Text colored by the token.</p>
</div>Grid
You can now create CSS grid layouts in Plasmic!
Initially, you’ll be able to set either a fixed number of uniform columns, or auto-filled a dynamic number of columns based on min/max column width ranges.
This is perfect for any tiling or gallery display, without dealing with flexbox layout settings.
Grids complement responsive columns. Responsive columns are still likely the most recommended and convenient layout tool for common situations. So when might you reach for grid?
The most common reason: when you want to show a gallery of dynamically repeated elements based on data (such as products from a product catalog). This is not supported by responsive columns.
When you don’t just want a fixed number of columns—you just want to fill the grid with as many columns as you can, as long as each column is at least some min width.
When you want elements that span different numbers of rows or columns.
When you want to overlay elements. For instance, hero content on top of a video background or three.js canvas.
When you want more advanced layout control—including many features yet to come!
Suspense-style server-side data fetching with @plasmicapp/query
Ever since the introduction of Plasmic code components, you’ve been able to bring components that fetch data from any data source—any CMS, any commerce platform, any REST/GraphQL API. But making this play well with SSG/SSR data fetching has required a bit of elbow grease. This is because most SSG/SSR frameworks require you to fetch your data from some global root of the page, such as getStaticProps/getServerSideProps in Next.js.
You can now use a simple library, @plasmicapp/query, to perform isomorphic data fetching from any component. In other words, you can:
Create components that fetch data.
Drag and drop these anywhere in your page.
The data will be fetched server-side, resulting in a complete SSR render (or client-side if component is rendered dynamically). Everything “Just Works." No need to hoist fetches to a global scope. Plus, your data fetches themselves can be completely dynamic, based on props or context.
Under the hood, this is done by simulating Suspense-style data fetching. In the future, React will support this style of fetching natively on the server, and @plasmicapp/query will make it easy for you to transition to that paradigm.
See the full docs to learn more!
And more
Can now right-click any element to convert to link.
Components that have a single visible text slot have greatly simplified selection. You just can click on the whole thing—you no longer need to be careful whether you’re selecting/dragging the slot content, the slot, or the component! And double-clicking edits the text, the most common interaction. This makes it much easier and less “cerebral” to work with buttons, cards, pills, and much more.
The headless API’s PlasmicLoader.fetchComponentData() now includes the component’s displayName (docs).