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

[CYS] Update sidebar links copy (#44762) 

* Update assembler sidebar link when no AI available

* Update the sidebar section title depending on the flow

* Revert unnecessary changes

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

* Add missing text domain

* Fix test

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alba Rincón 2024-02-22 09:48:49 +01:00 committed by GitHub
parent b142db05b1
commit 145905f254
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 89 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
View File

@ -60,20 +60,24 @@ export const SidebarNavigationScreenColorPalette = () => {
context: { flowType },
} = useContext( CustomizeStoreContext );
const description =
flowType === FlowType.AIOnline
? __(
'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
)
: __(
'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
);
const aiOnline = flowType === FlowType.AIOnline;
const title = aiOnline
? __( 'Change the color palette', 'woocommerce' )
: __( 'Choose your color palette', 'woocommerce' );
const description = aiOnline
? __(
'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
)
: __(
'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
);
return (
<SidebarNavigationScreen
title={ __( 'Change the color palette', 'woocommerce' ) }
title={ title }
description={ createInterpolateElement( description, {
EditorLink: (
<Link

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

@ -27,6 +27,8 @@ import { useEditorScroll } from '../hooks/use-editor-scroll';
import { useSelectedPattern } from '../hooks/use-selected-pattern';
import { findPatternByBlock } from './utils';
import BlockPatternList from '../block-pattern-list';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { FlowType } from '~/customize-store/types';
const SUPPORTED_FOOTER_PATTERNS = [
'woocommerce-blocks/footer-simple-menu',
@ -93,9 +95,16 @@ export const SidebarNavigationScreenFooter = () => {
[ blocks, onChange, setSelectedPattern, scroll ]
);
const { context } = useContext( CustomizeStoreContext );
const aiOnline = context.flowType === FlowType.AIOnline;
const title = aiOnline
? __( 'Change your footer', 'woocommerce' )
: __( 'Choose your footer', 'woocommerce' );
return (
<SidebarNavigationScreen
title={ __( 'Change your footer', 'woocommerce' ) }
title={ title }
onNavigateBackClick={ resetHighlightedBlockIndex }
description={ createInterpolateElement(
__(

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

@ -27,6 +27,8 @@ import { HighlightedBlockContext } from '../context/highlighted-block-context';
import { useEditorScroll } from '../hooks/use-editor-scroll';
import { findPatternByBlock } from './utils';
import BlockPatternList from '../block-pattern-list';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { FlowType } from '~/customize-store/types';
const SUPPORTED_HEADER_PATTERNS = [
'woocommerce-blocks/header-essential',
@ -91,9 +93,16 @@ export const SidebarNavigationScreenHeader = () => {
[ blocks, onChange, setSelectedPattern, scroll ]
);
const { context } = useContext( CustomizeStoreContext );
const aiOnline = context.flowType === FlowType.AIOnline;
const title = aiOnline
? __( 'Change your header', 'woocommerce' )
: __( 'Choose your header', 'woocommerce' );
return (
<SidebarNavigationScreen
title={ __( 'Change your header', 'woocommerce' ) }
title={ title }
onNavigateBackClick={ resetHighlightedBlockIndex }
description={ createInterpolateElement(
__(

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

@ -96,20 +96,24 @@ export const SidebarNavigationScreenHomepage = () => {
}, [ blocks, homePatterns ] );
const { context } = useContext( CustomizeStoreContext );
const sidebarMessage =
context.flowType === FlowType.AIOnline
? __(
'Based on the most successful stores in your industry and location, our AI tool has recommended this template for your business. Prefer a different layout? Choose from the templates below now, or later via the <EditorLink>Editor</EditorLink>.',
'woocommerce'
)
: __(
'Based on the most successful stores, we recommend this layout for your business. Prefer something different? Choose from the templates below now, or continue customizing this page, including the content, later via the <EditorLink>Editor</EditorLink>.',
'woocommerce'
);
const aiOnline = context.flowType === FlowType.AIOnline;
const title = aiOnline
? __( 'Change your homepage', 'woocommerce' )
: __( 'Design your homepage', 'woocommerce' );
const sidebarMessage = aiOnline
? __(
'Based on the most successful stores in your industry and location, our AI tool has recommended this template for your business. Prefer a different layout? Choose from the templates below now, or later via the <EditorLink>Editor</EditorLink>.',
'woocommerce'
)
: __(
'Based on the most successful stores, we recommend this layout for your business. Prefer something different? Choose from the templates below now, or continue customizing this page, including the content, later via the <EditorLink>Editor</EditorLink>.',
'woocommerce'
);
return (
<SidebarNavigationScreen
title={ __( 'Change your homepage', 'woocommerce' ) }
title={ title }
description={ createInterpolateElement( sidebarMessage, {
EditorLink: (
<Link

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

@ -3,7 +3,7 @@
*/
/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { createInterpolateElement } from '@wordpress/element';
import { createInterpolateElement, useContext } from '@wordpress/element';
import {
// @ts-ignore No types for this exist yet.
__experimentalItemGroup as ItemGroup,
@ -31,8 +31,15 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { FlowType } from '~/customize-store/types';
export const SidebarNavigationScreenMain = () => {
const {
context: { flowType },
} = useContext( CustomizeStoreContext );
const aiOnline = flowType === FlowType.AIOnline;
return (
<SidebarNavigationScreen
isRoot
@ -101,7 +108,15 @@ export const SidebarNavigationScreenMain = () => {
);
} }
>
{ __( 'Change the color palette', 'woocommerce' ) }
{ aiOnline
? __(
'Change the color palette',
'woocommerce'
)
: __(
'Choose your color palette',
'woocommerce'
) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
@ -117,7 +132,9 @@ export const SidebarNavigationScreenMain = () => {
);
} }
>
{ __( 'Change fonts', 'woocommerce' ) }
{ aiOnline
? __( 'Change fonts', 'woocommerce' )
: __( 'Choose fonts', 'woocommerce' ) }
</NavigatorButton>
</ItemGroup>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
@ -140,7 +157,9 @@ export const SidebarNavigationScreenMain = () => {
);
} }
>
{ __( 'Change your header', 'woocommerce' ) }
{ aiOnline
? __( 'Change your header', 'woocommerce' )
: __( 'Choose your header', 'woocommerce' ) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
@ -156,7 +175,9 @@ export const SidebarNavigationScreenMain = () => {
);
} }
>
{ __( 'Change your homepage', 'woocommerce' ) }
{ aiOnline
? __( 'Change your homepage', 'woocommerce' )
: __( 'Design your homepage', 'woocommerce' ) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
@ -172,7 +193,9 @@ export const SidebarNavigationScreenMain = () => {
);
} }
>
{ __( 'Change your footer', 'woocommerce' ) }
{ aiOnline
? __( 'Change your footer', 'woocommerce' )
: __( 'Choose your footer', 'woocommerce' ) }
</NavigatorButton>
{ /* TODO: Turn on this in Phrase 2 */ }
{ /* <NavigatorButton

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

@ -21,6 +21,9 @@ export const SidebarNavigationScreenTypography = () => {
const { context } = useContext( CustomizeStoreContext );
const aiOnline = context.flowType === FlowType.AIOnline;
const title = aiOnline
? __( 'Change your font', 'woocommerce' )
: __( 'Choose fonts', 'woocommerce' );
const label = aiOnline
? __(
"AI has selected a font pairing that's the best fit for your business. If you'd like to change them, select a new option below now, or later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.",
@ -33,7 +36,7 @@ export const SidebarNavigationScreenTypography = () => {
return (
<SidebarNavigationScreen
title={ __( 'Change your font', 'woocommerce' ) }
title={ title }
description={ createInterpolateElement( label, {
EditorLink: (
<Link

4
plugins/woocommerce/changelog/44762-44700-cys-update-sidebar-links Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
CYS - Update sidebar links copy on the assembled page.

2
plugins/woocommerce/patterns/footer-simple-menu.php
View File

@ -31,7 +31,7 @@
<!-- wp:group {"style":{"spacing":{"blockGap":"5px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","orientation":"vertical"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
<!-- wp:site-title /-->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">

2
plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js
View File

@ -101,7 +101,7 @@ test.describe( 'Store owner can view Assembler Hub for store customization', ()
page,
} ) => {
await page.goto( ASSEMBLER_HUB_URL );
await page.click( 'text=Change your header' );
await page.click( 'text=Choose your header' );
const locator = page.locator(
'.block-editor-block-patterns-list__list-item'