Slideshow block: Ensure max-width is defined when within the Stack bl…

…ock (#40383)

projects/plugins/jetpack/changelog/fix-slideshow-width-in-stack-block

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Slideshow block: Fix block display when added within a Stack block.

projects/plugins/jetpack/extensions/blocks/slideshow/edit.js

@@ -9,13 +9,15 @@ import {
 import { DropZone, FormFileUpload, withNotices } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
 import { mediaUpload } from '@wordpress/editor';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { get, map, pick } from 'lodash';
 import metadata from './block.json';
 import { PanelControls, ToolbarControls } from './controls';
 import Slideshow from './slideshow';
+import applyPaddingForStackBlock from './utils';
 
 import './editor.scss';
 
@@ -54,6 +56,13 @@ export const SlideshowEdit = ( {
 			ids: imgs.map( ( { id } ) => parseInt( id, 10 ) ),
 		} );
 	};
+	useEffect( () => {
+		if ( typeof window !== 'undefined' ) {
+			domReady( function () {
+				applyPaddingForStackBlock();
+			} );
+		}
+	}, [] );
 
 	const onSelectImages = imgs =>
 		setImages( imgs.map( image => pickRelevantMediaFiles( image, sizeSlug ) ) );

projects/plugins/jetpack/extensions/blocks/slideshow/style.scss

@@ -307,3 +307,16 @@
 		padding-top: 0;
 	}
 }
+
+.entry-content:has(.wp-block-group.is-vertical:not(.is-layout-constrained)) .wp-block-group.is-vertical:not(.is-layout-constrained),
+#editor:has(.wp-block-group.is-vertical:not(.is-layout-constrained)) .wp-block-group.is-vertical:not(.is-layout-constrained)  {
+	.wp-block-jetpack-slideshow {
+		max-width: inherit;
+	}
+}
+
+div:not(.entry-content):not(.block-editor__container) > .wp-block-group.is-vertical:not(.is-layout-constrained) {
+	.wp-block-jetpack-slideshow {
+		max-width: 100vw;
+	}
+}

projects/plugins/jetpack/extensions/blocks/slideshow/utils.js

@@ -0,0 +1,43 @@
+export default function applyPaddingForStackBlock() {
+	// Helper function to apply styles
+	const applyPaddingStyles = ( doc, isIframe ) => {
+		const parentElement = doc.querySelector( '.wp-site-blocks' );
+		if ( ! parentElement ) return;
+
+		const { paddingLeft, paddingRight } = window.getComputedStyle( parentElement );
+		const totalPadding = parseFloat( paddingLeft ) + parseFloat( paddingRight );
+
+		const targetElements = doc.querySelectorAll(
+			isIframe
+				? '.wp-block-group.is-vertical:not(.is-layout-constrained) .wp-block-jetpack-slideshow'
+				: '.wp-block-group.is-vertical:not(.is-layout-constrained) .wp-block-jetpack-slideshow:not(.entry-content .wp-block-jetpack-slideshow)'
+		);
+
+		targetElements.forEach( element => {
+			element.style.maxWidth = `calc(100vw - ${ totalPadding }px)`;
+		} );
+	};
+
+	// Apply styles to the main document
+	applyPaddingStyles( document, false );
+
+	// Find all iframes and apply styles to their content
+	const iframes = document.querySelectorAll( 'iframe' );
+	iframes.forEach( iframe => {
+		const iframeDoc = iframe.contentDocument;
+
+		// Ensure iframe's parent is #editor before applying styles
+		const iframeParent = iframe.closest( '#editor' );
+		if ( iframeDoc && iframeParent ) {
+			const targetElements = iframeDoc.querySelectorAll(
+				'.wp-block-group.is-vertical:not(.is-layout-constrained) .wp-block-jetpack-slideshow'
+			);
+			targetElements.forEach( element => {
+				element.style.maxWidth = 'inherit'; // Explicit style for this case
+			} );
+		} else if ( iframeDoc ) {
+			// If the iframe is not in the editor, apply the styles to the iframe itself
+			applyPaddingStyles( iframeDoc, true );
+		}
+	} );
+}

projects/plugins/jetpack/extensions/blocks/slideshow/view.js

@@ -8,9 +8,12 @@ import {
 	swiperPaginationRender,
 	swiperResize,
 } from './swiper-callbacks';
+import applyPaddingForStackBlock from './utils';
 
 if ( typeof window !== 'undefined' ) {
 	domReady( function () {
+		applyPaddingForStackBlock();
+
 		const slideshowBlocks = document.getElementsByClassName( 'wp-block-jetpack-slideshow' );
 
 		Array.from( slideshowBlocks ).forEach( slideshowBlock => {