Video Block: Disable autoplay when video is not muted (#69232)

Co-authored-by: Rishit30G <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: hanneslsm <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: carolinan <[email protected]>

Author: 7 people

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

@@ -22,6 +22,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 	const autoPlayHelpText = __(
 		'Autoplay may cause usability issues for some users.'
 	);
+
 	const getAutoplayHelp = Platform.select( {
 		web: useCallback( ( checked ) => {
 			return checked ? autoPlayHelpText : null;
@@ -32,7 +33,11 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 	const toggleFactory = useMemo( () => {
 		const toggleAttribute = ( attribute ) => {
 			return ( newValue ) => {
-				setAttributes( { [ attribute ]: newValue } );
+				setAttributes( {
+					[ attribute ]: newValue,
+					// Set muted when autoplay changes
+					...( attribute === 'autoplay' && { muted: newValue } ),
+				} );
 			};
 		};
 
@@ -56,7 +61,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				isShownByDefault
 				hasValue={ () => !! autoplay }
 				onDeselect={ () => {
-					setAttributes( { autoplay: false } );
+					setAttributes( { autoplay: false, muted: false } );
 				} }
 			>
 				<ToggleControl
@@ -95,6 +100,10 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 					label={ __( 'Muted' ) }
 					onChange={ toggleFactory.muted }
 					checked={ !! muted }
+					disabled={ autoplay }
+					help={
+						autoplay ? __( 'Muted because of Autoplay.' ) : null
+					}
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem