adds new edit flow

WordPress · May 27, 2019 · 298bbe1 · 298bbe1
1 parent 3a26e3b
commit 298bbe1
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 40 deletions.
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
@@ -106,7 +106,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 		}
 
 		switchBackToURLInput() {
-			this.setState( { editingURL: true } );
+			this.setState( { editingURL: ! this.state.editingURL } );
 		}
 
 		getResponsiveHelp( checked ) {
@@ -142,16 +142,32 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 			// No preview, or we can't embed the current URL, or we've clicked the edit button.
 			if ( ! preview || cannotEmbed || editingURL ) {
 				return (
-					<EmbedPlaceholder
-						icon={ icon }
-						label={ label }
-						onSubmit={ this.setUrl }
-						value={ url }
-						cannotEmbed={ cannotEmbed }
-						onChange={ ( event ) => this.setState( { url: event.target.value } ) }
-						fallback={ () => fallback( url, this.props.onReplace ) }
-						tryAgain={ tryAgain }
-					/>
+					<>
+						<EmbedControls
+							showEditButton={ preview && ! cannotEmbed }
+							editingURL={ this.state.editingURL }
+							url={ this.state.url }
+							themeSupportsResponsive={ themeSupportsResponsive }
+							blockSupportsResponsive={ responsive }
+							allowResponsive={ allowResponsive }
+							getResponsiveHelp={ this.getResponsiveHelp }
+							toggleResponsive={ this.toggleResponsive }
+							switchBackToURLInput={ this.switchBackToURLInput }
+						/>
+						<EmbedPlaceholder
+							icon={ icon }
+							label={ label }
+							onSubmit={ this.setUrl }
+							value={ url }
+							cannotEmbed={ cannotEmbed }
+							onChange={ ( event ) => this.setState( { url: event.target.value } ) }
+							fallback={ () => fallback( url, this.props.onReplace ) }
+							tryAgain={ tryAgain }
+							switchBackToURLInput={ this.switchBackToURLInput }
+							editingURL={ this.state.editingURL }
+							url={ this.state.url }
+						/>
+					</>
 				);
 			}
 
@@ -171,6 +187,8 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 				<>
 					<EmbedControls
 						showEditButton={ preview && ! cannotEmbed }
+						editingURL={ this.state.editingURL }
+						url={ this.state.url }
 						themeSupportsResponsive={ themeSupportsResponsive }
 						blockSupportsResponsive={ responsive }
 						allowResponsive={ allowResponsive }

diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
@@ -37,6 +37,13 @@
 	.components-placeholder__error {
 		word-break: break-word;
 	}
+
+	.components-placeholder__cancel {
+		padding-top: 10px;
+		width: 100%;
+		float: none;
+		text-align: center;
+	}
 }
 
 .block-library-embed__interactive-overlay {

diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
@@ -1,33 +1,39 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar, PanelBody, ToggleControl } from '@wordpress/components';
+import { IconButton, Toolbar, PanelBody, ToggleControl, SVG, Rect, Path } from '@wordpress/components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
 const EmbedControls = ( props ) => {
 	const {
 		blockSupportsResponsive,
-		showEditButton,
 		themeSupportsResponsive,
 		allowResponsive,
 		getResponsiveHelp,
 		toggleResponsive,
 		switchBackToURLInput,
+		editingURL,
+		url,
 	} = props;
+	const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
 	return (
 		<>
 			<BlockControls>
-				<Toolbar>
-					{ showEditButton && (
-						<IconButton
-							className="components-toolbar__control"
-							label={ __( 'Edit URL' ) }
-							icon="edit"
-							onClick={ switchBackToURLInput }
-						/>
-					) }
-				</Toolbar>
+				{ !! url && ( <Toolbar>
+					<IconButton
+						className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': editingURL } ) }
+						aria-pressed={ editingURL }
+						label={ __( 'Edit URL' ) }
+						icon={ editImageIcon }
+						onClick={ switchBackToURLInput }
+					/>
+				</Toolbar> ) }
 			</BlockControls>
 			{ themeSupportsResponsive && blockSupportsResponsive && (
 				<InspectorControls>

diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
@@ -6,29 +6,41 @@ import { Button, Placeholder } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( props ) => {
-	const { icon, label, value, onSubmit, onChange, cannotEmbed, fallback, tryAgain } = props;
+	const { icon, label, value, onSubmit, onChange, switchBackToURLInput, cannotEmbed, fallback, tryAgain } = props;
 	return (
 		<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label } className="wp-block-embed">
-			<form onSubmit={ onSubmit }>
-				<input
-					type="url"
-					value={ value || '' }
-					className="components-placeholder__input"
-					aria-label={ label }
-					placeholder={ __( 'Enter URL to embed here…' ) }
-					onChange={ onChange } />
-				<Button
-					isLarge
-					type="submit">
-					{ _x( 'Embed', 'button label' ) }
-				</Button>
-				{ cannotEmbed &&
+			<>
+				<form onSubmit={ onSubmit }>
+					<input
+						type="url"
+						value={ value || '' }
+						className="components-placeholder__input"
+						aria-label={ label }
+						placeholder={ __( 'Enter URL to embed here…' ) }
+						onChange={ onChange } />
+					<Button
+						isLarge
+						type="submit">
+						{ _x( 'Embed', 'button label' ) }
+					</Button>
+					{ cannotEmbed &&
 					<p className="components-placeholder__error">
 						{ __( 'Sorry, this content could not be embedded.' ) }<br />
 						<Button isLarge onClick={ tryAgain }>{ _x( 'Try again', 'button label' ) }</Button> <Button isLarge onClick={ fallback }>{ _x( 'Convert to link', 'button label' ) }</Button>
 					</p>
-				}
-			</form>
+					}
+				</form>
+				{ value && <div className="components-placeholder__cancel">
+					<Button
+						className="block-editor-embed-placeholder__cancel-button"
+						title={ __( 'Cancel' ) }
+						isLink
+						onClick={ switchBackToURLInput }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+				</div> }
+			</>
 		</Placeholder>
 	);
 };