Refine Edit

src/blocks/activity/edit.js

@@ -0,0 +1,57 @@
+/* global wp, wpStrava */
+import EmbedPlaceholder from './embed-placeholder';
+import { isEmpty } from 'lodash';
+
+/**
+ * Localized Data.
+ */
+const {
+	placeholderActivityImg,
+} = wpStrava;
+
+const Edit = (props) => {
+	const {
+		setAttributes,
+		cannotEmbed,
+		tryAgain,
+		attributes: {
+			url
+		}
+	 } = props;
+
+
+	const submitUrl = (event) => {
+		if ( event ) {
+			event.preventDefault();
+		}
+		console.log( 'onsubmit', event );
+		setAttributes( { url: event.target.value } )
+	};
+
+	const changeUrl = ( event ) => {
+		console.log( 'onchange', event );
+		console.log( 'Props', props );
+		setAttributes( { 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 }
+			/>
+		);
+	}
+
+	return (
+		<img className="wp-strava-img" src={placeholderActivityImg} />
+	);
+};
+
+export default Edit;

src/blocks/activity/embed-placeholder.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+const { __, _x } = wp.i18n;
+const { Button, Placeholder, ExternalLink } = wp.components;
+const { BlockIcon } = wp.blockEditor;
+
+const EmbedPlaceholder = ( props ) => {
+	const {
+		icon,
+		label,
+		value,
+		onSubmit,
+		onChange,
+		cannotEmbed,
+		fallback,
+		tryAgain,
+	} = props;
+
+	return (
+		<Placeholder
+			icon={ <BlockIcon icon={ icon } showColors /> }
+			label={ label }
+			className="wp-block-embed"
+			instructions={ __(
+				'Paste a link to the content you want to display on your site.'
+			) }
+		>
+			<form onSubmit={ onSubmit }>
+				<input
+					type="url"
+					value={ value || '' }
+					className="components-placeholder__input"
+					aria-label={ label }
+					placeholder={ __( 'Enter URL to embed here…' ) }
+					onChange={ onChange }
+				/>
+				<Button isPrimary type="submit">
+					{ _x( 'Embed', 'button label' ) }
+				</Button>
+			</form>
+			<div className="components-placeholder__learn-more">
+				<ExternalLink
+					href={ __(
+						'https://wordpress.org/support/article/embeds/' // @TODO update for wp-strava
+					) }
+				>
+					{ __( '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>
+	);
+};
+
+export default EmbedPlaceholder;

src/blocks/activity/index.js

@@ -1,5 +1,6 @@
 /* global wp, wpStrava */
-import { registerBlockType } from '@wordpress/blocks';
+const { registerBlockType } = wp.blocks;
+import edit from './edit';
 
 /**
  * Localized Data.
@@ -8,11 +9,16 @@ const {
     placeholderActivityImg,
 } = wpStrava;
 
-
 registerBlockType( 'wp-strava/activity', {
     title: 'Strava Activity',
     icon: 'chart-line',
     category: 'embed',
-    edit: () => <img className="wp-strava-img" src={placeholderActivityImg} />,
+    attributes: {
+        url: {
+          type: 'string',
+          default: '',
+        },
+    },
+    edit,
     save: () => <img className="wp-strava-img" src={placeholderActivityImg} />,
 } );