diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
index 1cd62222c0c67..b64ca662af579 100644
--- a/assets/stylesheets/_components.scss
+++ b/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';
diff --git a/client/blocks/post-status/docs/example.jsx b/client/blocks/post-status/docs/example.jsx
index da05e1c8c08e6..1120afb033508 100644
--- a/client/blocks/post-status/docs/example.jsx
+++ b/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 );
diff --git a/client/blocks/post-status/index.jsx b/client/blocks/post-status/index.jsx
index bff2eb5142511..c8bfde36498ea 100644
--- a/client/blocks/post-status/index.jsx
+++ b/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 ) );
diff --git a/client/blocks/post-time/index.jsx b/client/blocks/post-time/index.jsx
index 8c8c918eb3100..3254f935e047b 100644
--- a/client/blocks/post-time/index.jsx
+++ b/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 { getDisplayedTimeFromPost( moment, post ) };
+ return { displayedTime };
}
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 ) );
diff --git a/client/post-editor/editor-post-type/index.jsx b/client/post-editor/editor-post-type/index.jsx
index 824ecdc30ec9c..4a450f5c88db8 100644
--- a/client/post-editor/editor-post-type/index.jsx
+++ b/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 && (
) }
- { label }
+ { label }
);
}
@@ -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 ) );
diff --git a/client/post-editor/editor-post-type/style.scss b/client/post-editor/editor-post-type/style.scss
index d8c830b4489f3..606ba61666e28 100644
--- a/client/post-editor/editor-post-type/style.scss
+++ b/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;
- }
}