fix (column block): styling not working when used inside a query loop (…

…#3298) * fix(content-align): make getContentAlignmentClasses compatible with adding instanceId * fix: add instanceId to class if inside QueryLoop * fix: rearrange getContentAlignmentClasses parameters
gambitph · Sep 5, 2024 · 224a9b0 · 224a9b0
1 parent e41f751
commit 224a9b0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/block-components/content-align/use-content-align.js b/src/block-components/content-align/use-content-align.js
@@ -4,10 +4,15 @@
 import { applyFilters } from '@wordpress/hooks'
 import classnames from 'classnames'
 
-export const getContentAlignmentClasses = ( attributes, blockName = 'column' ) => {
+export const getContentAlignmentClasses = ( attributes, blockName = 'column', instanceId = '' ) => {
+	let instanceIdString = ''
+	if ( instanceId ) {
+		instanceIdString = `${ instanceId }-`
+	}
+
 	return classnames(
 		'stk-content-align',
-		`stk-${ attributes.uniqueId }-${ blockName }`,
+		`stk-${ attributes.uniqueId }-${ instanceIdString }${ blockName }`,
 		applyFilters( 'stackable.block-components.content-align.getContentAlignmentClasses', {
 			'stk--flex': attributes.columnJustify,
 			alignwide: attributes.innerBlockContentAlign === 'alignwide', // This will align the columns inside.

diff --git a/src/block/columns/edit.js b/src/block/columns/edit.js
@@ -41,6 +41,7 @@ import {
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
 } from '~stackable/higher-order'
+import { useQueryLoopInstanceId } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -74,11 +75,13 @@ const Edit = props => {
 			columnTooltipClass,
 		], props ) )
 
+	const instanceId = useQueryLoopInstanceId( props.attributes.uniqueId )
+
 	const contentClassNames = classnames( [
 		'stk-inner-blocks',
 		blockAlignmentClass,
 		'stk-block-content',
-	], getContentAlignmentClasses( props.attributes ) )
+	], getContentAlignmentClasses( props.attributes, 'column', instanceId ) )
 
 	return (
 		<>

diff --git a/src/block/horizontal-scroller/edit.js b/src/block/horizontal-scroller/edit.js
@@ -43,6 +43,7 @@ import {
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
 } from '~stackable/higher-order'
+import { useQueryLoopInstanceId } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -81,11 +82,13 @@ const Edit = props => {
 		 columnTooltipClass,
 	 ] )
 
+	 const instanceId = useQueryLoopInstanceId( props.attributes.uniqueId )
+
 	 const contentClassNames = classnames( [
 		'stk-inner-blocks',
 		blockAlignmentClass,
 		'stk-block-content',
-	 ], getContentAlignmentClasses( props.attributes, 'horizontal-scroller' ), {
+	 ], getContentAlignmentClasses( props.attributes, 'horizontal-scroller', instanceId ), {
 		'stk--with-scrollbar': showScrollbar,
 	 } )