fixes the link ane edit button showing up before any embed

WordPress · May 27, 2019 · 841c17f · 841c17f
1 parent 298bbe1
commit 841c17f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
@@ -153,6 +153,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 							getResponsiveHelp={ this.getResponsiveHelp }
 							toggleResponsive={ this.toggleResponsive }
 							switchBackToURLInput={ this.switchBackToURLInput }
+							hasEmbed={ this.props.preview }
 						/>
 						<EmbedPlaceholder
 							icon={ icon }
@@ -166,6 +167,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 							switchBackToURLInput={ this.switchBackToURLInput }
 							editingURL={ this.state.editingURL }
 							url={ this.state.url }
+							hasEmbed={ this.props.preview }
 						/>
 					</>
 				);
@@ -195,6 +197,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 						getResponsiveHelp={ this.getResponsiveHelp }
 						toggleResponsive={ this.toggleResponsive }
 						switchBackToURLInput={ this.switchBackToURLInput }
+						hasEmbed={ this.props.preview }
 					/>
 					<EmbedPreview
 						preview={ preview }

diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
@@ -19,13 +19,13 @@ const EmbedControls = ( props ) => {
 		toggleResponsive,
 		switchBackToURLInput,
 		editingURL,
-		url,
+		hasEmbed,
 	} = 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>
-				{ !! url && ( <Toolbar>
+				{ !! hasEmbed && ( <Toolbar>
 					<IconButton
 						className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': editingURL } ) }
 						aria-pressed={ editingURL }

diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
@@ -6,7 +6,8 @@ import { Button, Placeholder } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( props ) => {
-	const { icon, label, value, onSubmit, onChange, switchBackToURLInput, cannotEmbed, fallback, tryAgain } = props;
+	const { icon, label, value, onSubmit, onChange, switchBackToURLInput, cannotEmbed, fallback, tryAgain, hasEmbed } = props;
+
 	return (
 		<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label } className="wp-block-embed">
 			<>
@@ -30,7 +31,7 @@ const EmbedPlaceholder = ( props ) => {
 					</p>
 					}
 				</form>
-				{ value && <div className="components-placeholder__cancel">
+				{ hasEmbed && <div className="components-placeholder__cancel">
 					<Button
 						className="block-editor-embed-placeholder__cancel-button"
 						title={ __( 'Cancel' ) }