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.

[emiliano.bucci (Emiliano Lucas Bucci)]

Hi, sorry for answering here but somehow is related. I see now that you've added the possibility to add multiple groups inside a Slice, but not withing a group. Also I saw that you won't be adding this feature (at least for now), which again makes me wonder why sometimes some things are the way they are, without actually helping us to have a good experience

Currently I need to develop this section, which is a slice with the following fields:

• title
• caption
• list of cards (group)
  -- card title
  -- card bg color
  -- card list of items (images or tags)

Now could you please show me the correct way of adding card list of items?

I know a solution would be to make the colored cards a custom type and then add them in a content relationship inside the slice (so basically to extract the card to a repeated entity), which could be ok, but if i need to create 10 pages and use this section and all the cards should be different, i would have to create tons of single entities when in this case there's no need to have them as separated entities, because this cards makes sense to exist in the context of the slice and not outside.

Eventually I could create a custom type not for the card but for the list of cards (using slices for every single card), but again in this case I would still need to have this kind of connection and create things in multiple places when in a normal way (see the old fashion wordpress) you could add it inside and have all together.
Also I don't know if it's possible to retrieve data following this path:
Slice -> repeated group -> content relationship (because I need to have multiple of them) -> slices

From a data entry point of view this is not a good experience, adding lot of useless complexity just because is by design

Thanks

PS: I also wanted to share my frustration (and looking inside this forum not also mine) about this -> Advanced groups in slices where you say that

In the process of designing the solution while talking to developers like you who use Prismic, we realized that groups within groups are complex and do not align with our vision of creating the simplest page builder for marketing websites.

I don't know whom you've talked to, but the example I gave you is pretty common in a website, and not being able to accomplish just because you don't feel is right it's a bit frustrating and honestly it makes you look around to other solutions. Just my 2 cents.

[come.sabran (Côme Sabran)]

Hey there!

Thanks for answering on this thread.
Let me clarify here our recent statement of not doing groups in groups.
In fact, we STILL want to implement a solution to let you accomplish all of these advanced use cases, but we don't think a generic solution allowing groups in groups is the first thing to do.

We observed that in 80% of cases, the "nested" content is very similar (lists of images, lists of links, lists of tags etc..). The other 20% are more complex like list of cards in tabs for example.

We want to start (and we are starting now) with the 80% first, offering a nice way to do simple lists, for the most common use cases. And these of course will be able to be put in a group.

I hope this helps understand our vision. But I repeat, we do want to let you model these use cases.

Best,

Côme

[emiliano.bucci (Emiliano Lucas Bucci)]

@come.sabran Hi and thanks for the answer. I understand when you say that a generic solution isn't the first thing to do. Still I'm not agree with your point of view, since from an architecture perspective you're handling specific cases (list of buttons, list of links, ecc), when actually what we need is the possibility to add list of custom entities which are contextualized to the case we're dealing with, which means is always different and depends on the needs of the website.

Let's take this example, which I'm pretty sure you'll agree is a very common case. So how can I create a slice that is able to add a group of cards which inside has a list of items (images or texts, or both)?

Currently the only solution is to add a rich text and inside add a list of texts comma separated (text 1, text 2, text 3) and then inside the code split that text, or for a list of images add many images and then deal with them.

You see, this is totally a hack which is not ideal for a very common case.

[come.sabran (Côme Sabran)]

hey!

Indeed, we know that today's solution is not ideal. For your exact case, here is how I would see the things.

A "Card" group with 3 Variants (NEW) :

• Simple
• With images
• With Tags

Each of the 3 variants will have its fields, say for example the "Card" - "With images":

• Color field
• KeyText
• List of images (NEW)

Then editors will be able to:

• Add a "Card"
• Choose which variant they need
• Edit the content

I hope this helps. of course this requires work from our team and we know we are not there yet but feel reassured that this is our focus now.

Best,

Côme