Switched back to component extension

This is for maximum backwards compatibility as React Hook implementation is only supported in WP 5.2 and above.

src/blocks/activity/edit.js

@@ -1,6 +1,8 @@
 /* global wp, wpStrava */
 import EmbedPlaceholder from './embed-placeholder';
-import { isEmpty } from 'lodash';
+import EmbedControls from './embed-controls';
+
+const { Component } = wp.element;
 
 /**
  * Localized Data.
@@ -9,49 +11,61 @@ const {
 	placeholderActivityImg,
 } = wpStrava;
 
-const Edit = (props) => {
-	const {
-		setAttributes,
-		cannotEmbed,
-		tryAgain,
-		attributes: {
-			url
-		}
-	 } = props;
+class Edit extends Component {
 
+	constructor() {
+		super( ...arguments );
+		this.setUrl = this.setUrl.bind( this );
+		this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
 
-	const submitUrl = (event) => {
+		this.state = {
+			editingURL: true,
+			url: this.props.attributes.url,
+		};
+	}
+
+	setUrl( event ) {
 		if ( event ) {
 			event.preventDefault();
 		}
-		console.log( 'onsubmit', event );
-		setAttributes( { url: event.target.value } )
-	};
+		const { url } = this.state;
+		const { setAttributes } = this.props;
+		this.setState( { editingURL: false } );
+		setAttributes( { url } );
+	}
 
-	const changeUrl = ( event ) => {
-		console.log( 'onchange', event );
-		console.log( 'Props', props );
-		setAttributes( { url: event.target.value } );
-	};
+	switchBackToURLInput() {
+		this.setState( { editingURL: true } );
+	}
+
+	render() {
+		const { url, editingURL } = this.state;
+
+		// Newly inserted block or we've clicked the edit button.
+		if ( editingURL ) {
+			return (
+				<EmbedPlaceholder
+					icon="chart-line"
+					label="BBQ LOL Label"
+					onSubmit={ this.setUrl }
+					value={ url }
+					onChange={ ( event ) =>
+						this.setState( { url: event.target.value } )
+					}
+				/>
+			);
+		}
 
-	if ( isEmpty( url ) ) {
 		return (
-			<EmbedPlaceholder
-				icon="chart-line"
-				label="BBQ LOL Label"
-				value={ url }
-				cannotEmbed={ cannotEmbed }
-				onChange={ changeUrl }
-				fallback={ () => fallback( url, props.onReplace ) }
-				tryAgain={ tryAgain }
-				onSubmit={ submitUrl }
-			/>
+			<>
+				<EmbedControls
+					switchBackToURLInput={ this.switchBackToURLInput }
+				/>
+				<img className="wp-strava-img" src={placeholderActivityImg} />
+			</>
 		);
 	}
 
-	return (
-		<img className="wp-strava-img" src={placeholderActivityImg} />
-	);
 };
 
 export default Edit;

src/blocks/activity/embed-controls.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+const {
+	Icon,
+	Button,
+	Toolbar,
+} = wp.components;
+const { BlockControls } = wp.blockEditor;
+
+const EmbedControls = ( props ) => {
+	const {
+		switchBackToURLInput,
+	} = props;
+
+	return (
+		<>
+			<BlockControls>
+				<Toolbar>
+					<Button
+						label={ __( 'Edit URL' ) }
+						onClick={ switchBackToURLInput }
+					>
+						<Icon icon="edit" />
+					</Button>
+				</Toolbar>
+			</BlockControls>
+		</>
+	);
+};
+
+export default EmbedControls;

src/blocks/activity/embed-placeholder.js

@@ -12,9 +12,6 @@ const EmbedPlaceholder = ( props ) => {
 		value,
 		onSubmit,
 		onChange,
-		cannotEmbed,
-		fallback,
-		tryAgain,
 	} = props;
 
 	return (
@@ -48,19 +45,6 @@ const EmbedPlaceholder = ( props ) => {
 					{ __( 'Learn more about embeds' ) }
 				</ExternalLink>
 			</div>
-			{ cannotEmbed && (
-				<div className="components-placeholder__error">
-					<div className="components-placeholder__instructions">
-						{ __( 'Sorry, this content could not be embedded.' ) }
-					</div>
-					<Button isSecondary onClick={ tryAgain }>
-						{ _x( 'Try again', 'button label' ) }
-					</Button>{ ' ' }
-					<Button isSecondary onClick={ fallback }>
-						{ _x( 'Convert to link', 'button label' ) }
-					</Button>
-				</div>
-			) }
 		</Placeholder>
 	);
 };

src/blocks/activity/index.js

@@ -1,5 +1,6 @@
 /* global wp, wpStrava */
 const { registerBlockType } = wp.blocks;
+
 import edit from './edit';
 
 /**