Video Block: add raw transformation from video html

WordPress · Dec 30, 2023 · 32d3081 · 32d3081
1 parent 63a6321
commit 32d3081
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js
@@ -63,6 +63,38 @@ const transforms = {
 				},
 			},
 		},
+		{
+			type: 'raw',
+			isMatch: ( node ) =>
+				node.nodeName === 'P' &&
+				node.children.length === 1 &&
+				node.firstChild.nodeName === 'VIDEO',
+			transform: ( node ) => {
+				const videoElement = node.firstChild;
+				const attributes = {
+					autoplay: videoElement.hasAttribute( 'autoplay' )
+						? true
+						: undefined,
+					controls: videoElement.hasAttribute( 'controls' )
+						? undefined
+						: false,
+					loop: videoElement.hasAttribute( 'loop' )
+						? true
+						: undefined,
+					muted: videoElement.hasAttribute( 'muted' )
+						? true
+						: undefined,
+					preload:
+						videoElement.getAttribute( 'preload' ) || undefined,
+					playsInline: videoElement.hasAttribute( 'playsinline' )
+						? true
+						: undefined,
+					poster: videoElement.getAttribute( 'poster' ) || undefined,
+					src: videoElement.getAttribute( 'src' ) || undefined,
+				};
+				return createBlock( 'core/video', attributes );
+			},
+		},
 	],
 };
 

diff --git a/packages/blocks/src/api/raw-handling/test/paste-handler.js b/packages/blocks/src/api/raw-handling/test/paste-handler.js
@@ -6,6 +6,7 @@ import { pasteHandler } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { init as initAndRegisterTableBlock } from '../../../../../block-library/src/table';
+import { init as initAndRegisterVideoBlock } from '../../../../../block-library/src/video';
 
 const tableWithHeaderFooterAndBodyUsingColspan = `
 <table>
@@ -63,6 +64,7 @@ const tableWithHeaderFooterAndBodyUsingRowspan = `
 describe( 'pasteHandler', () => {
 	beforeAll( () => {
 		initAndRegisterTableBlock();
+		initAndRegisterVideoBlock();
 	} );
 
 	it( 'can handle a table with thead, tbody and tfoot using colspan', () => {
@@ -153,4 +155,29 @@ describe( 'pasteHandler', () => {
 		expect( result.name ).toEqual( 'core/table' );
 		expect( result.isValid ).toBeTruthy();
 	} );
+
+	it( 'can handle a video', () => {
+		const [ result ] = pasteHandler( {
+			HTML: '<video controls src="https://example.com/media.mp4" autoplay loop muted controls playsinline preload="auto" poster="https://example.com/media.jpg"></video>',
+			tagName: 'p',
+			preserveWhiteSpace: false,
+		} );
+
+		expect( console ).toHaveLogged();
+
+		delete result.attributes.caption;
+		expect( result.attributes ).toEqual( {
+			autoplay: true,
+			loop: true,
+			muted: true,
+			controls: true,
+			playsInline: true,
+			preload: 'auto',
+			poster: 'https://example.com/media.jpg',
+			src: 'https://example.com/media.mp4',
+			tracks: [],
+		} );
+		expect( result.name ).toEqual( 'core/video' );
+		expect( result.isValid ).toBeTruthy();
+	} );
 } );
diff --git a/packages/dom/src/phrasing-content.js b/packages/dom/src/phrasing-content.js
@@ -114,6 +114,7 @@ const embeddedContentSchema = {
 			'src',
 			'poster',
 			'preload',
+			'playsinline',
 			'autoplay',
 			'mediagroup',
 			'loop',