Add playsInline option in Video block (#14500)

* Added the 'playsinline' attribute to the block

* Added output of the 'playsinline' attribute in the front-end

* Added the 'playsinline' attribute in InspectorControls

* Change label 'Playsinline' to 'Plays inline'

* Fix failing e2e test issue

* Replace variable name  to

packages/block-library/src/video/edit.js

@@ -129,6 +129,7 @@ class VideoEdit extends Component {
 			poster,
 			preload,
 			src,
+			playsInline,
 		} = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
@@ -200,6 +201,11 @@ class VideoEdit extends Component {
 							onChange={ this.toggleAttribute( 'controls' ) }
 							checked={ controls }
 						/>
+						<ToggleControl
+							label={ __( 'Play inline' ) }
+							onChange={ this.toggleAttribute( 'playsInline' ) }
+							checked={ playsInline }
+						/>
 						<SelectControl
 							label={ __( 'Preload' ) }
 							value={ preload }

packages/block-library/src/video/index.js

@@ -78,6 +78,12 @@ export const settings = {
 			selector: 'video',
 			attribute: 'src',
 		},
+		playsInline: {
+			type: 'boolean',
+			source: 'attribute',
+			selector: 'video',
+			attribute: 'playsinline',
+		},
 	},
 
 	transforms: {
@@ -144,7 +150,7 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { autoplay, caption, controls, loop, muted, poster, preload, src } = attributes;
+		const { autoplay, caption, controls, loop, muted, poster, preload, src, playsInline } = attributes;
 		return (
 			<figure>
 				{ src && (
@@ -156,6 +162,7 @@ export const settings = {
 						poster={ poster }
 						preload={ preload !== 'metadata' ? preload : undefined }
 						src={ src }
+						playsInline={ playsInline }
 					/>
 				) }
 				{ ! RichText.isEmpty( caption ) && (

packages/e2e-tests/fixtures/blocks/core__video.json

@@ -9,6 +9,7 @@
             "controls": true,
             "loop": false,
             "muted": false,
+            "playsInline": false,
             "preload": "metadata",
             "src": "https://awesome-fake.video/file.mp4"
         },