Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' #7322

danielbachhuber · 2018-06-15T16:24:20Z

Description

Introduces support for 'Autoplay' and 'Loop' to the Audio Block:

Notably, autoplay and loop are only applied on the frontend, not within Gutenberg.

See https://wordpress.slack.com/archives/C02QB2JS7/p1529950740000305 for discussion of boolean attribute handling.

See #6581

How has this been tested?

Upload a MP3 file to the Media Library.
Create a new Audio Block from the MP3 file.
Check the "Autoplay" checkbox, flip to HTML mode, and observe the inclusion of the autoplay attribute.
Manually edit <audio> HTML to include a loop attribute.
Flip back to Visual mode and observe the checked state of the Loop checkbox.
Publish the post and view its frontend state to observe the application of the autoplay and loop attributes.

Screenshots

New UI:

GIF of the testing instructions:

Classic Editor:

Types of changes

Enhancement to existing feature.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

danielbachhuber · 2018-06-15T18:33:46Z

The bug I've run into:

Specifically, if I add loop as an attribute to <audio> in HTML mode, I still get the "Modified Externally" error.

I think this might be an issue with https://github.com/aduth/hpq

danielbachhuber · 2018-06-15T18:43:47Z

I think this might be an issue with https://github.com/aduth/hpq

Yep aduth/hpq#3

danielbachhuber · 2018-06-25T20:14:50Z

Thanks to @aduth's help, I sorted out the issue with parsing attributes.

Updated description to include testing instructions. Note: this only includes autoplay and loop, not preload. I'll handle that in a follow-on PR.

Flagging Needs Design Feedback for the inclusion of new checkboxes.

tofumatt

Approach here is good, but I have some cleanup and DRY requests.

Let me know when it's ready for another review and I'll have a look.

tofumatt · 2018-06-26T17:09:18Z

blocks/api/parser.js

