GIF Block: Placeholder State (#30402)

* Placeholder state, replacing default Giphy image. * Improve input consistency with other blocks * Increase search debounce to 450
Automattic · Jan 25, 2019 · 65ee02b · 65ee02b
1 parent 2d0f56d
commit 65ee02b
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 59 deletions.
diff --git a/client/gutenberg/extensions/gif/edit.js b/client/gutenberg/extensions/gif/edit.js
@@ -4,11 +4,14 @@
 import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
 import classNames from 'classnames';
 import { Component, createRef } from '@wordpress/element';
-import { PanelBody, Path, SVG, TextControl } from '@wordpress/components';
+import { PanelBody, Path, Placeholder, SVG, TextControl } from '@wordpress/components';
 import { InspectorControls, RichText } from '@wordpress/editor';
 import { debounce } from 'lodash';
 
+import { icon, title } from './';
+
 const GIPHY_API_KEY = 't1PkR1Vq0mzHueIFBvZSZErgFs9NBmYW';
+const SEARCH_INPUT_DEBOUNCE = 450; // Time before searching user input in ms
 
 class GifEdit extends Component {
 	timer = null;
@@ -53,7 +56,7 @@ class GifEdit extends Component {
 		}
 
 		return this.fetch( this.urlForSearch( searchText ) );
-	}, 250 );
+	}, SEARCH_INPUT_DEBOUNCE );
 
 	urlForSearch = searchText => {
 		return `https://api.giphy.com/v1/gifs/search?q=${ encodeURIComponent(
@@ -153,6 +156,7 @@ class GifEdit extends Component {
 			'wp-block-jetpack-gif_text-input-field',
 			focus || ! this.hasSearchText() ? 'has-focus' : 'no-focus'
 		);
+
 		return (
 			<div className={ classes }>
 				<InspectorControls>
@@ -163,51 +167,62 @@ class GifEdit extends Component {
 						</SVG>
 					</PanelBody>
 				</InspectorControls>
-				<figure style={ style }>
-					<div
-						className="wp-block-jetpack-gif_cover"
-						onClick={ this.setFocus }
-						onKeyDown={ this.setFocus }
-						ref={ this.textControlRef }
-						role="button"
-						tabIndex="0"
-					>
-						{ ( ! searchText || isSelected ) && (
-							<TextControl
-								className={ textControlClasses }
-								label={ __( 'Search or paste a Giphy URL' ) }
-								placeholder={ __( 'Search or paste a Giphy URL' ) }
-								onChange={ this.onSearchTextChange }
-								onClick={ this.maintainFocus }
-								value={ searchText }
-							/>
-						) }
-					</div>
-					{ results && isSelected && (
-						<div className="wp-block-jetpack-gif_thumbnails-container">
-							{ results.map( thumbnail => {
-								if ( thumbnail.embed_url === giphyUrl ) {
-									return null;
-								}
-								const thumbnailStyle = {
-									backgroundImage: `url(${ thumbnail.images.preview_gif.url })`,
-								};
-								return (
-									<button
-										className="wp-block-jetpack-gif_thumbnail-container"
-										key={ thumbnail.id }
-										onClick={ () => {
-											this.thumbnailClicked( thumbnail );
-										} }
-										style={ thumbnailStyle }
-									/>
-								);
-							} ) }
+				{ ! giphyUrl ? (
+					<Placeholder className="wp-block-jetpack-gif_placeholder" icon={ icon } label={ title }>
+						<TextControl
+							className="wp-block-jetpack-gif_placeholder-text-input"
+							label={ __( 'Search or paste a Giphy URL' ) }
+							onChange={ this.onSearchTextChange }
+							value={ searchText }
+						/>
+					</Placeholder>
+				) : (
+					<figure style={ style }>
+						<div
+							className="wp-block-jetpack-gif_cover"
+							onClick={ this.setFocus }
+							onKeyDown={ this.setFocus }
+							ref={ this.textControlRef }
+							role="button"
+							tabIndex="0"
+						>
+							{ ( ! searchText || isSelected ) && (
+								<TextControl
+									className={ textControlClasses }
+									label={ __( 'Search or paste a Giphy URL' ) }
+									placeholder={ __( 'Search or paste a Giphy URL' ) }
+									onChange={ this.onSearchTextChange }
+									onClick={ this.maintainFocus }
+									value={ searchText }
+								/>
+							) }
 						</div>
-					) }
-					<iframe src={ giphyUrl } title={ searchText } />
-				</figure>
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
+						{ results && isSelected && (
+							<div className="wp-block-jetpack-gif_thumbnails-container">
+								{ results.map( thumbnail => {
+									if ( thumbnail.embed_url === giphyUrl ) {
+										return null;
+									}
+									const thumbnailStyle = {
+										backgroundImage: `url(${ thumbnail.images.preview_gif.url })`,
+									};
+									return (
+										<button
+											className="wp-block-jetpack-gif_thumbnail-container"
+											key={ thumbnail.id }
+											onClick={ () => {
+												this.thumbnailClicked( thumbnail );
+											} }
+											style={ thumbnailStyle }
+										/>
+									);
+								} ) }
+							</div>
+						) }
+						<iframe src={ giphyUrl } title={ searchText } />
+					</figure>
+				) }
+				{ ( ! RichText.isEmpty( caption ) || isSelected ) && !! giphyUrl && (
 					<RichText
 						className="wp-block-jetpack-gif-caption"
 						inlineToolbar

diff --git a/client/gutenberg/extensions/gif/editor.scss b/client/gutenberg/extensions/gif/editor.scss
@@ -33,9 +33,7 @@
 		}
 		.components-text-control__input {
 			opacity: 0;
-			max-width: 350px;
-			padding: 8px 2px;
-			text-align: center;
+			max-width: 400px;
 			width: 100%;
 		}
 		.components-base-control__label {
@@ -67,8 +65,8 @@
 		justify-content: center;
 		margin: 2px;
 		padding: 0;
-		padding-bottom: calc(100% / 9 - 4px);
-		width: calc(100% / 9 - 4px);
+		padding-bottom: calc( 100% / 9 - 4px );
+		width: calc( 100% / 9 - 4px );
 		&:hover {
 			box-shadow: 0 0 0 1px #555d66;
 		}
@@ -77,6 +75,13 @@
 			outline: 0;
 		}
 	}
+	.wp-block-jetpack-gif_placeholder-text-input {
+		width: 100%;
+		max-width: 400px;
+	}
+	.wp-block-jetpack-gif_placeholder {
+		min-height: 200px;
+	}
 }
 .components-panel__body-gif-branding {
 	svg {

diff --git a/client/gutenberg/extensions/gif/index.js b/client/gutenberg/extensions/gif/index.js
@@ -12,15 +12,18 @@ import './editor.scss';
 import './style.scss';
 
 export const name = 'gif';
+export const title = __( 'GIF' );
+
+export const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54L16.5 18zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z" />
+	</SVG>
+);
 
 export const settings = {
-	title: __( 'GIF' ),
-	icon: (
-		<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-			<Path fill="none" d="M0 0h24v24H0V0z" />
-			<Path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54L16.5 18zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z" />
-		</SVG>
-	),
+	title,
+	icon,
 	category: 'jetpack',
 	keywords: [ __( 'giphy' ) ],
 	description: __( 'Search for and insert an animated image.' ),
@@ -34,7 +37,6 @@ export const settings = {
 		},
 		giphyUrl: {
 			type: 'string',
-			default: '//giphy.com/embed/ZgTR3UQ9XAWDvqy9jv',
 		},
 		searchText: {
 			type: 'string',