fix (columns): disallow column order from spilling over to nested column blocks (#3423)

* fix (columns): disallow column order from spilling over to nested column blocks

* fix(columns): also target non columns block with column innerblocks

* undo revision

* prevent columns from being reordered

---------

Co-authored-by: [email protected] <>
Co-authored-by: Alquen Sarmiento <[email protected]>

Author: bfintal

src/block/accordion/style.scss

@@ -99,6 +99,12 @@
 		transform: translateY(25px);
 		opacity: 0;
 	}
+
+	// Prevent inside columns from being re-ordered when a parent column block
+	// has custom ordering.
+	> .stk-block-column {
+		order: initial !important;
+	}
 }
 
 // This is for the column hack. Remove margin for the wrapper div if accordion is inside a columns block

src/block/columns/style.scss

@@ -15,6 +15,16 @@
 	margin-right: auto;
 }
 
+// Add a 0 specificity style to set the default column order. This is to prevent
+// the column order from spilling to nested blocks.
+// Target the stk-column-wrapper to also include blocks with column innerblocks
+// but are not columns (no stk-block-columns), like accordion and horizontal scroller.
+:where(.stk-block-columns) {
+	@for $i from 1 through 20 {
+		--stk-col-order-#{ $i }: #{ $i };
+	}
+}
+
 // Column order.
 @for $i from 1 through 20 {
 	.stk-block-column:nth-child(#{ $i }) {