Fix (carousel block): display correct layout and remove frontend console errors (#3619)

* fix console errors when not using infinite scrolling

* fix carousel layout

Author: kaeizen

src/block/carousel/frontend-carousel.js

@@ -491,9 +491,9 @@ class _StackableCarousel {
 	onWheel = e => {
 		const sliderElScrollLeft = this.sliderEl.scrollLeft
 		const lastSlideOffset = this.slideEls[ this.slideEls.length - 1 ].offsetLeft
-		const firstCloneOffset = this.clones[ 0 ].offsetLeft
 		const slidesOffset = this.slideEls.map( slide => slide.offsetLeft )
-		const clonesOffset = this.clones.map( slide => slide.offsetLeft )
+		const firstCloneOffset = this.infiniteScroll && this.clones.length ? this.clones[ 0 ].offsetLeft : 0
+		const clonesOffset = this.infiniteScroll && this.clones.length ? this.clones.map( slide => slide.offsetLeft ) : []
 		if ( this.type === 'fade' ) {
 			if ( this.wheelTimeout ) {
 				return
@@ -549,7 +549,7 @@ class _StackableCarousel {
 		let dx = e.clientX - this.initialClientX
 		const sliderElScrollLeft = this.sliderEl.scrollLeft
 		const lastSlideOffsetLeft = this.slideEls[ this.slideEls.length - 1 ].offsetLeft
-		const firstCloneOffsetLeft = this.clones[ 0 ].offsetLeft
+		const firstCloneOffsetLeft = this.infiniteScroll && this.clones.length ? this.clones[ 0 ].offsetLeft : 0
 
 		if ( this.type === 'slide' ) {
 			if ( this.infiniteScroll && sliderElScrollLeft === 0 && dx > 0 ) {

src/styles/block.scss

@@ -54,6 +54,8 @@
 
 @include desktop-tablet {
 	.stk-block:is(.aligncenter, .alignwide, .alignfull) > .stk-content-align:not(.alignwide):not(.alignfull),
+	// Dev note: add selector for carousel because it has an extra wrapper before the inner blocks.
+	.stk-block-carousel:is(.aligncenter, .alignwide, .alignfull) > :where(.stk-block-carousel__content-wrapper) > .stk-content-align:not(.alignwide):not(.alignfull),
 	.stk-block .stk-block.aligncenter {
 		// --stk-block-default-width is a Stackable setting
 		// --stk-block-width-default-detected is from the fallback autodetected value.

src/styles/editor-block.scss

@@ -104,7 +104,9 @@
 
 // For wide/full width blocks, but with their contents center aligned.
 :where(:is(.stk-preview-device-desktop, .stk-preview-device-tablet) [data-type^="stackable/"]:is([data-align="wide"], [data-align="full"]) > .stk-block > .stk-inner-blocks:not(.alignwide):not(.alignfull)),
-:where(:is(.stk-preview-device-desktop, .stk-preview-device-tablet) [data-type^="stackable/"]:is([data-align="wide"], [data-align="full"]) [data-type^="stackable/"][data-align="center"]) {
+:where(:is(.stk-preview-device-desktop, .stk-preview-device-tablet) [data-type^="stackable/"]:is([data-align="wide"], [data-align="full"]) [data-type^="stackable/"][data-align="center"]),
+// Dev note: add selector for carousel because it has an extra wrapper before the inner blocks.
+:where(:is(.stk-preview-device-desktop, .stk-preview-device-tablet) [data-type^="stackable/"]:is([data-align="wide"], [data-align="full"]) > .stk-block-carousel > :where(.stk-block-carousel__content-wrapper) > .stk-inner-blocks:not(.alignwide):not(.alignfull)) {
 	// --stk-block-default-width is a Stackable setting
 	// --stk-block-width-default-detected is from the fallback autodetected value.
 	max-width: var(--stk-block-default-width, var(--stk-block-width-default-detected, 900px)) !important;