From 03f9b06d171424c8f941746a3de19316efb262d0 Mon Sep 17 00:00:00 2001 From: Tom Cafferkey Date: Wed, 7 Aug 2024 15:16:42 +0100 Subject: [PATCH] CYS: Remove links from sidebar (#50414) * Remove EditorLinks from sidebar navigations * Remove other links from sidebar navigations * Reset warning modal * Add changelog --- ...idebar-navigation-screen-color-palette.tsx | 48 ++----------------- .../sidebar-navigation-screen-footer.tsx | 29 ++--------- .../sidebar-navigation-screen-header.tsx | 32 ++----------- ...sidebar-navigation-screen-homepage-ptk.tsx | 24 +--------- .../sidebar-navigation-screen-homepage.tsx | 30 ++---------- .../sidebar-navigation-screen-main.tsx | 32 ++----------- .../sidebar-navigation-screen-pages.tsx | 38 ++------------- .../sidebar-navigation-screen-typography.tsx | 43 ++--------------- .../changelog/remove-cys-sidebar-links | 4 ++ 9 files changed, 29 insertions(+), 251 deletions(-) create mode 100644 plugins/woocommerce/changelog/remove-cys-sidebar-links diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx index cf7eeca1d1c..b1b10bab2e6 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx @@ -4,8 +4,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { createInterpolateElement, useContext } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; +import { useContext } from '@wordpress/element'; import { PanelBody } from '@wordpress/components'; // @ts-ignore No types for this exist yet. import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -17,10 +16,8 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; */ import { CustomizeStoreContext } from '../'; import { SidebarNavigationScreen } from './sidebar-navigation-screen'; -import { ADMIN_URL } from '~/utils/admin-settings'; import { ColorPalette, ColorPanel } from './global-styles'; import { FlowType } from '~/customize-store/types'; -import { trackEvent } from '~/customize-store/tracking'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -71,11 +68,11 @@ export const SidebarNavigationScreenColorPalette = ( { : __( '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 Editor | Styles.', + '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 Editor.', '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 Editor | Styles.', + 'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in Editor.', 'woocommerce' ); @@ -83,44 +80,7 @@ export const SidebarNavigationScreenColorPalette = ( { { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'color-palette', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - StyleLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_style_link_click', - { - source: 'color-palette', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles&canvas=edit`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } ) } + description={ description } content={ } /> ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx index f55d260306a..80404bbb693 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx @@ -5,13 +5,11 @@ */ import { __ } from '@wordpress/i18n'; import { - createInterpolateElement, useCallback, useContext, useEffect, useMemo, } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; import { Spinner } from '@wordpress/components'; // @ts-expect-error No types for this exist yet. import { store as coreStore } from '@wordpress/core-data'; @@ -20,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { SidebarNavigationScreen } from '../sidebar-navigation-screen'; -import { ADMIN_URL } from '~/utils/admin-settings'; import { useEditorBlocks } from '../../hooks/use-editor-blocks'; import { usePatternsByCategory } from '../../hooks/use-patterns'; import { HighlightedBlockContext } from '../../context/highlighted-block-context'; @@ -35,7 +32,6 @@ import { CustomizeStoreContext } from '~/customize-store/assembler-hub'; import { FlowType } from '~/customize-store/types'; import { footerTemplateId } from '~/customize-store/data/homepageTemplates'; import { useSelect } from '@wordpress/data'; -import { trackEvent } from '~/customize-store/tracking'; import './style.scss'; @@ -140,11 +136,11 @@ export const SidebarNavigationScreenFooter = ( { const description = aiOnline ? __( - "Select a new footer from the options below. Your footer includes your site's secondary navigation and will be added to every page. You can continue customizing this via the Editor.", + "Select a new footer from the options below. Your footer includes your site's secondary navigation and will be added to every page. You can continue customizing this via the Editor.", 'woocommerce' ) : __( - "Select a footer from the options below. Your footer includes your site's secondary navigation and will be added to every page. You can continue customizing this via the Editor later.", + "Select a footer from the options below. Your footer includes your site's secondary navigation and will be added to every page. You can continue customizing this via the Editor later.", 'woocommerce' ); @@ -155,26 +151,7 @@ export const SidebarNavigationScreenFooter = ( { resetHighlightedBlockClientId(); onNavigateBackClick(); } } - description={ createInterpolateElement( description, { - EditorLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'footer', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } ) } + description={ description } content={ <>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx index 413d374aeeb..4c62164c547 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx @@ -6,12 +6,10 @@ import { __ } from '@wordpress/i18n'; import { useCallback, - createInterpolateElement, useContext, useEffect, useMemo, } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; import { Spinner } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; // @ts-expect-error No types for this exist yet. @@ -21,7 +19,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { SidebarNavigationScreen } from '../sidebar-navigation-screen'; -import { ADMIN_URL } from '~/utils/admin-settings'; import { usePatternsByCategory } from '../../hooks/use-patterns'; import { useSelectedPattern } from '../../hooks/use-selected-pattern'; import { useEditorBlocks } from '../../hooks/use-editor-blocks'; @@ -35,7 +32,6 @@ import { import { CustomizeStoreContext } from '~/customize-store/assembler-hub'; import { FlowType } from '~/customize-store/types'; import { headerTemplateId } from '~/customize-store/data/homepageTemplates'; -import { trackEvent } from '~/customize-store/tracking'; import './style.scss'; @@ -140,31 +136,9 @@ export const SidebarNavigationScreenHeader = ( { resetHighlightedBlockClientId(); onNavigateBackClick(); } } - description={ createInterpolateElement( - __( - "Select a new header from the options below. Your header includes your site's navigation and will be added to every page. You can continue customizing this via the Editor.", - 'woocommerce' - ), - { - EditorLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'header', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } + description={ __( + "Select a new header from the options below. Your header includes your site's navigation and will be added to every page. You can continue customizing this via the Editor.", + 'woocommerce' ) } content={ <> diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx index 4ba091e6355..1d0bdd44c23 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx @@ -32,7 +32,6 @@ import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/ /** * Internal dependencies */ -import { ADMIN_URL } from '~/utils/admin-settings'; import { SidebarNavigationScreen } from '../sidebar-navigation-screen'; import { trackEvent } from '~/customize-store/tracking'; import { CustomizeStoreContext } from '../..'; @@ -181,7 +180,7 @@ export const SidebarNavigationScreenHomepagePTK = ( { const title = __( 'Design your homepage', 'woocommerce' ); const sidebarMessage = __( - 'Create an engaging homepage by adding and combining different patterns and layouts. You can continue customizing this page, including the content, later via the Editor.', + 'Create an engaging homepage by adding and combining different patterns and layouts. You can continue customizing this page, including the content, later via the Editor.', 'woocommerce' ); @@ -191,26 +190,7 @@ export const SidebarNavigationScreenHomepagePTK = ( { { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'homepage', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } ) } + description={ sidebarMessage } content={
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx index 684819072a9..0f5b14fa367 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx @@ -5,13 +5,11 @@ */ import { __ } from '@wordpress/i18n'; import { - createInterpolateElement, useCallback, useMemo, useEffect, useContext, } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; import { Spinner } from '@wordpress/components'; // @ts-expect-error Missing type. import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; @@ -29,7 +27,6 @@ import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/compon * Internal dependencies */ 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 { BlockInstance } from '@wordpress/blocks'; @@ -38,8 +35,6 @@ 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'; - -import { trackEvent } from '~/customize-store/tracking'; import { PRODUCT_HERO_PATTERN_BUTTON_STYLE, findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate, @@ -217,11 +212,11 @@ export const SidebarNavigationScreenHomepage = ( { : __( 'Choose 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 Editor.', + '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 Editor.', 'woocommerce' ) : __( - 'Create an engaging homepage by selecting one of our pre-designed layouts. You can continue customizing this page, including the content, later via the Editor.', + 'Create an engaging homepage by selecting one of our pre-designed layouts. You can continue customizing this page, including the content, later via the Editor.', 'woocommerce' ); @@ -229,26 +224,7 @@ export const SidebarNavigationScreenHomepage = ( { { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'homepage', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } ) } + description={ sidebarMessage } content={
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx index 8d3dc9b5412..bc1569ed5f4 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx @@ -3,7 +3,7 @@ */ /* eslint-disable @woocommerce/dependency-group */ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import { createInterpolateElement, useContext } from '@wordpress/element'; +import { useContext } from '@wordpress/element'; import { // @ts-ignore No types for this exist yet. __experimentalItemGroup as ItemGroup, @@ -23,13 +23,11 @@ import { } from '@wordpress/icons'; // @ts-ignore No types for this exist yet. import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item'; -import { Link } from '@woocommerce/components'; /** * Internal dependencies */ 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'; import { trackEvent } from '~/customize-store/tracking'; @@ -51,31 +49,9 @@ export const SidebarNavigationScreenMain = () => { Editor later.', - 'woocommerce' - ), - { - EditorLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'main', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } + description={ __( + 'Use our style and layout tools to customize the design of your store. Content and images can be added or changed via the Editor later.', + 'woocommerce' ) } content={ <> diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx index 27117cd0fea..1969bd5899d 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx @@ -2,51 +2,19 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Link } from '@woocommerce/components'; -import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies */ import { SidebarNavigationScreen } from './sidebar-navigation-screen'; -import { ADMIN_URL } from '~/utils/admin-settings'; -import { trackEvent } from '~/customize-store/tracking'; export const SidebarNavigationScreenPages = () => { return ( Editor | Pages.", - 'woocommerce' - ), - { - EditorLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'pages', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - PageLink: ( - - ), - } + description={ __( + "Enhance your customers' experience by customizing existing pages or adding new ones. You can continue customizing and adding pages later in Editor.", + 'woocommerce' ) } content={ <> } /> diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx index a9202a4da37..88b26ec2820 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx @@ -41,11 +41,11 @@ export const SidebarNavigationScreenTypography = ( { : __( '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 Editor | Styles.", + "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 Editor.", 'woocommerce' ) : __( - 'Select the pair of fonts that best suits your brand. The larger font will be used for headings, and the smaller for supporting content. You can change your font at any time in Editor | Styles.', + 'Select the pair of fonts that best suits your brand. The larger font will be used for headings, and the smaller for supporting content. You can change your font at any time in Editor.', 'woocommerce' ); @@ -100,44 +100,7 @@ export const SidebarNavigationScreenTypography = ( { { - trackEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'typography', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - StyleLink: ( - { - trackEvent( - 'customize_your_store_assembler_hub_style_link_click', - { - source: 'typography', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } ) } + description={ label } content={
{ isFontLibraryAvailable && } diff --git a/plugins/woocommerce/changelog/remove-cys-sidebar-links b/plugins/woocommerce/changelog/remove-cys-sidebar-links new file mode 100644 index 00000000000..a133cf301d0 --- /dev/null +++ b/plugins/woocommerce/changelog/remove-cys-sidebar-links @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Remove all links from the CYS sidebars