adds the new edit flow to embed

WordPress · Apr 11, 2019 · 467993b · 467993b
1 parent 9a6ce94
commit 467993b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
@@ -129,7 +129,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 		}
 
 		switchBackToURLInput() {
-			this.setState( { editingURL: true } );
+			this.setState( { editingURL: ! this.state.editingURL } );
 		}
 
 		getResponsiveHelp( checked ) {
@@ -166,23 +166,41 @@ 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 }
-					/>
+					<Fragment>
+						<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 }
+						/>
+					</Fragment>
 				);
 			}
 
 			return (
 				<Fragment>
 					<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/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
@@ -1,34 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-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 (
 		<Fragment>
 			<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>