1 files changed, 125 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/edit.js b/plugins/jetpack/extensions/blocks/contact-info/address/edit.js
new file mode 100644
index 00000000..4618f686
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/contact-info/address/edit.js
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+import { PlainText } from '@wordpress/editor';
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import save from './save';
+
+class AddressEdit extends Component {
+	constructor( ...args ) {
+		super( ...args );
+
+		this.preventEnterKey = this.preventEnterKey.bind( this );
+	}
+
+	preventEnterKey( event ) {
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			return;
+		}
+	}
+
+	render() {
+		const {
+			attributes: {
+				address,
+				addressLine2,
+				addressLine3,
+				city,
+				region,
+				postal,
+				country,
+				linkToGoogleMaps,
+			},
+			isSelected,
+			setAttributes,
+		} = this.props;
+
+		const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some(
+			value => value !== ''
+		);
+		const classNames = classnames( {
+			'jetpack-address-block': true,
+			'is-selected': isSelected,
+		} );
+
+		const externalLink = (
+			<ToggleControl
+				label={ __( 'Link address to Google Maps', 'jetpack' ) }
+				checked={ linkToGoogleMaps }
+				onChange={ newlinkToGoogleMaps =>
+					setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } )
+				}
+			/>
+		);
+
+		return (
+			<div className={ classNames }>
+				{ ! isSelected && hasContent && save( this.props ) }
+				{ ( isSelected || ! hasContent ) && (
+					<Fragment>
+						<PlainText
+							value={ address }
+							placeholder={ __( 'Street Address', 'jetpack' ) }
+							aria-label={ __( 'Street Address', 'jetpack' ) }
+							onChange={ newAddress => setAttributes( { address: newAddress } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ addressLine2 }
+							placeholder={ __( 'Address Line 2', 'jetpack' ) }
+							aria-label={ __( 'Address Line 2', 'jetpack' ) }
+							onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ addressLine3 }
+							placeholder={ __( 'Address Line 3', 'jetpack' ) }
+							aria-label={ __( 'Address Line 3', 'jetpack' ) }
+							onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ city }
+							placeholder={ __( 'City', 'jetpack' ) }
+							aria-label={ __( 'City', 'jetpack' ) }
+							onChange={ newCity => setAttributes( { city: newCity } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ region }
+							placeholder={ __( 'State/Province/Region', 'jetpack' ) }
+							aria-label={ __( 'State/Province/Region', 'jetpack' ) }
+							onChange={ newRegion => setAttributes( { region: newRegion } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ postal }
+							placeholder={ __( 'Postal/Zip Code', 'jetpack' ) }
+							aria-label={ __( 'Postal/Zip Code', 'jetpack' ) }
+							onChange={ newPostal => setAttributes( { postal: newPostal } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ country }
+							placeholder={ __( 'Country', 'jetpack' ) }
+							aria-label={ __( 'Country', 'jetpack' ) }
+							onChange={ newCountry => setAttributes( { country: newCountry } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						{ externalLink }
+					</Fragment>
+				) }
+			</div>
+		);
+	}
+}
+
+export default AddressEdit;