diff --git a/src/block/columns/style.scss b/src/block/columns/style.scss index f4f0612c13..148cf2fd50 100644 --- a/src/block/columns/style.scss +++ b/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; diff --git a/src/block/feature-grid/deprecated.js b/src/block/feature-grid/deprecated.js index 98767bc51e..fe9a622b82 100644 --- a/src/block/feature-grid/deprecated.js +++ b/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' ), diff --git a/src/block/feature-grid/edit.js b/src/block/feature-grid/edit.js index a1963aedae..77b1a58cd3 100644 --- a/src/block/feature-grid/edit.js +++ b/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( { diff --git a/src/block/feature-grid/save.js b/src/block/feature-grid/save.js index 59fa40a838..d186828626 100644 --- a/src/block/feature-grid/save.js +++ b/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 ( .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; -}