fix: column gap inherited from desktop collapses tablet columns (#2045)

Author: bfintal

src/block-components/column/style.js

@@ -43,9 +43,6 @@ const getStyleParams = ( options = {} ) => {
 			format: '%s%',
 			dependencies: [ 'columnAdjacentCount' ],
 			valueCallback: ( value, getAttribute, device ) => {
-				if ( device === 'desktop' ) {
-					return value
-				}
 				const adjacentCount = getAttribute( 'columnAdjacentCount', device )
 				if ( adjacentCount ) {
 					return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
@@ -73,10 +70,6 @@ const getStyleParams = ( options = {} ) => {
 				// No need to do this in the editor since it already does this.
 				const value = device === 'desktop' ? _value : _value.replace( /^1 1/, '0 1' )
 
-				if ( device === 'desktop' ) {
-					return value
-				}
-
 				const adjacentCount = getAttribute( 'columnAdjacentCount', device )
 				if ( adjacentCount ) {
 					return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )

src/block-components/column/use-column.js

@@ -21,7 +21,10 @@ export const useColumn = () => {
 			if ( adjacentBlocks.length ) {
 				widths.forEach( ( width, i ) => {
 				// TODO: When Gutenberg 10.1 comes out, update this to just one updateBlockAttributes call for all client Ids
-					updateBlockAttributes( adjacentBlocks[ i ].clientId, { columnWidth: width } )
+					updateBlockAttributes( adjacentBlocks[ i ].clientId, {
+						columnWidth: width,
+						columnAdjacentCount: widths.length,
+					} )
 				} )
 			}
 		},