Add TextControl in the editor

src/edit.js

@@ -0,0 +1,21 @@
+import { Component } from '@wordpress/element';
+import { TextControl } from '@wordpress/components';
+
+export default class Edit extends Component {
+	render() {
+		const {
+			attributes: {
+				search
+			},
+			setAttributes,
+		} = this.props;
+
+		return (
+			<TextControl
+				label="Search GIF"
+				value={ search }
+				onChange={ search => setAttributes( { search } )}
+			/>
+		);
+	}
+}

src/index.js

@@ -12,6 +12,8 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import { __ } from '@wordpress/i18n';
 
+import edit from './edit';
+
 /**
  * Every block starts by registering a new block type definition.
  *
@@ -45,6 +47,12 @@ registerBlockType( 'create-block/giphy-block', {
 	 */
 	icon: 'smiley',
 
+	attributes: {
+		search: {
+			type: 'string'
+		}
+	},
+
 	/**
 	 * Optional block extended support features.
 	 */
@@ -63,13 +71,7 @@ registerBlockType( 'create-block/giphy-block', {
 	 *
 	 * @return {WPElement} Element to render.
 	 */
-	edit( { className } ) {
-		return (
-			<p className={ className }>
-				{ __( 'Giphy Block – hello from the editor!', 'create-block' ) }
-			</p>
-		);
-	},
+	edit,
 
 	/**
 	 * The save function defines the way in which the different attributes should be combined