Rows and columns

[j-falk]

I feel like a spammer for all my issues and comments that I trow out here but I think this is my last : )

Page builders has been widely discussed and new plugins and themes have showed up quite frequently maybe this past year. What they do, if you simplify it, is to easily add different type of content and provide a layout builder so you easily can arrange this content in rows and columns.

What I've seen in this editor experiment is connected to simplify the content part, which is great, but I wonder if it would be possible to also include the layout builder because I think that would really make this really complete.

I saw a comment about the visual composer that it was very confusing if you just want to write something and I totally agree. Most of the page builder plugins out there are unfortenately working like that except from Velocity page which seems to solve this very nice (unfortenatelly it don't have support for too many content blocks as for now but that is coming as I understand it).

So after this short novel, do you think it would be possible to bring in the concept of rows and columns into this setup?

As an example you could look at how Velocity page does it:

And try the demo on http://velocitypage.com/demo/

[ellatrix]

I think I know about most WordPress page builders out there. :) I personally think it's still quite difficult to write with VelocityPage. You can't just start writing. The concept of rows is already here... They're just blocks. And I don't think we should support columns, that should be something for the theme to do. How are two or three columns going to work in a theme with a small content width?

What exactly would you use columns for?

And you're not a spammer! It's good to brainstorm and discuss all these things. :)

[ellatrix]

Btw, I need to click on 4 buttons before I can start writing with VelocityPage. And that's the problem with all these page builders.

[j-falk]

That novel was probably more to get my thinking down on paper and maybe could be useful for someone else who haven't seen them : )

(and here comes another one...)

I agree that you already have the concept of rows but I don't see how themes could add support for columns?

Do you mean that it would be seperate input text boxes for each column on the page, sort of how advanced custom fields and others?

If you want the sort of wysiwyg experience you sort of need those columns in the editor.

The reason you need columns is to manage content that are laid out in columns : ) But for example when you have features or testimonials that you want to display in a grid or maybe just one row but 3 columns. It is quite common.

Eg. this from Velocity page (they will probably hunt me down soon for all the screenshots I post here):

I guess you could create a content block which let you set the text for all these 4 features, but what if you would want 5, or maybe have them in a 3-column setup instead of 2. This would be so much easier if columns could be supported and there are many use cases for it.

Number of available columns could also be something that the theme or a plugin could define maybe also through the templating system, to limit so that a theme template with a small content width can't add more than 2 columns. In the end though it is sort of the editors responsibility to make sure the content and theme works.

As with the number of clicks I agree with you, and the concept that you have now is much better.

I guess there are multiple ways on how rows with columns could be brought in, but one idea could be to have the column option showing directly underneath, then it is just one click to create a new row with the desired columns:

Also with this setup you don't need to create a new row to include a content block, so you don't loose any of how fast it is to start writing, but you have the possibility to add a row with columns if you want.

[j-falk]

Another approach could be to have a specific content block to include if you want to use columns in your content.

Technically I don't know exactly how it could work, I think I read about ideas to make the gallery block interactive so you could for example change the order of the images by drag and drop in the gallery directly from the preview.

If you can have content blocks that you can interact with directly in the preview, so you directly could add text and more content blocks within that I think that would be great. It would sort of work like how a table works today.

Then you wouldn't need to introduce any more concepts (read rows and columns) than the actual content blocks and themes could manage what layout blocks that could be available to the user to use.

You still have the task to make it easy to find and organize the content blocks, but that is probably a different issue.

[diegoliv]

I think that columns is a topic that is hard to figure it out in this kind of project. And could be because of the nature of this feature.

When we talk about content blocks, we are talking about content, and columns are not content: they are layout. And everything that is layout and presentation should be defined by themes.

BUT, presentation is one thing. Implementation is another. How themes could implement something that is a layout feature, but needs a functional way to be built?

I think that how columns should look is a theme's responsibility. But how they should be built is a functional feature that could be implemented by a plugin. Or the core itself.

After all, how columns are made? If we forget for a second the word "columns" and think in a front end approach, what resources we use for this kind of layout? Generally, we create a set of tags (like divs or list items) with content inside, and we make this set of tags align side by side using css. So, what we need is a block that contains other blocks of code. Or in other words, a way to wrap and group blocks of content. A concept that works in a similar way is the menu editor. When we create menu items, they are individually sortable. But when we set some child items (like a submenu), when we sort the parent menu item, the children are grouped and attached to the parent. Think in a parent item like a row, and each child item like a column.

For the editor interface, it doesn't matter if this group of content blocks looks like a list, with one group above each other, or like columns, with groups aligned side by side. The theme defines how it looks. But a plugin needs to define how it works.

If we edit a list inside the editor, when we hit enter, we have a new list item, where we could write or insert anything. A column block could work in a similar way, but instead of define a new wrapper element pressing enter, we predefine the number of wrappers before inserting it in the editor.

It matters to think how to make presentation stuff works inside the editor, because a true WYSIWYG experience is about how you build content and how it looks like. Maybe when this awesome project have a way to register new shortcodes and their respectives views, we can work on something to deal with this!

By the way, an off topic comment: for the first time I think that will be really fun to work with the distraction free mode! Is really awesome to write and build content inside DFM with this plugin. It's just in the initial version but already enhances the editing experience a lot!