Gutenpack: Adds contact info block (#29456)

* Gitenpack: Add phone block

* Gutenpack: Add address block

* Gutenpack: Add Email block

* Gutenpack: Add the contact info block

* Default empty fields to visible

This make the contact info component more useful

* Contact Info: Update to use the Material Icon Component

* Autolink phone number and email

* Update the icons

* Add address line 3

* Prevern Enter Key from creating new lines

* Set the parent block to jetpack/contact-info

* Improve save HTML

* Add styles to remove border and make the contact info block more selectable

* Extract simple Input

* Add keywords

* Add space between Region and postal

* Contact Info Block: Update Address block schema to use postalCode

* Contact Info Block: Update description and keywords

* Contact Info Block: Revert to original keywords for the parent block

Revert the keywords to `email`, `phone`, and `address` to reflect the child blocks

* Contact Info Block: Remove use of Fragment for the descriptions

`Fragment` is not needed here, same for the `<p>`.

* Make Address, phone and email inner blocks

* snake to camel case

* Add linkToGoogleMaps

Add the ability to link to google maps.
Convert address to rich text fields so that we can

* Remove empty divs when they are empty

* minor fix to div

* Limit formatting controls on the address field

* Empty controls

* Remove formatting controls

* Add target blank to google map link

* Revert back to PlainText from RichText input

* Refactor ShortlinkPanel to be reuable be reusable
- Added the ability to copy links to the address field

* Clipboard-input: Update the styling so that it looks nicer

* Only show the google maps link if we have something tha is address specific

client/gutenberg/extensions/contact-info/address/edit.js

@@ -0,0 +1,129 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { PlainText, InspectorControls } from '@wordpress/editor';
+import { Component, Fragment } from '@wordpress/element';
+import { ToggleControl, PanelBody, ExternalLink } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import ClipboardInput from 'gutenberg/extensions/presets/jetpack/utils/clipboard-input';
+import { default as save, googleMapsUrl } 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,
+		} );
+
+		return (
+			<div className={ classNames }>
+				{ ! isSelected && hasContent && save( this.props ) }
+				{ ( isSelected || ! hasContent ) && (
+					<Fragment>
+						<PlainText
+							value={ address }
+							placeholder={ __( 'Street Address' ) }
+							onChange={ newAddress => setAttributes( { address: newAddress } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ addressLine2 }
+							placeholder={ __( 'Address Line 2' ) }
+							onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ addressLine3 }
+							placeholder={ __( 'Address Line 3' ) }
+							onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ city }
+							placeholder={ __( 'City' ) }
+							onChange={ newCity => setAttributes( { city: newCity } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ region }
+							placeholder={ __( 'State/Province/Region' ) }
+							onChange={ newRegion => setAttributes( { region: newRegion } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ postal }
+							placeholder={ __( 'Postal/Zip Code' ) }
+							onChange={ newPostal => setAttributes( { postal: newPostal } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<PlainText
+							value={ country }
+							placeholder={ __( 'Country' ) }
+							onChange={ newCountry => setAttributes( { country: newCountry } ) }
+							onKeyDown={ this.preventEnterKey }
+						/>
+						<InspectorControls>
+							<PanelBody title={ __( 'Link to Google Maps' ) }>
+								<ToggleControl
+									label={ __( 'Link address to Google Maps' ) }
+									checked={ linkToGoogleMaps }
+									onChange={ newlinkToGoogleMaps =>
+										setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } )
+									}
+								/>
+								{ hasContent && <ClipboardInput link={ googleMapsUrl( this.props ) } /> }
+								{ hasContent && (
+									<div>
+										<ExternalLink href={ googleMapsUrl( this.props ) }>
+											{ __( 'Visit Google Maps' ) }
+										</ExternalLink>
+									</div>
+								) }
+							</PanelBody>
+						</InspectorControls>
+					</Fragment>
+				) }
+			</div>
+		);
+	}
+}
+
+export default AddressEdit;

client/gutenberg/extensions/contact-info/address/editor.js

@@ -0,0 +1,9 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
+import { name, settings } from '.';
+
+registerJetpackBlock( name, settings );

client/gutenberg/extensions/contact-info/address/index.js

