Address code review feedback

WordPress · Oct 18, 2018 · 7bfff6a · 7bfff6a
1 parent e3c6524
commit 7bfff6a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -83,7 +83,7 @@ const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
 const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
 
 class ImageEdit extends Component {
-	constructor() {
+	constructor( { attributes } ) {
 		super( ...arguments );
 		this.updateAlt = this.updateAlt.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
@@ -101,7 +101,7 @@ class ImageEdit extends Component {
 
 		this.state = {
 			captionFocused: false,
-			isEditing: ! this.props.attributes.url,
+			isEditing: ! attributes.url,
 		};
 	}
 
@@ -461,7 +461,7 @@ class ImageEdit extends Component {
 							// Disable reason: Image itself is not meant to be
 							// interactive, but should direct focus to block
 							// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-							const img = ( <img src={ url } alt={ alt } onClick={ this.onImageClick } /> );
+							const img = <img src={ url } alt={ alt } onClick={ this.onImageClick } />;
 
 							if ( ! isResizable || ! imageWidthWithinContainer ) {
 								return (

diff --git a/packages/editor/src/components/media-placeholder/index.js b/packages/editor/src/components/media-placeholder/index.js
@@ -25,6 +25,30 @@ import MediaUpload from '../media-upload';
 import URLPopover from '../url-popover';
 import { mediaUpload } from '../../utils/';
 
+const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
+	<URLPopover onClose={ onClose }>
+		<form
+			className="editor-media-placeholder__url-input-form"
+			onSubmit={ onSubmit }
+		>
+			<input
+				className="editor-media-placeholder__url-input-field"
+				type="url"
+				aria-label={ __( 'URL' ) }
+				placeholder={ __( 'Paste or type URL' ) }
+				onChange={ onChange }
+				value={ src }
+			/>
+			<IconButton
+				className="editor-media-placeholder__url-input-submit-button"
+				icon="editor-break"
+				label={ __( 'Apply' ) }
+				type="submit"
+			/>
+		</form>
+	</URLPopover>
+);
+
 class MediaPlaceholder extends Component {
 	constructor() {
 		super( ...arguments );
@@ -129,10 +153,9 @@ class MediaPlaceholder extends Component {
 
 		const {
 			isURLInputVisible,
+			src,
 		} = this.state;
 
-		const toggleURLInput = ! isURLInputVisible ? this.openURLInput : undefined;
-
 		const allowedTypes = this.getAllowedTypes();
 
 		return (
@@ -174,38 +197,22 @@ class MediaPlaceholder extends Component {
 					) }
 				/>
 				{ onSelectURL && (
-					<div
-						className="editor-media-placeholder__url-input-container"
-					>
+					<div className="editor-media-placeholder__url-input-container">
 						<Button
 							className="editor-media-placeholder__button"
-							onClick={ toggleURLInput }
+							onClick={ this.openURLInput }
 							isToggled={ isURLInputVisible }
-							isLarge>
+							isLarge
+						>
 							{ __( 'Insert from URL' ) }
 						</Button>
 						{ isURLInputVisible && (
-							<URLPopover onClose={ this.closeURLInput }>
-								<form
-									className="editor-media-placeholder__url-input-form"
-									onSubmit={ this.onSubmitSrc }
-								>
-									<input
-										className="editor-media-placeholder__url-input-field"
-										type="url"
-										aria-label={ __( 'URL' ) }
-										placeholder={ __( 'Paste or type URL' ) }
-										onChange={ this.onChangeSrc }
-										value={ this.state.src }
-									/>
-									<IconButton
-										className="editor-media-placeholder__url-input-submit-button"
-										icon="editor-break"
-										label={ __( 'Apply' ) }
-										type="submit"
-									/>
-								</form>
-							</URLPopover>
+							<InsertFromURLPopover
+								src={ src }
+								onChange={ this.onChangeSrc }
+								onSubmit={ this.onSubmitSrc }
+								onClose={ this.closeURLInput }
+							/>
 						) }
 					</div>
 				) }

diff --git a/packages/editor/src/components/url-popover/index.js b/packages/editor/src/components/url-popover/index.js
@@ -30,7 +30,7 @@ class URLPopover extends Component {
 			children,
 			renderSettings,
 			onClose,
-			onClickOutside = onClose,
+			onClickOutside,
 			position = 'bottom center',
 			focusOnMount = 'firstElement',
 		} = this.props;