VideoPress: Fix video overflow area in float containers and flex posi…

…tion in row blocks (#41789) * Fix center-aligned video and remove line-height in the editor * Fix flex position for videos inside row blocks * Fix video area overflow for multiple float videos * changelog * Add tests * Add player tests
Automattic · Feb 19, 2025 · 3eeec4d · 3eeec4d
1 parent bcfa47e
commit 3eeec4d
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 4 deletions.
diff --git a/projects/packages/videopress/changelog/fix-videopress-block-float-align b/projects/packages/videopress/changelog/fix-videopress-block-float-align
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix flex position for videos inside row blocks.
diff --git a/projects/packages/videopress/src/class-initializer.php b/projects/packages/videopress/src/class-initializer.php
@@ -203,8 +203,10 @@ public static function render_videopress_video_block( $block_attributes, $conten
 		// Inline style
 		$style     = '';
 		$max_width = isset( $block_attributes['maxWidth'] ) ? $block_attributes['maxWidth'] : null;
+
 		if ( $max_width && $max_width !== '100%' ) {
-			$style = sprintf( 'max-width: %s; margin: auto;', $max_width );
+			$style    = sprintf( 'max-width: %s;', $max_width );
+			$classes .= ' wp-block-jetpack-videopress--has-max-width';
 		}
 
 		/*

diff --git a/...ects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.tsx b/...ects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.tsx
@@ -57,7 +57,7 @@ export default function Player( {
 	const mainWrapperRef = useRef< HTMLDivElement >();
 	const videoWrapperRef = useRef< HTMLDivElement >();
 
-	const { maxWidth, caption, videoRatio } = attributes;
+	const { maxWidth, caption, videoRatio, align } = attributes;
 
 	/*
 	 * Temporary height is used to set the height of the video
@@ -228,6 +228,18 @@ export default function Player( {
 			: 0;
 	}
 
+	let style: Record< string, string > = { marginRight: 'auto' };
+
+	if ( align === 'center' ) {
+		style = { ...style, marginLeft: 'auto' };
+	}
+
+	const innerContainerStyle = `
+		body {
+			line-height: 0;
+		}
+	`;
+
 	return (
 		<figure ref={ mainWrapperRef } className="jetpack-videopress-player">
 			<ResizableBox
@@ -239,7 +251,7 @@ export default function Player( {
 				} }
 				maxWidth="100%"
 				size={ { width: maxWidth, height: 'auto' } }
-				style={ { marginRight: 'auto' } }
+				style={ style }
 				onResizeStop={ onBlockResize }
 				onResizeStart={ () => setVideoPlayerTemporaryHeightState( 'auto' ) }
 			>
@@ -251,7 +263,13 @@ export default function Player( {
 					style={ wrapperElementStyle }
 				>
 					<>
-						{ ! isRequestingEmbedPreview && <SandBox html={ html } scripts={ sandboxScripts } /> }
+						{ ! isRequestingEmbedPreview && (
+							<SandBox
+								html={ html }
+								scripts={ sandboxScripts }
+								styles={ [ innerContainerStyle ] }
+							/>
+						) }
 
 						{ ! isVideoPlayerLoaded && (
 							<div className="jetpack-videopress-player__loading">

diff --git a/...ges/videopress/src/client/block-editor/blocks/video/components/player/test/index.test.tsx b/...ges/videopress/src/client/block-editor/blocks/video/components/player/test/index.test.tsx
@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import { VideoBlockAttributes } from '../../../types';
+import Player from '../index';
+
+const baseAttributes: VideoBlockAttributes = {
+	videoRatio: 100,
+	autoplay: true,
+	align: 'center',
+	posterData: {
+		type: 'media-library',
+		id: 1,
+		url: 'https://videopress.com/wp-content/uploads/2024/10/placeholder-video-1.mp4',
+	},
+};
+
+const previewMock = {
+	html: '',
+	width: 0,
+	height: 0,
+	thumbnail_height: 0,
+	thumbnail_width: 0,
+	version: '',
+	title: '',
+	type: '',
+	provider_name: '',
+	provider_url: '',
+};
+
+describe( 'Player', () => {
+	it( 'should render', () => {
+		render(
+			<Player
+				showCaption={ true }
+				isSelected={ false }
+				attributes={ baseAttributes }
+				setAttributes={ () => {} }
+				preview={ previewMock }
+				isRequestingEmbedPreview={ false }
+				html=""
+			/>
+		);
+
+		expect( screen.getByRole( 'figure' ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss
@@ -3,6 +3,11 @@
 .wp-block-jetpack-videopress {
 	position: relative;
 
+	&.jetpack-videopress-player.alignright ~ &.jetpack-videopress-player,
+	&.jetpack-videopress-player.alignleft ~ &.jetpack-videopress-player {
+		clear: both;
+	}
+
 	figcaption {
 		margin-bottom: 1em;
     	margin-top: 0.5em;
@@ -28,4 +33,12 @@
 			opacity: 0;
 		}
 	}
+
+	&.wp-block-jetpack-videopress--has-max-width {
+		margin: auto;
+	}
+}
+
+.is-layout-flex .wp-block-jetpack-videopress.wp-block-jetpack-videopress--has-max-width {
+	margin: 0;
 }
diff --git a/projects/packages/videopress/tests/php/test-class-initializer.php b/projects/packages/videopress/tests/php/test-class-initializer.php
@@ -60,4 +60,51 @@ public function test_video_enqueue_bridge_when_oembed_present_whith_no_video_url
 		$cache_returned = VideoPress_Initializer::video_enqueue_bridge_when_oembed_present( $cache_value, 'https://www.some-site.com', null, null );
 		$this->assertEquals( $cache_value, $cache_returned );
 	}
+
+	/** Tests the render_videopress_video_block function, when max width is set */
+	public function test_render_videopress_video_block_with_max_width() {
+		$attributes = array(
+			'controls'            => true,
+			'loop'                => false,
+			'muted'               => true,
+			'playsinline'         => true,
+			'poster'              => 'http://localhost/wp-content/uploads/2023/03/cHJpdmF0ZS9sci9pbWFnZJMvd2Vic2l0ZS8yMDIyLTA1L25zMTEwODYtaW1hZ2Uta3d2eWRqaGYuanBn.jpg',
+			'preload'             => 'none',
+			'seekbarColor'        => '#ff6900',
+			'seekbarPlayedColor'  => '#00d084',
+			'seekbarLoadingColor' => '#fcb900',
+			'useAverageColor'     => false,
+			'maxWidth'            => '300px',
+		);
+
+		$content = 'some content';
+		$block   = array( 'context' => array() );
+
+		$rendered_block = VideoPress_Initializer::render_videopress_video_block( $attributes, $content, $block );
+
+		$this->assertStringContainsString( 'wp-block-jetpack-videopress--has-max-width', $rendered_block );
+	}
+
+	/** Tests the render_videopress_video_block function, when max width is not set */
+	public function test_render_videopress_video_block_without_max_width() {
+		$attributes = array(
+			'controls'            => true,
+			'loop'                => false,
+			'muted'               => true,
+			'playsinline'         => true,
+			'poster'              => 'http://localhost/wp-content/uploads/2023/03/cHJpdmF0ZS9sci9pbWFnZJMvd2Vic2l0ZS8yMDIyLTA1L25zMTEwODYtaW1hZ2Uta3d2eWRqaGYuanBn.jpg',
+			'preload'             => 'none',
+			'seekbarColor'        => '#ff6900',
+			'seekbarPlayedColor'  => '#00d084',
+			'seekbarLoadingColor' => '#fcb900',
+			'useAverageColor'     => false,
+		);
+
+		$block   = array( 'context' => array() );
+		$content = 'some content';
+
+		$rendered_block = VideoPress_Initializer::render_videopress_video_block( $attributes, $content, $block );
+
+		$this->assertStringNotContainsString( 'wp-block-jetpack-videopress--has-max-width', $rendered_block );
+	}
 }