Slideshow Block: Fix grid blowout when inserted inside Layout Grid Bl…

…ock. (#23854) Co-authored-by: Ivan Ottinger <[email protected]>
Automattic · Apr 11, 2022 · 3ac8553 · 3ac8553
1 parent bbe5098
commit 3ac8553
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-slideshow-block-in-layout-grid-block-blowout b/projects/plugins/jetpack/changelog/fix-slideshow-block-in-layout-grid-block-blowout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Slideshow block: Fix grid blowout when Slideshow block is inserted inside a Layout Grid Block.
diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss
@@ -1,5 +1,24 @@
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
+// When slideshow block appears inside a layout grid block,
+// make it behave like a grid block to prevent grid blowout.
+// https://github.com/Automattic/wp-calypso/issues/39956
+.wp-block-jetpack-layout-grid-column
+	> .block-editor-inner-blocks
+	> .block-editor-block-list__layout
+	> .block-editor-block-list__block {
+	// WPCOM
+	> .wp-block > .wp-block-jetpack-slideshow, 
+	// Self-Hosted
+	> .wp-block-jetpack-slideshow {
+		display: grid;
+
+		> .swiper-container {
+			width: 100%;
+		}
+	}
+}
+
 .wp-block-jetpack-slideshow__add-item {
 	margin-top: 4px;
 	width: 100%;