VideoPress: fix Wide width and Full alignment not rendering in editor

[shsajalchowdhury]

What

Fixes #43807

Why

When VideoPress is enabled, it replaces the core video block's edit component and wraps the video preview in a ResizableBox with explicit width constraints. This overrides the editor's wide/full alignment styles, causing the block to render at normal width even when "Wide width" or "Full" alignment is selected.

How

• Disable resize handles when the block has align: 'wide' or align: 'full' — resizing doesn't make sense for these alignments
• Set ResizableBox width to 100% when aligned, so the content fills the wider figure element
• Add editor CSS to ensure .wp-block-embed__wrapper expands to fill the aligned figure

Testing Instructions

1. Activate the VideoPress module
2. Add a Video block to a post
3. Upload/select a video and wait for the VideoPress preview to load
4. Change alignment to "Wide width" — block should render wide in the editor
5. Change alignment to "Full" — block should render full-width in the editor
6. Change back to default alignment — resize handles should reappear and block should respect the custom maxWidth

Changelog

VideoPress: ensure "Wide width" and "Full" alignments render correctly in the editor.

Does this pull request change what data or activity we track or use?

No. This change only affects the visual rendering of the VideoPress block in the editor — it does not collect, log, or transmit any new data.

Testing instructions

1. Activate the VideoPress module
2. Add a Video block to a post
3. Upload/select a video and wait for the VideoPress preview to load
4. Change the alignment to "Wide width" — the block should render wide in the editor
5. Change the alignment to "Full" — the block should render full-width in the editor
6. Change back to default alignment — resize handles should reappear and the block should still respect the custom width

Does this pull request change what data or activity we track or use?

No. This change only affects the visual rendering of the VideoPress block in the editor — it does not collect, log, or transmit any new data.

Testing instructions

1. Activate the VideoPress module
2. Add a Video block to a post
3. Upload/select a video and wait for the VideoPress preview to load
4. Change the alignment to "Wide width" — the block should render wide in the editor
5. Change the alignment to "Full" — the block should render full-width in the editor
6. Change back to default alignment — resize handles should reappear and the block should still respect the custom width

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

---

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jeherve]

Could you create the changelog entry again? This is incorrect.

Error: Type must be "major", "enhancement", "compat", "bugfix", or "other".

I would recommend using the built-in CLI tool to generate those entries, to avoid such issues.

Suggested change

	Type: fixed
	Type: bugfix

[obenland]

Thank you for your work on this @shsajalchowdhury!

The issue noted that the required styles already exist and that the wrapper element just breaks the selector. Rather than adding custom styles, could you see if something like this would work in a backwards compatible way? We wouldn't want to break error message displays that were fixed in #21253.

diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
index 20d83d8e96..e78aafd029 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
@@ -911,9 +911,25 @@ const VideoPressEdit = CoreVideoEdit =>
 			const displayCoreVideoBlock =
 				renderCoreVideoAndLoadingBlocks && ! isUploading && ! isFetchingVideo;
 
-			// In order for the media placeholder to keep its state for error messages, we need to keep the CoreVideoEdit component in the tree during file uploads.
-			// Keep this section separate so the CoreVideoEdit stays in the tree, once we have a video, we don't need it anymore.
-			const coreVideoFragment = (
+			/*
+			 *  local video (plain core or VideoPress fallback): render bare. A wrapper <div>
+			 * breaks wide/full alignment — the <figure> must be a direct child of the block list.
+			 */
+			const displayLocalVideo = displayCoreVideoBlock && !! src && ! isBlobURL( src );
+
+			/*
+			 * Otherwise toggle both with `videopress-block-hide` — keeping one CoreVideoEdit
+			 * instance mounted preserves the placeholder's error message across upload.
+			 */
+			const coreVideoFragment = displayLocalVideo ? (
+				<CoreVideoEdit { ...this.props } />
+			) : (
 				<Fragment>
 					<div className={ ! isUploading && ! isFetchingVideo ? 'videopress-block-hide' : '' }>
 						<Loading