From 3ac855319874a31ae07c180633049dac7fc332bd Mon Sep 17 00:00:00 2001 From: Yan Sern Date: Mon, 11 Apr 2022 15:18:41 +0300 Subject: [PATCH] Slideshow Block: Fix grid blowout when inserted inside Layout Grid Block. (#23854) Co-authored-by: Ivan Ottinger <25105483+ivan-ottinger@users.noreply.github.com> --- ...ideshow-block-in-layout-grid-block-blowout | 4 ++++ .../extensions/blocks/slideshow/editor.scss | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/fix-slideshow-block-in-layout-grid-block-blowout 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 new file mode 100644 index 0000000000000..fbcb4b9fb80f3 --- /dev/null +++ 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 index 45939d1a6c2ca..1d82d47a60513 100644 --- 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%;