New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Responsive Columns #6048

Closed
ZebulanStanphill opened this Issue Apr 6, 2018 · 51 comments

Comments

@ZebulanStanphill
Contributor

ZebulanStanphill commented Apr 6, 2018

Issue Overview

The Columns block, while definitely improved from its first implementation, is still pretty useless due to the fact that the columns are not responsive. The only number of columns you might get away with on a phone screen is 2, and that is only for things like images or buttons, not textual content.

Additionally, the Columns block only allows for same-width columns, which is considerably restricting, but that is covered in #4902, so I'll just say that I think that between the two, responsive columns is more important, as non-equal width columns would not be very useful if they were not responsive.

Since the core of page building is the use of sections, rows, and columns, I think it is essential that the merge proposal version of Gutenberg contains usable Section (see #4900) and Columns blocks.

From a functionality perspective, the inability to have at least responsive columns would render the Columns block almost useless. If it is not responsive, it is almost never going to be used in practice. The Columns block needs at least responsive columns. For ideas on how to implement this in practice, take inspiration from how existing page builder plugins do it and how Bootstrap does it.

From a public relations perspective, Gutenberg would look like a ridiculously under-powered page builder to the average user if the Columns block was not at least decent enough to be used for responsive design. Gutenberg needs to make a good first impression when WordPress 5.0 launches, and I think a better Columns block is necessary for that. I can imagine blog posts appearing all over the internet talking about how incomplete the Gutenberg editor was for not including a decent Columns block in the 5.0 launch. It will be hard to get past all of that, because even when the Columns block is improved, people will still perceive Gutenberg as having been launched as a beta product.

Related Issues and/or PRs

#4900
#4902

@cavalierlife

This comment has been minimized.

Show comment
Hide comment
@cavalierlife

cavalierlife Apr 17, 2018

I don't understand why #4902 was closed or why it is considered a customizer thing. I could see it being a customizer thing if the only concern was column widths for global theme layout, but I don't see why column width wouldn't be considered an editor thing as obviously the columns will be used within the post/page editor. In any case, I agree columns should be responsive. That's a must. But I also think column width is equal in importance, with both being VERY important.

cavalierlife commented Apr 17, 2018

I don't understand why #4902 was closed or why it is considered a customizer thing. I could see it being a customizer thing if the only concern was column widths for global theme layout, but I don't see why column width wouldn't be considered an editor thing as obviously the columns will be used within the post/page editor. In any case, I agree columns should be responsive. That's a must. But I also think column width is equal in importance, with both being VERY important.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Apr 19, 2018

Contributor

@cavalierlife Actually, I think "Customizer focus" was referring to the customization phase of Gutenberg (which I think comes after the merge proposal and WordPress 5.0 release), not the WordPress Customizer, although that may end up being affected by the customization phase as well.

Personally, I would really prefer non-equal width columns to be added before the 5.0 release, and I think that those and responsive columns are related in terms of how they affect UI design and functionality, but if I had to pick just one of the two to be worked on and completed before the merge proposal, it would be responsive columns, because those are basically required for the columns to be useful in the majority of situations.

I could wait a while longer for non-equal width columns (understanding that they are in the works), but I am not so sure about everyone else, and I can imagine the lack of them might leave a bad impression and give them the feeling that Gutenberg is "so weak compared to other page builders" and that "the WordPress team does not understand what a page builder is used for". I get the big picture with where Gutenberg is going and what is planned for the future, but will the general user, designer, or developer understand that or even know about it? To many people right now, Gutenberg just looks like half an attempt at a page builder, but seemingly lacking most features that people expect from a page builder plugin.

Of course, the long term plan for Gutenberg, if successful, will end up creating a common API that all page builders can use as a backend, turning most of them into essentially alternative UIs for a common website builder system that replaces widgets, shortcodes, "modules" (or whatever each page builder calls them), and some metaboxes (the other metaboxes would be replaced by the custom sidebar APIs) with a common element (blocks) and removes the need for manually creating PHP template files in most situations by allowing page template layouts including sidebars, footers, and other non-post-content areas to be built using Gutenberg.

But I only know about that from doing a lot of research on this GitHub and reading lots of articles about Gutenberg. Most people will not spend that much time looking into it, and will just hear about "a page builder in WordPress core" and think that is all there is to it. They will expect features that are standard for page builder plugins to be present in the version of Gutenberg that is shipped in WordPress 5.0.

If non-equal width columns do not make it into 5.0, I think it would help a lot if the post-update welcome screen mentioned that they (along with various other features) were being worked on for a future update. It might give people the impression that Gutenberg was launched too early (and I can not say I would disagree with them), but it would certainly be better than not making it obvious that the features were planned at all.

@karmatosed Could we get a clarification on what you were referring to in #4902?

Contributor

ZebulanStanphill commented Apr 19, 2018

@cavalierlife Actually, I think "Customizer focus" was referring to the customization phase of Gutenberg (which I think comes after the merge proposal and WordPress 5.0 release), not the WordPress Customizer, although that may end up being affected by the customization phase as well.

Personally, I would really prefer non-equal width columns to be added before the 5.0 release, and I think that those and responsive columns are related in terms of how they affect UI design and functionality, but if I had to pick just one of the two to be worked on and completed before the merge proposal, it would be responsive columns, because those are basically required for the columns to be useful in the majority of situations.

I could wait a while longer for non-equal width columns (understanding that they are in the works), but I am not so sure about everyone else, and I can imagine the lack of them might leave a bad impression and give them the feeling that Gutenberg is "so weak compared to other page builders" and that "the WordPress team does not understand what a page builder is used for". I get the big picture with where Gutenberg is going and what is planned for the future, but will the general user, designer, or developer understand that or even know about it? To many people right now, Gutenberg just looks like half an attempt at a page builder, but seemingly lacking most features that people expect from a page builder plugin.

Of course, the long term plan for Gutenberg, if successful, will end up creating a common API that all page builders can use as a backend, turning most of them into essentially alternative UIs for a common website builder system that replaces widgets, shortcodes, "modules" (or whatever each page builder calls them), and some metaboxes (the other metaboxes would be replaced by the custom sidebar APIs) with a common element (blocks) and removes the need for manually creating PHP template files in most situations by allowing page template layouts including sidebars, footers, and other non-post-content areas to be built using Gutenberg.

But I only know about that from doing a lot of research on this GitHub and reading lots of articles about Gutenberg. Most people will not spend that much time looking into it, and will just hear about "a page builder in WordPress core" and think that is all there is to it. They will expect features that are standard for page builder plugins to be present in the version of Gutenberg that is shipped in WordPress 5.0.

If non-equal width columns do not make it into 5.0, I think it would help a lot if the post-update welcome screen mentioned that they (along with various other features) were being worked on for a future update. It might give people the impression that Gutenberg was launched too early (and I can not say I would disagree with them), but it would certainly be better than not making it obvious that the features were planned at all.

@karmatosed Could we get a clarification on what you were referring to in #4902?

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Apr 19, 2018

Contributor

Variable-width columns are going to be a big part of a client project we're working on (to enable customisable homepage layouts), and my hope is that this is an area where our team can contribute back to Gutenberg and get this included in prior to the merge proposal (or shortly thereafter).

Contributor

chrisvanpatten commented Apr 19, 2018

Variable-width columns are going to be a big part of a client project we're working on (to enable customisable homepage layouts), and my hope is that this is an area where our team can contribute back to Gutenberg and get this included in prior to the merge proposal (or shortly thereafter).

@rchipka

This comment has been minimized.

Show comment
Hide comment
@rchipka

rchipka May 8, 2018

Rather than adding responsive settings to the Columns block, we should consider adding a "Responsive" block around the Columns block.

rchipka commented May 8, 2018

Rather than adding responsive settings to the Columns block, we should consider adding a "Responsive" block around the Columns block.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce May 30, 2018

Related, with some existing discussion: #5351

melchoyce commented May 30, 2018

Related, with some existing discussion: #5351

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Jun 28, 2018

Contributor

Related: #7414.

Contributor

ZebulanStanphill commented Jun 28, 2018

Related: #7414.

@designsimply

This comment has been minimized.

Show comment
Hide comment
@designsimply

designsimply Jul 9, 2018

Contributor

Closed #7742 as a duplicate and noting the question from that issue for reference because it's relevant to this discussion:

How can I convert multiple column content to 1 column in Mobile view? It looks very weird when I add 4 columns in content & they show side by side even in mobile.

Contributor

designsimply commented Jul 9, 2018

Closed #7742 as a duplicate and noting the question from that issue for reference because it's relevant to this discussion:

How can I convert multiple column content to 1 column in Mobile view? It looks very weird when I add 4 columns in content & they show side by side even in mobile.

@designsimply

This comment has been minimized.

Show comment
Hide comment
@designsimply

designsimply Jul 9, 2018

Contributor

Closed #7315 as a duplicate and wanted to include their comment here as well:

It's not currently possible to resize the columns in the columns block. The ability to have columns is imperative for providing more flexible layouts. If you can only add equal width columns though, it makes it extremely limiting.

Ideally, you should be able to specify a percentage width for each column. At a bare minimum though, you should at least be able to select a different layout.

Contributor

designsimply commented Jul 9, 2018

Closed #7315 as a duplicate and wanted to include their comment here as well:

It's not currently possible to resize the columns in the columns block. The ability to have columns is imperative for providing more flexible layouts. If you can only add equal width columns though, it makes it extremely limiting.

Ideally, you should be able to specify a percentage width for each column. At a bare minimum though, you should at least be able to select a different layout.

@rickcurran

This comment has been minimized.

Show comment
Hide comment
@rickcurran

rickcurran Jul 10, 2018

Yep, agree with both of those comments above. It shows however that there's quite a lot of combinations possible when it comes to media queries / break points for responsive layouts. There isn't going to be a one-size-fits-all solution but I think there would need to be default Columns block specific behaviour. I'd probably suggest that multiple columns should all wrap to a single column somewhere between 640px - 480px wide. Personally I usually go for < 640px but that can be a bit wide for a single column in some situations. Additionally for a four-column layout these would often break to two-by-two rows on medium size screens so again there are a lot of potential options here.

It would be challenging to build a UI to choose from all of the possible combinations but I think you'd need to pick some of the most common options and leave the more complex options to be possible via custom classes on the parent and / or child columns, or extending the column block itself.

For my own usage of the Columns block I'd be looking to override the standard WP classes on them to use my own preferred column layout classes, most commonly for me would be those used in the Foundation framework, so 'row' classes on the parent and 'columns' classes along with column sizing classes such as 'small-12', 'medium-6', 'large-8' etc on the child columns. This would be doable via custom classes on the parent and child columns, but it would be essential to have a default way to override these for all Columns blocks without having to set these each time, basically just globally overriding the names of the standard WP Columns block classes.

rickcurran commented Jul 10, 2018

Yep, agree with both of those comments above. It shows however that there's quite a lot of combinations possible when it comes to media queries / break points for responsive layouts. There isn't going to be a one-size-fits-all solution but I think there would need to be default Columns block specific behaviour. I'd probably suggest that multiple columns should all wrap to a single column somewhere between 640px - 480px wide. Personally I usually go for < 640px but that can be a bit wide for a single column in some situations. Additionally for a four-column layout these would often break to two-by-two rows on medium size screens so again there are a lot of potential options here.

It would be challenging to build a UI to choose from all of the possible combinations but I think you'd need to pick some of the most common options and leave the more complex options to be possible via custom classes on the parent and / or child columns, or extending the column block itself.

For my own usage of the Columns block I'd be looking to override the standard WP classes on them to use my own preferred column layout classes, most commonly for me would be those used in the Foundation framework, so 'row' classes on the parent and 'columns' classes along with column sizing classes such as 'small-12', 'medium-6', 'large-8' etc on the child columns. This would be doable via custom classes on the parent and child columns, but it would be essential to have a default way to override these for all Columns blocks without having to set these each time, basically just globally overriding the names of the standard WP Columns block classes.

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Jul 10, 2018

Based on working for years with shortcode-based column implementations, my current conclusion is that each column must have its own configuration/classes to be available when needed.

Frameworks like https://purecss.io/grids/ (not to mention Bootstrap etc) have provided the general grid architecture and surfaced the related issues for a long time.

Ideally, Gutenberg would be able to toggle between device modes, like Customizer has today, and the block-based content "wireframe" (since Gutenberg will fail to be a polished page builder for a while) should be able to render itself for a quick preliminary human-eye cross-device QA. Final QA would have to still go through frontend Preview function, until real page building / frontend content editing becomes a reality for Gutenberg.

lkraav commented Jul 10, 2018

Based on working for years with shortcode-based column implementations, my current conclusion is that each column must have its own configuration/classes to be available when needed.

Frameworks like https://purecss.io/grids/ (not to mention Bootstrap etc) have provided the general grid architecture and surfaced the related issues for a long time.

Ideally, Gutenberg would be able to toggle between device modes, like Customizer has today, and the block-based content "wireframe" (since Gutenberg will fail to be a polished page builder for a while) should be able to render itself for a quick preliminary human-eye cross-device QA. Final QA would have to still go through frontend Preview function, until real page building / frontend content editing becomes a reality for Gutenberg.

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Jul 12, 2018

Contributor

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

Contributor

mtias commented Jul 12, 2018

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Jul 12, 2018

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

Defining 3 width categories is usually the minimum, or you will get massively white-space heavy wide stacked blocks too often (because columns often already fail to fit on portrait tablets, so the stacking breakpoint needs to generous).

There are also cases where you need to display something in 2 columns even on mobiles.

This is really a framework level challenge, hardcoding some opinionated rules will not get far.

Pretty much anything is good as the first iteration step, though.

lkraav commented Jul 12, 2018

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

Defining 3 width categories is usually the minimum, or you will get massively white-space heavy wide stacked blocks too often (because columns often already fail to fit on portrait tablets, so the stacking breakpoint needs to generous).

There are also cases where you need to display something in 2 columns even on mobiles.

This is really a framework level challenge, hardcoding some opinionated rules will not get far.

Pretty much anything is good as the first iteration step, though.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Jul 12, 2018

Contributor

Yeah, getting responsive styles with columns done right is a tricky thing to accomplish, but at this point a hardcoded responsiveness (with a toggle to turn it off) would be better than what exists right now. Divi actually has hardcoded breakpoints and no way to customize them (without using custom CSS, of course), and yet a lot of people are pretty happy with it, so I think Gutenberg can get away with hardcoded breakpoints as well for now. Obviously a more flexible solution should be worked on for the future, but I doubt such a thing would make it into WordPress 5.0 at this point.

Just make sure to choose good default breakpoints (check out what page builder plugins do by default for some existing examples). I would recommend at least 3 breakpoints (phone, tablet, and desktop) to start off with.

Also, I recommend checking out how Oxygen uses a CSS flex-based layout system and exposes the settings in a really nice way. I think perhaps in the future a flex-layout block could be something that could work as an alternative to the Columns block.

https://oxygenbuilder.com/documentation/visual-editing/layout-spacing/
https://oxygenbuilder.com/documentation/visual-editing/responsive-controls/

Contributor

ZebulanStanphill commented Jul 12, 2018

Yeah, getting responsive styles with columns done right is a tricky thing to accomplish, but at this point a hardcoded responsiveness (with a toggle to turn it off) would be better than what exists right now. Divi actually has hardcoded breakpoints and no way to customize them (without using custom CSS, of course), and yet a lot of people are pretty happy with it, so I think Gutenberg can get away with hardcoded breakpoints as well for now. Obviously a more flexible solution should be worked on for the future, but I doubt such a thing would make it into WordPress 5.0 at this point.

Just make sure to choose good default breakpoints (check out what page builder plugins do by default for some existing examples). I would recommend at least 3 breakpoints (phone, tablet, and desktop) to start off with.

Also, I recommend checking out how Oxygen uses a CSS flex-based layout system and exposes the settings in a really nice way. I think perhaps in the future a flex-layout block could be something that could work as an alternative to the Columns block.

https://oxygenbuilder.com/documentation/visual-editing/layout-spacing/
https://oxygenbuilder.com/documentation/visual-editing/responsive-controls/

@rickcurran

This comment has been minimized.

Show comment
Hide comment
@rickcurran

rickcurran Jul 12, 2018

@SuperGeniusZeb The most recent 3.2 update changed the columns block to use Flexbox instead of the original css grid method.

For my own usage I'd need a way to specify specific break points and also to be able to set custom classes for the columns block in order for it to be usable in my own projects.

I realise that my needs are probably beyond what is feasible in the short term, but column blocks are such a key feature of what makes Gutenberg attractive it has so far been a a frustrating experience personally trying to work with them.

The core Columns block as it stands isn't capable enough so I've been trying to write my own column-based blocks but with limited success so far, part of the challenge being that I want to use the Foundation framework for the layout classes but it's proving very difficult to use these on the admin side due to clashes with the various extra "editor-block-..." markup that exists there.

I'd expect that adding responsiveness to the existing Columns block with options like different sized columns etc would encounter some of the same issues I've experienced in attempting to write my own block.

rickcurran commented Jul 12, 2018

@SuperGeniusZeb The most recent 3.2 update changed the columns block to use Flexbox instead of the original css grid method.

For my own usage I'd need a way to specify specific break points and also to be able to set custom classes for the columns block in order for it to be usable in my own projects.

I realise that my needs are probably beyond what is feasible in the short term, but column blocks are such a key feature of what makes Gutenberg attractive it has so far been a a frustrating experience personally trying to work with them.

The core Columns block as it stands isn't capable enough so I've been trying to write my own column-based blocks but with limited success so far, part of the challenge being that I want to use the Foundation framework for the layout classes but it's proving very difficult to use these on the admin side due to clashes with the various extra "editor-block-..." markup that exists there.

I'd expect that adding responsiveness to the existing Columns block with options like different sized columns etc would encounter some of the same issues I've experienced in attempting to write my own block.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Jul 12, 2018

Contributor

@rickcurran I know the Columns block was updated to use Flexbox. I was thinking more along the lines of a block that did not use columns and instead laid out its items depending on its Flexbox settings, reducing the need for columns in the first place, while still allowing them through the use of a generic Container block (perhaps like the one described in the later comments in #4900) to group other blocks.

It is hard to explain; just check out what Oxygen does. It is really neat, and uses a lot less <div>s and feels a lot cleaner than the traditional Section→Columns→Column layout system that nearly everything else uses.

Contributor

ZebulanStanphill commented Jul 12, 2018

@rickcurran I know the Columns block was updated to use Flexbox. I was thinking more along the lines of a block that did not use columns and instead laid out its items depending on its Flexbox settings, reducing the need for columns in the first place, while still allowing them through the use of a generic Container block (perhaps like the one described in the later comments in #4900) to group other blocks.

It is hard to explain; just check out what Oxygen does. It is really neat, and uses a lot less <div>s and feels a lot cleaner than the traditional Section→Columns→Column layout system that nearly everything else uses.

@rickcurran

This comment has been minimized.

Show comment
Hide comment
@rickcurran

rickcurran Jul 12, 2018

@SuperGeniusZeb Ah ok, I see what you mean. That sounds like something that would be suited to CSS Grid style layout methodology. For my part I'd need specific columns as containers for the content in the layouts I'm building so the approach you're looking at doesn't seem like it would work for me.

I'm going to need to persevere with my own column block I think as I don't think the core Columns block is going to work well enough for my needs, for a while at least anyway.

rickcurran commented Jul 12, 2018

@SuperGeniusZeb Ah ok, I see what you mean. That sounds like something that would be suited to CSS Grid style layout methodology. For my part I'd need specific columns as containers for the content in the layouts I'm building so the approach you're looking at doesn't seem like it would work for me.

I'm going to need to persevere with my own column block I think as I don't think the core Columns block is going to work well enough for my needs, for a while at least anyway.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Jul 12, 2018

Contributor

@rickcurran Actually, you can still have individual columns as containers themselves with what Oxygen does. It is simply optional. Check out the video to see how it all works:

https://www.youtube.com/watch?v=NnSfR-YFcQI

I think the Container block described in the later comments of #4900 could have the stack horizontal/vertical and alignment options that the Oxygen Section/Div elements have, and the Columns block could be used in addition to those to provide a full range of layout options. Maybe the Column blocks nested in the Columns block could even end up being replaced by the same Container block used for sections and generic <div>s, though I think that depends on how certain things are implemented in the Columns block.

Contributor

ZebulanStanphill commented Jul 12, 2018

@rickcurran Actually, you can still have individual columns as containers themselves with what Oxygen does. It is simply optional. Check out the video to see how it all works:

https://www.youtube.com/watch?v=NnSfR-YFcQI

I think the Container block described in the later comments of #4900 could have the stack horizontal/vertical and alignment options that the Oxygen Section/Div elements have, and the Columns block could be used in addition to those to provide a full range of layout options. Maybe the Column blocks nested in the Columns block could even end up being replaced by the same Container block used for sections and generic <div>s, though I think that depends on how certain things are implemented in the Columns block.

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 20, 2018

Member

Whilst I understand all the discussion a decision has been made to not have a responsive block as the first step here. I still stand by it isn't the route to go. Let's get the switch in as per mockup and then iterate from there.

@rchipka I would encourage you to explore your idea in a plugin, who knows it may help everyone seeing something like that and it could be useful for others. Right now though we're focusing not on this.

Member

karmatosed commented Jul 20, 2018

Whilst I understand all the discussion a decision has been made to not have a responsive block as the first step here. I still stand by it isn't the route to go. Let's get the switch in as per mockup and then iterate from there.

@rchipka I would encourage you to explore your idea in a plugin, who knows it may help everyone seeing something like that and it could be useful for others. Right now though we're focusing not on this.

@webmandesign

This comment has been minimized.

Show comment
Hide comment
@webmandesign

webmandesign Aug 14, 2018

Contributor

Hey guys,
A small fix to make columns more responsive would be applying flex-wrap: wrap; styles on columns container. I've described this in #8975 and applied fix in #8979
Hope this helps a bit.

Contributor

webmandesign commented Aug 14, 2018

Hey guys,
A small fix to make columns more responsive would be applying flex-wrap: wrap; styles on columns container. I've described this in #8975 and applied fix in #8979
Hope this helps a bit.

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 14, 2018

Contributor

flex-wrap definitely feels like the MVP approach here, while a UI with more control is sorted out for the future. Thanks @webmandesign!

Contributor

chrisvanpatten commented Aug 14, 2018

flex-wrap definitely feels like the MVP approach here, while a UI with more control is sorted out for the future. Thanks @webmandesign!

@sarahmonster sarahmonster referenced this issue Aug 20, 2018

Open

Block audit: Columns #9156

0 of 11 tasks complete
@kadencethemes

This comment has been minimized.

Show comment
Hide comment
@kadencethemes

kadencethemes Aug 21, 2018

I appreciated the discussion here, I am very interested in what core ends up with for columns. I used part of the mockup design from @karmatosed when implementing a row layout block https://wordpress.org/plugins/kadence-blocks/ perhaps not a perfect solution yet but something I thought might interest those as a block to test with that includes some responsive options for columns.

kadencethemes commented Aug 21, 2018

I appreciated the discussion here, I am very interested in what core ends up with for columns. I used part of the mockup design from @karmatosed when implementing a row layout block https://wordpress.org/plugins/kadence-blocks/ perhaps not a perfect solution yet but something I thought might interest those as a block to test with that includes some responsive options for columns.

@maddisondesigns

This comment has been minimized.

Show comment
Hide comment
@maddisondesigns

maddisondesigns Aug 22, 2018

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

maddisondesigns commented Aug 22, 2018

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Aug 22, 2018

I'd be looking out for adopting an established UI kit / grid framework. Rolling yet another new one is probably not what the world needs.

lkraav commented Aug 22, 2018

I'd be looking out for adopting an established UI kit / grid framework. Rolling yet another new one is probably not what the world needs.

@Chris2011

This comment has been minimized.

Show comment
Hide comment
@Chris2011

Chris2011 Aug 30, 2018

As I understand it right, was is correct, that the columns where implemented as css-grid and now with flex-box? It's kind of off-topic but css-grid has the appearance to make it responsive out of the box afaik. Why was it changed? I tried gutenberg in version 2.* and the rendered HTML was using css4-grid for the columns. What was the decission to change it?

Chris2011 commented Aug 30, 2018

As I understand it right, was is correct, that the columns where implemented as css-grid and now with flex-box? It's kind of off-topic but css-grid has the appearance to make it responsive out of the box afaik. Why was it changed? I tried gutenberg in version 2.* and the rendered HTML was using css4-grid for the columns. What was the decission to change it?

@andonette

This comment has been minimized.

Show comment
Hide comment
@andonette

andonette Sep 12, 2018

i know it's mildly hacky but this helps: edit for widths as you see fit
.wp-block-gallery .blocks-gallery-item { @media screen and (max-width: 600px) { width: calc(100% / 1 - 16px); } }

andonette commented Sep 12, 2018

i know it's mildly hacky but this helps: edit for widths as you see fit
.wp-block-gallery .blocks-gallery-item { @media screen and (max-width: 600px) { width: calc(100% / 1 - 16px); } }

@imagelucidity

This comment has been minimized.

Show comment
Hide comment
@imagelucidity

imagelucidity Sep 14, 2018

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

I used this method and it worked well for equal 2 column grid to become mobile responsive. I only specified display block and everything looks ok so far.

@media (max-width: 1140px) {
.wp-block-columns {
display: block;
}
}

imagelucidity commented Sep 14, 2018

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

I used this method and it worked well for equal 2 column grid to become mobile responsive. I only specified display block and everything looks ok so far.

@media (max-width: 1140px) {
.wp-block-columns {
display: block;
}
}

@rafafields

This comment has been minimized.

Show comment
Hide comment
@rafafields

rafafields Sep 29, 2018

Hello there!

I have created a simple displaygrid column system using block classes in pure SCSS. I added few settings options in SCSS variables (just imagine them as block backend settings panel .)

Also, I added a secondary breakpoint where the number of columns become the half (only for even numbers). What do you guys think about this?

I hope it can help anyone :)

//Settings

$column-support: 12;
$breakpoint-lg: 1200px;
$breakpoint-md: 992px;
$vertical-alignment: center;
$gap: 2rem; 

//Column Block

.wp-block-columns{
    display: grid;
    column-gap: $gap;
    row-gap: $gap;
    align-items: $vertical-alignment;
}

// The grid

@for $i from 2 through $column-support{
    
    .wp-block-columns.has-#{$i}-columns{
      
        // Check if $i is even
        @if($i % 2 == 0){
          // Create a medium breakpoint grid only for even numbers of columns
          @media (min-width: $breakpoint-md){
            grid-template-columns: repeat( $i / 2, 1fr);
          }

        }
        // Main breakpoint for large screens
        @media (min-width: $breakpoint-lg){
            grid-template-columns: repeat( $i, 1fr);
        }
    }
}

Source: https://codepen.io/Rafafields/pen/QZwpyN

rafafields commented Sep 29, 2018

Hello there!

I have created a simple displaygrid column system using block classes in pure SCSS. I added few settings options in SCSS variables (just imagine them as block backend settings panel .)

Also, I added a secondary breakpoint where the number of columns become the half (only for even numbers). What do you guys think about this?

I hope it can help anyone :)

