Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add playsInline option in Video block #14500

Merged
merged 6 commits into from
Mar 20, 2019
Merged

Add playsInline option in Video block #14500

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fff3458
Added the 'playsinline' attribute to the block
Mar 18, 2019
6ffdbf4
Added output of the 'playsinline' attribute in the front-end
Mar 18, 2019
4b20369
Added the 'playsinline' attribute in InspectorControls
Mar 18, 2019
c855b7f
Change label 'Playsinline' to 'Plays inline'
Mar 18, 2019
7582756
Fix failing e2e test issue
Mar 18, 2019
23cf5be
Replace variable name to
Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ class VideoEdit extends Component {
poster,
preload,
src,
playsinline,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update this variable/attribute name to be written as playsInline? I think it is what React expects and it also reads easier that way.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much @gziolo ❤️ Updated here.

} = this.props.attributes;
const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
const { editing } = this.state;
Expand Down Expand Up @@ -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 }
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ export const settings = {
selector: 'video',
attribute: 'src',
},
playsinline: {
type: 'boolean',
source: 'attribute',
selector: 'video',
attribute: 'playsinline',
},
},

transforms: {
Expand Down Expand Up @@ -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 && (
Expand All @@ -156,6 +162,7 @@ export const settings = {
poster={ poster }
preload={ preload !== 'metadata' ? preload : undefined }
src={ src }
playsInline={ playsinline }
/>
) }
{ ! RichText.isEmpty( caption ) && (
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/fixtures/blocks/core__video.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"controls": true,
"loop": false,
"muted": false,
"playsinline": false,
"preload": "metadata",
"src": "https://awesome-fake.video/file.mp4"
},
Expand Down