fix: consistent wrap marker with columns block

src/block/columns/style.scss

@@ -1,7 +1,8 @@
 @import "common";
 @import "./deprecated-style";
 
-.stk--flex:not(.stk--column-wrap-desktop) > .stk-block-column {
+// Older Feature Grid saves put the desktop wrap marker on the block wrapper.
+.stk--flex:not(.stk--column-wrap-desktop):not(.stk-block-feature-grid.stk--column-wrap-desktop > .stk-block-content) > .stk-block-column {
 	width: fit-content;
 	flex: 0 1 auto !important;
 	min-width: 24px;

src/block/feature-grid/deprecated.js

@@ -43,6 +43,33 @@ addFilter( 'stackable.feature-grid.save.blockClassNames', 'stackable/3.13.3', (
 	return classnames
 } )
 
+// Column wrapping now adds the stk--column-wrap-desktop class to the content
+// wrapper. For older saves, keep the marker on the block wrapper so existing
+// Feature Grid markup validates without cloning the Save component.
+addFilter( 'stackable.feature-grid.save.blockClassNames', 'stackable/3.19.9', ( output, props ) => {
+	if ( compareVersions( props.version, '3.19.8' ) === 0 ) {
+		return [
+			...output,
+			{
+				'stk--column-wrap-desktop': props.attributes.columnWrapDesktop,
+			},
+		]
+	}
+
+	return output
+} )
+
+addFilter( 'stackable.feature-grid.save.contentClassNames', 'stackable/3.19.9', ( classes, props ) => {
+	if ( compareVersions( props.version, '3.19.8' ) === 0 ) {
+		// The old save shape did not include the wrap marker on stk-block-content.
+		return classes.filter( className => {
+			return ! className?.[ 'stk--column-wrap-desktop' ]
+		} )
+	}
+
+	return classes
+} )
+
 // Version 3.1.0 Deprecations
 addFilter( 'stackable.feature-grid.save.blockClassNames', 'stackable/3.1.0', ( output, props ) => {
 	if ( compareVersions( props.version, '3.1.0' ) === 1 ) {
@@ -61,6 +88,12 @@ addFilter( 'stackable.feature-grid.save.blockClassNames', 'stackable/3.1.0', ( o
 } )
 
 const deprecated = [
+	{
+		// Support Feature Grid blocks saved before the column wrapping marker
+		// moved from the block wrapper to the content wrapper.
+		attributes: attributes( '3.19.8' ),
+		save: withVersion( '3.19.8' )( Save ),
+	},
 	{
 		// Handle the migration of shadow attributes with the change of type in 3.15.3
 		attributes: attributes( '3.16.2' ),

src/block/feature-grid/edit.js

@@ -71,15 +71,17 @@ const Edit = props => {
 		rowClass,
 		separatorClass,
 		columnTooltipClass,
-	], {
-		'stk--column-wrap-desktop': props.attributes.columnWrapDesktop,
-	} )
+	] )
 
+	// The wrap marker belongs on the flex wrapper so justified wrapped columns
+	// keep their configured widths, matching the Columns block behavior.
 	const contentClassNames = classnames( [
 		'stk-inner-blocks',
 		blockAlignmentClass,
 		'stk-block-content',
-	], getContentAlignmentClasses( props.attributes ) )
+	], {
+		'stk--column-wrap-desktop': props.attributes.columnWrapDesktop,
+	}, getContentAlignmentClasses( props.attributes ) )
 
 	// Generate the CSS styles for the block.
 	const blockCss = useBlockCssGenerator( {

src/block/feature-grid/save.js

@@ -40,19 +40,26 @@ export const Save = props => {
 				'stk-block-columns', // We need to add the columns class to make fit all and column gap to work properly.
 				responsiveClass,
 				separatorClass,
-				{
-					'stk--column-wrap-desktop': attributes.columnWrapDesktop,
-				},
 			],
 		], props )
 	)
 
-	const contentClassNames = classnames( [
-		rowClass,
-		'stk-inner-blocks',
-		blockAlignmentClass,
-		'stk-block-content',
-	], getContentAlignmentClasses( attributes ) )
+	// The wrap marker belongs on the flex wrapper so justified wrapped columns
+	// keep their configured widths, matching the Columns block behavior.
+	const contentClassNames = classnames(
+		applyFilters( 'stackable.feature-grid.save.contentClassNames', [
+			[
+				rowClass,
+				'stk-inner-blocks',
+				blockAlignmentClass,
+				'stk-block-content',
+			],
+			{
+				'stk--column-wrap-desktop': attributes.columnWrapDesktop,
+			},
+			getContentAlignmentClasses( attributes ),
+		], props )
+	)
 
 	return (
 		<BlockDiv.Content

src/block/feature-grid/style.scss

@@ -1,6 +1 @@
 @import "common";
-
-.stk-block-feature-grid.stk--column-wrap-desktop .stk--flex > .stk-block-column,
-.stk-block-feature-grid.stk--column-wrap-desktop .stk--flex > * > * > [data-type="stackable/column"] {
-	flex: var(--stk-flex-grow, 1) 1 calc(100% - var(--stk-column-gap, 0px) * 0 / 1) !important;
-}