Migrate CSS of PostTime and PostStatus blocks to CSS, plus a few tweaks

assets/stylesheets/_components.scss

@@ -37,8 +37,6 @@
 @import 'blocks/post-item/style';
 @import 'blocks/post-likes/style';
 @import 'blocks/post-share/style';
-@import 'blocks/post-status/style';
-@import 'blocks/post-time/style';
 @import 'blocks/privacy-policy-banner/style';
 @import 'blocks/sharing-preview-pane/style';
 @import 'blocks/site-address-changer/style';

client/blocks/post-status/docs/example.jsx

@@ -41,23 +41,27 @@ function PostStatusExample( { queries, primarySiteId, primarySiteUrl, globalIdBy
 	);
 }
 
+const queries = {
+	Scheduled: { status: 'future', number: 1, type: 'any' },
+	Trashed: { status: 'trash', number: 1, type: 'any' },
+	'Pending Review': { status: 'pending', number: 1, type: 'any' },
+	Sticky: { sticky: 'require', number: 1, type: 'any' },
+};
+
+const getFirstGlobalIdByQueryLabel = ( state, siteId ) =>
+	mapValues( queries, query => {
+		const postsForQuery = getPostsForQuery( state, siteId, query );
+		return get( postsForQuery, [ 0, 'global_ID' ] );
+	} );
+
 const ConnectedPostStatusExample = connect( state => {
 	const user = getCurrentUser( state );
 	const primarySiteId = get( user, 'primary_blog' );
-	const queries = {
-		Scheduled: { status: 'future', number: 1, type: 'any' },
-		Trashed: { status: 'trash', number: 1, type: 'any' },
-		'Pending Review': { status: 'pending', number: 1, type: 'any' },
-		Sticky: { sticky: 'require', number: 1, type: 'any' },
-	};
-
 	return {
 		queries,
 		primarySiteId,
 		primarySiteUrl: get( user, 'primary_blog_url' ),
-		globalIdByQueryLabel: mapValues( queries, query => {
-			return get( getPostsForQuery( state, primarySiteId, query ), [ 0, 'global_ID' ] );
-		} ),
+		globalIdByQueryLabel: getFirstGlobalIdByQueryLabel( state, primarySiteId ),
 	};
 } )( PostStatusExample );
 

client/blocks/post-status/index.jsx

