Refactoring input controls layout

Tweaking CSS accordingly
WordPress · Jun 9, 2023 · 522686e · 522686e
1 parent 77b5c10
commit 522686e
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 58 deletions.
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
@@ -19,12 +19,14 @@ function SidebarNavigationScreenDetailsPanel( { title, children } ) {
 			className="edit-site-sidebar-navigation-details-screen-panel"
 			spacing={ 5 }
 		>
-			<Heading
-				className="edit-site-sidebar-navigation-details-screen-panel__heading"
-				level={ 3 }
-			>
-				{ title }
-			</Heading>
+			{ title && (
+				<Heading
+					className="edit-site-sidebar-navigation-details-screen-panel__heading"
+					level={ 3 }
+				>
+					{ title }
+				</Heading>
+			) }
 			{ children }
 		</VStack>
 	);

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
@@ -6,8 +6,7 @@
 		text-transform: uppercase;
 		font-weight: 500;
 		font-size: 11px;
-		padding: $grid-unit-10 0;
-		padding-bottom: 0;
+		padding: 0;
 		margin-bottom: 0;
 	}
 }

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
@@ -30,7 +30,7 @@
 
 .edit-site-sidebar-navigation-screen-page__excerpt {
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-30;
 }
 
 .edit-site-sidebar-navigation-screen-page__modified {

diff --git a/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -11,6 +11,7 @@ import {
 	Button,
 	Icon,
 	__experimentalInputControl as InputControl,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { header, footer, layout, chevronRightSmall } from '@wordpress/icons';
 import { useMemo, useState, useEffect } from '@wordpress/element';
@@ -21,20 +22,23 @@ import { useMemo, useState, useEffect } from '@wordpress/element';
 import {
 	SidebarNavigationScreenDetailsPanel,
 	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 
 const EMPTY_OBJECT = {};
 
-function TemplateAreaButton( { postId, icon, label } ) {
+function TemplateAreaButton( { area, postId, icon, title } ) {
 	const icons = {
 		header,
 		footer,
 	};
+	// Generic area labels - not the same as the template part title defined in "templateParts" in theme.json.
+	const areaLabels = {
+		header: __( 'Header' ),
+		footer: __( 'Footer' ),
+	};
 	const linkInfo = useLink( {
 		postType: 'wp_template_part',
 		postId,
@@ -44,11 +48,23 @@ function TemplateAreaButton( { postId, icon, label } ) {
 		<Button
 			as="a"
 			className="edit-site-sidebar-navigation-screen-template__template-area-button"
-			icon={ icons[ icon ] ?? layout }
 			{ ...linkInfo }
 		>
-			{ label }
-			<Icon icon={ chevronRightSmall } />
+			<span className="edit-site-sidebar-navigation-screen-template__template-area-name">
+				{ areaLabels[ area ] ?? __( 'Template part' ) }
+			</span>
+			<span className="edit-site-sidebar-navigation-screen-template__template-area-label">
+				<Icon icon={ icons[ icon ] ?? layout } />
+				<Truncate
+					limit={ 20 }
+					ellipsizeMode="tail"
+					numberOfLines={ 1 }
+					className="edit-site-sidebar-navigation-screen-template__template-area-label-text"
+				>
+					{ title }
+				</Truncate>
+				<Icon icon={ chevronRightSmall } />
+			</span>
 		</Button>
 	);
 }
@@ -95,8 +111,8 @@ export default function HomeTemplateDetails() {
 		[ postType, postId ]
 	);
 
-	const [ commentsOnNewPosts, setCommentsOnNewPosts ] = useState( null );
-	const [ postsCount, setPostsCount ] = useState( '' );
+	const [ commentsOnNewPosts, setCommentsOnNewPosts ] = useState( '' );
+	const [ postsCount, setPostsCount ] = useState( 1 );
 	const [ siteTitleValue, setSiteTitleValue ] = useState( '' );
 
 	useEffect( () => {
@@ -111,12 +127,12 @@ export default function HomeTemplateDetails() {
 					.filter(
 						( { name, attributes } ) =>
 							name === 'core/template-part' &&
-							( attributes?.slug === 'header' ||
-								attributes?.slug === 'footer' )
+							( attributes?.tagName === 'header' ||
+								attributes?.tagName === 'footer' )
 					)
 					.map( ( { attributes } ) => ( {
 						...templatePartAreas?.find(
-							( { area } ) => area === attributes?.slug
+							( { area } ) => area === attributes?.tagName
 						),
 						...attributes,
 					} ) )
@@ -146,36 +162,34 @@ export default function HomeTemplateDetails() {
 
 	return (
 		<>
-			<SidebarNavigationScreenDetailsPanel title={ __( 'Settings' ) }>
+			<SidebarNavigationScreenDetailsPanel>
+				<SidebarNavigationScreenDetailsPanelRow>
+					<InputControl
+						className="edit-site-sidebar-navigation-screen__input-control"
+						placeholder={ __( 'No Title' ) }
+						value={ siteTitleValue }
+						onChange={ debounce( setSiteTitle, 300 ) }
+						label={ __( 'Site title' ) }
+						help={ __( 'Update the title of your site' ) }
+					/>
+				</SidebarNavigationScreenDetailsPanelRow>
 				{ isHomePageBlog && (
 					<SidebarNavigationScreenDetailsPanelRow>
-						<SidebarNavigationScreenDetailsPanelLabel>
-							{ __( 'Posts per page' ) }
-						</SidebarNavigationScreenDetailsPanelLabel>
-						<SidebarNavigationScreenDetailsPanelValue>
-							<InputControl
-								className="edit-site-sidebar-navigation-screen__input-control"
-								placeholder={ 0 }
-								value={ postsCount }
-								type="number"
-								onChange={ debounce( setPostsPerPage, 300 ) }
-							/>
-						</SidebarNavigationScreenDetailsPanelValue>
-					</SidebarNavigationScreenDetailsPanelRow>
-				) }
-				<SidebarNavigationScreenDetailsPanelRow>
-					<SidebarNavigationScreenDetailsPanelLabel>
-						{ __( 'Blog title' ) }
-					</SidebarNavigationScreenDetailsPanelLabel>
-					<SidebarNavigationScreenDetailsPanelValue>
 						<InputControl
 							className="edit-site-sidebar-navigation-screen__input-control"
-							placeholder={ __( 'No Title' ) }
-							value={ siteTitleValue }
-							onChange={ debounce( setSiteTitle, 300 ) }
+							placeholder={ 0 }
+							value={ postsCount }
+							step="1"
+							min="1"
+							type="number"
+							onChange={ debounce( setPostsPerPage, 300 ) }
+							label={ __( 'Posts per page' ) }
+							help={ __(
+								'The maximum amount of posts to display on a page. This setting applies to all blog pages including category and tag archives.'
+							) }
 						/>
-					</SidebarNavigationScreenDetailsPanelValue>
-				</SidebarNavigationScreenDetailsPanelRow>
+					</SidebarNavigationScreenDetailsPanelRow>
+				) }
 			</SidebarNavigationScreenDetailsPanel>
 
 			<SidebarNavigationScreenDetailsPanel title={ __( 'Discussion' ) }>
@@ -189,18 +203,14 @@ export default function HomeTemplateDetails() {
 				</SidebarNavigationScreenDetailsPanelRow>
 			</SidebarNavigationScreenDetailsPanel>
 			<SidebarNavigationScreenDetailsPanel title={ __( 'Areas' ) }>
-				{ templateAreas.map( ( { label, icon, theme, slug } ) => (
+				{ templateAreas.map( ( { label, icon, area, theme, slug } ) => (
 					<SidebarNavigationScreenDetailsPanelRow key={ slug }>
-						<SidebarNavigationScreenDetailsPanelLabel>
-							{ label }
-						</SidebarNavigationScreenDetailsPanelLabel>
-						<SidebarNavigationScreenDetailsPanelValue>
-							<TemplateAreaButton
-								postId={ `${ theme }//${ slug }` }
-								label={ label }
-								icon={ icon }
-							/>
-						</SidebarNavigationScreenDetailsPanelValue>
+						<TemplateAreaButton
+							postId={ `${ theme }//${ slug }` }
+							title={ label }
+							icon={ icon }
+							area={ area }
+						/>
 					</SidebarNavigationScreenDetailsPanelRow>
 				) ) }
 			</SidebarNavigationScreenDetailsPanel>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
@@ -26,4 +26,24 @@
 
 .edit-site-sidebar-navigation-screen-template__template-area-button {
 	color: $white;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	flex-wrap: nowrap;
+	background: $gray-800;
+	border-radius: 4px;
+}
+
+.edit-site-sidebar-navigation-screen-template__template-area-name {
+	flex-grow: 1;
+}
+
+.edit-site-sidebar-navigation-screen-template__template-area-label {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+}
+
+.edit-site-sidebar-navigation-screen-template__template-area-label-text {
+	margin: 0 $grid-unit-20 0 $grid-unit-05;
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -100,13 +100,23 @@
 	padding: $grid-unit-20 0;
 }
 
+/* In general style overrides are discouraged.
+ * This is a temporary solution to override the InputControl component's styles.
+ * The `Theme` component will potentially be the more appropriate approach
+ * once that component is stabilized.
+ * See: packages/components/src/theme
+ */
 .edit-site-sidebar-navigation-screen__input-control {
+	width: 100%;
+	.components-input-control__container {
+		background: transparent;
+	}
 	.components-input-control__input {
 		color: $white !important;
 		background: $gray-800 !important;
-		border-radius: 0 !important;
+		border-radius: 4px !important;
 	}
 	.components-input-control__backdrop {
-		border: 0 !important;
+		border: 4px !important;
 	}
 }