VideoPress: do not prompt to convert embed block to VideoPress video block

projects/packages/videopress/changelog/update-videopress-remove-prompt-to-convert-embed-block

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress: do not prompt to convert embed block to VideoPress video block

projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx

@@ -114,6 +114,13 @@ export default function VideoPressEdit( {
 		isExample,
 	} = attributes;
 
+	/*
+	 * Force className cleanup.
+	 * It adds ` wp-embed-aspect-21-9 wp-has-aspect-ratio` classes
+	 * when transforming from embed block.
+	 */
+	delete attributes.className;
+
 	const videoPressUrl = getVideoPressUrl( guid, {
 		autoplay,
 		controls,

projects/packages/videopress/src/client/block-editor/blocks/video/index.ts

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { registerBlockType, createBlock } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { getVideoPressUrl, pickGUIDFromUrl } from '../../../lib/url';
 import metadata from './block.json';
 import { VideoPressIcon as icon } from './components/icons';
 import Edit from './edit';
 import save from './save';
+import transforms from './transforms';
 import videoPressBlockExampleImage from './videopress-block-example-image.jpg';
 import './style.scss';
 
@@ -25,46 +25,5 @@ registerBlockType( name, {
 			isExample: true,
 		},
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/embed' ],
-				isMatch: attrs => attrs.providerNameSlug === 'videopress' && pickGUIDFromUrl( attrs?.url ),
-				transform: attrs => {
-					const { url, providerNameSlug } = attrs;
-					const guid = pickGUIDFromUrl( url );
-					const isCoreEmbedVideoPressVariation = providerNameSlug === 'videopress' && !! guid;
-
-					/*
-					 * Do not add transform when the block
-					 * is not a core/embed VideoPress block variation
-					 */
-					if ( ! isCoreEmbedVideoPressVariation ) {
-						return createBlock( 'core/embed', attrs );
-					}
-
-					return createBlock( 'videopress/video', { ...attrs, guid, src: url } );
-				},
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/embed' ],
-				isMatch: attrs => attrs?.src || getVideoPressUrl( attrs?.guid, attrs ),
-				transform: attrs => {
-					const { guid, src } = attrs;
-
-					// Build the source (URL) in case it isn't defined.
-					const url = src || getVideoPressUrl( guid, attrs );
-					if ( ! url ) {
-						return createBlock( 'core/embed' );
-					}
-
-					return createBlock( 'core/embed', { ...attrs, url } );
-				},
-			},
-		],
-	},
+	transforms,
 } );

projects/packages/videopress/src/client/block-editor/blocks/video/transforms/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { buildVideoPressURL, pickGUIDFromUrl } from '../../../../lib/url';
+
+const transfromFromCoreEmbed = {
+	type: 'block',
+	blocks: [ 'core/embed' ],
+	isMatch: attrs => attrs.providerNameSlug === 'videopress' && pickGUIDFromUrl( attrs?.url ),
+	transform: attrs => {
+		const { url: src, providerNameSlug } = attrs;
+		const guid = pickGUIDFromUrl( src );
+
+		/*
+		 * Do transform when the block
+		 * is not a core/embed VideoPress block variation
+		 */
+		const isCoreEmbedVideoPressVariation = providerNameSlug === 'videopress' && !! guid;
+		if ( ! isCoreEmbedVideoPressVariation ) {
+			return createBlock( 'core/embed', attrs );
+		}
+
+		return createBlock( 'videopress/video', { guid, src } );
+	},
+};
+
+const transfromToCoreEmbed = {
+	type: 'block',
+	blocks: [ 'core/embed' ],
+	isMatch: attrs => attrs?.src || attrs?.guid,
+	transform: attrs => {
+		const { guid, src: srcFromAttr } = attrs;
+
+		// Build the source (URL) in case it isn't defined.
+		const { url } = buildVideoPressURL( guid );
+
+		const src = srcFromAttr || url;
+		if ( ! src ) {
+			return createBlock( 'core/embed' );
+		}
+
+		return createBlock( 'core/embed', {
+			allowResponsive: true,
+			providerNameSlug: 'videopress',
+			responsive: true,
+			type: 'video',
+			url,
+		} );
+	},
+};
+
+const from = [ transfromFromCoreEmbed ];
+const to = [ transfromToCoreEmbed ];
+
+export default { from, to };

projects/packages/videopress/src/client/block-editor/extend/index.js

@@ -1,5 +1,5 @@
 /**
  * Internal dependencies
  */
-import './core-embed';
+// import './core-embed'; Let's keep here in case we'd like to extend the core/embed block in the future.
 import './core-video';