Add layout to cms

[RyanCCollins]

I hate to say this but the more I think about it, the more I am realizing that we will need control over layout.

I've thought of an option that does not require nesting of content blocks (maybe). With the new refactor, content blocks are now stored in sections. What if we added a few layout related properties (basis, padding, etc) to each section and then dynamically render the grommet section components layout.

The other option is to add a generic Box content block that serves as the only content block that can be nested.

[karatechops]

Can you briefly let me know the issue you think we may encounter? I'd like to document why we need the feature.

I'm leaning towards option 1, provide props to section.

[RyanCCollins]

Yeah I think that's the best go.

The reason that I think we need this is because there is no control over layout. I find sometimes that I am looking for the opportunity to set the layout of my content because it doesn't show up how I had it in my head. Like we discussed early on, I think using the box layout is the way to go. We will explore this as we get further into it.

[RyanCCollins]

Here is what I've come up with for the type of properties to store to achieve the MVP for a dynamic layout engine:

export type LayoutProps = {
  children: any,
  section: {
    basis?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4",
    pad?: "small" | "medium" | "large" | "none",
    direction?: "row" | "column",
    wrap?: boolean,
    justify?: "start" | "center" | "between" | "end",
    align?: "start" | "center" | "end" | "baseline" | "stretch",
    full?: "horizontal" | "vertical" | boolean
  },
  box: {
    pad?: "small" | "medium" | "large" | "none",
    size?: 'auto' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full',
    flex?: "grow" | "shrink" | boolean
  }
}

[karatechops]

This makes sense to me, it might be a bit granular - have you discovered use cases for all the options?

My worry is providing a non-technical user with too many options. What if we hid the layout options until the user checked an advanced layout option? For instance, with Brand Central, I don't believe a technical user with flex-box experience will be adding new content.

@MikeWalrath do you have any input here? Maybe we can hop on a call to discuss this.

[RyanCCollins]

@karatechops Yeah that seems like a good idea. The issue that I was finding without being able to control the layout of the section and the box that surrounds each content block, we might as well not have any layout options. I would like to try to arrive at a more basic version of this while still having the capability to control the layout / do splits of content. What I am thinking is that this is easy enough to implement and it will give us the ability to understand how the flex-box properties translate into a layout through the GUI, which might help us to arrive at a higher-level abstraction.

For example, say we find that we are mostly using three configurations, we could box those up into pre-configurations and hide the flex properties to the user, or like you said we could have those be advanced layout options and offer pre-configured options by default. It's hard for me to come to a more basic solution without first being able to see how the flex properties translate to a previewed layout in the CMS editor.

[karatechops]

Sounds good to me. I like the idea of packaged layouts (layout blocks!?). 😄

[RyanCCollins]

Done in #64