Content Modelling Multiple Blocks

[marketing19 (POP PY)]

Hi Phil, do you have an idea when this is planned -

Request: Nested or grouped repeatable content within slices

Feature Idea (one per thread): The ability to have groups with repeatable content inside of the repeatable area of a slice. For example, I would like to create a "link list" slice. I can create this slice with a "title" key text in the non-repeatable area and then links in the repeatable area so an author would be able to create a column with a variable number of links with a title at the top. However, what I want is a group of link lists. If an author creates 1 link list I would want it to be…

I need it quite urgently and if this is not do-able soon I will be obliged to change CMS :(
I'm actually very blocked by trying to implemented a simple list of "icon + label" item inside a slice... That's unfortunately very frustrating.
I'm also using CMS like Storyblock and even Wordpress for other projects, and as I see they are more flexible and give more freedom and possibilities...
Check here below, I've created a slice with a 2 blocks "variation" and I would like to add at the bottom a list of "icon + label" below in each block...

[Levi (Levi Gable)]

Hi @marketing19. There currently isn't any plan to support nested or grouped repeatable content within slices. Here's how I would model your 2 block variation:

Non-repeatable section

• Rich text field(s) for the text content of each block (title & price).

Repeatable section

• Image field for the icon
• Rich text field for the label
• Boolean or select field to choose which block the item belongs to

I realize that this isn't the most user-friendly way to add this content to your slice, but it should work and unblock you.

[kodo (Kacper Galka)]

I've decided to develop a project for the client using Prismic and I regret that on the first day and now need to figure out a way to back off.
At first I was happy with the simplicity of Slices but I just found out that it is impossible to include two separate groups of repeatable fields within single Slice which basically makes my whole project impossible to implement in user-friendly manner.

I don't understand why Group field isn't available within Slices? It seems that this single decision would solve the problem.

You will probably ask about use case again and I literally see 5 different within a single project (simple website) I am about to develop. The moment I need to create Custom Types for two separate repeaters it becomes a nightmare for the admin.

But you've been receiving these examples for years and still do nothing. Sorry Prismic - you land on the list titled "not recommended".

[Phil (Phil Snow)]

Hi Kacper,

Welcome to the community!

We've outlined the plan for nested groups and Slices previously in this thread:

Request: Nested or grouped repeatable content within slices

Just an update for everyone. Nested groups or Slices have been a long-requested feature and we understand the need for it from your use cases. We are currently reshaping the experience for developers to build Pages Types and Navigation Types (Headers, Footers etc..) in Slice Machine, and this topic is part of the things that we want to improve, although we do not plan to include this until we come up with the first versions of Navigation Types in Slice Machine. Once we release Navigation Type…

For your specific use case of having multiple sliders in a Slice, which you mentioned on YouTube, is there any reason you can't have one slider per Slice? That way, if the user needs 2 sliders then they can add 2 consecutive 'slider' Slices.

Thanks.

[kodo (Kacper Galka)]

Hey Phil, thanks for your reply and please excuse me my initial adversarial tone. Coding gets frustrating... sometimes. ;)
I am actually still trying to figure it out and I think I will, but with the cost of less flexibility.
My initial approach would be to create dynamic pages using Slices only.

In my particular example the single slice consists of two columns, and each of them include two independent repeaters.

1. Numbers
   a) number
   b) heading
   c) text

2. Other Numbers
   a) number
   b) text

It doesn't make sense to split them into two different slices (both for logical and design reasons - it would become too much complicated on the front end to make it work).
For now the only solution is to refer to a custom post type. It's acceptable, but it would make much more sense to me to keep it as independent component, that's fully editable within slice fields.

[Phil (Phil Snow)]

No worries, it happens

Your case is very clear, thank you. It's a perfect use case for multiple repeatable zones in a Slice, and your solution of a linked Custom Type is exactly how we built the slider on our pricing page

I'm with you on this, I can't wait until the team is able to get to this, there are a lot of exciting new things coming to help us get there though.

Thanks for your patience in the meantime.

[kodo (Kacper Galka)]

Thanks, it's still not as easy as I would expect.

item.service is Content Relationship field, connected to the Service Custom Type, which includes fields like "headline". How can I access this data?

{slice.items.map((item, index) => (
  <Block key={index}>{item.service.data.headline}</Block>
))}

[Phil (Phil Snow)]

To fetch linked content you'll need to use GraphQuery, our GraphQL-like API option for deep fetching (to fetch fields from linked documents).

GraphQuery

Let me know if you need any help with this

[kodo (Kacper Galka)]

Thanks Phil. How about a basic example? If item.case_study links to a document of page type "case_study", how can I get it's data within a loop inside a slice?

{slice.items.map((item, index) => (
   {item.case_study}
))}

All I want to do is get access to data.numbers (Group field), from within a slice, where I connect selected Case Studies (page type: case_study) using a relationship field.

I have read the docs you provided but I have no idea how to use that within a slice component.

[kodo (Kacper Galka)]

I made it work like this @Phil, without using any GraphQuery. And it works - am I missing something?

Simplified version of my slice, that gets case_studies documents data:

import { Content, isFilled } from '@prismicio/client';
import { SliceComponentProps } from '@prismicio/react';

import { createClient } from '@/prismicio';

/**
 * Props for `CaseStudiesLatest`.
 */
export type CaseStudiesLatestProps =
  SliceComponentProps<Content.CaseStudiesLatestSlice>;

/**
 * Component for "CaseStudiesLatest" Slices.
 */
const CaseStudiesLatest = async ({
  slice,
}: CaseStudiesLatestProps): Promise<JSX.Element> => {
  const client = createClient();

  const case_studies = await Promise.all(
    slice.items.map((item) => {
      if (
        isFilled.contentRelationship(item.case_study) &&
        item.case_study.uid
      ) {
        return client.getByUID('case_study', item.case_study.uid);
      }
    })
  );

  return (
    <section>
      {case_studies.map((item, index) => (
        <div key={index}>
          {item?.data.numbers.map((item, index) => (
            <div key={index}>{item.number}</div>
          ))}
        </div>
      ))}
    </section>
  );
};

export default CaseStudiesLatest;

[Phil (Phil Snow)]

That's great news

No, you're not missing anything. I forgot we can do this stuff in Next.js now. Honestly, this is a much easier-maintained option than GraphQuery. It requires more queries, but I'd personally prefer doing this.