diff --git a/src/block/columns/deprecated.js b/src/block/columns/deprecated.js index 2895ea2d2b..4bfe5b0e12 100644 --- a/src/block/columns/deprecated.js +++ b/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' ), diff --git a/src/block/columns/edit.js b/src/block/columns/edit.js index 137b4df79b..9c4ba33622 100644 --- a/src/block/columns/edit.js +++ b/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( { diff --git a/src/block/columns/save.js b/src/block/columns/save.js index 18a13b9a8f..e6640f4d4a 100644 --- a/src/block/columns/save.js +++ b/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 ) ) diff --git a/src/block/columns/style.scss b/src/block/columns/style.scss index 55d5db4db9..f4f0612c13 100644 --- a/src/block/columns/style.scss +++ b/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;