SiteSettings: Add timezone section to general settings.

client/components/select-dropdown/docs/example.jsx

@@ -52,7 +52,6 @@ var SelectDropdownDemo = React.createClass( {
 					<a className="design-assets__toggle button" onClick={ this.toggleButtons }>{ toggleButtonsText }</a>
 				</h2>
 
-
 				<h3>Items passed as options prop</h3>
 				<SelectDropdown
 					compact={ this.state.compactButtons }

client/components/select-dropdown/index.jsx

@@ -55,10 +55,17 @@ class SelectDropdown extends Component {
 		} );
 	}
 
-	componentWillReceiveProps() {
+	componentWillReceiveProps( nextProps ) {
 		if ( this.state.isOpen ) {
 			this.closeDropdown();
 		}
+
+		if (
+			typeof this.state.selected !== 'undefined' &&
+			this.props.initialSelected !== nextProps.initialSelected
+		) {
+			this.setState( { selected: nextProps.initialSelected } );
+		}
 	}
 
 	componentWillUnmount() {

client/components/select-dropdown/style.scss

@@ -48,6 +48,7 @@
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 18px;
+	height: 18px;
 	color: $gray-dark;
 	transition: background-color 0.2s ease;
 	cursor: pointer;

client/components/timezone-dropdown/docs/example.jsx

@@ -18,13 +18,13 @@ export default React.createClass( {
 
 	getInitialState() {
 		return {
-			timezone: 'Tokyo'
+			timezone: 'UTC+10'
 		};
 	},
 
-	onTimezoneSelect( zone ) {
-		console.log( 'timezone selected: %o', zone.value );
-		this.setState( { timezone: zone.label } );
+	onTimezoneSelect( timezone ) {
+		console.log( 'current zone: %o', timezone );
+		this.setState( { timezone: timezone.value } );
 	},
 
 	render() {

client/components/timezone-dropdown/index.jsx

@@ -1,4 +1,3 @@
-
 /**
  * External Dependencies
  */
@@ -83,7 +82,7 @@ class TimezoneDropdown extends Component {
 				className="timezone-dropdown"
 				valueLink={ this.props.valueLink }
 				options={ this.state.timezones }
-				selectedText={ this.props.selectedZone }
+				initialSelected={ this.props.selectedZone }
 				onSelect={ this.onSelect }
 			/>
 		);

client/lib/mixins/dirty-linked-state/README.md

@@ -16,8 +16,8 @@ app.TodoItem = React.createClass( {
     mixins: [ dirtyLinkedState ],
     render() {
       return ( 
-      	<input type="text" valueLink={ this.linkState( 'blogname' ) } />
-      	<input type="text" valueLink={ this.linkState( 'blogdescription' ) } /> 
+        <input type="text" valueLink={ this.linkState( 'blogname' ) } />
+        <input type="text" valueLink={ this.linkState( 'blogdescription' ) } /> 
       );
     }
 ```
@@ -42,5 +42,3 @@ After typing:
 	dirtyFields[ 'blogname' ]
 }
 ```
-
-

client/lib/wp/sync-handler/whitelist-handler.js

@@ -6,6 +6,7 @@ import debugFactory from 'debug';
 const debug = debugFactory( 'calypso:sync-handler:whitelist' );
 
 const whitelist = [
+	/^\/wpcom\/v\d\/timezones/,
 	/^\/me\/posts$/,
 	/^\/me\/settings/,
 	/^\/sites\/[\w.]+\/posts$/
@@ -26,5 +27,7 @@ export const isWhitelisted = params => {
 		}
 	}
 
+	debug( '%o is not whitelisted', path );
+
 	return false;
 }

client/my-sites/site-settings/form-general.jsx

@@ -25,6 +25,7 @@ import FormLabel from 'components/forms/form-label';
 import FormRadio from 'components/forms/form-radio';
 import FormCheckbox from 'components/forms/form-checkbox';
 import FormSettingExplanation from 'components/forms/form-setting-explanation';
+import TimezoneDropdown from 'components/timezone-dropdown';
 
 module.exports = React.createClass( {
 
@@ -33,9 +34,9 @@ module.exports = React.createClass( {
 	mixins: [ dirtyLinkedState, protectForm.mixin, formBase ],
 
 	getSettingsFromSite( site ) {
-		var settings;
 		site = site || this.props.site;
-		settings = {
+
+		const settings = {
 			blogname: site.name,
 			blogdescription: site.description,
 			fetchingSettings: site.fetchingSettings
@@ -45,6 +46,7 @@ module.exports = React.createClass( {
 			settings.lang_id = site.settings.lang_id;
 			settings.blog_public = site.settings.blog_public;
 			settings.admin_url = site.settings.admin_url;
+			settings.timezone_string = site.settings.timezone_string;
 			settings.jetpack_relatedposts_allowed = site.settings.jetpack_relatedposts_allowed;
 			settings.jetpack_sync_non_public_post_stati = site.settings.jetpack_sync_non_public_post_stati;
 
@@ -57,6 +59,19 @@ module.exports = React.createClass( {
 			if ( site.settings.holidaysnow ) {
 				settings.holidaysnow = site.settings.holidaysnow;
 			}
+
+			// handling `gmt_offset` and `timezone_string` values
+			let gmt_offset = site.settings.gmt_offset;
+
+			if (
+				! settings.timezone_string &&
+				typeof gmt_offset === 'string' &&
+				gmt_offset.length
+			) {
+				settings.timezone_string = 'UTC' +
+					( /\-/.test( gmt_offset ) ? '' : '+' ) +
+					gmt_offset;
+			}
 		}
 
 		return settings;
@@ -76,6 +91,7 @@ module.exports = React.createClass( {
 			blogname: '',
 			blogdescription: '',
 			lang_id: '',
+			timezone_string: '',
 			blog_public: '',
 			admin_url: '',
 			jetpack_relatedposts_allowed: false,
@@ -87,6 +103,18 @@ module.exports = React.createClass( {
 		} );
 	},
 
+	onTimezoneSelect( timezone ) {
+		this.setState( { timezone_string: timezone.value } );
+	},
+
+	onRecordEvent( eventAction ) {
+		return this.recordEvent.bind( this, eventAction );
+	},
+
+	onRecordEventOnce( key, eventAction ) {
+		return this.recordEventOnce.bind( this, key, eventAction );
+	},
+
 	siteOptions() {
 		return (
 			<div>
@@ -98,9 +126,10 @@ module.exports = React.createClass( {
 						type="text"
 						valueLink={ this.linkState( 'blogname' ) }
 						disabled={ this.state.fetchingSettings }
-						onClick={ this.recordEvent.bind( this, 'Clicked Site Title Field' ) }
-						onKeyPress={ this.recordEventOnce.bind( this, 'typedTitle', 'Typed in Site Title Field' ) } />
+						onClick={ this.onRecordEvent( 'Clicked Site Title Field' ) }
+						onKeyPress={ this.onRecordEventOnce( 'typedTitle', 'Typed in Site Title Field' ) } />
 				</FormFieldset>
+
 				<FormFieldset>
 					<FormLabel htmlFor="blogdescription">{ this.translate( 'Site Tagline' ) }</FormLabel>
 					<FormInput
@@ -109,12 +138,29 @@ module.exports = React.createClass( {
 						id="blogdescription"
 						valueLink={ this.linkState( 'blogdescription' ) }
 						disabled={ this.state.fetchingSettings }
-						onClick={ this.recordEvent.bind( this, 'Clicked Site Site Tagline Field' ) }
-						onKeyPress={ this.recordEventOnce.bind( this, 'typedTagline', 'Typed in Site Site Tagline Field' ) } />
+						onClick={ this.onRecordEvent( 'Clicked Site Site Tagline Field' ) }
+						onKeyPress={ this.onRecordEventOnce( 'typedTagline', 'Typed in Site Site Tagline Field' ) } />
 					<FormSettingExplanation>
 						{ this.translate( 'In a few words, explain what this site is about.' ) }
 					</FormSettingExplanation>
 				</FormFieldset>
+
+				<FormFieldset>
+					<FormLabel htmlFor="blogtimezone">
+						{ this.translate( 'Site Timezone' ) }
+					</FormLabel>
+
+					<TimezoneDropdown
+						valueLink={ this.linkState( 'timezone_string' ) }
+						selectedZone={ this.linkState( 'timezone_string' ).value }
+						disabled={ this.state.fetchingSettings }
+						onSelect={ this.onTimezoneSelect }
+					/>
+
+					<FormSettingExplanation>
+						{ this.translate( 'Choose a city in your timezone.' ) };
+					</FormSettingExplanation>
+				</FormFieldset>
 			</div>
 		);
 	},
@@ -183,7 +229,7 @@ module.exports = React.createClass( {
 					languages={ config( 'languages' ) }
 					valueLink={ this.linkState( 'lang_id' ) }
 					disabled={ this.state.fetchingSettings }
-					onClick={ this.recordEvent.bind( this, 'Clicked Language Field' ) } />
+					onClick={ this.onRecordEvent( 'Clicked Language Field' ) } />
 				<FormSettingExplanation>
 					{ this.translate( 'Language this blog is primarily written in.' ) }&nbsp;
 					<a href={ config.isEnabled( 'me/account' ) ? '/me/account' : '/settings/account/' }>
@@ -206,7 +252,7 @@ module.exports = React.createClass( {
 						checked={ 1 === parseInt( this.state.blog_public, 10 ) }
 						onChange={ this.handleRadio }
 						disabled={ this.state.fetchingSettings }
-						onClick={ this.recordEvent.bind( this, 'Clicked Site Visibility Radio Button' ) } />
+						onClick={ this.onRecordEvent( 'Clicked Site Visibility Radio Button' ) } />
 					<span>{ this.translate( 'Allow search engines to index this site' ) }</span>
 				</FormLabel>
 
@@ -217,7 +263,7 @@ module.exports = React.createClass( {
 						checked={ 0 === parseInt( this.state.blog_public, 10 ) }
 						onChange={ this.handleRadio }
 						disabled={ this.state.fetchingSettings }
-						onClick={ this.recordEvent.bind( this, 'Clicked Site Visibility Radio Button' ) } />
+						onClick={ this.onRecordEvent( 'Clicked Site Visibility Radio Button' ) } />
 					<span>{ this.translate( 'Discourage search engines from indexing this site' ) }</span>
 					<FormSettingExplanation className="inside-list is-indented">
 						{ this.translate( 'Note: This option does not block access to your site — it is up to search engines to honor your request.' ) }
@@ -232,7 +278,7 @@ module.exports = React.createClass( {
 							checked={ - 1 === parseInt( this.state.blog_public, 10 ) }
 							onChange={ this.handleRadio }
 							disabled={ this.state.fetchingSettings }
-							onClick={ this.recordEvent.bind( this, 'Clicked Site Visibility Radio Button' ) } />
+							onClick={ this.onRecordEvent( 'Clicked Site Visibility Radio Button' ) } />
 						<span>{ this.translate( 'I would like my site to be private, visible only to users I choose' ) }</span>
 					</FormLabel>
 				}
@@ -257,7 +303,7 @@ module.exports = React.createClass( {
 								className="tog"
 								checked={ 0 === parseInt( this.state.jetpack_relatedposts_enabled, 10 ) }
 								onChange={ this.handleRadio }
-								onClick={ this.recordEvent.bind( this, 'Clicked Related Posts Radio Button' ) } />
+								onClick={ this.onRecordEvent( 'Clicked Related Posts Radio Button' ) } />
 							<span>{ this.translate( 'Hide related content after posts' ) }</span>
 						</FormLabel>
 					</li>
@@ -269,7 +315,7 @@ module.exports = React.createClass( {
 								className="tog"
 								checked={ 1 === parseInt( this.state.jetpack_relatedposts_enabled, 10 ) }
 								onChange={ this.handleRadio }
-								onClick={ this.recordEvent.bind( this, 'Clicked Related Posts Radio Button' ) } />
+								onClick={ this.onRecordEvent( 'Clicked Related Posts Radio Button' ) } />
 							<span>{ this.translate( 'Show related content after posts' ) }</span>
 						</FormLabel>
 						<ul id="settings-reading-relatedposts-customize" className={ 1 === parseInt( this.state.jetpack_relatedposts_enabled, 10 ) ? null : 'disabled-block' }>