From 0e598d51632419385692ad30fbcf773a925f7fc6 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 16 May 2023 09:16:04 +1000 Subject: [PATCH 01/12] setting the stage for page detail --- .../sidebar-navigation-data-list/index.js | 33 +++ .../sidebar-navigation-data-list/style.scss | 5 + .../sidebar-navigation-screen-page/index.js | 240 +++++++++++++++++- .../sidebar-navigation-screen/index.js | 16 +- .../sidebar-navigation-screen/style.scss | 39 ++- .../sidebar-navigation-subtitle/style.scss | 2 +- packages/edit-site/src/style.scss | 1 + 7 files changed, 319 insertions(+), 17 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-data-list/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-data-list/style.scss diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/index.js b/packages/edit-site/src/components/sidebar-navigation-data-list/index.js new file mode 100644 index 00000000000000..5cfcb3674e7d16 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-data-list/index.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalText as Text, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ + +export default function SidebarDetails( { details } ) { + return ( + + { details.map( ( detail ) => ( + + + { detail.label } + + + { detail.value } + + + ) ) } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss new file mode 100644 index 00000000000000..4bbce5222f25c1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss @@ -0,0 +1,5 @@ +.edit-site-sidebar-data-list { + .edit-site-sidebar-data-list__label { + color: $gray-600; + } +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index 5acfc98ffe52c1..5bdce47b876328 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -5,6 +5,9 @@ import { __ } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { __experimentalUseNavigator as useNavigator, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalText as Text, ExternalLink, } from '@wordpress/components'; import { useEntityRecord } from '@wordpress/core-data'; @@ -18,6 +21,8 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import { unlock } from '../../private-apis'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; +import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; +import SidebarDetails from '../sidebar-navigation-data-list'; export default function SidebarNavigationScreenPage() { const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); @@ -36,24 +41,231 @@ export default function SidebarNavigationScreenPage() { icon={ pencil } /> } - description={ __( - 'Pages are static and are not listed by date. Pages do not use tags or categories.' - ) } + meta={ + record ? ( + + { record?.link && ( + + { record.link } + + ) } + + + ) : null + } + footer={ + record && ( + + ) + } content={ <> - { record?.link ? ( - - { record.link } - - ) : null } - { record - ? decodeEntities( record?.description?.rendered ) - : null } + { + { record?.excerpt?.raw && ( + { decodeEntities( record?.excerpt?.raw ) } + ) } + + Details + + } /> ); } + +const statusLabels = { + publish: 'Published', + future: 'Scheduled', + draft: 'Draft', + pending: 'Pending', +}; + +function relativeTime( date1, date2 ) { + const diffInSeconds = Math.abs( date1.getTime() - date2.getTime() ) / 1000; + + const units = [ + { name: 'second', limit: 60, in_seconds: 1 }, + { name: 'minute', limit: 3600, in_seconds: 60 }, + { name: 'hour', limit: 86400, in_seconds: 3600 }, + { name: 'day', limit: 604800, in_seconds: 86400 }, + { name: 'week', limit: 2629743, in_seconds: 604800 }, + { name: 'month', limit: 31556926, in_seconds: 2629743 }, + { name: 'year', limit: Infinity, in_seconds: 31556926 }, + ]; + + let i = 0, + unit; + while ( ( unit = units[ i++ ] ) ) { + if ( diffInSeconds < unit.limit || ! unit.limit ) { + const diff = Math.floor( diffInSeconds / unit.in_seconds ); + return ( + diff + + ' ' + + unit.name + + ( diff > 1 ? 's' : '' ) + + ' ' + + ( date1 > date2 ? 'ago' : 'from now' ) + ); + } + } +} + +export const PostStatus = ( { status, date } ) => { + const statusLabel = statusLabels[ status ] ?? 'Unknown'; + const formattedDate = date + ? relativeTime( new Date(), new Date( date ) ) + : null; + + return ( + + { /* */ } + { statusLabel } + { formattedDate && { formattedDate } } + + ); +}; + +// const StatusIcon = ( { status } ) => { +// switch ( status ) { +// case 'draft': +// return ; +// case 'pending': +// return ; +// case 'future': +// return ; +// case 'publish': +// return ; +// } +// return null; +// }; + +const PostModified = ( { date } ) => { + return ( + +
+ + Last modified { relativeTime( new Date(), new Date( date ) ) }{ ' ' } + by Dan + + + ); +}; + +// const DraftIcon = () => ( +// +// +// +// ); + +// const PendingIcon = () => ( +// +// +// +// +// +// +// +// +// +// +// +// ); + +// const ScheduledIcon = () => ( +// +// +// +// +// +// +// +// +// +// +// +// ); + +// const PublishIcon = () => ( +// +// +// +// +// +// +// +// +// +// +// +// ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 77b9bedba3e655..a1bd2cacb60e21 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -27,7 +27,9 @@ export default function SidebarNavigationScreen( { isRoot, title, actions, + meta, content, + footer, description, } ) { const { dashboardLink } = useSelect( ( select ) => { @@ -40,7 +42,7 @@ export default function SidebarNavigationScreen( { const theme = getTheme( currentlyPreviewingTheme() ); return ( - + { actions } + { meta && ( + <> +
+ { meta } +
+ + ) } + { footer && ( +
+ { footer } +
+ ) } ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index b72edaba63f7df..2605e3da345880 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -6,8 +6,38 @@ } .edit-site-sidebar-navigation-screen__content { + margin: 0 0 $grid-unit-20 0; + color: $gray-400; + padding: $grid-unit-20; + .components-text { + color: $gray-400; + } + //z-index: z-index(".edit-site-sidebar-navigation-screen__content"); +} + +.edit-site-sidebar-navigation-screen__meta { + margin: 0 0 $grid-unit-20 0; + color: $gray-400; + margin-left: $grid-unit-20; + .components-text { + color: $gray-400; + } + //z-index: z-index(".edit-site-sidebar-navigation-screen__content"); +} + +.edit-site-sidebar-modified { margin: 0 0 $grid-unit-20 0; color: $gray-600; + margin-left: $grid-unit-20; + .components-text { + color: $gray-600; + } + .edit-site-sidebar-modified__avatar { + width: 16px; + height: 16px; + border-radius: 999px; + background: $gray-700; + } //z-index: z-index(".edit-site-sidebar-navigation-screen__content"); } @@ -22,10 +52,17 @@ .components-external-link__icon { margin-left: $grid-unit-05; } - margin-left: $grid-unit-20; display: inline-block; } +.edit-site-sidebar-navigation-screen__page-image { + width: 100%; + border-radius: 2px; + margin-bottom: $grid-unit-20; + display: block; + max-height: 128px; +} + .edit-site-sidebar-navigation-screen__title-icon { position: sticky; top: 0; diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss index 735145ca1d80ce..53124a298f63af 100644 --- a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss @@ -3,5 +3,5 @@ text-transform: uppercase; font-weight: 500; font-size: 11px; - padding: $grid-unit-20 0 0 $grid-unit-20; + padding: $grid-unit-20 0 $grid-unit-10; } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 3be15cd02d2599..aa922a7feac97e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -29,6 +29,7 @@ @import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; @import "./components/sidebar-navigation-subtitle/style.scss"; +@import "./components/sidebar-navigation-data-list/style.scss"; @import "./components/site-hub/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; @import "./components/site-icon/style.scss"; From 237a864b6bdb1fe3237ad4eba1c6497e7a8145dd Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 16 May 2023 09:37:29 +1000 Subject: [PATCH 02/12] fix padding issues --- .../sidebar-navigation-screen-navigation-menus/style.scss | 2 +- .../src/components/sidebar-navigation-screen/style.scss | 7 +++++-- .../src/components/sidebar-navigation-subtitle/style.scss | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss index e594fa0384e1db..6ecf61df710a47 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss @@ -1,5 +1,5 @@ .edit-site-sidebar-navigation-screen__description { - margin: 0 0 $grid-unit-40 $grid-unit-20; + margin: 0 0 $grid-unit-40 0; } .edit-site-sidebar-navigation-screen-navigation-menus__content { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 2605e3da345880..5efcd29bf1313e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -8,7 +8,11 @@ .edit-site-sidebar-navigation-screen__content { margin: 0 0 $grid-unit-20 0; color: $gray-400; - padding: $grid-unit-20; + padding: 0 $grid-unit-20; + .components-item-group { + margin-left: -$grid-unit-20; + margin-right: -$grid-unit-20; + } .components-text { color: $gray-400; } @@ -80,7 +84,6 @@ } .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container { - margin-left: $grid-unit-20; .edit-site-global-styles-variations_item-preview { border: $gray-900 $border-width solid; } diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss index 53124a298f63af..e44f9f39d7b90f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss @@ -3,5 +3,5 @@ text-transform: uppercase; font-weight: 500; font-size: 11px; - padding: $grid-unit-20 0 $grid-unit-10; + padding: $grid-unit-10 0; } From f38ff6929cae8963f88bf6be4815fbadfe3aa14e Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 16 May 2023 16:24:30 +1000 Subject: [PATCH 03/12] Filling in the details :) --- .../sidebar-navigation-screen-page/index.js | 109 ++++++++++++++++-- 1 file changed, 101 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index 5bdce47b876328..4cda481b2832c4 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __experimentalUseNavigator as useNavigator, __experimentalHStack as HStack, @@ -10,7 +10,11 @@ import { __experimentalText as Text, ExternalLink, } from '@wordpress/components'; -import { useEntityRecord } from '@wordpress/core-data'; +import { + store as coreStore, + useEntityRecord, + useEntityRecords, +} from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; @@ -24,12 +28,102 @@ import SidebarButton from '../sidebar-button'; import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; import SidebarDetails from '../sidebar-navigation-data-list'; +function countWordsInHTML( htmlString ) { + const parser = new window.DOMParser(); + const doc = parser.parseFromString( htmlString, 'text/html' ); + + let wordCount = 0; + + function countWords( node ) { + if ( node.nodeType === 3 ) { + const text = node.textContent.trim(); + + if ( text !== '' ) { + const words = text.split( /\s+/ ); + wordCount += words.length; + } + } else if ( node.nodeType === 1 ) { + const children = node.childNodes; + for ( let i = 0; i < children.length; i++ ) { + countWords( children[ i ] ); + } + } + } + + countWords( doc.body ); + return wordCount; +} +const estimateReadingTime = ( wordCount, wordsPerMinute = 200 ) => + Math.ceil( wordCount / wordsPerMinute ); + +function getPageDetails( page ) { + if ( ! page ) { + return []; + } + + const wordCount = countWordsInHTML( page?.content?.rendered ) || 0; + const readingTime = estimateReadingTime( wordCount ); + + return [ + { + label: 'Template', + value: page?.templateTitle, + }, + { + label: 'Parent', + value: page?.parentTitle, + }, + { + label: 'Words', + value: wordCount.toLocaleString() || 'Unknown', + }, + { + label: 'Time to read', + value: + readingTime > 1 + ? `${ readingTime.toLocaleString() } mins` + : '1 min', + }, + ]; +} + export default function SidebarNavigationScreenPage() { const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { params: { postId }, } = useNavigator(); + const { record } = useEntityRecord( 'postType', 'page', postId ); + const { records: templates, isResolving: areTemplatesLoading } = + useEntityRecords( 'postType', 'wp_template', { + per_page: -1, + } ); + + const templateTitle = areTemplatesLoading + ? '' + : templates?.find( ( template ) => template?.slug === record?.template ) + ?.title?.rendered || 'Default'; + + const parentTitle = useSelect( + ( select ) => { + const parent = record?.parent + ? select( coreStore ).getEntityRecord( + 'postType', + 'page', + record.parent + ) + : null; + + if ( parent ) { + return parent?.title?.rendered + ? decodeEntities( parent.title.rendered ) + : 'No title'; + } + + return 'Top level'; + }, + [ record ] + ); return ( } From b027db41c873a3182332de81b68c3b0767673556 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 22 May 2023 16:32:39 +1000 Subject: [PATCH 04/12] This commit: - exports `getMediaDetails()` from the post-featured-image sidebar component and uses it if there's a featured image in the post record - cleans up components and unused functions - uses available wordcount and readtime functions - implements i18n strings - shuffles page-specific styles around - update package log after importing @wordpress/wordcount - truncating titles and other long excerpts - adding status icons - adding featured image description and loading placeholder --- package-lock.json | 25 +- packages/date/src/test/index.js | 31 +- packages/edit-site/package.json | 1 + .../sidebar-navigation-data-list/index.js | 13 +- .../sidebar-navigation-data-list/style.scss | 10 +- .../sidebar-navigation-screen-page/index.js | 490 ++++++++---------- .../sidebar-navigation-screen-page/style.scss | 110 ++++ .../sidebar-navigation-screen-pages/index.js | 12 +- .../sidebar-navigation-screen/index.js | 3 +- .../sidebar-navigation-screen/style.scss | 36 +- packages/edit-site/src/style.scss | 1 + packages/editor/src/components/index.js | 5 +- .../components/post-featured-image/index.js | 2 +- 13 files changed, 423 insertions(+), 316 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss diff --git a/package-lock.json b/package-lock.json index 9a9358f11a53fa..3a9abff6cc62d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17778,6 +17778,7 @@ "@wordpress/url": "file:packages/url", "@wordpress/viewport": "file:packages/viewport", "@wordpress/widgets": "file:packages/widgets", + "@wordpress/wordcount": "file:packages/wordcount", "classnames": "^2.3.1", "colord": "^2.9.2", "downloadjs": "^1.4.7", @@ -25879,7 +25880,7 @@ "array-ify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz", - "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=", + "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==", "dev": true }, "array-includes": { @@ -31048,7 +31049,7 @@ "debuglog": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=", + "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==", "dev": true }, "decache": { @@ -35890,7 +35891,7 @@ "git-remote-origin-url": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz", - "integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=", + "integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==", "dev": true, "requires": { "gitconfiglocal": "^1.0.0", @@ -35937,7 +35938,7 @@ "gitconfiglocal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz", - "integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=", + "integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==", "dev": true, "requires": { "ini": "^1.3.2" @@ -37211,7 +37212,7 @@ "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", + "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", "dev": true, "requires": { "ms": "^2.0.0" @@ -38227,7 +38228,7 @@ "is-text-path": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz", - "integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=", + "integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==", "dev": true, "requires": { "text-extensions": "^1.0.0" @@ -40000,7 +40001,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", + "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==", "dev": true }, "jsprim": { @@ -41100,7 +41101,7 @@ "lodash.ismatch": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz", - "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", + "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==", "dev": true }, "lodash.isplainobject": { @@ -48603,7 +48604,7 @@ "promzard": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz", - "integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=", + "integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==", "dev": true, "requires": { "read": "1" @@ -48637,7 +48638,7 @@ "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", - "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=", + "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", "dev": true }, "protocols": { @@ -50194,7 +50195,7 @@ "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", - "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=", + "integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==", "dev": true, "requires": { "mute-stream": "~0.0.4" @@ -55551,7 +55552,7 @@ "temp-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz", - "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=", + "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==", "dev": true }, "terminal-link": { diff --git a/packages/date/src/test/index.js b/packages/date/src/test/index.js index ff82748e02f23a..1832d4c7c55a2b 100644 --- a/packages/date/src/test/index.js +++ b/packages/date/src/test/index.js @@ -623,7 +623,7 @@ describe( 'Moment.js Localization', () => { } ); describe( 'humanTimeDiff', () => { - it( 'should return human readable time differences', () => { + it( 'should return human readable time differences in the past', () => { expect( humanTimeDiff( '2023-04-28T11:00:00.000Z', @@ -642,6 +642,35 @@ describe( 'Moment.js Localization', () => { '2023-04-30T13:00:00.000Z' ) ).toBe( '2 days ago' ); + + expect( + humanTimeDiff( + '2023-04-28T11:00:00.000Z', + '2023-04-28T13:00:00.000Z' + ) + ).toBe( '2 hours ago' ); + + expect( + humanTimeDiff( + '2023-04-26T13:00:00.000Z', + '2023-04-28T13:00:00.000Z' + ) + ).toBe( '2 days ago' ); + } ); + + it( 'should return human readable time differences in the future', () => { + // Future. + const now = new Date(); + const twoHoursLater = new Date( + now.getTime() + 2 * 60 * 60 * 1000 + ); + expect( humanTimeDiff( twoHoursLater ) ).toBe( 'in 2 hours' ); + + const twoDaysLater = new Date( + now.getTime() + 2 * 24 * 60 * 60 * 1000 + ); // Adding 2 days in milliseconds + + expect( humanTimeDiff( twoDaysLater ) ).toBe( 'in 2 days' ); } ); } ); } ); diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 8eba789d5713ed..265f18b9a95974 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -61,6 +61,7 @@ "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", "@wordpress/widgets": "file:../widgets", + "@wordpress/wordcount": "file:../wordcount", "classnames": "^2.3.1", "colord": "^2.9.2", "downloadjs": "^1.4.7", diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/index.js b/packages/edit-site/src/components/sidebar-navigation-data-list/index.js index 5cfcb3674e7d16..a6e63a036950fa 100644 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-data-list/index.js @@ -13,17 +13,20 @@ import { export default function SidebarDetails( { details } ) { return ( - + { details.map( ( detail ) => ( - + { detail.label } - + { detail.value } diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss index 4bbce5222f25c1..792930fe711926 100644 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss @@ -1,5 +1,7 @@ -.edit-site-sidebar-data-list { - .edit-site-sidebar-data-list__label { - color: $gray-600; - } +.edit-site-sidebar-navigation_data-list__label { + color: $gray-600; +} + +.edit-site-sidebar-navigation_data-list__item .edit-site-sidebar-navigation_data-list__value { + color: $white; } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index 4cda481b2832c4..d0f71ca943f2e9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -1,7 +1,12 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { __experimentalUseNavigator as useNavigator, @@ -9,6 +14,7 @@ import { __experimentalVStack as VStack, __experimentalText as Text, ExternalLink, + __experimentalTruncate as Truncate, } from '@wordpress/components'; import { store as coreStore, @@ -17,6 +23,10 @@ import { } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; +import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date'; +import { count as wordCount } from '@wordpress/wordcount'; +import { getMediaDetails } from '@wordpress/editor'; +import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies @@ -28,63 +38,131 @@ import SidebarButton from '../sidebar-button'; import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; import SidebarDetails from '../sidebar-navigation-data-list'; -function countWordsInHTML( htmlString ) { - const parser = new window.DOMParser(); - const doc = parser.parseFromString( htmlString, 'text/html' ); - - let wordCount = 0; - - function countWords( node ) { - if ( node.nodeType === 3 ) { - const text = node.textContent.trim(); +// Taken from packages/editor/src/components/time-to-read/index.js. +const AVERAGE_READING_RATE = 189; - if ( text !== '' ) { - const words = text.split( /\s+/ ); - wordCount += words.length; - } - } else if ( node.nodeType === 1 ) { - const children = node.childNodes; - for ( let i = 0; i < children.length; i++ ) { - countWords( children[ i ] ); - } - } +function StatusLabel( { status, date } ) { + const relateToNow = humanTimeDiff( date ); + let statusLabel = ''; + switch ( status ) { + case 'publish': + statusLabel = createInterpolateElement( + sprintf( + /* translators: %s: is the relative time when the post was published. */ + __( 'Published ' ), + relateToNow + ), + { time: