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 {
/>
+
+
+
+
+
+
+
+
{ ( ( caption && caption.length ) || !! isSelected ) && (
diff --git a/core-blocks/video/index.js b/core-blocks/video/index.js
index ca1e29c8c7db53..9ae93b10a082f6 100644
--- a/core-blocks/video/index.js
+++ b/core-blocks/video/index.js
@@ -26,20 +26,45 @@ export const settings = {
category: 'common',
attributes: {
+ autoplay: {
+ type: 'boolean',
+ source: 'attribute',
+ selector: 'video',
+ attribute: 'autoplay',
+ },
+ caption: {
+ type: 'array',
+ source: 'children',
+ selector: 'figcaption',
+ },
+ controls: {
+ type: 'boolean',
+ source: 'attribute',
+ selector: 'video',
+ attribute: 'controls',
+ default: true,
+ },
id: {
type: 'number',
},
+ loop: {
+ type: 'boolean',
+ source: 'attribute',
+ selector: 'video',
+ attribute: 'loop',
+ },
+ muted: {
+ type: 'boolean',
+ source: 'attribute',
+ selector: 'video',
+ attribute: 'muted',
+ },
src: {
type: 'string',
source: 'attribute',
selector: 'video',
attribute: 'src',
},
- caption: {
- type: 'array',
- source: 'children',
- selector: 'figcaption',
- },
},
supports: {
@@ -49,12 +74,21 @@ export const settings = {
edit,
save( { attributes } ) {
- const { src, caption } = attributes;
+ const { autoplay, caption, controls, loop, muted, src } = attributes;
return (
-
- { src && }
- { caption && caption.length > 0 && }
+ { src && (
+
+ ) }
+ { caption && caption.length > 0 && (
+
+ ) }
);
},