Site editor sidebar: add page details (#50767)

* setting the stage for page detail

* fix padding issues

* Filling in the details :)

* 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

* Adding SVG icons for status labels

Removing duped/unused test expectations
De-nesting BEM rules
Remove unused comments
i18n

* Removing duped/unused test expectations
De-nesting BEM rules
Remove unused comments
i18n

* Displaying templates

* We no longer need to pass down a className to SidebarNavigationScreen. Reverting.

* style changes page detail site editor

* Update colors

* Ensuring that getFeaturedMediaDetails can be used locally.
Importing getFeaturedMediaDetails into privateApis for the editor package.
Removing unnecessary conditional checks
Escaping HTML and other values for rendering in page and attributes - adding escape-html to package.json
Don't render details when we don't have a record

* Let's show password protected and private page status as well.

---------

Co-authored-by: ramon <ramonjd@gmail.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>

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',
@@ -643,5 +643,20 @@ describe( 'Moment.js Localization', () => {
 				)
 			).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' );
+		} );
 	} );
 } );

packages/edit-site/package.json

@@ -43,6 +43,7 @@
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
+		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
@@ -54,13 +55,15 @@
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/preferences": "file:../preferences",
+		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/router": "file:../router",
 		"@wordpress/style-engine": "file:../style-engine",
 		"@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",

packages/edit-site/src/components/sidebar-navigation-data-list/data-list-item.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+
+export default function DataListItem( { label, value } ) {
+	return (
+		<HStack
+			className="edit-site-sidebar-navigation_data-list__item"
+			key={ label }
+			spacing={ 5 }
+			alignment="left"
+		>
+			<Text className="edit-site-sidebar-navigation_data-list__label">
+				{ label }
+			</Text>
+			<Text className="edit-site-sidebar-navigation_data-list__value">
+				{ value }
+			</Text>
+		</HStack>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-data-list/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import DataListItem from './data-list-item';
+
+export default function SidebarDetails( { details } ) {
+	return (
+		<VStack
+			className="edit-site-sidebar-navigation_data-list"
+			spacing={ 5 }
+		>
+			{ details.map( ( detail ) => (
+				<DataListItem
+					key={ detail.label }
+					label={ detail.label }
+					value={ detail.value }
+				/>
+			) ) }
+		</VStack>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-data-list/style.scss

@@ -0,0 +1,12 @@
+
+
+.edit-site-sidebar-navigation_data-list__item {
+	.edit-site-sidebar-navigation_data-list__label {
+		color: $gray-600;
+		width: 100px;
+	}
+
+	.edit-site-sidebar-navigation_data-list__value.edit-site-sidebar-navigation_data-list__value {
+		color: $gray-200;
+	}
+}

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 {