CYS: Remove links from sidebar (#50414)

* Remove EditorLinks from sidebar navigations

* Remove other links from sidebar navigations

* Reset warning modal

* Add changelog
This commit is contained in:
Tom Cafferkey 2024-08-07 15:16:42 +01:00 committed by GitHub
parent 649baf9855
commit 03f9b06d17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 29 additions and 251 deletions

View File

@ -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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'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 = ( {
<SidebarNavigationScreen
title={ title }
onNavigateBackClick={ onNavigateBackClick }
description={ createInterpolateElement( description, {
EditorLink: (
<Link
onClick={ () => {
trackEvent(
'customize_your_store_assembler_hub_editor_link_click',
{
source: 'color-palette',
}
);
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
StyleLink: (
<Link
onClick={ () => {
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={ <SidebarNavigationScreenColorPaletteContent /> }
/>
);

View File

@ -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 <EditorLink>Editor</EditorLink>.",
"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 <EditorLink>Editor</EditorLink> 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: (
<Link
onClick={ () => {
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={
<>
<div className="woocommerce-customize-store__sidebar-footer-content">

View File

@ -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 <EditorLink>Editor</EditorLink>.",
'woocommerce'
),
{
EditorLink: (
<Link
onClick={ () => {
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={
<>

View File

@ -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 <EditorLink>Editor</EditorLink>.',
'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 = ( {
<SidebarNavigationScreen
title={ title }
onNavigateBackClick={ onNavigateBackClick }
description={ createInterpolateElement( sidebarMessage, {
EditorLink: (
<Link
onClick={ () => {
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={
<div className="woocommerce-customize-store__sidebar-homepage-content">
<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage">

View File

@ -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 <EditorLink>Editor</EditorLink>.',
'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 <EditorLink>Editor</EditorLink>.',
'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 = ( {
<SidebarNavigationScreen
title={ title }
onNavigateBackClick={ onNavigateBackClick }
description={ createInterpolateElement( sidebarMessage, {
EditorLink: (
<Link
onClick={ () => {
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={
<div className="woocommerce-customize-store__sidebar-homepage-content">
<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage">

View File

@ -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 = () => {
<SidebarNavigationScreen
isRoot
title={ __( "Let's get creative", 'woocommerce' ) }
description={ createInterpolateElement(
__(
'Use our style and layout tools to customize the design of your store. Content and images can be added or changed via the <EditorLink>Editor</EditorLink> later.',
'woocommerce'
),
{
EditorLink: (
<Link
onClick={ () => {
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={
<>

View File

@ -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 (
<SidebarNavigationScreen
title={ __( 'Add more pages', 'woocommerce' ) }
description={ createInterpolateElement(
__(
"Enhance your customers' experience by customizing existing pages or adding new ones. You can continue customizing and adding pages later in <EditorLink>Editor</EditorLink> | <PageLink>Pages</PageLink>.",
'woocommerce'
),
{
EditorLink: (
<Link
onClick={ () => {
trackEvent(
'customize_your_store_assembler_hub_editor_link_click',
{
source: 'pages',
}
);
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
PageLink: (
<Link
href={ `${ ADMIN_URL }edit.php?post_type=page` }
type="external"
/>
),
}
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={ <></> }
/>

View File

@ -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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.",
"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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'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 = ( {
<SidebarNavigationScreen
title={ title }
onNavigateBackClick={ onNavigateBackClick }
description={ createInterpolateElement( label, {
EditorLink: (
<Link
onClick={ () => {
trackEvent(
'customize_your_store_assembler_hub_editor_link_click',
{
source: 'typography',
}
);
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
StyleLink: (
<Link
onClick={ () => {
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={
<div className="woocommerce-customize-store_sidebar-typography-content">
{ isFontLibraryAvailable && <FontPairing /> }

View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Remove all links from the CYS sidebars