@@ -0,0 +1,72 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Path, Circle } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import renderMaterialIcon from 'gutenberg/extensions/presets/jetpack/utils/render-material-icon';
+import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+const attributes = {
+	address: {
+		type: 'string',
+		default: '',
+	},
+	addressLine2: {
+		type: 'string',
+		default: '',
+	},
+	addressLine3: {
+		type: 'string',
+		default: '',
+	},
+	city: {
+		type: 'string',
+		default: '',
+	},
+	region: {
+		type: 'string',
+		default: '',
+	},
+	postal: {
+		type: 'string',
+		default: '',
+	},
+	country: {
+		type: 'string',
+		default: '',
+	},
+	linkToGoogleMaps: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
+export const name = 'address';
+
+export const settings = {
+	title: __( 'Address' ),
+	description: __( 'Lets you add a physical address with Schema markup.' ),
+	keywords: [
+		_x( 'location', 'block search term' ),
+		_x( 'direction', 'block search term' ),
+		_x( 'place', 'block search term' ),
+	],
+	icon: renderMaterialIcon(
+		<Fragment>
+			<Path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z" />
+			<Circle cx="12" cy="9" r="2.5" />
+		</Fragment>
+	),
+	category: 'jetpack',
+	attributes,
+	parent: [ 'jetpack/contact-info' ],
+	edit,
+	save,
+};

client/gutenberg/extensions/contact-info/address/save.js

@@ -0,0 +1,112 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+const Address = ( {
+	attributes: { address, addressLine2, addressLine3, city, region, postal, country },
+} ) => (
+	<Fragment>
+		{ address && (
+			<div itemprop="streetAddress" class="jetpack-address__address jetpack-address__address1">
+				{ address }
+			</div>
+		) }
+		{ addressLine2 && (
+			<div itemprop="streetAddress" class="jetpack-address__address jetpack-address__address2">
+				{ addressLine2 }
+			</div>
+		) }
+		{ addressLine3 && (
+			<div itemprop="streetAddress" class="jetpack-address__address jetpack-address__address3">
+				{ addressLine3 }
+			</div>
+		) }
+		{ city && ! ( region || postal ) && (
+			<div itemprop="addressLocality" class="jetpack-address__city">
+				{ city }
+			</div>
+		) }
+		{ city && ( region || postal ) && (
+			<div>
+				{ [
+					<span itemprop="addressLocality" class="jetpack-address__city">
+						{ city }
+					</span>,
+					', ',
+					<span itemprop="addressRegion" class="jetpack-address__region">
+						{ region }
+					</span>,
+					' ',
+					<span itemprop="postalCode" class="jetpack-address__postal">
+						{ postal }
+					</span>,
+				] }
+			</div>
+		) }
+		{ ! city && ( region || postal ) && (
+			<div>
+				{ [
+					<span itemprop="addressRegion" class="jetpack-address__region">
+						{ region }
+					</span>,
+					' ',
+					<span itemprop="postalCode" class="jetpack-address__postal">
+						{ postal }
+					</span>,
+				] }
+			</div>
+		) }
+		{ country && (
+			<div itemprop="addressCountry" class="jetpack-address__country">
+				{ country }
+			</div>
+		) }
+	</Fragment>
+);
+
+export const googleMapsUrl = ( {
+	attributes: { address, addressLine2, addressLine3, city, region, postal, country },
+} ) => {
+	const addressUrl = address ? `${ address },` : '';
+	const addressLine2Url = addressLine2 ? `${ addressLine2 },` : '';
+	const addressLine3Url = addressLine3 ? `${ addressLine3 },` : '';
+	const cityUrl = city ? `+${ city },` : '';
+	let regionUrl = region ? `+${ region },` : '';
+	regionUrl = postal ? `${ regionUrl }+${ postal }` : regionUrl;
+	const countryUrl = country ? `+${ country }` : '';
+
+	return `https://www.google.com/maps/search/${ addressUrl }${ addressLine2Url }${ addressLine3Url }${ cityUrl }${ regionUrl }${ countryUrl }`.replace(
+		' ',
+		'+'
+	);
+};
+
+const save = props => (
+	<div
+		className={ props.className }
+		itemprop="address"
+		itemscope
+		itemtype="http://schema.org/PostalAddress"
+	>
+		{ props.attributes.linkToGoogleMaps && (
+			<a
+				href={ googleMapsUrl( props ) }
+				target="_blank"
+				rel="noopener noreferrer"
+				title={ __( 'Open address in Google Maps' ) }
+			>
+				<Address { ...props } />
+			</a>
+		) }
+		{ ! props.attributes.linkToGoogleMaps && <Address { ...props } /> }
+	</div>
+);
+
+export default save;

client/gutenberg/extensions/contact-info/edit.js

@@ -0,0 +1,54 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { InnerBlocks } from '@wordpress/editor';
+import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+const ALLOWED_BLOCKS = [
+	'jetpack/markdown',
+	'jetpack/address',
+	'jetpack/email',
+	'jetpack/phone',
+	'jetpack/map',
+	'core/paragraph',
+	'core/image',
+	'core/heading',
+	'core/gallery',
+	'core/list',
+	'core/quote',
+	'core/shortcode',
+	'core/audio',
+	'core/code',
+	'core/cover',
+	'core/html',
+	'core/separator',
+	'core/spacer',
+	'core/subhead',
+	'core/video',
+];
+
+const TEMPLATE = [ [ 'jetpack/email' ], [ 'jetpack/phone' ], [ 'jetpack/address' ] ];
+
+const ContactInfoEdit = props => {
+	const {
+		attributes: {},
+		isSelected,
+	} = props;
+
+	return (
+		<div
+			className={ classnames( {
+				'jetpack-contact-info-block': true,
+				'is-selected': isSelected,
+			} ) }
+		>
+			<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } templateLock={ false } template={ TEMPLATE } />
+		</div>
+	);
+};
+
+export default ContactInfoEdit;

client/gutenberg/extensions/contact-info/editor.js

@@ -0,0 +1,9 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
+import { childBlocks, name, settings } from '.';
+
+registerJetpackBlock( name, settings, childBlocks );

client/gutenberg/extensions/contact-info/editor.scss

@@ -0,0 +1,7 @@
+.jetpack-contact-info-block {
+	padding: 10px 18px;
+	/* css class added to increase specificity */
+	.editor-plain-text.editor-plain-text:focus {
+		box-shadow: none;
+	}
+}