From 0f733d6525b73c27ee5fa838f9323b1d1a1fe042 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 5 Jun 2023 16:44:50 +1000
Subject: [PATCH] Initial commit: - refactoring page details so that the styles
 and components can be used in templates - getting home template details in
 order

---
 .../index.js                                  | 38 ++++++++
 ...r-navigation-screen-details-panel-label.js | 14 +++
 ...bar-navigation-screen-details-panel-row.js | 20 ++++
 ...r-navigation-screen-details-panel-value.js | 14 +++
 .../style.scss                                | 22 +++++
 .../sidebar-navigation-screen-page/index.js   |  4 -
 .../page-details.js                           | 34 +++----
 .../sidebar-navigation-screen-page/style.scss | 13 +--
 .../home-template-details.js                  | 97 +++++++++++++++++++
 .../index.js                                  | 14 ++-
 .../sidebar-navigation-subtitle/index.js      |  5 -
 .../sidebar-navigation-subtitle/style.scss    |  7 --
 packages/edit-site/src/style.scss             |  2 +-
 13 files changed, 233 insertions(+), 51 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-subtitle/index.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js
new file mode 100644
index 0000000000000..695c4c4a7dcaa
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenDetailsPanelLabel from './sidebar-navigation-screen-details-panel-label';
+import SidebarNavigationScreenDetailsPanelRow from './sidebar-navigation-screen-details-panel-row';
+import SidebarNavigationScreenDetailsPanelValue from './sidebar-navigation-screen-details-panel-value';
+
+function SidebarNavigationScreenDetailsPanel( { title, children } ) {
+	return (
+		<VStack
+			className="edit-site-sidebar-navigation-details-screen-panel"
+			spacing={ 5 }
+		>
+			<Heading
+				className="edit-site-sidebar-navigation-details-screen-panel__heading"
+				level={ 3 }
+			>
+				{ title }
+			</Heading>
+			{ children }
+		</VStack>
+	);
+}
+
+export {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+};
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js
new file mode 100644
index 0000000000000..157eecd557519
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelLabel( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__label">
+			{ children }
+		</Text>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
new file mode 100644
index 0000000000000..381cd1fc4aaf3
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelRow( {
+	label,
+	children,
+} ) {
+	return (
+		<HStack
+			key={ label }
+			spacing={ 5 }
+			alignment="left"
+			className="edit-site-sidebar-navigation-details-screen-panel__row"
+		>
+			{ children }
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js
new file mode 100644
index 0000000000000..80e8ba8cf1d53
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelValue( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__value">
+			{ children }
+		</Text>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
new file mode 100644
index 0000000000000..6abe94a61ddca
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
@@ -0,0 +1,22 @@
+.edit-site-sidebar-navigation-details-screen-panel {
+	margin-bottom: $grid-unit-30;
+
+	.edit-site-sidebar-navigation-details-screen-panel__heading {
+		color: $gray-400;
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 11px;
+		padding: $grid-unit-10 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__label {
+	color: $gray-600;
+	width: 100px;
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
+	color: $gray-200;
+}
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 5e0c113b3544a..68cecbf3b1830 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
@@ -31,7 +31,6 @@ 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 PageDetails from './page-details';
 import PageActions from '../page-actions';
 
@@ -136,9 +135,6 @@ export default function SidebarNavigationScreenPage() {
 							{ stripHTML( record.excerpt.rendered ) }
 						</Truncate>
 					) }
-					<SidebarNavigationSubtitle>
-						{ __( 'Details' ) }
-					</SidebarNavigationSubtitle>
 					<PageDetails id={ postId } />
 				</>
 			}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 5249124577034..4b43905b7a255 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { count as wordCount } from '@wordpress/wordcount';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -19,6 +14,12 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import StatusLabel from './status-label';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 // Taken from packages/editor/src/components/time-to-read/index.js.
 const AVERAGE_READING_RATE = 189;
@@ -138,26 +139,21 @@ export default function PageDetails( { id } ) {
 		[ record ]
 	);
 	return (
-		<VStack spacing={ 5 }>
+		<SidebarNavigationScreenDetailsPanel title={ __( 'Details' ) }>
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,
 				...record,
 			} ).map( ( { label, value } ) => (
-				<HStack
-					key={ label }
-					spacing={ 5 }
-					alignment="left"
-					className="edit-site-sidebar-navigation-screen-page__details"
-				>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+				<SidebarNavigationScreenDetailsPanelRow key={ label }>
+					<SidebarNavigationScreenDetailsPanelLabel>
 						{ label }
-					</Text>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
 						{ value }
-					</Text>
-				</HStack>
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
 			) ) }
-		</VStack>
+		</SidebarNavigationScreenDetailsPanel>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
index 6ec9e565f9e8f..b817506bab479 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
@@ -30,6 +30,7 @@
 
 .edit-site-sidebar-navigation-screen-page__excerpt {
 	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-20;
 }
 
 .edit-site-sidebar-navigation-screen-page__modified {
@@ -60,15 +61,3 @@
 		fill: $alert-green;
 	}
 }
-
-.edit-site-sidebar-navigation-screen-page__details {
-	.edit-site-sidebar-navigation-screen-page__details-label {
-		color: $gray-600;
-		width: 100px;
-	}
-
-	.edit-site-sidebar-navigation-screen-page__details-value.edit-site-sidebar-navigation-screen-page__details-value {
-		color: $gray-200;
-	}
-}
-
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
new file mode 100644
index 0000000000000..85cfce53d0706
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { CheckboxControl } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
+
+export default function HomeTemplateDetails() {
+	const { commentOrder, isHomePageBlog, postsPerPage, siteTitle } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const { getSettings } = select( blockEditorStore );
+
+			return {
+				isHomePageBlog:
+					siteSettings?.page_for_posts ===
+					siteSettings?.page_on_front,
+				siteTitle: siteSettings?.title,
+				postsPerPage: siteSettings?.posts_per_page,
+				commentOrder:
+					getSettings()?.__experimentalDiscussionSettings
+						?.commentOrder,
+			};
+		},
+		[]
+	);
+
+	const noop = () => {};
+
+	return (
+		<>
+			<SidebarNavigationScreenDetailsPanel title={ __( 'Settings' ) }>
+				{ isHomePageBlog && (
+					<SidebarNavigationScreenDetailsPanelRow>
+						<SidebarNavigationScreenDetailsPanelLabel>
+							{ __( 'Posts per page' ) }
+						</SidebarNavigationScreenDetailsPanelLabel>
+						<SidebarNavigationScreenDetailsPanelValue>
+							{ postsPerPage }
+						</SidebarNavigationScreenDetailsPanelValue>
+					</SidebarNavigationScreenDetailsPanelRow>
+				) }
+				<SidebarNavigationScreenDetailsPanelRow>
+					<SidebarNavigationScreenDetailsPanelLabel>
+						{ __( 'Blog title' ) }
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
+						{ siteTitle }
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
+			</SidebarNavigationScreenDetailsPanel>
+
+			<SidebarNavigationScreenDetailsPanel title={ __( 'Discussion' ) }>
+				<SidebarNavigationScreenDetailsPanelRow>
+					<CheckboxControl
+						label="Allow comments on new posts"
+						help="Individual posts may override these settings. Changes here will only be applied to new posts."
+						checked={ true }
+						onChange={ noop }
+					/>
+				</SidebarNavigationScreenDetailsPanelRow>
+				<SidebarNavigationScreenDetailsPanelRow>
+					<CheckboxControl
+						label="Allow guest comments"
+						help="Users do not have to be registered and logged in to comment."
+						checked={ true }
+						onChange={ noop }
+					/>
+				</SidebarNavigationScreenDetailsPanelRow>
+				<SidebarNavigationScreenDetailsPanelRow>
+					<SidebarNavigationScreenDetailsPanelLabel>
+						{ __( 'Comment order' ) }
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
+						{ commentOrder }
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
+			</SidebarNavigationScreenDetailsPanel>
+			<SidebarNavigationScreenDetailsPanel title={ __( 'Areas' ) }>
+				Test
+			</SidebarNavigationScreenDetailsPanel>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index 03cc7ecbec75b..ec35a49d97706 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -20,12 +20,14 @@ import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';
 import TemplateActions from '../template-actions';
+import HomeTemplateDetails from './home-template-details';
 
-function useTemplateTitleAndDescription( postType, postId ) {
+function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId
 	);
+
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme(),
 		[]
@@ -42,6 +44,11 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		);
 	}
 
