Blocks: Update MediaPlaceholder usage to avoid deprecated onSelectUrl

WordPress · Jul 17, 2018 · c078d55 · c078d55
1 parent 6a7d8b7
commit c078d55
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
@@ -33,6 +33,7 @@ class AudioEdit extends Component {
 		};
 
 		this.toggleAttribute = this.toggleAttribute.bind( this );
+		this.onSelectURL = this.onSelectURL.bind( this );
 	}
 
 	toggleAttribute( attribute ) {
@@ -41,6 +42,19 @@ class AudioEdit extends Component {
 		};
 	}
 
+	onSelectURL( newSrc ) {
+		const { attributes, setAttributes } = this.props;
+		const { src } = attributes;
+
+		// Set the block's src from the edit component's state, and switch off
+		// the editing UI.
+		if ( newSrc !== src ) {
+			setAttributes( { src: newSrc, id: undefined } );
+		}
+
+		this.setState( { editing: false } );
+	}
+
 	render() {
 		const { autoplay, caption, loop, preload, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
@@ -61,14 +75,6 @@ class AudioEdit extends Component {
 			setAttributes( { src: media.url, id: media.id } );
 			this.setState( { src: media.url, editing: false } );
 		};
-		const onSelectUrl = ( newSrc ) => {
-			// set the block's src from the edit component's state, and switch off the editing UI
-			if ( newSrc !== src ) {
-				setAttributes( { src: newSrc, id: undefined } );
-			}
-			this.setState( { editing: false } );
-		};
-
 		if ( editing ) {
 			return (
 				<MediaPlaceholder
@@ -79,7 +85,7 @@ class AudioEdit extends Component {
 					} }
 					className={ className }
 					onSelect={ onSelectAudio }
-					onSelectUrl={ onSelectUrl }
+					onSelectURL={ this.onSelectURL }
 					accept="audio/*"
 					type="audio"
 					value={ this.props.attributes }

diff --git a/core-blocks/video/edit.js b/core-blocks/video/edit.js
@@ -32,6 +32,7 @@ class VideoEdit extends Component {
 		};
 
 		this.toggleAttribute = this.toggleAttribute.bind( this );
+		this.onSelectURL = this.onSelectURL.bind( this );
 	}
 
 	toggleAttribute( attribute ) {
@@ -40,6 +41,19 @@ class VideoEdit extends Component {
 		};
 	}
 
+	onSelectURL( newSrc ) {
+		const { attributes, setAttributes } = this.props;
+		const { src } = attributes;
+
+		// Set the block's src from the edit component's state, and switch off
+		// the editing UI.
+		if ( newSrc !== src ) {
+			setAttributes( { src: newSrc, id: undefined } );
+		}
+
+		this.setState( { editing: false } );
+	}
+
 	render() {
 		const { autoplay, caption, controls, loop, muted, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
@@ -60,13 +74,6 @@ class VideoEdit extends Component {
 			setAttributes( { src: media.url, id: media.id } );
 			this.setState( { src: media.url, editing: false } );
 		};
-		const onSelectUrl = ( newSrc ) => {
-			// set the block's src from the edit component's state, and switch off the editing UI
-			if ( newSrc !== src ) {
-				setAttributes( { src: newSrc, id: undefined } );
-			}
-			this.setState( { editing: false } );
-		};
 
 		if ( editing ) {
 			return (
@@ -78,7 +85,7 @@ class VideoEdit extends Component {
 					} }
 					className={ className }
 					onSelect={ onSelectVideo }
-					onSelectUrl={ onSelectUrl }
+					onSelectURL={ this.onSelectURL }
 					accept="video/*"
 					type="video"
 					value={ this.props.attributes }