diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-info/address')
4 files changed, 288 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; diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/editor.js b/plugins/jetpack/extensions/blocks/contact-info/address/editor.js new file mode 100644 index 00000000..403fddb8 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-info/address/editor.js @@ -0,0 +1,7 @@ +/** + * Internal dependencies + */ +import registerJetpackBlock from '../../../shared/register-jetpack-block'; +import { name, settings } from '.'; + +registerJetpackBlock( name, settings ); diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/index.js b/plugins/jetpack/extensions/blocks/contact-info/address/index.js new file mode 100644 index 00000000..f94259f4 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-info/address/index.js @@ -0,0 +1,71 @@ +/** + * External dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { Path, Circle } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import save from './save'; +import renderMaterialIcon from '../../../shared/render-material-icon'; + +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', 'jetpack' ), + description: __( 'Lets you add a physical address with Schema markup.', 'jetpack' ), + keywords: [ + _x( 'location', 'block search term', 'jetpack' ), + _x( 'direction', 'block search term', 'jetpack' ), + _x( 'place', 'block search term', 'jetpack' ), + ], + 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, +}; diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/save.js b/plugins/jetpack/extensions/blocks/contact-info/address/save.js new file mode 100644 index 00000000..fd1ba8bb --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-info/address/save.js @@ -0,0 +1,85 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; + +const hasAddress = ( { address, addressLine2, addressLine3, city, region, postal, country } ) => { + return [ address, addressLine2, addressLine3, city, region, postal, country ].some( + value => value !== '' + ); +}; + +const Address = ( { + attributes: { address, addressLine2, addressLine3, city, region, postal, country }, +} ) => ( + <Fragment> + { address && ( + <div className="jetpack-address__address jetpack-address__address1">{ address }</div> + ) } + { addressLine2 && ( + <div className="jetpack-address__address jetpack-address__address2">{ addressLine2 }</div> + ) } + { addressLine3 && ( + <div className="jetpack-address__address jetpack-address__address3">{ addressLine3 }</div> + ) } + { city && ! ( region || postal ) && <div className="jetpack-address__city">{ city }</div> } + { city && ( region || postal ) && ( + <div> + { [ + <span className="jetpack-address__city">{ city }</span>, + ', ', + <span className="jetpack-address__region">{ region }</span>, + ' ', + <span className="jetpack-address__postal">{ postal }</span>, + ] } + </div> + ) } + { ! city && ( region || postal ) && ( + <div> + { [ + <span className="jetpack-address__region">{ region }</span>, + ' ', + <span className="jetpack-address__postal">{ postal }</span>, + ] } + </div> + ) } + { country && <div className="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 => + hasAddress( props.attributes ) && ( + <div className={ props.className }> + { props.attributes.linkToGoogleMaps && ( + <a + href={ googleMapsUrl( props ) } + target="_blank" + rel="noopener noreferrer" + title={ __( 'Open address in Google Maps', 'jetpack' ) } + > + <Address { ...props } /> + </a> + ) } + { ! props.attributes.linkToGoogleMaps && <Address { ...props } /> } + </div> + ); + +export default save; |