diff --git a/core-blocks/test/fixtures/core__video.html b/core-blocks/test/fixtures/core__video.html index e07f78b6c31695..dd720ecda8bf53 100644 --- a/core-blocks/test/fixtures/core__video.html +++ b/core-blocks/test/fixtures/core__video.html @@ -1,3 +1,3 @@ -
+
diff --git a/core-blocks/test/fixtures/core__video.json b/core-blocks/test/fixtures/core__video.json index 6905f4d7b9ccba..8fff277cee4afe 100644 --- a/core-blocks/test/fixtures/core__video.json +++ b/core-blocks/test/fixtures/core__video.json @@ -4,10 +4,14 @@ "name": "core/video", "isValid": true, "attributes": { - "src": "https://awesome-fake.video/file.mp4", - "caption": [] + "autoplay": false, + "caption": [], + "controls": true, + "loop": false, + "muted": false, + "src": "https://awesome-fake.video/file.mp4" }, "innerBlocks": [], - "originalContent": "
" + "originalContent": "
" } ] diff --git a/core-blocks/test/fixtures/core__video.parsed.json b/core-blocks/test/fixtures/core__video.parsed.json index aafb978d862ed1..5d445ce5c0ab36 100644 --- a/core-blocks/test/fixtures/core__video.parsed.json +++ b/core-blocks/test/fixtures/core__video.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/video", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
\n" + "innerHTML": "\n
\n" }, { "attrs": {}, diff --git a/core-blocks/video/edit.js b/core-blocks/video/edit.js index 729c3b0813f277..b8d9c848e0f274 100644 --- a/core-blocks/video/edit.js +++ b/core-blocks/video/edit.js @@ -2,12 +2,19 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { IconButton, Toolbar, withNotices } from '@wordpress/components'; +import { + IconButton, + PanelBody, + Toolbar, + ToggleControl, + withNotices, +} from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { + BlockControls, + InspectorControls, MediaPlaceholder, RichText, - BlockControls, } from '@wordpress/editor'; /** @@ -23,10 +30,18 @@ class VideoEdit extends Component { this.state = { editing: ! this.props.attributes.src, }; + + this.toggleAttribute = this.toggleAttribute.bind( this ); + } + + toggleAttribute( attribute ) { + return ( newValue ) => { + this.props.setAttributes( { [ attribute ]: newValue } ); + }; } render() { - const { caption, src } = this.props.attributes; + const { autoplay, caption, controls, loop, muted, src } = this.props.attributes; const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props; const { editing } = this.state; const switchToEditing = () => { @@ -86,6 +101,30 @@ class VideoEdit extends Component { /> + + + + + + + +