VideoPress: Video block with "Wide width" not styled as wide in the editor

[westonruter]

Impacted plugin

Jetpack

Quick summary

When I add a Video block to the block editor and select the "Wide width" as the alignment, the block is not displayed as wide in the editor:

Jetpack Disabled ✅	Jetpack Enabled ❌

This is testing with the Twenty Twenty-Five block theme.

The version without Jetpack includes the following CSS in the editor as expected:

.block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 1340px;
}

But this is absent in the editor when Jetpack is active.

When I compare the DOM trees in DevTools, I see some differences for the contents of the div.is-root-container element:

--- /tmp/sans-jetpack.prettier.html	2025-06-05 17:40:10
+++ /tmp/with-jetpack.prettier.html	2025-06-05 17:40:10
@@ -17,24 +17,53 @@
   >
     A Video block with wide alignment
   </p>
-  <figure
-    tabindex="0"
-    draggable="true"
-    class="block-editor-block-list__block wp-block is-selected alignwide wp-block-video"
-    id="block-{UUID}"
-    role="document"
-    aria-label="Block: Video"
-    data-block="{UUID}"
-    data-type="core/video"
-    data-title="Video"
-  >
-    <div>
-      <video
-        controls=""
-        src="https://westonruter.lndo.site/wp-content/uploads/2025/06/Bison_Nuzzles_Man_Video_Ready.mp4"
-      ></video>
+  <div class="videopress-block-hide">
+    <div class="wp-block-embed is-loading">
+      <svg
+        class="components-spinner e---b-dadba-1yxc2ud ea4tfvq2"
+        viewBox="0 0 100 100"
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        role="presentation"
+        focusable="false"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="50"
+          vector-effect="non-scaling-stroke"
+          class="e---b-dadba-5zbsse ea4tfvq1"
+        ></circle>
+        <path
+          d="m 50 0 a 50 50 0 0 1 50 50"
+          vector-effect="non-scaling-stroke"
+          class="e---b-dadba-1r60s1s ea4tfvq0"
+        ></path>
+      </svg>
+      <p>Generating preview…</p>
     </div>
-  </figure>
+  </div>
+  <div class="">
+    <figure
+      tabindex="0"
+      draggable="true"
+      class="block-editor-block-list__block wp-block is-selected alignwide wp-block-video"
+      id="block-{UUID}"
+      role="document"
+      aria-label="Block: Video"
+      data-block="{UUID}"
+      data-type="core/video"
+      data-title="Video"
+    >
+      <div>
+        <video
+          controls=""
+          src="https://westonruter.lndo.site/wp-content/uploads/2025/06/Bison_Nuzzles_Man_Video_Ready.mp4"
+        ></video>
+      </div>
+    </figure>
+  </div>
   <p
     role="document"
     aria-multiline="true"

1. There is a div.videopress-block-hide element showing up, even though I do not have VideoPress active on my blog. This seems like it should not be present in the editor. (Aside: This "Generating Preview" is slowing down the rendering of the video blocks in the page needlessly when I'm not using VideoPress.)
2. There is a div with an empty class attribute which is wrapping the figure for the Video block. This is breaking the CSS selector to apply the wide style in the editor.

The issue appears to be rooted in the the following videopress/edit.js code:

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

Lines 918 to 939 in 0eb34d9

	// 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 = (
	<Fragment>
	<div className={ ! isUploading && ! isFetchingVideo ? 'videopress-block-hide' : '' }>
	<Loading
	text={
	isUploading
	? __( 'Uploading…', 'jetpack' )
	: __(
	'Generating preview…',
	'jetpack',
	/* dummy arg to avoid bad minification */ 0
	)
	}
	/>
	</div>
	<div className={ ! displayCoreVideoBlock ? 'videopress-block-hide' : '' }>
	<CoreVideoEdit { ...this.props } />
	</div>
	</Fragment>
	);

The wrapping of CoreVideoEdit seems to be the problem.

The VideoPress logic should be omitted when VideoPress is not active, and when it is active, it should not break the CSS selector for the wide width.

Steps to reproduce

I wasn't able to reproduce this on a local environment which is in Offline Mode, but I was able to reproduce in a production environment simply by adding a Video block and setting the alignment to wide width.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No revenue impact

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

Self-hosted