diff --git a/client/gutenberg/extensions/business-hours/components/day.jsx b/client/gutenberg/extensions/business-hours/components/day-edit.jsx
similarity index 95%
rename from client/gutenberg/extensions/business-hours/components/day.jsx
rename to client/gutenberg/extensions/business-hours/components/day-edit.jsx
index 429943b1ffac4b..f0120c621f0754 100644
--- a/client/gutenberg/extensions/business-hours/components/day.jsx
+++ b/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 {
-
+
{ __( 'Add Hours' ) }
@@ -201,4 +197,4 @@ class Day extends Component {
}
}
-export default Day;
+export default DayEdit;
diff --git a/client/gutenberg/extensions/business-hours/components/day-save.jsx b/client/gutenberg/extensions/business-hours/components/day-preview.jsx
similarity index 60%
rename from client/gutenberg/extensions/business-hours/components/day-save.jsx
rename to client/gutenberg/extensions/business-hours/components/day-preview.jsx
index 7af57956f66083..34cb6539dd45bd 100644
--- a/client/gutenberg/extensions/business-hours/components/day-save.jsx
+++ b/client/gutenberg/extensions/business-hours/components/day-preview.jsx
@@ -11,11 +11,14 @@ 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 );
@@ -23,32 +26,33 @@ class DaySave extends Component {
renderInterval = ( interval, key ) => {
return (
- ! isEmpty( interval.opening ) &&
- ! isEmpty( interval.closing ) && (
-
- { sprintf(
- _x( 'From %s to %s', 'from business opening hour to closing hour' ),
- this.formatTime( interval.opening ),
- this.formatTime( interval.closing )
- ) }
-
- )
+
+ { sprintf(
+ _x( 'From %s to %s', 'from business opening hour to closing hour' ),
+ this.formatTime( interval.opening ),
+ this.formatTime( interval.closing )
+ ) }
+
);
};
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 (
{ localization.days[ day.name ] }
- { isEmpty( day.hours ) ? (
+ { isEmpty( hours ) ? (
{ _x( 'Closed', 'business is closed on a full day' ) }
) : (
- day.hours.map( this.renderInterval )
+ hours.map( this.renderInterval )
) }
);
}
}
-export default DaySave;
+export default DayPreview;
diff --git a/client/gutenberg/extensions/business-hours/edit.jsx b/client/gutenberg/extensions/business-hours/edit.jsx
index cfa1665ea2fb8e..a227446b2a92ef 100644
--- a/client/gutenberg/extensions/business-hours/edit.jsx
+++ b/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 (
+
}
+ label={ __( 'Loading business hours' ) }
+ />
+ );
+ }
+
+ if ( ! isSelected ) {
const settings = __experimentalGetSettings();
const {
formats: { time },
@@ -67,21 +77,24 @@ class BusinessHours extends Component {
{ localizedWeek.map( ( day, key ) => {
return (
-
+
);
} ) }
);
}
- if ( ! hasFetched ) {
- return
;
- }
-
return (
{ localizedWeek.map( ( day, key ) => {
- return ;
+ return (
+
+ );
} ) }
);
diff --git a/client/gutenberg/extensions/business-hours/editor.scss b/client/gutenberg/extensions/business-hours/editor.scss
index ce03966b7cc78e..9eaa449f994eeb 100644
--- a/client/gutenberg/extensions/business-hours/editor.scss
+++ b/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,
diff --git a/client/gutenberg/extensions/business-hours/index.js b/client/gutenberg/extensions/business-hours/index.js
index 62ca55d01e5a28..3a8c31c8ee29b0 100644
--- a/client/gutenberg/extensions/business-hours/index.js
+++ b/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 =>
,
+ edit: props =>
,
- save: props =>
,
+ save: () => null,
};
diff --git a/client/gutenberg/extensions/contact-form/index.js b/client/gutenberg/extensions/contact-form/index.js
index 209849e1c0b9b3..159429b0f9b575 100644
--- a/client/gutenberg/extensions/contact-form/index.js
+++ b/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(
diff --git a/client/gutenberg/extensions/contact-info/address/edit.js b/client/gutenberg/extensions/contact-info/address/edit.js
index ac65a3ef684f7a..bedb32b13c04d8 100644
--- a/client/gutenberg/extensions/contact-info/address/edit.js
+++ b/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 }
-
-
- { externalLink }
- { hasContent && }
- { hasContent && (
-
-
- { __( 'Visit Google Maps' ) }
-
-
- ) }
-
-
) }
diff --git a/client/gutenberg/extensions/contact-info/address/save.js b/client/gutenberg/extensions/contact-info/address/save.js
index 554e89171050cf..54957ef0aa5498 100644
--- a/client/gutenberg/extensions/contact-info/address/save.js
+++ b/client/gutenberg/extensions/contact-info/address/save.js
@@ -17,35 +17,37 @@ const Address = ( {
attributes: { address, addressLine2, addressLine3, city, region, postal, country },
} ) => (