Jetpack Blocks: new version of the blocks (13.1.0) for the 7.1 release

client/gutenberg/extensions/business-hours/components/day.jsx → client/gutenberg/extensions/business-hours/components/day-edit.jsx

@@ -14,7 +14,7 @@ import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
 const defaultOpen = '09:00';
 const defaultClose = '17:00';
 
-class Day extends Component {
+class DayEdit extends Component {
 	renderInterval = ( interval, intervalIndex ) => {
 		const { day } = this.props;
 		const { opening, closing } = interval;
@@ -30,6 +30,7 @@ class Day extends Component {
 							label={ __( 'Opening' ) }
 							value={ opening }
 							className="business-hours__open"
+							placeHolder={ defaultOpen }
 							onChange={ value => {
 								this.setHour( value, 'opening', intervalIndex );
 							} }
@@ -39,6 +40,7 @@ class Day extends Component {
 							label={ __( 'Closing' ) }
 							value={ closing }
 							className="business-hours__close"
+							placeHolder={ defaultClose }
 							onChange={ value => {
 								this.setHour( value, 'closing', intervalIndex );
 							} }
@@ -61,13 +63,7 @@ class Day extends Component {
 					<div className="business-hours__row business-hours-row__add">
 						<div className={ classNames( day.name, 'business-hours__day' ) }>&nbsp;</div>
 						<div className={ classNames( day.name, 'business-hours__hours' ) }>
-							<IconButton
-								isSmall
-								isLink
-								label={ __( 'Add Hours' ) }
-								icon="plus-alt"
-								onClick={ this.addInterval }
-							>
+							<IconButton isLink label={ __( 'Add Hours' ) } onClick={ this.addInterval }>
 								{ __( 'Add Hours' ) }
 							</IconButton>
 						</div>
@@ -201,4 +197,4 @@ class Day extends Component {
 	}
 }
 
-export default Day;
+export default DayEdit;

client/gutenberg/extensions/business-hours/components/day-save.jsx → client/gutenberg/extensions/business-hours/components/day-preview.jsx

@@ -11,44 +11,48 @@ import { sprintf } from '@wordpress/i18n';
  */
 import { _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
 
-class DaySave extends Component {
+class DayPreview extends Component {
 	formatTime( time ) {
 		const { timeFormat } = this.props;
 		const [ hours, minutes ] = time.split( ':' );
 		const _date = new Date();
+		if ( ! hours || ! minutes ) {
+			return false;
+		}
 		_date.setHours( hours );
 		_date.setMinutes( minutes );
 		return date( timeFormat, _date );
 	}
 
 	renderInterval = ( interval, key ) => {
 		return (
-			! isEmpty( interval.opening ) &&
-			! isEmpty( interval.closing ) && (
-				<dd key={ key }>
-					{ sprintf(
-						_x( 'From %s to %s', 'from business opening hour to closing hour' ),
-						this.formatTime( interval.opening ),
-						this.formatTime( interval.closing )
-					) }
-				</dd>
-			)
+			<dd key={ key }>
+				{ sprintf(
+					_x( 'From %s to %s', 'from business opening hour to closing hour' ),
+					this.formatTime( interval.opening ),
+					this.formatTime( interval.closing )
+				) }
+			</dd>
 		);
 	};
 
 	render() {
 		const { day, localization } = this.props;
+		const hours = day.hours.filter(
+			// remove any malformed or empty intervals
+			interval => this.formatTime( interval.opening ) && this.formatTime( interval.closing )
+		);
 		return (
 			<Fragment>
 				<dt className={ day.name }>{ localization.days[ day.name ] }</dt>
-				{ isEmpty( day.hours ) ? (
+				{ isEmpty( hours ) ? (
 					<dd>{ _x( 'Closed', 'business is closed on a full day' ) }</dd>
 				) : (
-					day.hours.map( this.renderInterval )
+					hours.map( this.renderInterval )
 				) }
 			</Fragment>
 		);
 	}
 }
 
-export default DaySave;
+export default DayPreview;

client/gutenberg/extensions/business-hours/edit.jsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { BlockIcon } from '@wordpress/editor';
 import { Component } from '@wordpress/element';
 import { Placeholder } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
@@ -10,8 +11,8 @@ import { __experimentalGetSettings } from '@wordpress/date';
 /**
  * Internal dependencies
  */
-import Day from 'gutenberg/extensions/business-hours/components/day';
-import DaySave from 'gutenberg/extensions/business-hours/components/day-save';
+import DayEdit from 'gutenberg/extensions/business-hours/components/day-edit';
+import DayPreview from 'gutenberg/extensions/business-hours/components/day-preview';
 import { icon } from 'gutenberg/extensions/business-hours/index';
 import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
 
@@ -52,13 +53,22 @@ class BusinessHours extends Component {
 	}
 
 	render() {
-		const { attributes, className, isEdit, isSelected } = this.props;
+		const { attributes, className, isSelected } = this.props;
 		const { days } = attributes;
 		const { localization, hasFetched } = this.state;
 		const { startOfWeek } = localization;
 		const localizedWeek = days.concat( days.slice( 0, startOfWeek ) ).slice( startOfWeek );
 
-		if ( ! isEdit || ! isSelected ) {
+		if ( ! hasFetched ) {
+			return (
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Loading business hours' ) }
+				/>
+			);
+		}
+
+		if ( ! isSelected ) {
 			const settings = __experimentalGetSettings();
 			const {
 				formats: { time },
@@ -67,21 +77,24 @@ class BusinessHours extends Component {
 				<dl className={ classNames( className, 'jetpack-business-hours' ) }>
 					{ localizedWeek.map( ( day, key ) => {
 						return (
-							<DaySave key={ key } day={ day } localization={ localization } timeFormat={ time } />
+							<DayPreview
+								key={ key }
+								day={ day }
+								localization={ localization }
+								timeFormat={ time }
+							/>
 						);
 					} ) }
 				</dl>
 			);
 		}
 
-		if ( ! hasFetched ) {
-			return <Placeholder icon={ icon } label={ __( 'Loading business hours' ) } />;
-		}
-
 		return (
 			<div className={ classNames( className, 'is-edit' ) }>
 				{ localizedWeek.map( ( day, key ) => {
-					return <Day key={ key } day={ day } localization={ localization } { ...this.props } />;
+					return (
+						<DayEdit key={ key } day={ day } localization={ localization } { ...this.props } />
+					);
 				} ) }
 			</div>
 		);

client/gutenberg/extensions/business-hours/editor.scss

@@ -9,7 +9,6 @@ $break-small: 600px;
 
 	.business-hours__row {
 		display: flex;
-		align-items: center;
 
 		&.business-hours-row__add,
 		&.business-hours-row__closed {
@@ -22,8 +21,7 @@ $break-small: 600px;
 			align-items: baseline;
 
 			.business-hours__day-name {
-				width: 40%;
-				font-size: small;
+				width: 60%;
 				font-weight: bold;
 				overflow-x: hidden;
 				text-overflow: ellipsis;
@@ -33,10 +31,6 @@ $break-small: 600px;
 			.components-form-toggle {
 				margin-right: 4px;
 			}
-
-			.components-toggle-control__label {
-				font-size: smaller;
-			}
 		}
 
 		.business-hours__hours {
@@ -56,21 +50,16 @@ $break-small: 600px;
 
 				.components-base-control__label {
 					margin-bottom: 0;
-					font-size: smaller;
-				}
-
-				.components-text-control__input {
-					font-size: smaller;
-					padding: 4px;
 				}
 			}
 		}
 	}
 
 	.business-hours__remove {
-		width: 10%;
+		align-self: flex-end;
+		margin-bottom: 8px;
 		text-align: center;
-		margin-top: 16px;
+		width: 10%;
 	}
 
 	.business-hours-row__add button {
@@ -81,7 +70,8 @@ $break-small: 600px;
 	}
 
 	.business-hours__remove button {
-		display: inline;
+		display: block;
+		margin: 0 auto;
 	}
 
 	.business-hours-row__add .components-button.is-default:hover,

client/gutenberg/extensions/business-hours/index.js

@@ -6,7 +6,7 @@ import { Path } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
 import renderMaterialIcon from 'gutenberg/extensions/presets/jetpack/utils/render-material-icon';
 
 import './editor.scss';
@@ -30,7 +30,11 @@ export const settings = {
 	supports: {
 		html: true,
 	},
-
+	keywords: [
+		_x( 'opening hours', 'block search term' ),
+		_x( 'closing time', 'block search term' ),
+		_x( 'schedule', 'block search term' ),
+	],
 	attributes: {
 		days: {
 			type: 'array',
@@ -92,7 +96,7 @@ export const settings = {
 		},
 	},
 
-	edit: props => <BusinessHours { ...props } isEdit />,
+	edit: props => <BusinessHours { ...props } />,
 
-	save: props => <BusinessHours { ...props } />,
+	save: () => null,
 };

client/gutenberg/extensions/contact-form/index.js

@@ -399,7 +399,7 @@ export const childBlocks = [
 			title: __( 'Radio' ),
 			keywords: [ __( 'Choose' ), __( 'Select' ), __( 'Option' ) ],
 			description: __(
-				'Inpsired by radios, only one radio item can be selected at a time. Add several radio button items.'
+				'Inspired by radios, only one radio item can be selected at a time. Add several radio button items.'
 			),
 			icon: renderMaterialIcon(
 				<Fragment>

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

@@ -2,16 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { PlainText, InspectorControls } from '@wordpress/editor';
+import { PlainText } from '@wordpress/editor';
 import { Component, Fragment } from '@wordpress/element';
-import { ToggleControl, PanelBody, ExternalLink } from '@wordpress/components';
+import { ToggleControl } 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';
+import { default as save } from './save';
 
 class AddressEdit extends Component {
 	constructor( ...args ) {
@@ -116,19 +115,6 @@ class AddressEdit extends Component {
 							onKeyDown={ this.preventEnterKey }
 						/>
 						{ externalLink }
-						<InspectorControls>
-							<PanelBody title={ __( 'Link to Google Maps' ) }>
-								{ externalLink }
-								{ hasContent && <ClipboardInput link={ googleMapsUrl( this.props ) } /> }
-								{ hasContent && (
-									<div>
-										<ExternalLink href={ googleMapsUrl( this.props ) }>
-											{ __( 'Visit Google Maps' ) }
-										</ExternalLink>
-									</div>
-								) }
-							</PanelBody>
-						</InspectorControls>
 					</Fragment>
 				) }
 			</div>

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

@@ -17,35 +17,37 @@ const Address = ( {
 	attributes: { address, addressLine2, addressLine3, city, region, postal, country },
 } ) => (
 	<Fragment>
-		{ address && <div class="jetpack-address__address jetpack-address__address1">{ address }</div> }
+		{ address && (
+			<div className="jetpack-address__address jetpack-address__address1">{ address }</div>
+		) }
 		{ addressLine2 && (
-			<div class="jetpack-address__address jetpack-address__address2">{ addressLine2 }</div>
+			<div className="jetpack-address__address jetpack-address__address2">{ addressLine2 }</div>
 		) }
 		{ addressLine3 && (
-			<div class="jetpack-address__address jetpack-address__address3">{ addressLine3 }</div>
+			<div className="jetpack-address__address jetpack-address__address3">{ addressLine3 }</div>
 		) }
-		{ city && ! ( region || postal ) && <div class="jetpack-address__city">{ city }</div> }
+		{ city && ! ( region || postal ) && <div className="jetpack-address__city">{ city }</div> }
 		{ city && ( region || postal ) && (
 			<div>
 				{ [
-					<span class="jetpack-address__city">{ city }</span>,
+					<span className="jetpack-address__city">{ city }</span>,
 					', ',
-					<span class="jetpack-address__region">{ region }</span>,
+					<span className="jetpack-address__region">{ region }</span>,
 					' ',
-					<span class="jetpack-address__postal">{ postal }</span>,
+					<span className="jetpack-address__postal">{ postal }</span>,
 				] }
 			</div>
 		) }
 		{ ! city && ( region || postal ) && (
 			<div>
 				{ [
-					<span class="jetpack-address__region">{ region }</span>,
+					<span className="jetpack-address__region">{ region }</span>,
 					' ',
-					<span class="jetpack-address__postal">{ postal }</span>,
+					<span className="jetpack-address__postal">{ postal }</span>,
 				] }
 			</div>
 		) }
-		{ country && <div class="jetpack-address__country">{ country }</div> }
+		{ country && <div className="jetpack-address__country">{ country }</div> }
 	</Fragment>
 );
 

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

@@ -13,6 +13,7 @@ const ALLOWED_BLOCKS = [
 	'jetpack/email',
 	'jetpack/phone',
 	'jetpack/map',
+	'jetpack/business-hours',
 	'core/paragraph',
 	'core/image',
 	'core/heading',