Skip to content

Ability to Have Columns #974

Description

@adrianjean

What would you like to see added to or changed in Neo, and why?

Challenge:
Many of us use NEO to build interfaces that replicate a "Row Column Block" approach to page building. In our experience, we find it a bit of a constant mental hurdle for clients to build a page in a vertical structure, while visualizing what it will eventually look like as a horizontal layout.

Existing Solutions:
We know a way around this is to create pre-defined block "templates" for different column permutations (one for 2 col, one for 3 col, etc. etc). However, having an interface that allows clients to build more fluidly allows us to reduce the number of block types required for the content builder, keeping the code simpler and the editing experience simpler while maintaining maximum flexibility.

Feature Request:
Having the ability to toggle on a horizontal layout for a specific "level" in the NEO field config, could open the door to an editing experience that isn't so distant from the end result, if one uses columns.

See attached screenshot:

Screenshot 2024-12-13 at 4 40 30 PM

This is from a live site with NEO used as a content builder for row, column, block like layout. So far, using CSS overrides alone, I've been able to partly get there! But dragging columns into order is broken as I can only drag them up and down the page, and not easily within the row (aka horizontally). To solve this would require some additional / modified Javascript that might be easier to implement in the plugin itself.

Here is the layout code I'm using (a snippet of a larger set of scss overrides we have):

// Column Layout for blocks instead of vertical
.ni_block_children {
    .ni_blocks {
        display: flex;
        align-items: stretch;
        gap: 5px;
        > .ni_block {
            display: flex;
            flex-direction: column;
            width: auto;
            flex: 1;
            min-width: 0;
            .ni_block_body {
                height: 100%;
            }
        }
    }
}

Happy to provide any additional detail / thoughts — is this possible?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions