diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js index 246032422d643..6ec1f9096fa86 100644 --- 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 index 9b3dad39a0a5b..ffd98fd4dadab 100644 --- 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 = ` @@ -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: '', + 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 index 571d081c2843a..c9ed098162974 100644 --- 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',