From 6a7d8b72302578e93a1bf0a999a3d631a249dc6f Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 16 Jul 2018 10:56:24 -0400 Subject: [PATCH 1/2] Editor: Deprecate MediaPlaceholder onSelectUrl prop --- docs/reference/deprecated.md | 1 + editor/components/media-placeholder/index.js | 24 ++++++++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 1b5e736f61753a..83da35f01eb04a 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -13,6 +13,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo - `wp.utils.buildTermsTree` has been removed. - `wp.utils.decodeEntities` has been removed. Please use `wp.htmlEntities.decodeEntities` instead. - All references to a block's `uid` have been replaced with equivalent props and selectors for `clientId`. + - The `MediaPlaceholder` component `onSelectUrl` prop has been renamed to `onSelectURL`. ## 3.4.0 diff --git a/editor/components/media-placeholder/index.js b/editor/components/media-placeholder/index.js index bf60240199359b..69e8cd87e6968e 100644 --- a/editor/components/media-placeholder/index.js +++ b/editor/components/media-placeholder/index.js @@ -15,6 +15,7 @@ import { } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -54,7 +55,25 @@ class MediaPlaceholder extends Component { onSubmitSrc( event ) { event.preventDefault(); if ( this.state.src ) { - this.props.onSelectUrl( this.state.src ); + if ( this.props.onSelectUrl ) { + // TODO: In removing deprecation, ensure to simplify rendering + // to avoid checking for `onSelectUrl`. It also allows this + // function to be simplified to avoid truthiness test on + // `onSelectURL`, since it's required for the form invoking + // this function to be rendered at all. + deprecated( 'MediaPlaceholder `onSelectUrl` prop', { + alternative: '`onSelectURL` prop', + plugin: 'Gutenberg', + version: 'v3.5', + hint: 'The prop has been renamed.', + } ); + + this.props.onSelectUrl( this.state.src ); + } + + if ( this.props.onSelectURL ) { + this.props.onSelectURL( this.state.src ); + } } } @@ -82,6 +101,7 @@ class MediaPlaceholder extends Component { labels, onSelect, value = {}, + onSelectURL, onSelectUrl, onHTMLDrop = noop, multiple = false, @@ -101,7 +121,7 @@ class MediaPlaceholder extends Component { onFilesDrop={ this.onFilesUpload } onHTMLDrop={ onHTMLDrop } /> - { onSelectUrl && ( + { ( onSelectUrl || onSelectURL ) && (
Date: Mon, 16 Jul 2018 10:56:46 -0400 Subject: [PATCH 2/2] Blocks: Update MediaPlaceholder usage to avoid deprecated onSelectUrl --- core-blocks/audio/edit.js | 24 +++++++++++++++--------- core-blocks/video/edit.js | 23 +++++++++++++++-------- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js index e418a878a16bb5..8dd4f409d40b29 100644 --- 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 ( { - // 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 }