Groups of fields in a Singleton

[NeeshSamsi]

I have a singleton for each page of a site. I would like to organize my fields into groups by the section of the page.

For example:

I would like the first 4 fields under a Main/Hero sub-heading & then the next couple of fields under a Story subheading.

Is there a way to maybe have subheadings / sub-labels within a singleton for sections? Or something similar to achieve this?

[hauptrolle]

That would also be helpful for things like SEO data, where you want to group title, description, keywords etc..

[simonswiss]

Hey!

Yep, I have also personally suggested this and think this is very much needed. I am not sure when we'll have something, but this is something the team has discussed implementing, it makes a lot of sense 👍

[JedWatson]

We're designing a solution for this at the moment.

@NeeshSamsi @hauptrolle would love some feedback if you have any thoughts, whether this will match what you're looking for:

Plan is to do something (syntax very draft) that lets you specify a group with a label and (optional) description, surrounding fields in the schema, like:

fields: {
  title: fields.text(),
  ...group({
    label: 'SEO',
    description: '...',
    fields: {
      description: fields.text(),
      // ...
    },
  },
}

And two mockups we're playing with:

We're currently leaning towards just using whitespace, and trying to keep it really clean, not overwhelm the form with lines. But let us know what you think!

(also in those designs we're mocking up an update to the top part of the UI, and ways to show fields side by side, which... I guess let us know if you like that as well, but specifically looking for feedback on the field grouping here)

edit to be clear, this will actually work the same for entries in a collection and singletons 🙂

[MrMacStripe]

From my point of view neither whitespace or borders do the trick, everything is very white-on-white-ish.

What do you think about a different approach. I have two ideas in mind:
a) using a feed-style border on the left with bold markers next to the section headline/description (kind of like on gihubs landing page or https://tailwindcss.com/blog). This would provide some visual guidline where you are inside the page without created the everything-is-a-box effect.
b) Push the headline and the description to the left, creating an extra column next to the fields.

If you want am happy to visualize this. Is the mockup available somewhere to edit?

[JedWatson]

Thanks for the feedback @MrMacStripe

We don't have editable mockups I can share (those are exported from our Figma, and it'd be nice to open source that, but also quite a bit of work to clean up) but if you like, feel free to take those screenshots and edit them; move things around, etc.

Something we also have to figure out with all our designs is how they're responsive, from wide screen down through smaller / tablet sizes to mobile, so if your ideas include those considerations it would help too.

[MrMacStripe]

Sorry that it took so long, but please find my idea a) attached. It would need refinement for sure, but for me the groups are more obvious. I explored layout b) as well but did not find a good solution.

Whitespace only would work as well probably, but the headings and the distance between groups would need to be bigger in my opinion.

[hauptrolle]

The whitespace version looks very clean! Looking forward to the release 👍
Displaying fields side by side is also a great change!

[simonswiss]

I also vote for the whitespace version — super clean 🤗

[NeeshSamsi]

Looking awesome! The whitespace version looks clean

[florian-lefebvre]

I suppose this will also be available for collections?