fix (columns block): fix columns justify when wrapping is enabled (#3703)

Author: Arukuen

src/block/columns/deprecated.js

@@ -36,7 +36,23 @@ addFilter( 'stackable.columns.save.contentClassNames', 'stackable/3.8.0', ( clas
 	return classes
 } )
 
+// Column wrapping now adds the stk--column-wrap-desktop class.
+addFilter( 'stackable.columns.save.contentClassNames', 'stackable/3.19.8', ( classes, props ) => {
+	if ( semverCompare( props.version, '<', '3.19.8' ) ) {
+		return classes.filter( className => {
+			return ! className?.[ 'stk--column-wrap-desktop' ]
+		} )
+	}
+
+	return classes
+} )
+
 const deprecated = [
+	{
+		// Support Columns blocks saved before the column wrapping marker was added.
+		attributes: attributes( '3.19.7' ),
+		save: withVersion( '3.19.7' )( Save ),
+	},
 	{
 		// Handle the migration of shadow attributes with the change of type in 3.15.3
 		attributes: attributes( '3.16.2' ),

src/block/columns/edit.js

@@ -91,7 +91,9 @@ const Edit = props => {
 		'stk-inner-blocks',
 		blockAlignmentClass,
 		'stk-block-content',
-	], getContentAlignmentClasses( props.attributes, 'column', instanceId ) )
+	], {
+		'stk--column-wrap-desktop': props.attributes.columnWrapDesktop,
+	}, getContentAlignmentClasses( props.attributes, 'column', instanceId ) )
 
 	// Generate the CSS styles for the block.
 	const blockCss = useBlockCssGenerator( {

src/block/columns/save.js

@@ -45,6 +45,9 @@ export const Save = props => {
 			blockAlignmentClass,
 			'stk-block-content',
 		],
+		{
+			'stk--column-wrap-desktop': attributes.columnWrapDesktop,
+		},
 		getContentAlignmentClasses( props.attributes ),
 	], props ) )
 

src/block/columns/style.scss

@@ -1,7 +1,7 @@
 @import "common";
 @import "./deprecated-style";
 
-.stk--flex > .stk-block-column {
+.stk--flex:not(.stk--column-wrap-desktop) > .stk-block-column {
 	width: fit-content;
 	flex: 0 1 auto !important;
 	min-width: 24px;