@@ -98,7 +98,11 @@ export function matcherFromSource( sourceConfig ) {
 * @return {*} Attribute value.
 */
 export function parseWithAttributeSchema( innerHTML, attributeSchema ) {
-	return hpqParse( innerHTML, matcherFromSource( attributeSchema ) );
+	const attrValue = hpqParse( innerHTML, matcherFromSource( attributeSchema ) );


Can this be attributeValue instead? Abbr r sad 😉

Fixed in 7469f3efad200d2b835500d3f1e10b3a748bbafd

tofumatt · 2018-06-26T17:10:54Z

blocks/api/parser.js

@@ -98,7 +98,11 @@ export function matcherFromSource( sourceConfig ) {
 * @return {*} Attribute value.
 */
 export function parseWithAttributeSchema( innerHTML, attributeSchema ) {
-	return hpqParse( innerHTML, matcherFromSource( attributeSchema ) );
+	const attrValue = hpqParse( innerHTML, matcherFromSource( attributeSchema ) );
+	if ( 'attribute' === attributeSchema.source && 'boolean' === attributeSchema.type ) {


I know this is the WordPress style but I see both variable first and constant first in Gutenberg. While my preference is variable first, I just wish we were consistent.

That's not specific to this commit though really. I was just working on a file earlier that had the same issue 😆. We just need some better rules is all.

Also, I get why this is, but because the function's docstring says we return a value here and this is the only behaviour where we don't rely on hpqParse, can we document what's happening here?

// HTML boolean attributes set to `true` won't have a value set, so return true // if their value is `''`.

🤷‍♂️

It will just make the next person reading this not have to wonder, for a few seconds as I did, what this does 😄

Added a note in db1103158cba6b4fb6f6f8800a48b78ab9ae968b

tofumatt · 2018-06-26T18:10:11Z

blocks/api/test/parser.js

@@ -105,6 +105,45 @@ describe( 'block parser', () => {
 			);
 			expect( value ).toBe( 'chicken' );
 		} );
+
+		it( 'should return the matcher\'s string attribute value', () => {


Seeing this has motivated me to work on #7366 after reviewing this 😆

tofumatt · 2018-06-26T18:13:46Z

core-blocks/audio/edit.js

@@ -53,6 +60,14 @@ class AudioEdit extends Component {
 			this.setState( { editing: false } );
 		};

+		const onToggleAutoplay = ( newVal ) => {


Can we use newValue here instead of newVal?

Handled in 275ef72d3b349410d62d4c4880330cb977607932

tofumatt · 2018-06-26T18:13:50Z

core-blocks/audio/edit.js

+			setAttributes( { autoplay: newVal } );
+		};
+
+		const onToggleLoop = ( newVal ) => {


Can we use newValue here instead of newVal?

Handled in 275ef72d3b349410d62d4c4880330cb977607932

tofumatt · 2018-06-26T18:15:40Z

core-blocks/audio/edit.js

+			setAttributes( { autoplay: newVal } );
+		};
+
+		const onToggleLoop = ( newVal ) => {


Seems like it'd be nicer to have:

toggleAttribute = ( attribute ) => ( newValue ) => { setAttributes( { [ attribute ]: newValue } ); }

and then have onChange={ toggleAttribute( 'loop' ) }

And also: why is this function set as a constant inside every render() call? This should be a component method.

Refactored in 275ef72d3b349410d62d4c4880330cb977607932

tofumatt

Tested locally and looks good to me! 🚢

tofumatt · 2018-06-27T13:18:19Z

core-blocks/audio/edit.js

 				<figure className={ className }>
 					<audio controls="controls" src={ src } />
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption }
-							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							onChange={ this.toggleAttribute( 'caption' ) }


Oh, wait, it just occurs to me that this isn't a toggle. I hastily read through this part of the diff.

I don't think this should be using the method toggleAttribute because it makes it read like this is a binary setting control (eg a checkbox or toggle) when it's actually setting the value of a text field.

If you want to keep it a single function I'd choose a more representative function name like setAttributeWithComponentValue but that's pretty verbose.

I'd just make a new function that explicitly sets the caption here… I think it's good to move away from the inline function, but I don't think it's good to use this name for this event handler.

karmatosed

As with gallery and other blocks we use switches over checkboxes, can you change those here too please?

tofumatt · 2018-06-27T17:20:16Z

Feel free to flag me for another review once these are moved to switches. 😄

danielbachhuber · 2018-06-27T17:31:11Z

@tofumatt @karmatosed Incorporate the toggle UI:

tofumatt

Everything else looks great but I just noticed an issue with RichText using the toggle function. I left a note about it; after that good to go.

tofumatt · 2018-06-27T17:41:51Z

core-blocks/audio/edit.js

 				<figure className={ className }>
 					<audio controls="controls" src={ src } />
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption }
-							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							onChange={ this.toggleAttribute( 'caption' ) }


Oh, wait, it just occurs to me that this isn't a toggle. I hastily read through this part of the diff.

I don't think this should be using the method toggleAttribute because it makes it read like this is a binary setting control (eg a checkbox or toggle) when it's actually setting the value of a text field.

If you want to keep it a single function I'd choose a more representative function name like setAttributeWithComponentValue but that's pretty verbose.

I'd just make a new function that explicitly sets the caption here… I think it's good to move away from the inline function, but I don't think it's good to use this name for this event handler.

danielbachhuber · 2018-06-27T17:44:23Z

@tofumatt I reverted back to an inline function d679123

tofumatt · 2018-06-27T17:53:50Z

(While in general I dislike inline functions it's more readable than before, we have plenty so removing them is a better thing to do en-masse, and it was like that when you got here, so approved!)

I've dismissed @karmatosed's review because the change was made.

Changes from checkboxes to toggles was made

mtias · 2018-07-05T11:27:47Z

Thanks for the work here!

danielbachhuber mentioned this pull request Jun 15, 2018

Attribute parsing should return true when attribute is set without value aduth/hpq#3

Closed

gziolo added [Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended [Status] In Progress Tracking issues with work in progress labels Jun 18, 2018

danielbachhuber mentioned this pull request Jun 22, 2018

Video block: missing features compared to classic editor #7501

Closed

danielbachhuber force-pushed the 6581-permit-autoplay-loop branch 2 times, most recently from 2867e25 to 6bf528f Compare June 25, 2018 19:30

danielbachhuber added this to the 3.2 milestone Jun 25, 2018

danielbachhuber changed the title ~~[WIP] Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls'~~ Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' Jun 25, 2018

danielbachhuber added Needs Design Feedback Needs general design feedback. and removed [Status] In Progress Tracking issues with work in progress labels Jun 25, 2018

danielbachhuber requested a review from a team June 25, 2018 20:13

tofumatt requested changes Jun 26, 2018

View reviewed changes

danielbachhuber requested a review from tofumatt June 27, 2018 00:01

tofumatt approved these changes Jun 27, 2018

View reviewed changes

karmatosed self-requested a review June 27, 2018 16:52

karmatosed previously requested changes Jun 27, 2018

View reviewed changes

karmatosed removed the Needs Design Feedback Needs general design feedback. label Jun 27, 2018

danielbachhuber added 6 commits June 27, 2018 10:21

Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls'

3ad7a80

Interpret empty string '' from hpq as true for boolean attribute

f9c8655

Update fixture to accommodate new attributes

683df3c

No abbreviation for variables

dbfb283

Add a comment clarifying behavior

bec018f

Refactor to use common callback handler

a7d03bc

danielbachhuber force-pushed the 6581-permit-autoplay-loop branch from 275ef72 to a7d03bc Compare June 27, 2018 17:21

Use ToggleControl over CheckboxControl per design

9cec9f3

danielbachhuber requested review from karmatosed and tofumatt June 27, 2018 17:31

tofumatt requested changes Jun 27, 2018

View reviewed changes

Revert back to inline function for now

d679123

tofumatt approved these changes Jun 27, 2018

View reviewed changes

danielbachhuber mentioned this pull request Jun 27, 2018

Intermittent e2e test failures #6956

Closed

danielbachhuber merged commit 5b90b35 into master Jun 27, 2018

danielbachhuber deleted the 6581-permit-autoplay-loop branch June 27, 2018 18:49

danielbachhuber mentioned this pull request Jun 27, 2018

Support 'preload' attribute for Audio Block #7590

Merged

4 tasks

aduth mentioned this pull request Jun 28, 2018

Parser: Fix boolean attribute explicit string value result #7610

Merged

danielbachhuber mentioned this pull request Jul 2, 2018

Add video block attributes: Autoplay, Controls, Loop, Muted #7672

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' #7322

Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' #7322

danielbachhuber commented Jun 15, 2018 •

edited

Loading

danielbachhuber commented Jun 15, 2018 •

edited

Loading

danielbachhuber commented Jun 15, 2018

danielbachhuber commented Jun 25, 2018

tofumatt left a comment

tofumatt Jun 26, 2018

danielbachhuber Jun 27, 2018

tofumatt Jun 26, 2018

tofumatt Jun 26, 2018

danielbachhuber Jun 27, 2018

tofumatt Jun 26, 2018

tofumatt Jun 26, 2018

danielbachhuber Jun 27, 2018

tofumatt Jun 26, 2018

danielbachhuber Jun 27, 2018

tofumatt Jun 26, 2018

tofumatt Jun 26, 2018

danielbachhuber Jun 27, 2018

tofumatt left a comment

tofumatt Jun 27, 2018

tofumatt Jun 27, 2018

karmatosed left a comment

tofumatt commented Jun 27, 2018

danielbachhuber commented Jun 27, 2018

tofumatt left a comment

tofumatt Jun 27, 2018

danielbachhuber commented Jun 27, 2018

tofumatt commented Jun 27, 2018

mtias commented Jul 5, 2018

Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' #7322

Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls' #7322

Conversation

danielbachhuber commented Jun 15, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

danielbachhuber commented Jun 15, 2018 • edited Loading

danielbachhuber commented Jun 15, 2018

danielbachhuber commented Jun 25, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karmatosed left a comment

Choose a reason for hiding this comment

tofumatt commented Jun 27, 2018

danielbachhuber commented Jun 27, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielbachhuber commented Jun 27, 2018

tofumatt commented Jun 27, 2018

mtias commented Jul 5, 2018

danielbachhuber commented Jun 15, 2018 •

edited

Loading

danielbachhuber commented Jun 15, 2018 •

edited

Loading