@@ -16,6 +16,11 @@ import Gridicon from 'gridicons';
  */
 import { getNormalizedPost } from 'state/posts/selectors';
 
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
 export function PostStatus( { translate, post, showAll, showIcon = true } ) {
 	if ( ! post ) {
 		return null;
@@ -73,8 +78,6 @@ PostStatus.propTypes = {
 	showIcon: PropTypes.bool,
 };
 
-export default connect( ( state, { globalId } ) => {
-	return {
-		post: getNormalizedPost( state, globalId ),
-	};
-} )( localize( PostStatus ) );
+export default connect( ( state, { globalId } ) => ( {
+	post: getNormalizedPost( state, globalId ),
+} ) )( localize( PostStatus ) );

client/blocks/post-time/index.jsx

@@ -9,22 +9,29 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { includes } from 'lodash';
-import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
 import { getNormalizedPost } from 'state/posts/selectors';
+import withLocalizedMoment from 'components/with-localized-moment';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
 
 function getDisplayedTimeFromPost( moment, post ) {
+	const now = moment();
+
 	if ( ! post ) {
 		// Placeholder text: "a few seconds ago" in English locale
-		return moment().fromNow();
+		return now.fromNow();
 	}
 
 	const { status, modified, date } = post;
 	const time = moment( includes( [ 'draft', 'pending' ], status ) ? modified : date );
-	if ( time.isBefore( moment().subtract( 7, 'days' ) ) ) {
+	if ( now.diff( time, 'days' ) >= 7 ) {
 		// Like "Mar 15, 2013 6:23 PM" in English locale
 		return time.format( 'lll' );
 	}
@@ -34,11 +41,10 @@ function getDisplayedTimeFromPost( moment, post ) {
 }
 
 export function PostTime( { moment, post } ) {
-	const classes = classNames( 'post-time', {
-		'is-placeholder': ! post,
-	} );
+	const classes = classNames( 'post-time', { 'is-placeholder': ! post } );
+	const displayedTime = getDisplayedTimeFromPost( moment, post );
 
-	return <span className={ classes }>{ getDisplayedTimeFromPost( moment, post ) }</span>;
+	return <span className={ classes }>{ displayedTime }</span>;
 }
 
 PostTime.propTypes = {
@@ -47,8 +53,6 @@ PostTime.propTypes = {
 	post: PropTypes.object,
 };
 
-export default connect( ( state, { globalId } ) => {
-	return {
-		post: getNormalizedPost( state, globalId ),
-	};
-} )( localize( PostTime ) );
+export default connect( ( state, { globalId } ) => ( {
+	post: getNormalizedPost( state, globalId ),
+} ) )( withLocalizedMoment( PostTime ) );

client/post-editor/editor-post-type/index.jsx

@@ -14,19 +14,18 @@ import { localize } from 'i18n-calypso';
  * Internal dependencies
  */
 import { getEditedPost } from 'state/posts/selectors';
-import { getSelectedSite } from 'state/ui/selectors';
+import { getSelectedSiteId } from 'state/ui/selectors';
 import { getEditorPostId } from 'state/ui/editor/selectors';
 import { getPostType } from 'state/post-types/selectors';
 import QueryPostTypes from 'components/data/query-post-types';
 import { decodeEntities } from 'lib/formatting';
-import PostStatus from 'blocks/post-status';
 
 /**
  * Style dependencies
  */
 import './style.scss';
 
-function EditorPostType( { translate, siteId, typeSlug, type, globalId, isSettings } ) {
+function EditorPostType( { translate, siteId, typeSlug, type, isSettings } ) {
 	let label;
 	if ( 'page' === typeSlug ) {
 		if ( isSettings ) {
@@ -64,7 +63,7 @@ function EditorPostType( { translate, siteId, typeSlug, type, globalId, isSettin
 			{ siteId && 'page' !== typeSlug && 'post' !== typeSlug && (
 				<QueryPostTypes siteId={ siteId } />
 			) }
-			{ label } <PostStatus globalId={ globalId } showAll showIcon={ false } />
+			{ label }
 		</span>
 	);
 }
@@ -74,26 +73,24 @@ EditorPostType.propTypes = {
 	siteId: PropTypes.number,
 	typeSlug: PropTypes.string,
 	type: PropTypes.object,
-	globalId: PropTypes.string,
 	isSettings: PropTypes.bool,
 };
 
 export default connect( state => {
 	const props = {};
-	const site = getSelectedSite( state );
-	if ( ! site ) {
+	const siteId = getSelectedSiteId( state );
+	if ( ! siteId ) {
 		return props;
 	}
 
-	props.siteId = site.ID;
-	const post = getEditedPost( state, site.ID, getEditorPostId( state ) );
+	props.siteId = siteId;
+	const post = getEditedPost( state, siteId, getEditorPostId( state ) );
 	if ( ! post ) {
 		return props;
 	}
 
 	return Object.assign( props, {
 		typeSlug: post.type,
-		type: getPostType( state, site.ID, post.type ),
-		globalId: post.global_ID,
+		type: getPostType( state, siteId, post.type ),
 	} );
 } )( localize( EditorPostType ) );

client/post-editor/editor-post-type/style.scss

@@ -2,11 +2,4 @@
 	&.is-loading {
 		@include placeholder;
 	}
-
-	.post-status__text {
-		display: none;
-		color: var( --color-neutral-400 );
-		margin-left: 4px;
-		vertical-align: baseline;
-	}
 }