Send Slices to Prismic

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

Package versions

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.


🕚 Before starting

This article is the final of 3. Please read the Create and Model a Component & Code & Style Components articles before continuing :)


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.

Broken screenshot?

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!

Troubleshooting

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:


Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.