Prismic slice machine work

[gestchild]

Prismic slice machine work:

Follows on from #10664

NCI = need to create issue with full details

Next steps:

• Refactor logic for displaying AdditionalContent #10773 - done in Featured text slice machine #10783
• Render OnThisPageAnchors outside of AdditionalContent component #10776 - done in Featured text slice machine #10783
• Render /collections and /visit-us correctly with sliceMachine toggle active #10780 - done in Featured text slice machine #10783
• Remove the slice machine toggle, body.map(), body transformer and related types prismic #10825

At this point we'll be rendering our current custom types (and slices) with Prismic's SliceZone component and will be ready to update the models in Prismic to use the slice machine slices, rather than our legacy slices

• Get set up with a development Prismic environment and make sure we can query it (DONE)
• Decide what/when we will need to communicate to the content editors about the changes we are making?
• Amend slices that use labels, so they work with slice machine #10791 (done in Swap legacy slices for shared slices in custom type bodies #10808)
• Generate all our custom types with SliceMachine and make sure these haven't changed compared to what we have in Prismic
• In dev environment first: Edit custom types to replace legacy slices - check the returned data is the same, then do the same in prod if there are no issues
• remap content to new slices so they are still editable
• update scripts to compare the custom types slice machine generates with those in Prismic (Update prismic diff script and delete old files #10863)
• establish and document (rewrite README) workflow for creating/deleting/amending types
• remove all the old prismic model src ts files (Update prismic diff script and delete old files #10863)

At this point we will be using slice machine to manage our custom types and the editors will be able to utilise the new UI in Prismic.

Scope for improvements that have become apparent during this work:

• NCI add mock data for slices? - do we have a need for it? ()
• NCI remove filter featured picture, don't think it's needed - establish this first
• NCI - we need to establish if labels are needed for the slices they they are currently used on - If yes make variations instead and remap content etc., if not then remove them (clarify steps)
• NCI - make new variation for CollectionVenue - closedPeriods
• Make standfirst (and maybe featured images) a field on the Prisimic types where it is used, instead of a slice #10753
• Use variations for ContentLists #10775
• Use a field for FeaturedText instead of a body slice #10774
• Get the toggle_prismicStage cookie and set the prismic env via process.env #10869

[gestchild]

Notes I've made that will be relevant to some of the above issues (will add to the appropriate tickets when they are created)

Notes on Body.tsx

Filtering body slices

We filter out slices of type standfirst. We do this because we pull these out so we can display them separately from the rest of the body and we don't want to then replicate the content when we do render the body.

We filter out slices of type picture (type of editorialImage before it gets transformed) with a weight of featured. I'm not sure why we do this and I don't think we need to.

As far as I can tell we do sometimes want to render featured images separately from the rest of the body, but we only seem to do this in [pageId].tsx and if so, we remove them from the body array property in that file, before passing it to

Featured text

A text slice can be rendered one of several ways inside Body.tsx

1. If it is the first slice in the body and has a weight/label value of featured, it will be rendered using the component, before the component - N.B. The FeaturedText doesn't seem very different to the regular text - is it needed? larger margins?

2. If the text slice is not the first slice in the body and does not have a weight/label value of featured it is rendered directly with the component (and defaultSerializer) after the .

3. If the text slice is not the first slice in the body and does have a weight/label value of featured it is rendered directly with the component (and dropCapSerializer) after the .

N.B. If a text slice has a featured label but is not the first item in the body, it will not be rendered, e.g. /pages/Wvl00yAAAB8A3y8p

[gestchild]

More notes:

FeaturedMedia/HeroPicture

We can pass FeaturedMedia and HeroPicture props into the <PageHeader /> component.

N.B. It will display both if they exist.

HeroPicture

This is used in a <Picture /> element, to provide images with different aspect ratios based on screen size.

It is square on small screens and 16:9 on larger screens.

We currently (03/03/2024) assign a value to this prop in the following places:

Exhibition

On the exhibition page the HeroPicture comes from the Promo image via transformGenericFields.

articleId

Not shown if isShortFilmFormat || isImageGallery || isPodcast
comes from the Promo image via transformGenericFields.

FeaturedMedia

This can be a video or an image.

We currently (03/03/2024) assign a value to this prop on the following places:

Exhibition

If the first body slice is an embedded video it will be that, else it will be the promo image.

// TODO find out - will the video show twice on the page, once in the header, once in the body?

If the promo image has a 16:9 crop it will be that.

Installation

If the first body slice is an embedded video it will be that, else it will be the promo image.

// TODO find out - will the video show twice on the page, once in the header, once in the body?

If the promo image has a 16:9 crop it will be that.

articleId

Not shown if isShortFilmFormat || isImageGallery || isPodcast
If the first body slice is an embedded video it will be that, else it will be the promo image.

// TODO find out - will the video show twice on the page, once in the header, once in the body?

If the promo image has a 16:9 crop it will be that.

bookId

From book.cover from promo image via transformBook

eventSeriesId

If the first body slice is an embedded video it will be that, else it will be the promo image.

// TODO find out - will the video show twice on the page, once in the header, once in the body?

If the promo image has a 16:9 crop it will be that.

pageId

If there is a featuredPicture we use that.

The featuredPicture comes from the body. If the body has more than one slice and the first slice is of type picture (editorialImage), then that becomes the featuredPicture.

If there is no featuredPicture but there is a featuredVideo we use the latter.

The featuredVideo comes from the body. If the body has more than one slice and the first slice is of type videoEmbed, then that becomes the featuredVideo.

If either of these exist then we remove them from the body array, so they don't get rendered twice.

TODO - WHY DO WE THEN REMOVE THE SLICE AS WE DO THIS IN THE BODY TOO?
TODO - why don't we use the promo image like everywhere else? Should we remap the content so we

seriesId

If the first body slice is an embedded video it will be that, else it will be the promo image.

// TODO find out - will the video show twice on the page, once in the header, once in the body?

If the promo image has a 16:9 crop it will be that.