Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CYS: Revisit sidebar layout (#48803) 

* WIP

* improve layout

* improve CSS

* fix import

* Add changefile(s) from automation for the following project(s): woocommerce

* lint scss

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-07-02 10:03:56 +02:00 committed by GitHub
parent dee838e5f9
commit fb1c2b9936
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/index.tsx
View File

@ -12,7 +12,7 @@ import { memo, useCallback, useContext } from '@wordpress/element';
import { SidebarNavigationScreenColorPalette } from './sidebar-navigation-screen-color-palette';
import { SidebarNavigationScreenFooter } from './sidebar-navigation-screen-footer';
import { SidebarNavigationScreenHeader } from './sidebar-navigation-screen-header';
import { SidebarNavigationScreenHomepage } from './sidebar-navigation-screen-homepage';
import { SidebarNavigationScreenHomepage } from './sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage';
import { SidebarNavigationScreenMain } from './sidebar-navigation-screen-main';
import { SidebarNavigationScreenTypography } from './sidebar-navigation-screen-typography';
// import { SidebarNavigationScreenPages } from './sidebar-navigation-screen-pages';

2
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/sidebar-navigation-extra-screen.tsx
View File

@ -42,7 +42,7 @@ export const SidebarNavigationExtraScreen = () => {
if ( patternCategory ) {
return (
<div className="woocommerce-customize-store-edit-site-layout__sidebar-extra">
<SidebarPatternScreen category={ patternCategory } />;
<SidebarPatternScreen category={ patternCategory } />
</div>
);
}

1
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/style.scss
View File

@ -1,3 +1,4 @@
.woocommerce-customize-store-edit-site-layout__sidebar-extra {
width: 380px;
border-right: 1px solid rgba(0, 0, 0, 0.05);
}

2
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
View File

@ -159,7 +159,7 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
navigateTo( { url: homepageUrl } );
} }
iconSize={ 22 }
iconSize={ 18 }
icon={ close }
label={ __( 'Close', 'woocommerce' ) }
/>

5
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/style.scss
View File

@ -13,6 +13,10 @@
justify-content: space-between;
gap: 10px;
h1 {
font-size: 16px;
}
span {
font-size: 16px;
font-weight: 600;
@ -26,5 +30,6 @@
.block-editor-block-patterns-list {
overflow-y: unset;
height: unset;
}
}

22
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk.tsx
View File

@ -39,12 +39,19 @@ import { CustomizeStoreContext } from '..';
import { Link } from '@woocommerce/components';
import { PATTERN_CATEGORIES } from './pattern-screen/categories';
import { capitalize } from 'lodash';
import { getNewPath, navigateTo } from '@woocommerce/navigation';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
import { useSelect } from '@wordpress/data';
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
import { isIframe, sendMessageToParent } from '~/customize-store/utils';
import { useEditorBlocks } from '../hooks/use-editor-blocks';
import { isTrackingAllowed } from '../utils/is-tracking-allowed';
import clsx from 'clsx';
const isActiveElement = ( path: string | undefined, category: string ) => {
if ( path?.includes( category ) ) {
return true;
}
};
export const SidebarNavigationScreenHomepagePTK = ( {
onNavigateBackClick,
@ -143,6 +150,8 @@ export const SidebarNavigationScreenHomepagePTK = ( {
'woocommerce'
);
const path = useQuery().path;
return (
<SidebarNavigationScreen
title={ title }
@ -174,6 +183,13 @@ export const SidebarNavigationScreenHomepagePTK = ( {
( [ categoryKey, { label } ], index ) => (
<ItemGroup key={ index }>
<NavigatorButton
className={ clsx( {
'edit-site-sidebar-navigation-screen-patterns__group-homepage-item--active':
isActiveElement(
path,
categoryKey
),
} ) }
path={ `/customize-store/assembler-hub/homepage/${ categoryKey }` }
onClick={ () => {
const categoryUrl = getNewPath(
@ -181,7 +197,9 @@ export const SidebarNavigationScreenHomepagePTK = ( {
`/customize-store/assembler-hub/homepage/${ categoryKey }`,
{}
);
navigateTo( { url: categoryUrl } );
navigateTo( {
url: categoryUrl,
} );
} }
as={ SidebarNavigationItem }
withChevron

17
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx → plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage.tsx
View File

@ -31,13 +31,13 @@ import interpolateComponents from '@automattic/interpolate-components';
/**
* Internal dependencies
*/
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { useEditorBlocks } from '../hooks/use-editor-blocks';
import { useHomeTemplates } from '../hooks/use-home-templates';
import { useEditorBlocks } from '../../hooks/use-editor-blocks';
import { useHomeTemplates } from '../../hooks/use-home-templates';
import { BlockInstance } from '@wordpress/blocks';
import { useSelectedPattern } from '../hooks/use-selected-pattern';
import { useEditorScroll } from '../hooks/use-editor-scroll';
import { useSelectedPattern } from '../../hooks/use-selected-pattern';
import { useEditorScroll } from '../../hooks/use-editor-scroll';
import { FlowType } from '~/customize-store/types';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { select, useSelect } from '@wordpress/data';
@ -46,12 +46,13 @@ import { trackEvent } from '~/customize-store/tracking';
import {
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
} from '../utils/hero-pattern';
} from '../../utils/hero-pattern';
import { isEqual } from 'lodash';
import { COLOR_PALETTES } from './global-styles/color-palette-variations/constants';
import { COLOR_PALETTES } from '../global-styles/color-palette-variations/constants';
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
import { isIframe, sendMessageToParent } from '~/customize-store/utils';
import { isTrackingAllowed } from '../utils/is-tracking-allowed';
import { isTrackingAllowed } from '../../utils/is-tracking-allowed';
import './style.scss';
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );

8
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/style.scss Normal file
View File

@ -0,0 +1,8 @@
.edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container {
display: flex;
justify-content: space-between;
.edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern {
color: $gray-600;
}
}

34
plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
View File

@ -172,22 +172,14 @@ body.woocommerce-assembler {
width: 348px;
border: 1.5px solid transparent;
&:hover {
&:hover,
&:active,
&:focus,
&.edit-site-sidebar-navigation-screen-patterns__group-homepage-item--active {
background: #ededed;
color: $gray-600;
}
&:active {
color: #171717;
background: #fcfcfc;
}
&:focus {
color: #171717;
background: #fcfcfc;
border-color: var(--wp-admin-theme-color);
}
.components-flex-item {
color: $gray-900;
font-size: 0.8125rem;
@ -505,18 +497,13 @@ body.woocommerce-assembler {
&:focus {
.auto-block-preview__container,
.block-editor-block-preview__container {
box-shadow: none;
box-shadow: 0 0 0 1.5px #fff,
0 0 0 3.5px var(--wp-admin-theme-color, #3858e9);
border-color: var(--wp-admin-theme-color);
}
}
}
/* Pattern thumbnails in sidebar */
.block-editor-block-preview__container,
.auto-block-preview__container {
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0 !important;
}
.block-editor-block-preview__content {
height: 100%;
width: 100%;
@ -838,12 +825,3 @@ body.woocommerce-assembler {
max-width: 700px;
}
}
.edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container {
display: flex;
justify-content: space-between;
.edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern {
color: var(--gutenberg-gray-400, #ccc);
}
}

4
plugins/woocommerce/changelog/48803-48783-cys-revisit-sidebar-layout Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
CYS: Revisit sidebar layout.