Send Slices to Prismic
These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.
These docs use the following package versions:
- prismic-reactjs: v1.3
- @prismicio/client: v5
The docs will soon be updated to use the latest versions of these packages. If you wish to use the latest versions today, you can update your project by following the migration guides for each package.
This article explains how to push Slices from Slice Machine to the Prismic UI and make them available for content editors.
Now that you've created your Slices, plus coded and styled the component using its mock data, you can push your Slices to Prismic to create Custom types models that your content editors use in their documents.
Add component previews
You can choose to have component preview images for each of your Slices so that they appear in the UI of your documents. There are a few options for doing this:
- Automatic screenshots: These images are auto-generated from your Storybook. The mock data that you use in your fields will appear here. To use them, open your Slice and click 'Take Screenshot'. Then, a preview of your component will appear in Slice Machine.
- Custom Previews: To add custom images, add an image named preview.png in the folder of your Slice in your project. For example, if your Slice name is HeroSlice, the path will be ~.slicemachine/assets/slices/HeroSlice/preview.png. Doing so will overwrite the default Storybook image.
- Placeholders: If you haven't created a preview/screenshot for your component push your Slice to Prismic anyway, but this will make it harder for your users to make a choice.
Following our example, Open the TextImageRight Slice and click the Take screenshot button.
Sometimes the builder might not be able to generate the screenshot. This can be caused by 2 things:
1. Storybook is re-rendering your Slice, in that case re-clicking the 'Push to file system' button will resolve the issue.
2. Updating or deleting a field might cause the component to break, in this case, you will need to update your component first and make sure it renders correctly.
Add Shared Slices to Custom Types
This is the final step before your content writers can use your Slices in their documents. Here you'll decide which Custom Types to make your Slices available for.
Create a new Custom Type
If you don't already have a custom type, you'll need to make a new one. We have a dedicated guide to teach you how to build your Custom Type models here:
Select Your Slice in the Custom Type
Once you've created your Custom Types, you'll be able to select which of your recently pushed Slices you wish to add to these Custom Types. By having the ability to dictate which Slices are available to use on which Custom Types, you can restrict the design of different pages and give your content creators different options for different use cases.
To do this go to the Custom Type builder, open a Custom Type and click on the 'Edit Slices' button in the SliceZone. Add all the Slices you need. Save your changes to the filesystem and then Push to Prismic. Now, if you open your repository and create a new 'Page' document, you'll see that your Slice and its variations are available to use; you'll also see the screenshots we added before.
For those of you who have been following along the example, now it's time to add TextImageRight Slice to a Custom Type. Open the Prismic builder. Then, head to the Custom Types tab. You'll see that we already have two existing types: Menu and Page. Click on the Page type, then click the 'Edit Slices' button, search and select the TextImageRight Slice and save.
Once your finish building your model, click 'Save to filesystem' and then 'Push to Prismic'.
Push models to Prismic example:😀
After you finish creating all your Slices and Custom Types you can then Create a page, add content, and publish!
Currently, Slice Machine is in BETA. If you encounter any problems, please read the troubleshooting guide for a list of the most common issues and the possible solutions:
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.