We have been battling the way the columns block works since its creation.
It is been based on a single media query and hasn't provided useful support for flex-wrap. We solved that for ourselves using this PHP class that adds additional CSS classes based on what kind of units are used. That way % based layouts could use the media query and things like vw, em and rem could use flex-wrap / basis.
WordPress has updated the way layout works, and restyled the columns block accordingly.
This new layout system is adding flex-wrap: nowrap to all .wp-block-columns by default, then using the block library CSS to undo nowrap. I don't understand that decision at all and its breaking responsiveness in our existing content.
Details
Short term, fix this so existing content goes back to normal
A filter to disable __experimentalLayout on the core/columns block seems to fix it.
Longer term, get more on board with the way this works in core WP
douglas-johnson
commented
1 year ago
Background
We have been battling the way the columns block works since its creation.
It is been based on a single media query and hasn't provided useful support for flex-wrap. We solved that for ourselves using this PHP class that adds additional CSS classes based on what kind of units are used. That way % based layouts could use the media query and things like vw, em and rem could use flex-wrap / basis.
WordPress has updated the way layout works, and restyled the columns block accordingly.
This new layout system is adding
flex-wrap: nowrapto all.wp-block-columnsby default, then using the block library CSS to undo nowrap. I don't understand that decision at all and its breaking responsiveness in our existing content.Details
__experimentalLayouton thecore/columnsblock seems to fix it.