fix background responsive

gambitph · Sep 2, 2024 · 217dbf2 · 217dbf2
1 parent 6419839
commit 217dbf2
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/block-css/block-style-generator-class.js b/src/components/block-css/block-style-generator-class.js
@@ -165,6 +165,8 @@ export class BlockStyleGenerator {
 
 	generateBlockStylesForEditor( attributes, blockStyles, args ) {
 		const generatedCss = []
+		const tabletGeneratedCss = []
+		const mobileGeneratedCss = []
 
 		// Call block styles that are added conditionally
 		this._dynamicBlockStyles.forEach( fn => {
@@ -211,16 +213,21 @@ export class BlockStyleGenerator {
 					attributes,
 					editorMode: true,
 				} )
-				if ( css ) {
+
+				// This ensures smaller screensizes override the larger screensize background images
+				if ( css && attrName.indexOf( 'BackgroundMedia' ) !== -1 && blockStyle?.responsive?.[ 0 ] === 'mobile' ) {
+					mobileGeneratedCss.push( css )
+				} else if ( css && attrName.indexOf( 'BackgroundMedia' ) !== -1 && blockStyle?.responsive?.[ 0 ] === 'tablet' ) {
+					tabletGeneratedCss.push( css )
+				} else if ( css ) {
 					generatedCss.push( css )
 				}
 			} )
 		} )
-
-		let output = generatedCss.join( '' )
+		const allGeneratedCss = [ ...generatedCss, ...tabletGeneratedCss, ...mobileGeneratedCss ]
+		let output = allGeneratedCss.join( '' )
 		output = getDynamicContentEdit( output, args.clientId, args.context )
 		output = applyFilters( 'stackable.block-styles.edit', output, getUniqueBlockClass( attributes.uniqueId ) )
-
 		return output
 	}