Content Modelling Multiple Blocks

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

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...

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.

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".

Hi Kacper,

Welcome to the community!

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

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.

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.

1 Like

No worries, it happens :heart_hands:

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 :bulb:

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.

1 Like

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>
))}

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

Let me know if you need any help with this

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.

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;

That's great news :slight_smile:

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.