VideoPress: add unique ID attributes to videopress elements

projects/packages/videopress/changelog/update-videopress-id-in-html

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+VideoPress: add video guid as ID in HTML

projects/packages/videopress/src/class-block-editor-content.php

@@ -121,15 +121,15 @@ public static function videopress_embed_shortcode( $atts ) {
 
 		$block_template =
 		'<figure class="wp-block-videopress-video wp-block-jetpack-videopress jetpack-videopress-player">' .
-			'<div class="jetpack-videopress-player__wrapper">' .
+			'<div class="jetpack-videopress-player__wrapper" id="%1$s">' .
 				'<iframe ' .
 					'title="' . __( 'VideoPress Video Player', 'jetpack-videopress-pkg' ) . '" ' .
 					'aria-label="' . __( 'VideoPress Video Player', 'jetpack-videopress-pkg' ) . '" ' .
-					'src="%s" ' .
-					'width="%s"' .
-					'height="%s" ' .
+					'src="%2$s" ' .
+					'width="%3$s"' .
+					'height="%4$s" ' .
 					'frameborder="0" ' .
-					'allowfullscreen%s allow="clipboard-write">' .
+					'allowfullscreen%5$s allow="clipboard-write">' .
 				'</iframe>' .
 			'</div>' .
 		'</figure>';
@@ -138,7 +138,7 @@ public static function videopress_embed_shortcode( $atts ) {
 		Jwt_Token_Bridge::enqueue_jwt_token_bridge();
 		wp_enqueue_script( 'videopress-iframe', 'https://videopress.com/videopress-iframe.js', array(), $version, true );
 
-		return sprintf( $block_template, $src, $width, $height, $cover );
+		return sprintf( $block_template, esc_attr( get_videopress_html_id( $guid )[0] ), $src, $width, $height, $cover );
 	}
 
 	/**
@@ -169,7 +169,7 @@ public static function videopress_video_block_by_guid( $content, $post ) {
 				// ref /client/lib/url/index.ts
 				$content = '<!-- wp:videopress/video {"guid":"' . $guid . '"} -->
 				<figure class="wp-block-videopress-video wp-block-jetpack-videopress jetpack-videopress-player">
-					<div class="jetpack-videopress-player__wrapper">' . $url . '</div>
+					<div class="jetpack-videopress-player__wrapper" id="' . esc_attr( get_videopress_html_id( $guid )[0] ) . '">' . $url . '</div>
 				</figure>
 				<!-- /wp:videopress/video -->';
 			}

projects/packages/videopress/src/class-initializer.php

@@ -302,8 +302,9 @@ public static function render_videopress_video_block( $block_attributes, $conten
 			$videopress_url = wp_kses_post( $videopress_url );
 			$oembed_html    = apply_filters( 'video_embed_html', $wp_embed->shortcode( array(), $videopress_url ) );
 			$video_wrapper  = sprintf(
-				'<div class="%s">%s %s</div>',
+				'<div class="%1$s" id="%2$s">%3$s %4$s</div>',
 				$video_wrapper_classes,
+				esc_attr( get_videopress_html_id( $guid )[0] ),
 				$preview_on_hover,
 				$oembed_html
 			);

projects/packages/videopress/src/utility-functions.php

@@ -29,6 +29,25 @@ function videopress_is_valid_guid( $guid ) {
 	}
 	return false;
 }
+/**
+ * Get the HTML ID for a videopress videos.
+ * So that we can link to it as a permalink on the page.
+ *
+ * @param string $guid video identifier.
+ *
+ * @return array [ html_id, count ]
+ */
+function get_videopress_html_id( $guid ) {
+	static $videopress_shown_video = array();
+
+	if ( ! isset( $videopress_shown_video[ $guid ] ) ) {
+		$videopress_shown_video[ $guid ] = 1;
+	} else {
+		++$videopress_shown_video[ $guid ];
+	}
+
+	return array( "v-{$guid}-{$videopress_shown_video[ $guid ]}", $videopress_shown_video[ $guid ] );
+}
 
 /**
  * Validates user-supplied video preload setting.

projects/plugins/jetpack/changelog/update-videopress-id-in-html

@@ -0,0 +1,4 @@
+Significance: minor
+Type: compat
+
+Add video ids to the html

projects/plugins/jetpack/modules/videopress/class.videopress-player.php

@@ -56,13 +56,10 @@ class VideoPress_Player {
 	 * @param array  $options Player customizations.
 	 */
 	public function __construct( $guid, $maxwidth = 0, $options = array() ) {
-		if ( empty( self::$shown[ $guid ] ) ) {
-			self::$shown[ $guid ] = 0;
-		}
-
-		++self::$shown[ $guid ];
+		list( $html_id, $id_count ) = get_videopress_html_id( $guid );
+		self::$shown[ $guid ]       = $id_count;
 
-		$this->video_container_id = 'v-' . $guid . '-' . self::$shown[ $guid ];
+		$this->video_container_id = $html_id;
 		$this->video_id           = $this->video_container_id . '-video';
 
 		if ( is_array( $options ) ) {