From fe1bbd308954570ad0fca9737e8ad4a0f2d0f6fe Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 8 Jun 2023 13:11:05 +1000 Subject: [PATCH] Refactoring input controls layout Tweaking CSS accordingly --- .../index.js | 14 ++- .../style.scss | 3 +- .../sidebar-navigation-screen-page/style.scss | 2 +- .../home-template-details.js | 104 ++++++++++-------- .../style.scss | 20 ++++ .../sidebar-navigation-screen/style.scss | 14 ++- 6 files changed, 99 insertions(+), 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 index 695c4c4a7dcaa2..e098b1c5b3aa04 100644 --- 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 } > - - { title } - + { title && ( + + { title } + + ) } { children } ); 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 index 358a9022a0a896..7411747369f146 100644 --- 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 index 4e4ee9ab003b12..66f6083652dfc5 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,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/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 index 650e777eac2ffc..7705c57191f5fb 100644 --- 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 @@ -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,8 +22,6 @@ 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'; @@ -30,11 +29,16 @@ 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 } ) { ); } @@ -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 ( <> - + + + + { isHomePageBlog && ( - - { __( 'Posts per page' ) } - - - - - - ) } - - - { __( 'Blog title' ) } - - - - + + ) } @@ -189,18 +203,14 @@ export default function HomeTemplateDetails() { - { templateAreas.map( ( { label, icon, theme, slug } ) => ( + { templateAreas.map( ( { label, icon, area, theme, slug } ) => ( - - { label } - - - - + ) ) } 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 index 8c4e1891a090d7..164586a5dfe592 100644 --- 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 index 2b55cb5ef7d5f0..76eae0d9ca8a34 100644 --- 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; } }