Gutenberg: The core/columns "wp-block-columns" html wrapper class no longer outputs "has-2-columns"

[wizardcoder]

Describe the bug
The core/columns "wp-block-columns" html wrapper class no longer outputs "has-2-columns", "has-3-columns" etc.

To reproduce
Steps to reproduce the behavior:

1. Install Gutenberg 6.4.0
2. Add a column block
3. Open the browsers developer tools and look for the columns wrapper div with the class "wp-block-columns".

Expected behavior
I expect the columns wrapper div with the class "wp-block-columns" to output the relevant column count class e.g. "has-2-columns"

Desktop:

• OS: Windows 10
• Browser Chrome
• Version 76.0.3809.132

Additional context
Wordpress: 5.2.3 (Fresh install)
Gutenberg: 6.4.0 (Only this plugin installed)

[youknowriad]

hi there! thanks for the issue.

yes, these were removed on purpose because with the possibility for columns to have different widths, these classNames were not useful anymore for styling purpose. Can you share how are you using these classNames?

[wizardcoder]

Oh ok. Thanks for the reply. I was struggling to find it mentioned in the patch notes. I will just adjust my CSS.

[ghost]

@youknowriad

I have used CSS grid with .has-n-columns for some time now, for example:

.has-2-columns { display: grid; grid-template-columns: 1fr 1fr; column-gap: $margin; }

This is no longer seems to be a viable option, unless you want to set up a registerBlockStyle for the different scenarios that "has-n-columns" was previously great for.

Seems like the project really really wants everyone to use flexbox based on its use of flex-basis inline styles.

[youknowriad]

Right now, the columns block can have different widths. The decision is not about grid vs flex box styles, it's about the fact that your style above forces the size of the columns to be similar which is not the case anymore, so you'll have to support it as well in your has-2-columns. The idea here is to remove this burden of support all these use-cases from theme authors.

[Raemy92]

Is there a way to bring back these classes? My customers only need 2- or 3-columns with the same size, they like it simple. With these additional classes I added the Bootstrap styles to the columns.

@import "bootstrap.min";

.wp-block-columns {
@extend .row;
}

.has-2-columns .wp-block-column {
@extend .col-lg-6;
}

.has-3-columns .wp-block-column {
@extend .col-lg-4;
}

.has-4-columns .wp-block-column {
@extend .col-lg-3;
}

.has-5-columns .wp-block-column {
@extend .col-lg-3;
}

.has-6-columns .wp-block-column {
@extend .col-lg-2;
}

Update:
Wrote a little JS but it would be cooler when we have some sort of settings in which we can define if we want to include the "has-n-columns" class or not.

/**
 * Adds Bootstrap Classes to columns
 */
function addBootstrapColumns() {
    var row = $('.wp-block-columns');
    row.addClass('row');
    row.children().each(function () {
       $(this).addClass('col-lg');
    });
}

[trauber]

I use wp-block-columns for designing a responsive layout offsite and then I paste the html onsite. I don't use the classes for any purposes beyond responsive layout. I hope the theme my organization is using retains the css if only for that purpose. I guess I'll contact the theme devs to see what their plans are.