+	let content = null;
+	if ( record?.slug === 'home' ) {
+		content = <HomeTemplateDetails />;
+	}
+
 	const description = (
 		<>
 			{ descriptionText }
@@ -74,7 +81,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		</>
 	);
 
-	return { title, description };
+	return { title, description, content };
 }
 
 export default function SidebarNavigationScreenTemplate() {
@@ -83,7 +90,7 @@ export default function SidebarNavigationScreenTemplate() {
 		params: { postType, postId },
 	} = navigator;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, description } = useTemplateTitleAndDescription(
+	const { title, content, description } = useTemplateDetails(
 		postType,
 		postId
 	);
@@ -109,6 +116,7 @@ export default function SidebarNavigationScreenTemplate() {
 				</>
 			}
 			description={ description }
+			content={ content }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js
deleted file mode 100644
index 2a20f31ce7fb4..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function SidebarNavigationSubtitle( { children } ) {
-	return (
-		<h3 className="edit-site-sidebar-navigation-subtitle">{ children }</h3>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss
deleted file mode 100644
index b7ff9faba49f3..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.edit-site-sidebar-navigation-subtitle {
-	color: $gray-400;
-	text-transform: uppercase;
-	font-weight: 500;
-	font-size: 11px;
-	padding: $grid-unit-10 0;
-}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index e31978cf0f45d..a958dbd17f86c 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -28,9 +28,9 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
+@import "components/sidebar-navigation-screen-details-panel/style.scss";
 @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/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";