Layout field type

I really like this Layout field type, but I am having hard times selling this to other guys on the team that this should be the way to go.

This is how the Project page editor might look like, but the issue with the Layout editor is that all editing is happening in the modal screens and it is not distinguishable if the content has been filled or not, or get the feeling of it.

Would it be possible to expand all the views right there on the spot and give opportunity to enlarge editing area if needed.

For example - Wordpress Gutenberg plugin. The editing of the content is very nice, everything else - a crap. This is why I wanted to recreate best parts of Wordpress here in new technology, but seems to be quite hard.

Or maybe again - is this the mindset? Or, I need to approach this kind of editing a little bit different? Would really nice to hear from you, more experience guys!

I tested many scenarios and this one made the most sense. this is the best compromise for now between managing a “layout” while also having the ability to add custom components easily (https://github.com/agentejo/LayoutComponents).

You can also combine this with the collection preview feature to get better feeling/relation of the content and output

Layout components is great idea!

Although, I figured out if I use Layout or Layout Grid field type, this already defines kinda the presentation layout, which is not the best way to pass data to multiple devices if needed.

I mean, if we want to use best practices of Headless CMS, layouts have to be decoupled away to different collections, and that way the api response would be more usable across the devices. Like on @pauloamgomes React-Cockpit example.

Of course, I would like to have a bit better way to manage (add, edit) those “layout” collection items and define relationships (also see relation where it was linked, like if I have Banner collection item, and this is linked to BasicPage collection Services item).

/Rob

Keep in mind that the react cockpit example was mostly a PoC and before the evolution of the layout components.

But agree that the layout field could be improved, perhaps by having an expand cta that could display the metadata of the component (probably just a snippet of it), so when the component cards are expand it will look like:

expanded-layout

What you think @artur ?

1 Like

Thanks for the suggestion, I’ll do some testing and see how it feels/performs

1 Like

Hey @artur, think this one is still in standby, but to avoid moving that complexity to core why not to provide a hook for formatting the label?!

I created the PR https://github.com/agentejo/cockpit/pull/966 for that, please kindly confirm if it make sense, at least it can help a lot who needs some flexibility on changing what is displayed in the components.

1 Like

Old thread, I know… But I recently added this PR: https://github.com/agentejo/cockpit/pull/1349 to eleviate the very same problem but creating a hook in the new getPreview functionality instead.
And then I wrote a custom addon that handles my custom layout components previews.