//Settings

$column-support: 12;
$breakpoint-lg: 1200px;
$breakpoint-md: 992px;
$vertical-alignment: center;
$gap: 2rem; 

//Column Block

.wp-block-columns{
    display: grid;
    column-gap: $gap;
    row-gap: $gap;
    align-items: $vertical-alignment;
}

// The grid

@for $i from 2 through $column-support{
    
    .wp-block-columns.has-#{$i}-columns{
      
        // Check if $i is even
        @if($i % 2 == 0){
          // Create a medium breakpoint grid only for even numbers of columns
          @media (min-width: $breakpoint-md){
            grid-template-columns: repeat( $i / 2, 1fr);
          }

        }
        // Main breakpoint for large screens
        @media (min-width: $breakpoint-lg){
            grid-template-columns: repeat( $i, 1fr);
        }
    }
}

Source: https://codepen.io/Rafafields/pen/QZwpyN

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Sep 29, 2018

Following up on #6048 (comment) I'd recommend peeking at http://demo.kadencethemes.com/kadence-blocks/ for an impressive Gutenberg page building experience implementation all around, including columns cc @kadencethemes

lkraav commented Sep 29, 2018

Following up on #6048 (comment) I'd recommend peeking at http://demo.kadencethemes.com/kadence-blocks/ for an impressive Gutenberg page building experience implementation all around, including columns cc @kadencethemes

