Custom CSS, HTML embeds, carousels, CMS early access
This month, we’re featuring a number of recent new additions to the component store!
Custom CSS
For those Plasmic Studio users who know CSS—you can now inject arbitrary CSS onto pages.
You can use this to apply CSS to individual elements, including styles that are not yet supported in Plasmic Studio. Simply define the class, and then on any element you want, apply the class there. Want to introduce a custom keyframe animation, advanced typographic settings, or a clip-path shape? You can now make these quick edits here without needing to drop down into the app host.
This also includes complex CSS selectors, such as selecting only odd-numbered children or in-focus descendants.
Note: you can do whatever you want with CSS, so just be aware that Plasmic Studio won’t gracefully be able to handle everything. And if you set styles that are normally configured via the right sidebar, Plasmic Studio won’t necessarily reflect the true state of certain styles in the respective style controls.
HTML embeds
You can now paste arbitrary code embeds. Add social media widgets, CRM lead gen forms, Vimeo media, email marketing signup forms, and much more, without needing to drop into the app host codebase.
Carousel slider
You can now drop in fully configurable instances of react-slick, powered by slick.js. It is fully configurable, without needing to look up any props!
Plasmic CMS in early access
Plasmic CMS has been released to an initial batch of early access users. It is a full API-first headless CMS, but directly integrated into Plasmic’s visual editor letting you drag and drop data directly into your designs.
(Want to use a third-party CMS? We also have first-class components coming soon for other leading content stores. Stay tuned!)
Reach out on the Slack Community if you are interested in joining early access.
And more
Can now “de-slot” slots—when editing a component, right-click any slot target and select “de-slot.” Note that this will remove the slot contents passed into any instance and promote the default slot contents.
Added plasmic info -p PROJECTID to query for project info including name, last published version, and host URL.
Added a simple example integration with Sanity CMS.
Can now right-click on variant-overridden text and remove text override.
Can now mark certain components as “global context” components, which are shown in a new Project Settings left tab. This is useful for any “globally configured” code component packages, which wrap your entire app in a context provider. See docs.
Can now add figure, figcation, and cite tags.