Live editing feature has a serious flaw if a slice is dependant on context data

Developing with Prismic
,
1

Let's say that a hero slice gets author/published/theme data from the static zone of the same document. It works if you preview the content, but since slice simulator is an isolated iframe, the data from that context won't be present, thus we need to either error prone our slices specifically for Slice Machine so it can render the slice without the full context.

2

Hey Kris, hope you're doing well!

Indeed, at the time it is not really possible to provide the static zone data of the current document to the simulator, but here are some workarounds.

First of all, you can augment your Slice Simulator page to provide it with additional data and leverage your framework's data-fetching lifecycle to do so. You can then expose those additional data to your Slice Zone the way you'd do it on a regular page (context prop or other mechanism suiting your workflow)

For example it would look like this with Next.js:

import {
  SliceSimulator,
  SliceSimulatorParams,
  getSlices,
} from "@slicemachine/adapter-next/simulator";
import { SliceZone } from "@prismicio/react";

import { components } from "@/slices";

export default async function SliceSimulatorPage({
  searchParams,
}: SliceSimulatorParams) {
  const slices = getSlices(searchParams.state);

  const additionalData = await fetchSomeAdditionalData();

  return (
    <SliceSimulator>
      <SliceZone slices={slices} components={components} context={additionalData} />
    </SliceSimulator>
  );
}

Knowing this, a workaround to providing static zone data to slices could be providing static zone data of an arbitrary document to slices. While not allowing your to preview slices exactly matching the current document's context, it should still allow you to preview them without editing their code in a hacky way to account for that.

That being said, we're taking into account your feedback and will try to explore ways of making this flow better and seamless in the future.

Hope this helps!
Lucie

1 Like