@mtias mtias changed the title from Columns Block (beta): add support for responsive columns to Support for Responsive Columns Oct 7, 2018

@xy0

This comment has been minimized.

Show comment
Hide comment
@xy0

xy0 Oct 11, 2018

@rafafields
It works for me right out of the box, thanks!

xy0 commented Oct 11, 2018

@rafafields
It works for me right out of the box, thanks!

jasmussen added a commit that referenced this issue Oct 12, 2018

gziolo added a commit that referenced this issue Oct 18, 2018

gziolo added a commit that referenced this issue Oct 18, 2018

Columns Block: Make responsive, make editor and theme match (#10541)
* Add basic responsiveness.

* Refactor columns metrics. Level the playing field in editor and frontend.

* Add space between colums.

Fixes #7818.
Fixes #6048.

* Remove "beta" designation from columns block.

* Columns block: Fix column width when editing

* Column block: Improve padding for the first and last item in a row

* Tests: Rename Columns block name also in e2e tests
@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Oct 18, 2018

Contributor

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

Contributor

ZebulanStanphill commented Oct 18, 2018

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Oct 18, 2018

Member

It needs some more work when there are 4-6 columns on wider screens, but for small and medium viewports it's quite good.

Member

gziolo commented Oct 18, 2018

It needs some more work when there are 4-6 columns on wider screens, but for small and medium viewports it's quite good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment