diff --git a/src/blocks/activity/edit.js b/src/blocks/activity/edit.js index 99e7f9b..74d9a9c 100644 --- a/src/blocks/activity/edit.js +++ b/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 ( + + this.setState( { url: event.target.value } ) + } + /> + ); + } - if ( isEmpty( url ) ) { return ( - fallback( url, props.onReplace ) } - tryAgain={ tryAgain } - onSubmit={ submitUrl } - /> + <> + + + ); } - return ( - - ); }; export default Edit; diff --git a/src/blocks/activity/embed-controls.js b/src/blocks/activity/embed-controls.js new file mode 100644 index 0000000..cbdd5a6 --- /dev/null +++ b/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 ( + <> + + + + + + + ); +}; + +export default EmbedControls; diff --git a/src/blocks/activity/embed-placeholder.js b/src/blocks/activity/embed-placeholder.js index bc2546e..a9a80a4 100644 --- a/src/blocks/activity/embed-placeholder.js +++ b/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' ) } - { cannotEmbed && ( -
-
- { __( 'Sorry, this content could not be embedded.' ) } -
- { ' ' } - -
- ) } ); }; diff --git a/src/blocks/activity/index.js b/src/blocks/activity/index.js index b9e235c..f52b161 100644 --- a/src/blocks/activity/index.js +++ b/src/blocks/activity/index.js @@ -1,5 +1,6 @@ /* global wp, wpStrava */ const { registerBlockType } = wp.blocks; + import edit from './edit'; /**