Multiple Rows inside of a section

[prkirby]

It would be awesome for styling and organization to be able to nest multiple rows within a section. Along with this, being able to add custom classes to rows would be huge for working with foundation's grid.

Proposing:

• Multiple rows within sections
• Custom css classes for rows

If this or something like it has already been suggested, I apologize. I couldn't find anything in the issues.

[aaronware]

Hey @prkirby A section is technically a row and you can add any classes you want to rows within the "more" options for that section. (Columns additionally have their own "more" options to add classes and what not)

You could add in your own markup as well if you needed to IE. Make a 1 column section (which is really a 12 column div in the single row) and then add in anything you need.

[prkirby]

Hey,

That I understand. What I'm talking about is actually adding classes to the

to work with foundations built in flexibility, ie:

Removes gutter at large media query

Removes gutter at large media query

and block grids.

This would also allow for the user to stylize an entire section (like have a single background image, or background gradient) and arrange content more dynamically:

[section] [row] [single column] [/row] [row] [3 column] [3 column] [3 column] [/row] [row] [2 column] [2 column] [/row] [/section]

Its a problem I ran into building a content-dense landing page, with sections that have unique backgrounds.

This is something I'm interested in working on, if you think its a valuable feature. Regards,

Paul Kirby Web Developer / Audio Engineer Chicago, IL

On Wed, Feb 8, 2017 at 12:36 PM, Aaron Ware [email protected] wrote:

Hey @prkirby A section is technically a row and you can add any classes you want to rows within the "more" options for that section. (Columns additionally have their own "more" options to add classes and what not)

You could add in your own markup as well if you needed to IE. Make a 1 column section (which is really a 12 column div in the single row) and then add in anything you need.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[aaronware]

That totally makes sense now.

If you want to fork and take a crack at it by all means go for it. I chatted with @nate-allen and we're on board.

Some things to be aware of.

For backwards compatibility, I suggest keeping the current CSS classes associated with the section as is (Maybe move the more tab up into the "sections" title bar. (I can provide a screenshot tomorrow for more context). That way it's still contextual to the "section".

Then you can add in the row specific css classes. Some challenges for context. "sections" are a "mesh_section" post type. Which have each "column/block" as a child "mesh_section" post. I would suggest NOT creating another nested ancestor "mesh_section". You could possibly define the "rows" as post_meta of each section (maybe an array to stores structure, I'll leave it to your ideas; be creative!).

Some additional things to think about.

• Keep it "like core", meaning we try not to veer too far away from the simplicity or trends of WordPress core.
• Try to also think about implementing actions and filters for further extendibility for future users.
• You could potentially add in a new "toolbar" for row controls. I would suggest determining which hooks( do_action, or apply_filters) are needed first within mesh add them in one pull request and then hook into that? We've been doing that more in the last few releases as we add more features.
• What's the most user friendly way to indicate to users that they can add rows (both on touch screens and on desktop/laptop)? @erroneous5000 has a pretty solid idea with the following visuals for adding sections within issue #3. Primarily it's a + icon shown on hover or just displayed on touch screens.
• I've been researching utilizing CRUD implementation as a middleman to the data. You don't have to worry about it now, but it's good for you to know.

[sitesandsuch]

I needed this as well and after reading that @prkirby was unable to have a go at this I decided to try it myself. And then I had an epiphany:

Instead of putting more rows inside a section (which is quite difficult) you simply remove the closing tag of section A and the opening tag of section B. Everything else simply falls into place using existing code.

It's very flexible: remove closing tag from Section A and opening from Section B: one section with two rows. Remove closing tag from Section A, both opening and closing from B and C, remove opening from Section D and you have a section with 4 rows.

For now I am the only person using this and it looks like the screenshot below. To make make this clear for end users it could be a dropdown with

• Full section (default)
• Section start
• Section centre
• Section end

Still thinking...

For this I added a few lines of code in three files. Let me know if you'd like me to upload.

Michiel

[aaronware]

@sitesandsuch Ahh very clever. We're expanding those fields and filters to add controls pretty easily. So your solution is definitely one approach that could work for other users.

[strarsis]

Related feature: https://github.com/WordPress/gutenberg

[aaronware]

@strarsis yeah I've been keeping an eye on the project.