Size Change: +23 B (0%)

Total Size: 865 kB

_{compressed-size-action}

@jorgefilipecosta FWIW I was mostly expecting this to have an impact on front-end of the previewed post. I guess if the stylesheet is loaded in the editor too, it may have a benefit there as well.

Hi there,
Before this change, it was possible, for example, to keep a 20% 80% column layout on medium devices. Now, it automatically resizes to 50% 50%, which isn't suitable for some layouts. Is there a way to let the user choose or override this?

Hi @dianeco , my understanding is that the intended behavior was always that there would be two equal-width columns shown at mid-range viewports. This didn't work correctly before, resulting in a behavior such as the one you describe, but also resulting in issues like that summarized in #18416 (fixed by these changes).

Based on some previous discussion in #20169 (specifically #20169 (review) and related work in #19909), I believe there might be some future desire to remove this mid-range behavior altogether, or at least to allow the user to have granular control over the column widths at various viewport sizes.

cc @jasmussen

I would agree that allowing users to adjust not only the specific amount of columns at mobile tablet and desktop breakpoints, but their individual widths as well, is something we should endeavour to support!

However it's a task that is perhaps best accomplished in a way that lets you customize ANY block and those breakpoints, not just the Columns block specifically. #19909 was created to enable such customizations.

@jasmussen #19909 seems very promising. But in the meantime, as it was possible before this change to keep an unequal columns layout on medium devices (with some CSS changes), would you consider creating a class that the user can add to avoid the 50% resizing.

For example, replacing the current code

@media (min-width: 600px) and (max-width:781px) {
	.wp-block-column {
	    flex-basis: calc(50% - 16px)!important;
	    flex-grow: 0;
	}
}

by

@media (min-width: 600px) and (max-width:781px) {
	.wp-block-columns:not(.cols-not-resizing) > .wp-block-column {
	    flex-basis: calc(50% - 16px)!important;
	    flex-grow: 0;
	}
}

Such a class would be edgecase CSS to support a feature meant to be replaced.

However it would be nice if we could replace that !important modifier, that way you could at least add a custom CSS class to your column in the advanced section:

That way you should be able to customize those breakpoints, no?

Yes, if we could replace the !important modifier, it would be easy to override the styling. But with the inline style used when an explicit width is assigned to a column, I don't see how it's possible to remove the !important modifier.

Any thoughts on whether we can find a way to remove that !important, @aduth?

The !important is necessary based on how the user-assigned width is applied using an inline style tag (related). The only alternatives I can think of are:

• Avoiding inline styles in favor of a limited subset of width arrangement classes, e.g. is-width-1-percent, is-width-2-percent, or is-width-one-third. This limits the control over assigning width in a way at odds with how the columns are currently implemented, and in a way I'm not sure would be desirable.
• If there were better browser support for it, it could be possible to do some combination of data- attribute and styling in the stylesheet (e.g. flex-basis: attr( 'data-width' % );). We're limited by browser support here.

But between the comments of #20597 (comment) and #20597 (comment), it seems to me it should already be possible to override this by assigning an additional class name to the column and using a custom style which both has high specificity (higher than the base style) and !important? I expect that could allow the style to be overridden.

Yes, it's already possible to override style with higher specificity and !important. The difficulty is that I need a class that keeps the columns width on medium devices, and that covers all cases, no matter the value of the column width. I achieve it using the code below but was hoping for a simpler solution 🙂.

@media (min-width: 600px) and (max-width:781px) {
	.wp-block-columns.cols-not-resizing > .wp-block-column[style*="flex-basis:5%"] {
	    flex-basis: 5% !important;
	}
	.wp-block-columns.cols-not-resizing > .wp-block-column[style*="flex-basis:6%"] {
		flex-basis: 6% !important;
	}
	.wp-block-columns.cols-not-resizing > .wp-block-column[style*="flex-basis:7%"] {
		flex-basis: 7% !important;
	}
       
        [...]
}

I just installed WordPress 5.4 RC1 (and disabled the Gutenberg plugin), and I can confirm that #18416 is fixed! 😄