Commit fcc8f6a69c for woocommerce
commit fcc8f6a69c31c028da049974b62406c40e5bd509
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Tue Dec 16 09:53:41 2025 +0100
Remove CYS 2: Remove all the unnecessary and unreachable code (#62161)
* Update customize-store index.tsx to new flow
* Styles adjustments
* Update the task list
* Remove unnecessary hooks from CustomizeStore.php
* Update test
* Add changelog
* Bring back necesary types to make sure compilation passes with no errors
* Bring back sitebar styles
* Remove entry points to CYS from marketplace
* Remove all the necessary CYS files
* Remove temporary types stubs
* Update LYS imports and move files that are only used there to LYS
* Simplify the assets structure by removing image dir
* Remove unnecessary methods from internal CustomizeStore class
* Remove unused internal classes
* Remove unnecessary skips of CYS tests
* Remove unnecessary steps from Reset CYS task in WooCommerce Beta Tester
* Fix merge conflict
* Remove duplicated assets
* Add changelog files
* Update phpstan-baseline to remove references to deleted files
* Clean up phpstan-baseline
* Fix merge conflict
diff --git a/plugins/woocommerce-beta-tester/api/api.php b/plugins/woocommerce-beta-tester/api/api.php
index 11f9a8b9da..ae57ba45d8 100644
--- a/plugins/woocommerce-beta-tester/api/api.php
+++ b/plugins/woocommerce-beta-tester/api/api.php
@@ -52,7 +52,6 @@ require 'options/rest-api.php';
require 'tools/delete-all-products.php';
require 'tools/disable-wc-email.php';
require 'tools/trigger-update-callbacks.php';
-require 'tools/reset-cys.php';
require 'tools/set-block-template-logging-threshold.php';
require 'tools/set-coming-soon-mode.php';
require 'tools/fake-woo-payments-gateway.php';
diff --git a/plugins/woocommerce-beta-tester/api/tools/reset-cys.php b/plugins/woocommerce-beta-tester/api/tools/reset-cys.php
deleted file mode 100644
index f860b5204b..0000000000
--- a/plugins/woocommerce-beta-tester/api/tools/reset-cys.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-/**
- * Reset CYS API initialization for beta testing.
- *
- * @package WC_Beta_Tester
- */
-
-defined( 'ABSPATH' ) || exit;
-
-register_woocommerce_admin_test_helper_rest_route(
- '/tools/reset-cys',
- 'tools_reset_cys'
-);
-
-/**
- * A tool to delete all products.
- */
-function tools_reset_cys() {
- global $wpdb;
-
- // Reset the home template.
- $current_theme = wp_get_theme();
- $template = get_block_template( $current_theme->template . '//home', 'wp_template' );
- if ( $template->id ) {
- wp_delete_post( $template->wp_id, true );
- }
-
- // Reset the custom styles.
- $wpdb->delete(
- $wpdb->prefix . 'posts',
- array(
- 'post_type' => 'wp_global_styles',
- 'post_title' => 'Custom Styles',
- ),
- array( '%s', '%s' )
- );
-
- $wpdb->delete(
- $wpdb->prefix . 'posts',
- array(
- 'post_type' => 'revision',
- 'post_title' => 'Custom Styles',
- ),
- array( '%s', '%s' )
- );
-
- return true;
-}
diff --git a/plugins/woocommerce-beta-tester/changelog/add-simplify-cys-remove-unnecessary-code b/plugins/woocommerce-beta-tester/changelog/add-simplify-cys-remove-unnecessary-code
new file mode 100644
index 0000000000..e4927ce4ed
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/changelog/add-simplify-cys-remove-unnecessary-code
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Reset Customize Your Store: simplify the action to adjust to journey updates
diff --git a/plugins/woocommerce-beta-tester/src/tools/data/actions.js b/plugins/woocommerce-beta-tester/src/tools/data/actions.js
index a3812e6d0d..6aacfe59bc 100644
--- a/plugins/woocommerce-beta-tester/src/tools/data/actions.js
+++ b/plugins/woocommerce-beta-tester/src/tools/data/actions.js
@@ -253,11 +253,6 @@ export function* resetCustomizeYourStore() {
method: 'DELETE',
path: `${ API_NAMESPACE }/options/${ optionsToDelete.join( ',' ) }`,
} );
-
- yield apiFetch( {
- path: API_NAMESPACE + '/tools/reset-cys',
- method: 'POST',
- } );
} );
}
diff --git a/plugins/woocommerce/changelog/add-simplify-cys-remove-unnecessary-code b/plugins/woocommerce/changelog/add-simplify-cys-remove-unnecessary-code
new file mode 100644
index 0000000000..270b21f420
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-simplify-cys-remove-unnecessary-code
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Customize Your Store: remove unnecessary code upon simplifying the journey
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/_mixins.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/_mixins.scss
deleted file mode 100644
index aa0f72c85e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/_mixins.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
- // WebKit
- &::-webkit-scrollbar {
- width: 12px;
- height: 12px;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: $handle-color;
- border-radius: 8px;
- border: 3px solid transparent;
- background-clip: padding-box;
- }
- &:hover::-webkit-scrollbar-thumb, // This needs specificity.
- &:focus::-webkit-scrollbar-thumb,
- &:focus-within::-webkit-scrollbar-thumb {
- background-color: $handle-color-hover;
- }
-
- // Firefox 109+ and Chrome 111+
- scrollbar-width: thin;
- scrollbar-gutter: stable both-edges;
- scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
-
- &:hover,
- &:focus,
- &:focus-within {
- scrollbar-color: $handle-color-hover transparent;
- }
-
- // Needed to fix a Safari rendering issue.
- will-change: transform;
-
- // Always show scrollbar on Mobile devices.
- @media (hover: none) {
- & {
- scrollbar-color: $handle-color-hover transparent;
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/auto-block-preview.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/auto-block-preview.tsx
deleted file mode 100644
index 4326e8408e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/auto-block-preview.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/release/16.4/packages/block-editor/src/components/block-preview/auto.js
-
-/**
- * External dependencies
- */
-import { useResizeObserver } from '@wordpress/compose';
-import {
- memo,
- useContext,
- useEffect,
- useMemo,
- useState,
-} from '@wordpress/element';
-import { Disabled, Popover } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useQuery } from '@woocommerce/navigation';
-import clsx from 'clsx';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- // @ts-expect-error No types for this exist yet.
- __unstableEditorStyles as EditorStyles,
- // @ts-expect-error No types for this exist yet.
- __unstableIframe as Iframe,
- BlockList,
- store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { LogoBlockContext } from './logo-block-context';
-import { PreloadFonts } from './preload-fonts';
-import { selectBlockOnHover } from './utils/select-block-on-hover';
-import { PopoverStatus, usePopoverHandler } from './hooks/use-popover-handler';
-import { useAddAutoBlockPreviewEventListenersAndObservers } from './hooks/auto-block-preview-event-listener';
-import { IsResizingContext } from './resizable-frame';
-import { SelectedBlockContext } from './context/selected-block-ref-context';
-import { isFullComposabilityFeatureAndAPIAvailable } from './utils/is-full-composability-enabled';
-import { useInsertPatternByName } from './hooks/use-insert-pattern-by-name';
-
-const { Provider: DisabledProvider } = Disabled.Context;
-
-type RenderAppenderType = boolean | ( () => Element ) | undefined;
-
-interface BlockListWithRenderAppender
- extends Omit< React.ComponentProps< typeof BlockList >, 'renderAppender' > {
- renderAppender?: RenderAppenderType;
-}
-// This is used to avoid rendering the block list if the sizes change.
-let MemoizedBlockList: React.ComponentType< BlockListWithRenderAppender >;
-
-const MAX_HEIGHT = 2000;
-
-export type ScaledBlockPreviewProps = {
- viewportWidth?: number;
- containerWidth: number;
- minHeight?: number;
- settings: {
- styles: string[];
- [ key: string ]: unknown;
- };
- additionalStyles: string;
- isScrollable?: boolean;
- autoScale?: boolean;
- setLogoBlockContext?: boolean;
- CustomIframeComponent?: React.ComponentType<
- Parameters< typeof Iframe >[ 0 ]
- >;
- isPatternPreview: boolean;
-};
-
-function ScaledBlockPreview( {
- viewportWidth,
- containerWidth,
- settings,
- additionalStyles,
- isScrollable = true,
- autoScale = true,
- isPatternPreview,
- CustomIframeComponent = Iframe,
-}: ScaledBlockPreviewProps ) {
- const [ contentHeight, setContentHeight ] = useState< number | null >(
- null
- );
- const { setLogoBlockIds, logoBlockIds } = useContext( LogoBlockContext );
-
- if ( ! viewportWidth ) {
- viewportWidth = containerWidth;
- }
-
- const [ iframeRef, setIframeRef ] = useState< HTMLElement | null >( null );
-
- const [
- popoverStatus,
- virtualElement,
- updatePopoverPosition,
- hidePopover,
- ] = usePopoverHandler();
-
- const { selectBlock, setBlockEditingMode } =
- useDispatch( blockEditorStore );
-
- // @ts-expect-error No types for this exist yet.
- const { getBlockParents } = useSelect( blockEditorStore );
-
- const { setSelectedBlockRef } = useContext( SelectedBlockContext );
-
- const selectedBlockClientId = useSelect( ( select ) => {
- // @ts-expect-error Selector is not typed
- const block = select( blockEditorStore ).getSelectedBlock();
-
- return block?.clientId;
- }, [] );
-
- useEffect( () => {
- if ( selectedBlockClientId && iframeRef ) {
- const el = iframeRef.querySelector(
- `#block-${ selectedBlockClientId }`
- ) as HTMLElement;
-
- if ( ! el ) {
- return;
- }
-
- const observer = new MutationObserver( () => {
- setSelectedBlockRef( el );
- } );
-
- observer.observe( el, {
- attributes: true,
- } );
-
- return () => {
- observer.disconnect();
- };
- }
- }, [ iframeRef, selectedBlockClientId, setSelectedBlockRef ] );
-
- // Avoid scrollbars for pattern previews.
- const editorStyles = useMemo( () => {
- if ( ! isScrollable && settings.styles ) {
- return [
- ...settings.styles,
- {
- css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
- __unstableType: 'presets',
- },
- ];
- }
-
- return settings.styles;
- }, [ settings.styles, isScrollable ] );
-
- const scale = containerWidth / viewportWidth;
- const aspectRatio = contentHeight
- ? containerWidth / ( contentHeight * scale )
- : 0;
-
- // Initialize on render instead of module top level, to avoid circular dependency issues.
- MemoizedBlockList = MemoizedBlockList || memo( BlockList );
- const isResizing = useContext( IsResizingContext );
- const query = useQuery();
-
- const { insertPatternByName } = useInsertPatternByName();
-
- useAddAutoBlockPreviewEventListenersAndObservers(
- {
- documentElement: iframeRef,
- autoScale,
- isPatternPreview,
- contentHeight,
- logoBlockIds,
- query,
- },
- {
- hidePopover,
- selectBlockOnHover,
- selectBlock,
- getBlockParents,
- setBlockEditingMode,
- updatePopoverPosition,
- setLogoBlockIds,
- setContentHeight,
- insertPatternByName,
- }
- );
-
- return (
- <>
- { ! isPatternPreview &&
- virtualElement &&
- popoverStatus === PopoverStatus.VISIBLE &&
- ! isResizing && (
- <Popover
- anchor={ virtualElement }
- as="div"
- variant="unstyled"
- className="components-tooltip woocommerce-customize-store_popover-tooltip"
- >
- <span>
- { __(
- 'You can edit your content later in the Editor',
- 'woocommerce'
- ) }
- </span>
- </Popover>
- ) }
- <DisabledProvider value={ true }>
- <div
- className={ clsx( 'block-editor-block-preview__content', {
- 'woocommerce-customize-store-assembler':
- ! isPatternPreview,
- } ) }
- style={
- autoScale
- ? {
- transform: `scale(${ scale })`,
- // Using width + aspect-ratio instead of height here triggers browsers' native
- // handling of scrollbar's visibility. It prevents the flickering issue seen
- // in https://github.com/WordPress/gutenberg/issues/52027.
- // See https://github.com/WordPress/gutenberg/pull/52921 for more info.
- aspectRatio,
- maxHeight:
- contentHeight !== null &&
- contentHeight > MAX_HEIGHT
- ? MAX_HEIGHT * scale
- : undefined,
- }
- : {}
- }
- >
- <CustomIframeComponent
- aria-hidden
- scrolling={ isScrollable ? 'yes' : 'no' }
- tabIndex={ -1 }
- canEnableZoomOutView={ true }
- readonly={
- ! isFullComposabilityFeatureAndAPIAvailable()
- }
- style={
- autoScale
- ? {
- position: 'absolute',
- width: viewportWidth,
- pointerEvents: 'none',
- height: contentHeight,
- // This is a catch-all max-height for patterns.
- // See: https://github.com/WordPress/gutenberg/pull/38175.
- maxHeight: MAX_HEIGHT,
- }
- : {}
- }
- contentRef={ ( bodyElement: HTMLElement ) => {
- if ( ! bodyElement || iframeRef !== null ) {
- return;
- }
-
- const documentElement =
- bodyElement.ownerDocument.documentElement;
-
- setIframeRef( documentElement );
- } }
- >
- <EditorStyles styles={ editorStyles } />
- <style>
- { `
- .block-editor-block-list__block::before,
- .has-child-selected > .is-selected::after,
- .is-hovered:not(.is-selected.is-hovered)::after,
- .block-list-appender {
- display: none !important;
- }
-
- .block-editor-block-list__block.is-selected {
- box-shadow: none !important;
- }
-
- .block-editor-rich-text__editable {
- pointer-events: none !important;
- }
-
- .wp-block-site-title .block-editor-rich-text__editable {
- pointer-events: all !important;
- }
-
- .wp-block-navigation-item .wp-block-navigation-item__content,
- .wp-block-navigation .wp-block-pages-list__item__link {
- pointer-events: all !important;
- cursor: pointer !important;
- }
-
- .components-resizable-box__handle {
- display: none !important;
- }
-
- footer.is-selected::after,
- header.is-selected::after {
- outline-color: var(--wp-admin-theme-color) !important;
- }
-
- header.is-selected::after {
- border-top-left-radius: 20px;
- }
-
- footer.is-selected::after {
- border-bottom-left-radius: 20px;
- }
-
- ${ additionalStyles }
- ` }
- </style>
- <MemoizedBlockList renderAppender={ false } />
- <PreloadFonts />
- </CustomIframeComponent>
- </div>
- </DisabledProvider>
- </>
- );
-}
-
-export const AutoHeightBlockPreview = (
- props: Omit< ScaledBlockPreviewProps, 'containerWidth' >
-) => {
- const [ containerResizeListener, { width: containerWidth } ] =
- useResizeObserver();
-
- return (
- <>
- <div style={ { position: 'relative', width: '100%', height: 0 } }>
- { containerResizeListener }
- </div>
- <div className="auto-block-preview__container">
- { !! containerWidth && (
- <ScaledBlockPreview
- { ...props }
- containerWidth={ containerWidth }
- />
- ) }
- </div>
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor-container.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor-container.tsx
deleted file mode 100644
index 63c9a978d2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor-container.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * External dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useQuery } from '@woocommerce/navigation';
-import { useContext, useEffect, useMemo } from '@wordpress/element';
-import { BlockInstance, createBlock } from '@wordpress/blocks';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
-
-/**
- * Internal dependencies
- */
-import { CustomizeStoreContext } from './';
-import { BlockEditor } from './block-editor';
-import { HighlightedBlockContext } from './context/highlighted-block-context';
-import { useAddNoBlocksPlaceholder } from './hooks/block-placeholder/use-add-no-blocks-placeholder';
-import { useEditorBlocks } from './hooks/use-editor-blocks';
-import { useScrollOpacity } from './hooks/use-scroll-opacity';
-import {
- PRODUCT_HERO_PATTERN_BUTTON_STYLE,
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
-} from './utils/black-background-pattern-update-button';
-import { useIsActiveNewNeutralVariation } from './hooks/use-is-active-new-neutral-variation';
-
-export const BlockEditorContainer = () => {
- const settings = useSiteEditorSettings();
-
- const currentTemplateId: string | undefined = useSelect(
- ( select ) =>
- select( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- // This is necessary to avoid this issue: https://github.com/woocommerce/woocommerce/issues/45593
- // Related PR: https://github.com/woocommerce/woocommerce/pull/45600
- const { templateType } = useSelect( ( select ) => {
- const { getEditedPostType } = unlock( select( editSiteStore ) );
-
- return {
- templateType: getEditedPostType(),
- };
- }, [] );
-
- const [ blocks, , onChange ] = useEditorBlocks(
- templateType,
- currentTemplateId || ''
- );
-
- const urlParams = useQuery();
- const { currentState } = useContext( CustomizeStoreContext );
-
- const scrollDirection =
- urlParams.path === '/customize-store/assembler-hub/footer'
- ? 'bottomUp'
- : 'topDown';
-
- const previewOpacity = useScrollOpacity(
- '.woocommerce-customize-store__block-editor iframe',
- scrollDirection
- );
-
- const { highlightedBlockClientId } = useContext( HighlightedBlockContext );
- const isHighlighting = highlightedBlockClientId !== null;
- const additionalStyles = isHighlighting
- ? `
- .wp-block.preview-opacity {
- opacity: ${ previewOpacity };
- }
- `
- : '';
-
- const opacityClass = 'preview-opacity';
-
- const clientIds = blocks.map( ( block ) => block.clientId );
-
- const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
- const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
-
- useEffect( () => {
- if ( ! isActiveNewNeutralVariation ) {
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- blocks,
- ( buttonBlocks: BlockInstance[] ) => {
- const buttonBlockClientIds = buttonBlocks.map(
- ( { clientId } ) => clientId
- );
-
- updateBlockAttributes( buttonBlockClientIds, {
- style: {},
- } );
- }
- );
-
- return;
- }
-
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- blocks,
- ( buttonBlocks: BlockInstance[] ) => {
- const buttonBlockClientIds = buttonBlocks.map(
- ( { clientId } ) => clientId
- );
- updateBlockAttributes( buttonBlockClientIds, {
- style: PRODUCT_HERO_PATTERN_BUTTON_STYLE,
- // This is necessary; otherwise, the style won't be applied on the frontend during the style variation change.
- className: '',
- } );
- }
- );
- // Blocks are not part of the dependencies because we don't want to trigger this effect when the blocks change. This would cause an infinite loop.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ isActiveNewNeutralVariation, updateBlockAttributes ] );
-
- const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
-
- useAddNoBlocksPlaceholder( {
- blocks,
- createBlock,
- insertBlock,
- removeBlock,
- } );
-
- useEffect( () => {
- const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
- ( acc, clientId ) => {
- if (
- ! isHighlighting ||
- clientId === highlightedBlockClientId
- ) {
- return {
- blockIdToHighlight: clientId,
- restOfBlockIds: acc.restOfBlockIds,
- };
- }
-
- return {
- blockIdToHighlight: acc.blockIdToHighlight,
- restOfBlockIds: [ ...acc.restOfBlockIds, clientId ],
- };
- },
- {
- blockIdToHighlight: null,
- restOfBlockIds: [],
- } as {
- blockIdToHighlight: string | null;
- restOfBlockIds: string[];
- }
- );
-
- updateBlockAttributes( blockIdToHighlight, {
- className: '',
- } );
-
- updateBlockAttributes( restOfBlockIds, {
- className: ` ${ opacityClass }`,
- } );
- }, [
- clientIds,
- highlightedBlockClientId,
- isHighlighting,
- updateBlockAttributes,
- ] );
-
- const isScrollable = useMemo(
- () =>
- // Disable scrollable for transitional screen
- ! (
- typeof currentState === 'object' &&
- currentState.transitionalScreen === 'transitional'
- ),
- [ currentState ]
- );
-
- return (
- <BlockEditor
- renderedBlocks={ blocks }
- isScrollable={ isScrollable }
- onChange={ onChange }
- settings={ settings }
- additionalStyles={ additionalStyles }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor.tsx
deleted file mode 100644
index af3d66bb8a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-editor.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-import { memo } from 'react';
-import { EditorSettings } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-
-import BlockPreview from './block-preview';
-import Iframe from './iframe';
-
-export const BlockEditor = memo(
- ( {
- renderedBlocks,
- settings,
- additionalStyles,
- isScrollable,
- onChange,
- }: {
- renderedBlocks: BlockInstance[];
- settings: EditorSettings & {
- styles: string[];
- [ key: string ]: unknown;
- };
- additionalStyles: string;
- isScrollable: boolean;
- onChange: (
- blocks: BlockInstance[],
- options: Record< string, unknown >
- ) => void;
- } ) => {
- return (
- <div className="woocommerce-customize-store__block-editor">
- <div className={ 'woocommerce-block-preview-container' }>
- <BlockPreview
- blocks={ renderedBlocks }
- onChange={ onChange }
- settings={ settings }
- additionalStyles={ additionalStyles }
- isScrollable={ isScrollable }
- // Don't use sub registry so that we can get the logo block from the main registry on the logo sidebar navigation screen component.
- useSubRegistry={ false }
- autoScale={ false }
- setLogoBlockContext={ true }
- CustomIframeComponent={ Iframe }
- isPatternPreview={ false }
- />
- </div>
- </div>
- );
- }
-);
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-preview.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-preview.tsx
deleted file mode 100644
index 24f9d7a15e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/block-preview.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/release/16.4/packages/block-editor/src/components/block-preview/index.js
-
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-// @ts-ignore No types for this exist yet.
-import { BlockEditorProvider, EditorSettings } from '@wordpress/block-editor';
-import { memo, useContext } from '@wordpress/element';
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import {
- AutoHeightBlockPreview,
- ScaledBlockPreviewProps,
-} from './auto-block-preview';
-import { Toolbar } from './toolbar/toolbar';
-import { isFullComposabilityFeatureAndAPIAvailable } from './utils/is-full-composability-enabled';
-import { IsResizingContext } from './resizable-frame';
-import { SelectedBlockContextProvider } from './context/selected-block-ref-context';
-
-export const BlockPreview = ( {
- blocks,
- settings,
- useSubRegistry = true,
- onChange,
- isPatternPreview,
- ...props
-}: {
- blocks: BlockInstance | BlockInstance[];
- settings: EditorSettings;
- onChange: (
- blocks: BlockInstance[],
- options: Record< string, unknown >
- ) => void;
- useSubRegistry?: boolean;
- isPatternPreview: boolean;
-} & Omit< ScaledBlockPreviewProps, 'containerWidth' > ) => {
- const renderedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-
- const isResizing = useContext( IsResizingContext );
-
- return (
- <>
- <BlockEditorProvider
- value={ renderedBlocks }
- settings={ settings }
- // We need to set onChange for logo to work, but we don't want to trigger the onChange callback when highlighting blocks in the preview. It would persist the highlighted block and cause the opacity to be applied to block permanently.
- // @ts-expect-error The type is not up to date.
- onChange={ onChange }
- useSubRegistry={ useSubRegistry }
- >
- <SelectedBlockContextProvider>
- { isFullComposabilityFeatureAndAPIAvailable() &&
- ! isPatternPreview &&
- ! isResizing && <Toolbar /> }
- <AutoHeightBlockPreview
- isPatternPreview={ isPatternPreview }
- settings={ settings }
- { ...props }
- />
- </SelectedBlockContextProvider>
- </BlockEditorProvider>
- </>
- );
-};
-
-export default memo( BlockPreview );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/sidebar.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/sidebar.tsx
deleted file mode 100644
index 789a4aaa99..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/sidebar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext, useCallback, useState } from '@wordpress/element';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-export enum SidebarNavigationAnimationDirection {
- Forward = 'forward',
- Back = 'back',
-}
-
-type SidebarNavigationContextType = {
- navigate: ( direction: SidebarNavigationAnimationDirection ) => void;
-};
-
-export const SidebarNavigationContext =
- createContext< SidebarNavigationContextType >( {
- navigate: () => void 0,
- } );
-
-export function SidebarContent( { children }: { children: JSX.Element } ) {
- const [ navState, setNavState ] = useState< {
- direction: SidebarNavigationAnimationDirection | null;
- } >( {
- direction: null,
- } );
-
- const navigate = useCallback(
- ( direction: SidebarNavigationAnimationDirection ) => {
- setNavState( { direction } );
- },
- []
- );
-
- const wrapperCls = clsx(
- 'woocommerce-customize-store-edit-site-sidebar__screen-wrapper',
- {
- 'slide-from-left': navState.direction === 'back',
- 'slide-from-right': navState.direction === 'forward',
- }
- );
-
- return (
- <SidebarNavigationContext.Provider value={ { navigate } }>
- <div className={ wrapperCls }>{ children }</div>
- </SidebarNavigationContext.Provider>
- );
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/style.scss
deleted file mode 100644
index 82bf5032d5..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/components/style.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../_mixins.scss";
-
-.woocommerce-customize-store-edit-site-sidebar__screen-wrapper {
- height: 100%;
- overflow-x: auto;
- @include custom-scrollbars-on-hover(transparent, $gray-700);
-
- // This matches the logo padding
- padding: 0 6px 0 12px;
-
- // Animation
- animation-duration: 0.14s;
- animation-timing-function: ease-in-out;
- will-change: transform, opacity;
-
- @media (prefers-reduced-motion: reduce) {
- animation-duration: 0s;
- }
-
- &.slide-from-left {
- animation-name: slide-from-left;
- }
-
- &.slide-from-right {
- animation-name: slide-from-right;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen-theme-banner {
- margin-top: 32px;
- background: rgba(242, 237, 255, 0.6) url(../../assets/images/sidebar-theme-banner.svg) no-repeat bottom right;
- background-size: contain;
- border-radius: 4px;
- padding: 1rem;
-
- &__title {
- max-width: 170px;
- line-height: 1.4;
- margin: 0 0 8px 0;
- }
-
- &__description {
- color: var(--gutenberg-gray-900, #1e1e1e);
- margin-top: 8px;
- }
-
- &__button {
- $button-padding: 8px;
- padding-left: $button-padding;
- padding-right: $button-padding;
- // negative margin to align button with rest of the content
- margin-left: -$button-padding;
- margin-right: -$button-padding;
- }
- }
-}
-
-@keyframes slide-from-right {
- from {
- transform: translateX(50px);
- opacity: 0;
- }
- to {
- transform: none;
- opacity: 1;
- }
-}
-
-@keyframes slide-from-left {
- from {
- transform: translateX(-50px);
- opacity: 0;
- }
- to {
- transform: none;
- opacity: 1;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx
deleted file mode 100644
index c0e73f56fd..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import React, { createContext, useState } from '@wordpress/element';
-import type { ReactNode } from 'react';
-
-export const HighlightedBlockContext = createContext< {
- highlightedBlockClientId: string | null;
- setHighlightedBlockClientId: ( clientId: string | null ) => void;
- resetHighlightedBlockClientId: () => void;
-} >( {
- highlightedBlockClientId: null,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- setHighlightedBlockClientId: ( clientId: string | null ) => {
- // No op by default.
- },
- resetHighlightedBlockClientId: () => {
- // No op by default.
- },
-} );
-
-// A Provider that keeps track of which block is "focussed" in the Assembler Hub.
-// This is used to highlight the block in the BlockEditor currently.
-export const HighlightedBlockContextProvider = ( {
- children,
-}: {
- children: ReactNode;
-} ) => {
- // Create some state
- const [ highlightedBlockClientId, setHighlightedBlockClientId ] = useState<
- string | null
- >( null );
-
- const resetHighlightedBlockClientId = () => {
- setHighlightedBlockClientId( null );
- };
-
- return (
- <HighlightedBlockContext.Provider
- value={ {
- highlightedBlockClientId,
- setHighlightedBlockClientId,
- resetHighlightedBlockClientId,
- } }
- >
- { children }
- </HighlightedBlockContext.Provider>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/selected-block-ref-context.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/selected-block-ref-context.tsx
deleted file mode 100644
index 99ba2dfd8b..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/context/selected-block-ref-context.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext, useState } from '@wordpress/element';
-import { ReactNode } from 'react';
-
-type SelectedBlockContextType = {
- selectedBlockRef: HTMLElement | null;
- setSelectedBlockRef: ( ref: HTMLElement | null ) => void;
-};
-
-export const SelectedBlockContext = createContext< SelectedBlockContextType >( {
- selectedBlockRef: null,
- setSelectedBlockRef: () => {},
-} );
-
-export const SelectedBlockContextProvider = ( {
- children,
-}: {
- children: ReactNode;
-} ) => {
- const [ selectedBlockRef, setSelectedBlock ] =
- useState< HTMLElement | null >( null );
-
- const setSelectedBlockRef = ( ref: HTMLElement | null ) => {
- setSelectedBlock( ref );
- };
-
- return (
- <SelectedBlockContext.Provider
- value={ {
- selectedBlockRef,
- setSelectedBlockRef,
- } }
- >
- { children }
- </SelectedBlockContext.Provider>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/editor.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/editor.tsx
deleted file mode 100644
index 9e29294f8b..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/editor.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/tree/v16.4.0/packages/edit-site/src/components/editor/index.js
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useEffect, useMemo } from '@wordpress/element';
-// @ts-ignore No types for this exist yet.
-import { InterfaceSkeleton } from '@wordpress/interface';
-import { useSelect, useDispatch } from '@wordpress/data';
-// @ts-ignore No types for this exist yet.
-import { BlockContextProvider } from '@wordpress/block-editor';
-// @ts-ignore No types for this exist yet.
-import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
-// @ts-ignore No types for this exist yet.
-import CanvasSpinner from '@wordpress/edit-site/build-module/components/canvas-spinner';
-// @ts-ignore No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// @ts-ignore No types for this exist yet.
-import { GlobalStylesRenderer } from '@wordpress/edit-site/build-module/components/global-styles-renderer';
-
-/**
- * Internal dependencies
- */
-import { trackEvent } from '../tracking';
-import { editorIsLoaded } from '../utils';
-import { BlockEditorContainer } from './block-editor-container';
-
-export const Editor = ( { isLoading }: { isLoading: boolean } ) => {
- const { context, hasPageContentFocus } = useSelect( ( select ) => {
- const {
- getEditedPostContext,
- hasPageContentFocus: _hasPageContentFocus,
- } = unlock( select( editSiteStore ) );
-
- // The currently selected entity to display.
- // Typically template or template part in the site editor.
- return {
- context: getEditedPostContext(),
- hasPageContentFocus: _hasPageContentFocus,
- };
- }, [] );
- // @ts-ignore No types for this exist yet.
- const { setEditedPostContext } = useDispatch( editSiteStore );
- const blockContext = useMemo( () => {
- const { postType, postId, ...nonPostFields } = context ?? {};
- return {
- ...( hasPageContentFocus ? context : nonPostFields ),
- queryContext: [
- context?.queryContext || { page: 1 },
- ( newQueryContext: Record< string, unknown > ) =>
- setEditedPostContext( {
- ...context,
- queryContext: {
- ...context?.queryContext,
- ...newQueryContext,
- },
- } ),
- ],
- };
- }, [ hasPageContentFocus, context, setEditedPostContext ] );
-
- useEffect( () => {
- if ( ! isLoading ) {
- editorIsLoaded();
- trackEvent( 'customize_your_store_assembler_hub_editor_loaded' );
- }
- }, [ isLoading ] );
-
- return (
- <>
- { isLoading ? <CanvasSpinner /> : null }
-
- <BlockContextProvider value={ blockContext }>
- <InterfaceSkeleton
- enableRegionNavigation={ false }
- className={ clsx(
- 'woocommerce-customize-store__edit-site-editor',
- 'woocommerce-edit-site-editor__interface-skeleton',
- {
- 'show-icon-labels': false,
- 'is-loading': isLoading,
- }
- ) }
- content={
- <>
- <GlobalStylesRenderer />
- <BlockEditorContainer />
- </>
- }
- />
- </BlockContextProvider>
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/go-back-warning-modal.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/go-back-warning-modal.tsx
deleted file mode 100644
index 880c046dac..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/go-back-warning-modal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export const GoBackWarningModal = ( {
- setOpenWarningModal,
- onExitClicked,
- classname = 'woocommerce-customize-store__design-change-warning-modal',
-}: {
- setOpenWarningModal: ( arg0: boolean ) => void;
- onExitClicked: () => void;
- classname?: string;
-} ) => {
- return (
- <Modal
- className={ classname }
- title={ __( 'Are you sure you want to exit?', 'woocommerce' ) }
- onRequestClose={ () => setOpenWarningModal( false ) }
- shouldCloseOnClickOutside={ false }
- >
- <p>
- { __(
- "You'll lose any changes you've made to your store's design and will start the process again.",
- 'woocommerce'
- ) }
- </p>
- <div className="woocommerce-customize-store__design-change-warning-modal-footer">
- <Button onClick={ onExitClicked } variant="link">
- { __( 'Exit and lose changes', 'woocommerce' ) }
- </Button>
- <Button
- onClick={ () => setOpenWarningModal( false ) }
- variant="primary"
- >
- { __( 'Continue designing', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_breakpoints.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_breakpoints.scss
deleted file mode 100644
index a68a1b9f0a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_breakpoints.scss
+++ /dev/null
@@ -1 +0,0 @@
-$break-medium: 782px;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_mixins.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_mixins.scss
deleted file mode 100644
index db0a80b077..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_mixins.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "_breakpoints.scss";
-
-@mixin break-medium() {
- @media (min-width: #{ ($break-medium) }) {
- @content;
- }
-}
-
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-@mixin reduce-motion($property: "") {
- @if $property =="transition" {
- @media (prefers-reduced-motion: reduce) {
- transition-duration: 0s;
- transition-delay: 0s;
- }
- } @else if $property =="animation" {
- @media (prefers-reduced-motion: reduce) {
- animation-duration: 1ms;
- animation-delay: 0s;
- }
- } @else {
- @media (prefers-reduced-motion: reduce) {
- transition-duration: 0s;
- transition-delay: 0s;
- animation-duration: 1ms;
- animation-delay: 0s;
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_variables.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_variables.scss
deleted file mode 100644
index 9877ddf7e3..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/_variables.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-$font-line-height-x-large: 32px;
-
-$grid-unit: 8px;
-$grid-unit-05: 0.5 * $grid-unit; // 4px
-$grid-unit-10: 1 * $grid-unit; // 8px
-$grid-unit-15: 1.5 * $grid-unit; // 12px
-$grid-unit-20: 2 * $grid-unit; // 16px
-$grid-unit-40: 4 * $grid-unit; // 32px
-$grid-unit-60: 6 * $grid-unit; // 48px
-$grid-unit-70: 7 * $grid-unit; // 56px
-$grid-unit-80: 8 * $grid-unit; // 64px
-
-$radius-medium: 4px;
-$radius-large: 8px;
-
-$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
-$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
-$nav-sidebar-width: 300px;
-$header-height: 60px;
-$canvas-padding: $grid-unit-20;
-
-$sidebar-width: 280px;
-
-$border-width: 1px;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/layout.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/layout.scss
deleted file mode 100644
index 7b7a252654..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/layout.scss
+++ /dev/null
@@ -1,272 +0,0 @@
-// This is a copy of the Gutenberg styles with the selectors modified.
-// Also, some z-index properties have been removed for simplicity.
-// https://github.com/WordPress/gutenberg/blob/8aa998526984a3e9d547cd638840f8314bad9d81/packages/edit-site/src/components/layout/style.scss
-// See https://github.com/woocommerce/woocommerce/issues/48377
-@import "_variables.scss";
-@import "_mixins.scss";
-
-.woocommerce-edit-site-layout {
- height: 100%;
- background: $gray-900;
- color: $gray-400;
- display: flex;
- flex-direction: column;
-
- // Show a dark background in "frame" mode to avoid edge artifacts.
- &:not(.is-full-canvas) .editor-visual-editor {
- background: $gray-900;
- }
-}
-
-.woocommerce-edit-site-layout__content {
- height: 100%;
- flex-grow: 1;
- display: flex;
-}
-
-.woocommerce-edit-site-layout__sidebar-region {
- width: 100vw;
- flex-shrink: 0;
-
- @include break-medium {
- width: $nav-sidebar-width;
- }
-
- // This is only necessary for the exit animation
- .woocommerce-edit-site-layout.is-full-canvas & {
- position: fixed !important;
- height: 100vh;
- left: 0;
- top: 0;
- }
-
- .woocommerce-edit-site-layout__sidebar {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- .resizable-editor__drag-handle {
- right: 0;
- }
-}
-
-.woocommerce-edit-site-layout__main {
- flex-grow: 1;
- overflow: hidden;
- display: flex;
- flex-direction: column;
-}
-
-.woocommerce-edit-site-layout__mobile {
- position: relative;
- width: 100%;
-
- /*
- * The SiteHubMobile component is displayed
- * for pages that do not have a sidebar,
- * yet it needs the Sidebar component for the React context.
- *
- * This removes the padding in this scenario.
- * See https://github.com/WordPress/gutenberg/pull/63118
- */
- .woocommerce-edit-site-sidebar__screen-wrapper {
- padding: 0;
- }
-}
-
-.woocommerce-edit-site-layout__canvas-container {
- position: relative;
- flex-grow: 1;
- // When animating the frame size can exceed its container size.
- overflow: visible;
-
- &.is-resizing::after {
- // This covers the whole content which ensures mouse up triggers
- // even if the content is "inert".
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- content: "";
- }
-}
-
-.woocommerce-edit-site-layout__canvas {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &.is-right-aligned {
- justify-content: flex-end;
- }
-
- .woocommerce-edit-site-resizable-frame__inner {
- color: $gray-900;
- }
-
- @include break-medium {
- top: $canvas-padding;
- bottom: $canvas-padding;
- width: calc(100% - #{$canvas-padding});
-
- .woocommerce-edit-site-resizable-frame__inner-content {
- box-shadow: $elevation-x-small;
- transition: border-radius, box-shadow 0.4s;
- // This ensure the radius work properly.
- overflow: hidden;
-
- .woocommerce-edit-site-layout:not(.is-full-canvas) & {
- border-radius: $radius-large;
- }
-
- &:hover {
- box-shadow: $elevation-large;
- }
- }
- }
-
- .woocommerce-edit-site-layout.is-full-canvas & {
- top: 0;
- bottom: 0;
- width: 100%;
- }
-}
-
-// This shouldn't be necessary (we should have a way to say that a skeletton is relative
-.woocommerce-edit-site-layout__mobile .interface-interface-skeleton,
-.woocommerce-edit-site-layout__canvas .interface-interface-skeleton,
-.woocommerce-edit-site-template-pages-preview .interface-interface-skeleton {
- position: relative !important;
- min-height: 100% !important;
-}
-
-.woocommerce-edit-site-template-pages-preview {
- height: 100%;
-}
-
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-html.canvas-mode-edit-transition::view-transition-group(toggle) {
- animation-delay: 255ms;
-}
-
-@media (prefers-reduced-motion) {
-
- ::view-transition-group(*),
- ::view-transition-old(*),
- ::view-transition-new(*) {
- animation: none !important;
- }
-}
-
-/* stylelint-enable */
-
-.woocommerce-edit-site-layout.is-full-canvas .woocommerce-edit-site-layout__sidebar-region .woocommerce-edit-site-layout__view-mode-toggle {
- display: none;
-}
-
-.woocommerce-edit-site-layout__view-mode-toggle.components-button {
- /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
- view-transition-name: toggle;
- /* stylelint-enable */
- position: relative;
- color: $white;
- height: $header-height;
- width: $header-height;
- overflow: hidden;
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- background: $gray-900;
- border-radius: 0;
-
- &:hover,
- &:active {
- color: $white;
- }
-
- &:focus-visible,
- &:focus {
- box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
- outline: 4px solid #0000;
- outline-offset: 4px;
- }
-
- &::before {
- transition: box-shadow 0.1s ease;
- @include reduce-motion("transition");
- content: "";
- display: block;
- position: absolute;
- top: 9px;
- right: 9px;
- bottom: 9px;
- left: 9px;
- border-radius: $radius-medium;
- box-shadow: none;
- }
-
- .woocommerce-edit-site-layout__view-mode-toggle-icon {
- display: flex;
- height: $header-height;
- width: $header-height;
- justify-content: center;
- align-items: center;
- }
-}
-
-.woocommerce-edit-site-layout__actions {
- position: fixed !important; // Need to override the default relative positioning
- top: -9999em;
- bottom: auto;
- left: auto;
- right: 0;
- width: $sidebar-width;
- color: $gray-900;
- background: $white;
-
- &:focus,
- &:focus-within {
- top: auto;
- bottom: 0;
- }
-
- &.is-entity-save-view-open {
-
- &:focus,
- &:focus-within {
- top: 0;
- }
- }
-
- @include break-medium {
- border-left: $border-width solid $gray-300;
- }
-}
-
-.woocommerce-edit-site-layout__area {
- flex-grow: 1;
- margin: 0;
- overflow: hidden;
- box-shadow: $elevation-x-small;
-
- @include break-medium() {
- border-radius: 8px;
- margin: $canvas-padding $canvas-padding $canvas-padding 0;
- }
-}
-
-.woocommerce-edit-site .components-editor-notices__snackbar {
- position: fixed;
- right: 0;
- bottom: 16px;
- padding-left: 16px;
- padding-right: 16px;
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/save-hub.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/save-hub.scss
deleted file mode 100644
index fb546bb224..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/save-hub.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// This is a copy of the Gutenberg styles with the selectors modified.
-// https://github.com/WordPress/gutenberg/blob/8aa998526984a3e9d547cd638840f8314bad9d81/packages/edit-site/src/components/save-hub/style.scss
-// See https://github.com/woocommerce/woocommerce/issues/48377
-@import "_variables.scss";
-
-.woocommerce-edit-site-save-hub {
- color: $gray-600;
- border-top: 1px solid $gray-800;
- flex-shrink: 0;
- margin: 0;
- padding: $grid-unit-20 $canvas-padding;
-}
-
-.woocommerce-edit-site-save-hub__button {
- color: inherit;
- width: 100%;
- justify-content: center;
-
- &[aria-disabled="true"] {
- opacity: 1;
- }
-
- &[aria-disabled="true"]:hover {
- color: inherit;
- }
-
- &:not(.is-primary) {
-
- &.is-busy,
- &.is-busy[aria-disabled="true"]:hover {
- color: $gray-900;
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/sidebar-navigation-screen.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/sidebar-navigation-screen.scss
deleted file mode 100644
index eb24cea6b8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/sidebar-navigation-screen.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-// This is a copy of the Gutenberg styles with the selectors modified.
-// https://github.com/WordPress/gutenberg/blob/8aa998526984a3e9d547cd638840f8314bad9d81/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
-// See https://github.com/woocommerce/woocommerce/issues/48377
-@import "_variables.scss";
-
-.woocommerce-edit-site-sidebar-navigation-screen {
- display: flex;
- flex-direction: column;
- overflow-x: unset !important;
- position: relative;
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__main {
- // Ensure the sidebar is always at least as tall as the viewport.
- // This allows the footer section to be sticky at the bottom of the viewport.
- flex-grow: 1;
- margin-bottom: $grid-unit-20;
-
- &.has-footer {
- margin-bottom: 0;
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__content {
- padding: 0 $grid-unit-20;
-
- .components-item-group {
- margin-left: -$grid-unit-20;
- margin-right: -$grid-unit-20;
- }
-
- .components-text {
- color: $gray-400;
- }
-
- .components-heading {
- margin-bottom: $grid-unit-10;
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__meta {
- margin: 0 0 $grid-unit-20 $grid-unit-20;
- color: $gray-400;
-
- .components-text {
- color: $gray-400;
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__page-link {
- color: $gray-600;
- display: inline-block;
- word-break: break-word;
-
- &:hover,
- &:focus {
- color: $white;
- }
-
- .components-external-link__icon {
- margin-left: $grid-unit-05;
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__title-icon {
- position: sticky;
- top: 0;
- background: $gray-900;
- padding-top: $grid-unit-60;
- margin-bottom: $grid-unit-10;
- padding-bottom: $grid-unit-10;
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__title {
- flex-grow: 1;
- overflow-wrap: break-word;
-
- &#{&},
- &#{&} .woocommerce-edit-site-sidebar-navigation-screen__title {
- line-height: $font-line-height-x-large;
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__actions {
- display: flex;
- flex-shrink: 0;
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__content .woocommerce-edit-site-global-styles-variation-container {
- @include break-medium() {
- // Safari does not currently support `scrollbar-gutter: stable`, so at
- // particular viewport sizes it's possible for previews to render prior to a
- // scrollbar appearing. This then causes a scrollbar to appear, which reduces
- // the width of the container and can cause the preview's width to change.
- // As a result, the preview can go into an endless loop of resizing, causing
- // the preview elements to appear to "dance". A workaround is to provide a
- // max-width for the container, which prevents the introduction of the scrollbar
- // from causing the preview's width to change.
- // See: https://github.com/WordPress/gutenberg/issues/55112
- max-width: 292px;
- }
-}
-
-.woocommerce-edit-site-global-styles-variation-title {
- color: $gray-300;
- font-size: 11px;
- text-transform: uppercase;
- font-weight: 500;
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__content .woocommerce-edit-site-global-styles-variations_item {
-
- // Use a white outline to provide contrast with the dark background.
- .woocommerce-edit-site-global-styles-variations_item-preview {
- outline-color: rgba($white, 0.05);
- }
-
- &:not(.is-active):hover .woocommerce-edit-site-global-styles-variations_item-preview {
- outline-color: rgba($white, 0.15);
- }
-
- &.is-active .woocommerce-edit-site-global-styles-variations_item-preview {
- outline-color: $white;
- }
-
- &:focus-visible .woocommerce-edit-site-global-styles-variations_item-preview {
- outline-color: var(--wp-admin-theme-color);
- }
-}
-
-.woocommerce-edit-site-sidebar-navigation-screen__footer {
- position: sticky;
- bottom: 0;
- background-color: $gray-900;
- gap: 0;
- padding: $grid-unit-20 0;
- margin: $grid-unit-20 0 0;
- border-top: 1px solid $gray-800;
-}
-
-/* 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
- */
-.woocommerce-edit-site-sidebar-navigation-screen__input-control {
- width: 100%;
-
- .components-input-control__container {
- background: $gray-800;
-
- .components-button {
- color: $gray-200 !important;
- }
- }
-
- .components-input-control__input {
- color: $gray-200 !important;
- background: $gray-800 !important;
- }
-
- .components-input-control__backdrop {
- border: 4px !important;
- }
-
- .components-base-control__help {
- color: $gray-600;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
deleted file mode 100644
index 1aa7ed1aec..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
+++ /dev/null
@@ -1,459 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { isFullComposabilityFeatureAndAPIAvailable } from '../utils/is-full-composability-enabled';
-
-export const DISABLE_CLICK_CLASS = 'disable-click';
-
-export const ENABLE_CLICK_CLASS = 'enable-click';
-
-const setStyle = ( documentElement: HTMLElement ) => {
- const element = documentElement.ownerDocument.documentElement;
- element.classList.add( 'block-editor-block-preview__content-iframe' );
- element.style.position = 'absolute';
- element.style.width = '100%';
-
- // Necessary for us to prevent the block editor from showing the focus outline on blocks that we've enabled interaction on.
- const styleBlockId = 'enable-click-styles';
- if (
- ! documentElement.ownerDocument.head.querySelector(
- `#${ styleBlockId }`
- )
- ) {
- const styleBlock =
- documentElement.ownerDocument.createElement( 'style' );
- styleBlock.setAttribute( 'type', 'text/css' );
- styleBlock.setAttribute( 'id', styleBlockId );
- styleBlock.innerHTML = `
- .${ ENABLE_CLICK_CLASS }[data-type="core/button"]:hover {
- cursor: pointer;
- }
- .${ ENABLE_CLICK_CLASS }:focus::after,
- .${ ENABLE_CLICK_CLASS }.is-selected::after {
- content: none !important;
- }
- `;
- documentElement.ownerDocument.head.appendChild( styleBlock );
- }
-
- // Necessary for contentResizeListener to work.
- documentElement.style.boxSizing = 'border-box';
- documentElement.style.position = 'absolute';
- documentElement.style.width = '100%';
-};
-
-/**
- * Sets the height of the iframe to the height of the root container
- */
-const setContentHeightPatternPreview = (
- documentElement: HTMLElement,
- autoScale: boolean,
- {
- setContentHeight,
- }: Pick< useAutoBlockPreviewEventListenersCallbacks, 'setContentHeight' >
-) => {
- const onChange = () => {
- if ( autoScale ) {
- const rootContainer =
- documentElement.ownerDocument.body.querySelector(
- '.is-root-container'
- );
- setContentHeight(
- rootContainer ? rootContainer.clientHeight : null
- );
- }
- };
-
- const observer = new window.MutationObserver( onChange );
- observer.observe( documentElement, {
- attributes: true,
- characterData: false,
- subtree: true,
- childList: true,
- } );
- return observer;
-};
-
-const findAndSetLogoBlock = (
- {
- documentElement,
- }: Pick< useAutoBlockPreviewEventListenersValues, 'autoScale' > & {
- documentElement: HTMLElement;
- },
- {
- setLogoBlockIds,
- }: Pick< useAutoBlockPreviewEventListenersCallbacks, 'setLogoBlockIds' >
-) => {
- const observer = new window.MutationObserver( () => {
- // Get the current logo block client ID from DOM and set it in the logo block context. This is used for the logo settings. See: ./sidebar/sidebar-navigation-screen-logo.tsx
- // Ideally, we should be able to get the logo block client ID from the block editor store but it is not available.
- // We should update this code once the there is a selector in the block editor store that can be used to get the logo block client ID.
- const siteLogos = documentElement.querySelectorAll(
- '.wp-block-site-logo'
- );
-
- const logoBlockIds = Array.from( siteLogos )
- .map( ( siteLogo ) => {
- return siteLogo.getAttribute( 'data-block' );
- } )
- .filter( Boolean ) as string[];
- setLogoBlockIds( logoBlockIds );
- } );
-
- observer.observe( documentElement, {
- subtree: true,
- childList: true,
- } );
-
- return observer;
-};
-
-const makeInert = ( element: Element ) => {
- element.setAttribute( 'inert', 'true' );
-};
-
-const makeInteractive = ( element: Element ) => {
- element.removeAttribute( 'inert' );
-};
-
-const addInertToAssemblerPatterns = (
- documentElement: HTMLElement,
- page: string
-) => {
- const body = documentElement.ownerDocument.body;
-
- const interactiveBlocks: Record< string, string > = {
- '/customize-store/assembler-hub/header': `header[data-type='core/template-part']`,
- '/customize-store/assembler-hub/footer': `footer[data-type='core/template-part']`,
- '/customize-store/assembler-hub/homepage': `[data-is-parent-block='true']:not([data-type='core/template-part']):not(.${ DISABLE_CLICK_CLASS })`,
- };
-
- const pathInteractiveBlocks = page.includes(
- '/customize-store/assembler-hub/homepage'
- )
- ? interactiveBlocks[ '/customize-store/assembler-hub/homepage' ]
- : interactiveBlocks[ page ];
-
- const addInertToTemplateParts = () => {
- for ( const disableClick of documentElement.querySelectorAll(
- `[data-is-parent-block='true']`
- ) ) {
- if ( ! disableClick.classList.contains( ENABLE_CLICK_CLASS ) ) {
- makeInert( disableClick );
- }
- }
-
- for ( const element of documentElement.querySelectorAll(
- pathInteractiveBlocks
- ) ) {
- makeInteractive( element );
- }
- };
-
- addInertToTemplateParts();
-
- const observerChildList = new window.MutationObserver(
- addInertToTemplateParts
- );
-
- observerChildList.observe( body, {
- childList: true,
- } );
-
- return observerChildList;
-};
-
-/**
- * Adds an 'inert' attribute to all inner blocks and blocks with the class "disable-click" within the provided document element.
- * The 'inert' attribute makes the blocks non-interactive, preventing them from receiving focus or being clicked.
- */
-const addInertToAllInnerBlocks = ( documentElement: HTMLElement ) => {
- const body = documentElement.ownerDocument.body;
- const observerChildList = new window.MutationObserver( () => {
- const parentBlocks =
- body.getElementsByClassName(
- 'block-editor-block-list__layout'
- )[ 0 ]?.children ?? [];
-
- for ( const parentBlock of parentBlocks ) {
- parentBlock.setAttribute( 'data-is-parent-block', 'true' );
- }
-
- for ( const disableClick of documentElement.querySelectorAll(
- `[data-is-parent-block='true'] *`
- ) ) {
- if ( ! disableClick.classList.contains( ENABLE_CLICK_CLASS ) ) {
- makeInert( disableClick );
- }
- }
- } );
-
- observerChildList.observe( body, {
- childList: true,
- } );
-
- return observerChildList;
-};
-
-const updateSelectedBlock = (
- documentElement: HTMLElement,
- {
- selectBlock,
- selectBlockOnHover,
- getBlockParents,
- setBlockEditingMode,
- updatePopoverPosition,
- }: Pick<
- useAutoBlockPreviewEventListenersCallbacks,
- | 'selectBlockOnHover'
- | 'selectBlock'
- | 'getBlockParents'
- | 'setBlockEditingMode'
- | 'updatePopoverPosition'
- >
-) => {
- const body = documentElement.ownerDocument.body;
-
- const handleOnClick = ( event: MouseEvent ) => {
- const clickedBlockClientId = selectBlockOnHover( event, {
- selectBlockByClientId: selectBlock,
- getBlockParents,
- setBlockEditingMode,
- } );
-
- updatePopoverPosition( {
- event,
- hoveredBlockClientId: null,
- clickedBlockClientId: clickedBlockClientId as string,
- } );
- ( event.target as HTMLElement ).focus();
- };
-
- const handleMouseMove = ( event: MouseEvent ) => {
- const selectedBlockClientId = selectBlockOnHover( event, {
- selectBlockByClientId: selectBlock,
- getBlockParents,
- setBlockEditingMode: () => void 0,
- } );
-
- if ( selectedBlockClientId ) {
- updatePopoverPosition( {
- event,
- hoveredBlockClientId: selectedBlockClientId,
- clickedBlockClientId: null,
- } );
- }
- };
-
- body.addEventListener( 'click', handleOnClick );
- body.addEventListener( 'mousemove', handleMouseMove );
-
- return () => {
- body.removeEventListener( 'click', handleOnClick );
- body.removeEventListener( 'mousemove', handleMouseMove );
- };
-};
-
-export const hidePopoverWhenMouseLeaveIframe = (
- iframeRef: HTMLElement,
- {
- hidePopover,
- selectBlock,
- }: Pick<
- useAutoBlockPreviewEventListenersCallbacks,
- 'hidePopover' | 'selectBlock'
- >
-) => {
- const handleMouseLeave = ( event: MouseEvent ) => {
- /// Deselect the block if the mouse exits the iframe unless it's moving towards the Block Toolbar.
- if ( event.clientX < 0 || event.clientY < 0 ) {
- selectBlock( '' );
- }
- hidePopover();
- };
-
- if ( iframeRef ) {
- iframeRef.addEventListener( 'mouseleave', handleMouseLeave );
- }
-
- return () => {
- if ( iframeRef ) {
- iframeRef.removeEventListener( 'mouseleave', handleMouseLeave );
- }
- };
-};
-
-const addPatternButtonClickListener = (
- documentElement: HTMLElement,
- insertPatternByName: ( pattern: string ) => void
-) => {
- const DEFAULT_PATTTERN_NAME =
- 'woocommerce-blocks/centered-content-with-image-below';
- const handlePatternButtonClick = () => {
- insertPatternByName( DEFAULT_PATTTERN_NAME );
- };
-
- const patternButton = documentElement.querySelector(
- '.no-blocks-insert-pattern-button'
- );
- if ( patternButton ) {
- patternButton.addEventListener( 'click', handlePatternButtonClick );
- }
-
- return () => {
- if ( patternButton ) {
- patternButton.removeEventListener(
- 'click',
- handlePatternButtonClick
- );
- }
- };
-};
-
-type useAutoBlockPreviewEventListenersValues = {
- documentElement: HTMLElement | null;
- autoScale: boolean;
- isPatternPreview: boolean;
- contentHeight: number | null;
- logoBlockIds: string[];
- query: Record< string, string >;
-};
-
-type useAutoBlockPreviewEventListenersCallbacks = {
- selectBlockOnHover: (
- event: MouseEvent,
- options: {
- selectBlockByClientId: (
- clientId: string,
- initialPosition: 0 | -1 | null
- ) => void;
- getBlockParents: ( clientId: string ) => string[];
- setBlockEditingMode?: ( clientId: string ) => void;
- }
- ) => string | undefined;
- selectBlock: ( clientId: string ) => void;
- getBlockParents: ( clientId: string ) => string[];
- setBlockEditingMode: ( clientId: string ) => void;
- updatePopoverPosition: ( options: {
- event: MouseEvent;
- hoveredBlockClientId: string | null;
- clickedBlockClientId: string | null;
- } ) => void;
- setLogoBlockIds: ( logoBlockIds: string[] ) => void;
- setContentHeight: ( contentHeight: number | null ) => void;
- hidePopover: () => void;
- insertPatternByName: ( pattern: string ) => void;
-};
-
-/**
- * Adds event listeners and observers to the auto block preview iframe.
- *
- */
-export const useAddAutoBlockPreviewEventListenersAndObservers = (
- {
- documentElement,
- autoScale,
- isPatternPreview,
- logoBlockIds,
- query,
- }: useAutoBlockPreviewEventListenersValues,
- {
- selectBlockOnHover,
- selectBlock,
- getBlockParents,
- setBlockEditingMode,
- updatePopoverPosition,
- setLogoBlockIds,
- setContentHeight,
- hidePopover,
- insertPatternByName,
- }: useAutoBlockPreviewEventListenersCallbacks
-) => {
- useEffect( () => {
- const observers: Array< MutationObserver > = [];
- const unsubscribeCallbacks: Array< () => void > = [];
-
- if ( ! documentElement ) {
- return;
- }
-
- // Set the height of the iframe to the height of the root container only when the block preview is used to preview a pattern.
- if ( isPatternPreview ) {
- const heightObserver = setContentHeightPatternPreview(
- documentElement,
- autoScale,
- {
- setContentHeight,
- }
- );
-
- observers.push( heightObserver );
- }
-
- setStyle( documentElement );
-
- const logoObserver = findAndSetLogoBlock(
- { autoScale, documentElement },
- {
- setLogoBlockIds,
- }
- );
-
- observers.push( logoObserver );
-
- if (
- isFullComposabilityFeatureAndAPIAvailable() &&
- ! isPatternPreview
- ) {
- const removeEventListenerHidePopover =
- hidePopoverWhenMouseLeaveIframe( documentElement, {
- hidePopover,
- selectBlock,
- } );
-
- const removeEventListenersSelectedBlock = updateSelectedBlock(
- documentElement,
- {
- selectBlock,
- selectBlockOnHover,
- getBlockParents,
- setBlockEditingMode,
- updatePopoverPosition,
- }
- );
-
- const inertInnerBlockObserver =
- addInertToAllInnerBlocks( documentElement );
- observers.push( inertInnerBlockObserver );
-
- const inertAssemblerPatternObserver = addInertToAssemblerPatterns(
- documentElement,
- query?.path
- );
- observers.push( inertAssemblerPatternObserver );
-
- unsubscribeCallbacks.push( removeEventListenersSelectedBlock );
- unsubscribeCallbacks.push( removeEventListenerHidePopover );
- }
-
- // Add event listener to the button which will insert a default pattern
- // when there are no patterns inserted in the block preview.
- const removePatternButtonClickListener = addPatternButtonClickListener(
- documentElement,
- insertPatternByName
- );
- unsubscribeCallbacks.push( removePatternButtonClickListener );
-
- return () => {
- observers.forEach( ( observer ) => observer.disconnect() );
- unsubscribeCallbacks.forEach( ( callback ) => callback() );
- };
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ documentElement, logoBlockIds, query ] );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-add-no-blocks-placeholder.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-add-no-blocks-placeholder.ts
deleted file mode 100644
index ebd0727182..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-add-no-blocks-placeholder.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-import NoBlocks from '../../../assets/images/no-blocks.png';
-import { ENABLE_CLICK_CLASS } from '../auto-block-preview-event-listener';
-
-/**
- * The scope of this variable is limited to the block-placeholder folder.
- *
- */
-export let noBlocksPlaceholderClientId: string | null;
-
-export const useAddNoBlocksPlaceholder = ( {
- blocks,
- createBlock,
- insertBlock,
- removeBlock,
-}: {
- blocks: BlockInstance[];
- createBlock: (
- name: string,
- attributes: Record< string, unknown >,
- innerBlocks?: BlockInstance[]
- ) => BlockInstance;
- insertBlock: ( block: BlockInstance, index: number ) => void;
- removeBlock: ( clientId: string ) => void;
-} ) => {
- useEffect( () => {
- if (
- blocks.length === 2 &&
- blocks.every( ( block ) => block.name === 'core/template-part' )
- ) {
- const noBlocksBlock = createBlock(
- 'core/group',
- {
- __noBlocksPlaceholder: true,
- className: ENABLE_CLICK_CLASS,
- style: {
- dimensions: {
- minHeight: '60vh',
- },
- color: {
- background: '#FAFAFA',
- },
- spacing: {
- padding: {
- top: '40px',
- bottom: '40px',
- },
- },
- },
- layout: {
- type: 'flex',
- orientation: 'vertical',
- justifyContent: 'center',
- verticalAlignment: 'center',
- },
- },
- [
- createBlock( 'core/image', {
- url: NoBlocks,
- align: 'center',
- className: ENABLE_CLICK_CLASS,
- } ),
- createBlock(
- 'core/group',
- {
- layout: {
- type: 'constrained',
- contentSize: '350px',
- },
- className: ENABLE_CLICK_CLASS,
- },
- [
- createBlock( 'core/paragraph', {
- className: ENABLE_CLICK_CLASS,
- align: 'center',
- fontFamily: 'inter',
- style: {
- color: {
- text: '#2F2F2F',
- },
- },
- content: __(
- 'Add one or more of our homepage patterns to create a page that welcomes shoppers.',
- 'woocommerce'
- ),
- } ),
- createBlock( 'core/button', {
- align: 'center',
- fontFamily: 'inter',
- className: `is-style-outline ${ ENABLE_CLICK_CLASS } no-blocks-insert-pattern-button`,
- style: {
- border: {
- radius: '2px',
- color: '#007cba',
- width: '1px',
- },
- color: {
- text: '#007cba',
- },
- },
- text: __( 'Add patterns', 'woocommerce' ),
- } ),
- ]
- ),
- ]
- );
- insertBlock( noBlocksBlock, 1 );
- noBlocksPlaceholderClientId = noBlocksBlock.clientId;
- }
-
- if ( blocks.length > 3 && noBlocksPlaceholderClientId ) {
- removeBlock( noBlocksPlaceholderClientId );
- }
- }, [ blocks, createBlock, insertBlock, removeBlock ] );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-is-no-blocks-placeholder-present.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-is-no-blocks-placeholder-present.ts
deleted file mode 100644
index f46a3bedd1..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/block-placeholder/use-is-no-blocks-placeholder-present.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-/**
- * Internal dependencies
- */
-import { noBlocksPlaceholderClientId } from './use-add-no-blocks-placeholder';
-
-export const useIsNoBlocksPlaceholderPresent = ( blocks: BlockInstance[] ) => {
- return (
- blocks.find(
- ( block ) => block.clientId === noBlocksPlaceholderClientId
- ) !== undefined
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js
deleted file mode 100644
index cafe73b16a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import { useHomeTemplates, getTemplatePatterns } from '../use-home-templates';
-import { usePatterns } from '../use-patterns';
-
-// Mocking the dependent hooks and data
-jest.mock( '../use-patterns' );
-jest.mock( '~/customize-store/data/homepageTemplates', () => ( {
- HOMEPAGE_TEMPLATES: {
- template1: { blocks: [ 'content1', 'content2' ] },
- template2: { blocks: [ 'content3' ] },
- },
-} ) );
-
-const mockUsePatterns = usePatterns;
-
-const mockPatternsByName = {
- content1: { name: 'content1', content: '<div>Content1</div>' },
- content2: { name: 'content2', content: '<div>Content2</div>' },
- content3: { name: 'content3', content: '<div>Content3</div>' },
-};
-
-describe( 'useHomeTemplates', () => {
- beforeEach( () => {
- mockUsePatterns.mockReturnValue( {
- blockPatterns: Object.values( mockPatternsByName ),
- isLoading: false,
- } );
- } );
-
- it( 'should return home templates without first and last items', () => {
- const { result } = renderHook( () => useHomeTemplates() );
-
- // The expected result based on the HOMEPAGE_TEMPLATES and mock patterns
- const expectedResult = {
- template1: getTemplatePatterns(
- [ 'content1', 'content2' ],
- mockPatternsByName
- ),
- template2: getTemplatePatterns(
- [ 'content3' ],
- mockPatternsByName
- ),
- };
-
- expect( result.current.homeTemplates ).toEqual( expectedResult );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts
deleted file mode 100644
index 29a6f95149..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-// @ts-ignore No types for this exist yet.
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { BlockInstance } from '@wordpress/blocks';
-
-type InputHandler = ( blocks: BlockInstance[] ) => void;
-type ChangeHandler = (
- blocks: BlockInstance[],
- options: Record< string, unknown >
-) => void;
-
-// Note, must be used within BlockEditorProvider. This allows shared access of blocks currently
-// being edited in the BlockEditor.
-export const useEditorBlocks = (
- templateType: 'wp_template' | 'wp_template_part',
- templateId: string
-): [ BlockInstance[], InputHandler, ChangeHandler ] => {
- // @ts-ignore Types are not up to date.
- const [ blocks, onInput, onChange ]: [
- BlockInstance[] | undefined,
- InputHandler,
- ChangeHandler
- ] = useEntityBlockEditor( 'postType', templateType, {
- id: templateId,
- } );
-
- return [ blocks ?? [], onInput, onChange ];
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts
deleted file mode 100644
index 312d10403b..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-/**
- * External dependencies
- */
-// @ts-ignore No types for this exist yet.
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-import { useCallback, useEffect } from '@wordpress/element';
-
-export const useEditorScroll = ( {
- editorSelector,
- scrollDirection = 'bottom',
-}: {
- editorSelector: string;
- scrollDirection: 'top' | 'bottom';
-} ) => {
- const isEditorLoading = useIsSiteEditorLoading();
-
- const scroll = useCallback( () => {
- const previewContainer =
- document.querySelector< HTMLIFrameElement >( editorSelector );
- if ( previewContainer ) {
- previewContainer.contentWindow?.scrollTo( {
- left: 0,
- top:
- scrollDirection === 'bottom'
- ? previewContainer.contentDocument?.body.scrollHeight ||
- 0
- : 0,
- } );
- }
- }, [ scrollDirection, editorSelector ] );
-
- useEffect( () => {
- // Scroll to the bottom of the preview when the editor is done loading.
- if ( ! isEditorLoading ) {
- scroll();
- }
- }, [ isEditorLoading, scroll ] );
-
- return {
- scroll,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts
deleted file mode 100644
index c523d78ee3..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { usePatterns } from './use-patterns';
-import { HOMEPAGE_TEMPLATES } from '~/customize-store/data/homepageTemplates';
-import { Pattern, PatternWithBlocks } from '~/customize-store/types/pattern';
-
-export const getTemplatePatterns = (
- template: string[],
- patternsByName: Record< string, Pattern >
-) =>
- template
- .map( ( patternName: string ) => {
- const pattern = patternsByName[ patternName ];
- if ( pattern && pattern.content ) {
- return {
- ...pattern,
- // @ts-ignore - Passing options is valid, but not in the type.
- blocks: parse( pattern.content, {
- __unstableSkipMigrationLogs: true,
- } ),
- };
- }
- return null;
- } )
- .filter( ( pattern ) => pattern !== null ) as PatternWithBlocks[];
-
-export const patternsToNameMap = ( blockPatterns: Pattern[] ) =>
- blockPatterns.reduce(
- ( acc: Record< string, Pattern >, pattern: Pattern ) => {
- acc[ pattern.name ] = pattern;
- return acc;
- },
- {}
- );
-
-// Returns home template patterns excluding header and footer.
-export const useHomeTemplates = () => {
- const { blockPatterns, isLoading } = usePatterns();
-
- const patternsByName = useMemo(
- () => patternsToNameMap( blockPatterns ),
- [ blockPatterns ]
- );
-
- const homeTemplates = useMemo( () => {
- if ( isLoading ) return {};
- const recommendedTemplates = HOMEPAGE_TEMPLATES;
-
- return Object.entries( recommendedTemplates ).reduce(
- (
- acc: Record< string, PatternWithBlocks[] >,
- [ templateName, template ]
- ) => {
- if ( templateName in recommendedTemplates ) {
- acc[ templateName ] = getTemplatePatterns(
- template.blocks,
- patternsByName
- );
- }
- return acc;
- },
- {}
- );
- }, [ isLoading, patternsByName ] );
-
- return {
- homeTemplates,
- isLoading,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern-by-name.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern-by-name.ts
deleted file mode 100644
index cfb9a44d49..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern-by-name.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Pattern } from '~/customize-store/types/pattern';
-import { useInsertPattern } from './use-insert-pattern';
-import { usePatterns } from './use-patterns';
-
-export const useInsertPatternByName = () => {
- const { blockPatterns, isLoading } = usePatterns();
- const { insertPattern } = useInsertPattern();
-
- const insertPatternByName = ( name: string ) => {
- if ( isLoading ) {
- return;
- }
-
- const pattern = blockPatterns.find( ( p: Pattern ) => p.name === name );
-
- if ( ! pattern ) {
- return;
- }
-
- insertPattern( pattern );
- };
-
- return {
- insertPatternByName,
- isLoading,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts
deleted file mode 100644
index 6347ddab90..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { useCallback, useMemo, useRef } from '@wordpress/element';
-import { useSelect, useDispatch, select } from '@wordpress/data';
-import { BlockInstance, cloneBlock } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import { useEditorBlocks } from './use-editor-blocks';
-import {
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
- PRODUCT_HERO_PATTERN_BUTTON_STYLE,
-} from '../utils/black-background-pattern-update-button';
-import { useIsActiveNewNeutralVariation } from './use-is-active-new-neutral-variation';
-import { trackEvent } from '../../tracking';
-import { Pattern } from '~/customize-store/types/pattern';
-
-export const useInsertPattern = () => {
- const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
-
- const currentTemplateId: string | undefined = useSelect(
- ( sel ) => sel( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ blocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const insertedPatternRef = useRef< string | null >( null );
-
- const { insertBlocks } = useDispatch( blockEditorStore );
-
- const insertableIndex = useMemo( () => {
- return blocks.findLastIndex(
- ( block ) => block.name === 'core/template-part'
- );
- }, [ blocks ] );
-
- const insertPattern = useCallback(
- ( pattern: Pattern ) => {
- const parsedPattern = unlock(
- select( blockEditorStore )
- ).__experimentalGetParsedPattern( pattern.name );
-
- const cloneBlocks = parsedPattern.blocks.map(
- ( blockInstance: BlockInstance ) => cloneBlock( blockInstance )
- );
-
- if ( ! isActiveNewNeutralVariation ) {
- const updatedBlocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- cloneBlocks,
- ( patternBlocks: BlockInstance[] ) => {
- patternBlocks.forEach(
- ( block: BlockInstance ) =>
- ( block.attributes.style = {} )
- );
- }
- );
-
- insertBlocks(
- updatedBlocks,
- insertableIndex,
- undefined,
- false
- );
- insertedPatternRef.current = updatedBlocks[ 0 ].clientId;
- } else {
- const updatedBlocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- cloneBlocks,
- ( patternBlocks: BlockInstance[] ) => {
- patternBlocks.forEach(
- ( block ) =>
- ( block.attributes.style =
- PRODUCT_HERO_PATTERN_BUTTON_STYLE )
- );
- }
- );
- insertBlocks(
- updatedBlocks,
- insertableIndex,
- undefined,
- false
- );
- insertedPatternRef.current = updatedBlocks[ 0 ].clientId;
- }
-
- trackEvent(
- 'customize_your_store_assembler_pattern_sidebar_click',
- { pattern: pattern.name }
- );
- },
- [ insertBlocks, insertableIndex, isActiveNewNeutralVariation ]
- );
-
- return {
- insertPattern,
- insertedPattern: insertedPatternRef,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts
deleted file mode 100644
index b1f8fb0c6f..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { useContext, useMemo } from '@wordpress/element';
-import { isEqual } from 'lodash';
-import {
- // @ts-expect-error No types for this exist yet.
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- unlock,
- // @ts-expect-error No types for this exist yet.
-} from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import { COLOR_PALETTES } from '../sidebar/global-styles/color-palette-variations/constants';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-export const useIsActiveNewNeutralVariation = () => {
- // @ts-expect-error No types for this exist yet.
- const { user } = useContext( GlobalStylesContext );
- return useMemo(
- () =>
- isEqual( COLOR_PALETTES[ 0 ].settings.color, user.settings.color ),
- [ user ]
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-logo-attributes.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-logo-attributes.ts
deleted file mode 100644
index 9c7694843a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-logo-attributes.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { useContext } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import {
- store as blockEditorStore,
- // @ts-ignore No types for this exist yet.
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { LogoBlockContext } from '../logo-block-context';
-
-export type LogoAttributes = Partial< {
- align: string;
- width: number;
- height: number;
- isLink: boolean;
- linkTarget: string;
- shouldSyncIcon: boolean;
-} >;
-
-export const useLogoAttributes = () => {
- // Get the current logo block client ID and attributes. These are used for the logo settings.
- const { logoBlockIds } = useContext( LogoBlockContext );
- const {
- attributes,
- isAttributesLoading,
- }: {
- attributes: LogoAttributes;
- isAttributesLoading: boolean;
- } = useSelect(
- ( select ) => {
- const logoBlocks =
- // @ts-ignore No types for this exist yet.
- select( blockEditorStore ).getBlocksByClientId( logoBlockIds );
- const _isAttributesLoading =
- ! logoBlocks.length || logoBlocks[ 0 ] === null;
-
- if ( _isAttributesLoading ) {
- return {
- attributes: {},
- isAttributesLoading: _isAttributesLoading,
- };
- }
-
- return {
- attributes: logoBlocks[ 0 ].attributes,
- isAttributesLoading: _isAttributesLoading,
- };
- },
- [ logoBlockIds ]
- );
-
- return {
- attributes,
- isAttributesLoading,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-patterns.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-patterns.ts
deleted file mode 100644
index dbdc9fa2e8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-patterns.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/**
- * External dependencies
- */
-import { dispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
-/**
- * Internal dependencies
- */
-import { useLogoAttributes } from '../hooks/use-logo-attributes';
-import { setLogoWidth } from '../../utils';
-import { Pattern } from '~/customize-store/types/pattern';
-import { THEME_SLUG } from '~/customize-store/data/constants';
-
-export const usePatterns = () => {
- const { blockPatterns, isLoading, invalidateCache } = useSelect(
- ( select ) => ( {
- blockPatterns: select( coreStore ).getBlockPatterns() as Pattern[],
- isLoading:
- // @ts-expect-error -- No types for this exist yet.
- ! select( coreStore ).hasFinishedResolution(
- 'getBlockPatterns'
- ),
- invalidateCache: () =>
- dispatch( coreStore ).invalidateResolutionForStoreSelector(
- 'getBlockPatterns'
- ),
- } ),
- []
- );
-
- return {
- blockPatterns,
- isLoading,
- invalidateCache,
- };
-};
-
-export const usePatternsByCategory = ( category: string ) => {
- const { blockPatterns, isLoading } = usePatterns();
- const { attributes, isAttributesLoading } = useLogoAttributes();
- const [ currentLogoWidth, setCurrentLogoWidth ] = useState(
- attributes.width
- );
-
- useEffect( () => {
- if ( isAttributesLoading ) {
- return;
- }
-
- setCurrentLogoWidth( attributes.width );
- }, [ isAttributesLoading, attributes.width, currentLogoWidth ] );
-
- const patternsByCategory = useMemo( () => {
- return ( blockPatterns || [] ).filter(
- ( pattern: Pattern ) =>
- pattern.categories?.includes( category ) &&
- ! pattern.name.includes( THEME_SLUG ) &&
- pattern.source !== 'pattern-directory/theme' &&
- pattern.source !== 'pattern-directory/core'
- );
- }, [ blockPatterns, category ] );
-
- const patternsWithBlocks = useMemo( () => {
- return patternsByCategory.map( ( pattern: Pattern ) => {
- const content = setLogoWidth( pattern.content, currentLogoWidth );
-
- return {
- ...pattern,
- content,
- // Set the logo width to the current logo width so that user changes are not lost.
-
- blocks: parse(
- content,
- // @ts-expect-error - Passing options is valid, but not in the type.
- {
- __unstableSkipMigrationLogs: true,
- }
- ),
- };
- } );
- }, [ patternsByCategory, currentLogoWidth ] );
-
- return { isLoading, patterns: patternsWithBlocks };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-popover-handler.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-popover-handler.ts
deleted file mode 100644
index d0370121ef..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-popover-handler.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from 'react';
-
-/**
- * Internal dependencies
- */
-import { ENABLE_CLICK_CLASS } from './auto-block-preview-event-listener';
-
-export enum PopoverStatus {
- VISIBLE = 'VISIBLE',
- HIDDEN = 'HIDDEN',
-}
-
-type VirtualElement = Pick< Element, 'getBoundingClientRect' >;
-
-const generateGetBoundingClientRect = ( x = 0, y = 0 ) => {
- return () => ( {
- width: 0,
- height: 0,
- top: y,
- right: x,
- bottom: y,
- left: x,
- } );
-};
-
-let clickedClientId: string | null = null;
-let hoveredClientId: string | null = null;
-
-export const usePopoverHandler = () => {
- const [ popoverStatus, setPopoverStatus ] = useState< PopoverStatus >(
- PopoverStatus.HIDDEN
- );
-
- const defaultVirtualElement = {
- getBoundingClientRect: generateGetBoundingClientRect(),
- } as VirtualElement;
-
- const [ virtualElement, setVirtualElement ] = useState< VirtualElement >(
- defaultVirtualElement
- );
-
- const hidePopover = () => {
- setPopoverStatus( PopoverStatus.HIDDEN );
- clickedClientId = null;
- hoveredClientId = null;
- };
-
- const updatePopoverPosition = ( {
- event,
- clickedBlockClientId,
- hoveredBlockClientId,
- }: {
- event: MouseEvent;
- clickedBlockClientId: string | null;
- hoveredBlockClientId: string | null;
- } ) => {
- const iframe = window.document.querySelector(
- '.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
- ) as HTMLElement;
-
- const target = event.target as HTMLElement;
-
- // If the hover event is over elements with an ENABLE_CLICK_CLASS, hide the popover.
- // This is because it's likely the "No Blocks" placeholder and we don't want the popover to show since its interactive.
- if ( target.classList.contains( ENABLE_CLICK_CLASS ) ) {
- hidePopover();
- return;
- }
-
- clickedClientId =
- clickedBlockClientId === null
- ? clickedClientId
- : clickedBlockClientId;
- hoveredClientId =
- hoveredBlockClientId === null
- ? hoveredClientId
- : hoveredBlockClientId;
-
- if ( clickedClientId === hoveredClientId ) {
- if ( popoverStatus === PopoverStatus.HIDDEN ) {
- setPopoverStatus( PopoverStatus.VISIBLE );
- }
-
- const iframeRect = iframe.getBoundingClientRect();
-
- const newElement = {
- getBoundingClientRect: generateGetBoundingClientRect(
- event.clientX + iframeRect.left,
- event.clientY + iframeRect.top + 20
- ),
- } as VirtualElement;
-
- setVirtualElement( newElement );
- return;
- }
-
- setPopoverStatus( PopoverStatus.HIDDEN );
- clickedClientId = null;
- };
-
- return [
- popoverStatus,
- virtualElement,
- updatePopoverPosition,
- hidePopover,
- setPopoverStatus,
- ] as const;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts
deleted file mode 100644
index f012b4522e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-// @ts-ignore No types for this exist yet.
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-
-type ScrollDirection = 'topDown' | 'bottomUp';
-
-export const useScrollOpacity = (
- selector: string,
- direction: ScrollDirection = 'topDown',
- sensitivity = 0.2
-) => {
- const [ opacity, setOpacity ] = useState( 0.05 );
- const isEditorLoading = useIsSiteEditorLoading();
-
- useEffect( () => {
- let targetElement: Document | Element | null =
- document.querySelector( selector );
-
- const isIFrame = targetElement?.tagName === 'IFRAME';
- if ( isIFrame ) {
- targetElement = ( targetElement as HTMLIFrameElement )
- .contentDocument;
- }
-
- const handleScroll = () => {
- if ( ! targetElement ) {
- return;
- }
-
- const contentElement = isIFrame
- ? ( targetElement as Document ).documentElement
- : ( targetElement as Element );
-
- const _sensitivity =
- // Set sensitivity to a small threshold for mobile devices because they have a small viewport to ensure the effect is visible.
- contentElement.clientWidth > 480 ? sensitivity : 0.05;
-
- const maxScrollHeight =
- contentElement.scrollHeight - contentElement.clientHeight;
- const currentScrollPosition = contentElement.scrollTop;
- const maxEffectScroll = maxScrollHeight * _sensitivity;
-
- let calculatedOpacity;
- if ( direction === 'bottomUp' ) {
- calculatedOpacity =
- maxScrollHeight / maxEffectScroll -
- currentScrollPosition / maxEffectScroll;
- } else {
- calculatedOpacity = currentScrollPosition / maxEffectScroll;
- }
-
- calculatedOpacity = 0.1 + 0.9 * calculatedOpacity;
-
- // Clamp opacity between 0.1 and 1
- calculatedOpacity = Math.max(
- 0.1,
- Math.min( calculatedOpacity, 1 )
- );
-
- setOpacity( calculatedOpacity );
- };
-
- if ( targetElement ) {
- targetElement.addEventListener( 'scroll', handleScroll );
- }
-
- return () => {
- if ( targetElement ) {
- targetElement.removeEventListener( 'scroll', handleScroll );
- }
- };
- }, [ selector, direction, sensitivity, isEditorLoading ] );
-
- return opacity;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-selected-pattern.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-selected-pattern.ts
deleted file mode 100644
index 7d95f128df..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/hooks/use-selected-pattern.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-export const useSelectedPattern = (
- patternSelector = '.woocommerce-edit-site-sidebar-navigation-screen__content .block-editor-block-patterns-list__item'
-) => {
- const [ selectedPattern, setSelectedPattern ] =
- useState< PatternWithBlocks >();
-
- useEffect( () => {
- // This is a hack to add the "is-selected" class to the selected pattern
- const patternElements = document.querySelectorAll( patternSelector );
-
- patternElements.forEach( ( patternElement ) => {
- if (
- patternElement.getAttribute( 'aria-label' ) ===
- selectedPattern?.title
- ) {
- patternElement.classList.add( 'is-selected' );
- } else {
- patternElement.classList.remove( 'is-selected' );
- }
- } );
- }, [ selectedPattern, patternSelector ] );
-
- return {
- selectedPattern,
- setSelectedPattern,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/iframe.jsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/iframe.jsx
deleted file mode 100644
index b4085be6d6..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/iframe.jsx
+++ /dev/null
@@ -1,187 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/f91b4fb4a12e41dd39c9594f24ea1a1a4e23dade/packages/block-editor/src/components/iframe/index.js#L1
-// We fork the code from the above link to reduce the unnecessary network requests and improve the performance.
-
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import {
- useState,
- createPortal,
- forwardRef,
- useMemo,
- useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- useResizeObserver,
- useMergeRefs,
- useRefEffect,
- useDisabled,
-} from '@wordpress/compose';
-import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-function Iframe( {
- contentRef,
- children,
- tabIndex = 0,
- scale = 1,
- frameSize = 0,
- expand = false,
- readonly,
- forwardedRef: ref,
- loadStyles = true,
- loadScripts = false,
- ...props
-} ) {
- const [ iframeDocument, setIframeDocument ] = useState();
-
- const [ bodyClasses, setBodyClasses ] = useState( [] );
-
- const { resolvedAssets } = useSelect( ( select ) => {
- const settings = select( blockEditorStore ).getSettings();
-
- return {
- resolvedAssets: settings.__unstableResolvedAssets,
- };
- }, [] );
- const { styles = '', scripts = '' } = resolvedAssets;
-
- const [ contentResizeListener, { height: contentHeight } ] =
- useResizeObserver();
- const setRef = useRefEffect( ( node ) => {
- node._load = () => {
- setIframeDocument( node.contentDocument );
- };
- function onLoad() {
- const { contentDocument, ownerDocument } = node;
- const { documentElement } = contentDocument;
-
- documentElement.classList.add( 'block-editor-iframe__html' );
-
- setBodyClasses(
- Array.from( ownerDocument?.body.classList ).filter(
- ( name ) =>
- name.startsWith( 'admin-color-' ) ||
- name.startsWith( 'post-type-' ) ||
- name === 'wp-embed-responsive'
- )
- );
- }
-
- node.addEventListener( 'load', onLoad );
-
- return () => {
- delete node._load;
- node.removeEventListener( 'load', onLoad );
- };
- }, [] );
-
- const disabledRef = useDisabled( { isDisabled: ! readonly } );
- const bodyRef = useMergeRefs( [ contentRef, disabledRef ] );
-
- // Correct doctype is required to enable rendering in standards
- // mode. Also preload the styles to avoid a flash of unstyled
- // content.
- const html = `<!doctype html>
-<html>
- <head>
- <script>window.frameElement._load()</script>
- <style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
- ${ loadStyles ? styles : '' }
- ${ loadScripts ? scripts : '' }
- </head>
- <body>
- <script>document.currentScript.parentElement.remove()</script>
- </body>
-</html>`;
-
- const [ src, cleanup ] = useMemo( () => {
- const _src = URL.createObjectURL(
- new window.Blob( [ html ], { type: 'text/html' } )
- );
- return [ _src, () => URL.revokeObjectURL( _src ) ];
- }, [ html ] );
-
- useEffect( () => cleanup, [ cleanup ] );
-
- // We need to counter the margin created by scaling the iframe. If the scale
- // is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
- // top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
- const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
-
- return (
- <>
- <iframe
- { ...props }
- style={ {
- ...props.style,
- height: expand ? contentHeight : props.style?.height,
- marginTop:
- scale !== 1
- ? -marginFromScaling + frameSize
- : props.style?.marginTop,
- marginBottom:
- scale !== 1
- ? -marginFromScaling + frameSize
- : props.style?.marginBottom,
- transform:
- scale !== 1
- ? `scale( ${ scale } )`
- : props.style?.transform,
- transition: 'all .3s',
- } }
- ref={ useMergeRefs( [ ref, setRef ] ) }
- tabIndex={ tabIndex }
- // Correct doctype is required to enable rendering in standards
- // mode. Also preload the styles to avoid a flash of unstyled
- // content.
- src={ src }
- title={ __( 'Editor canvas', 'woocommerce' ) }
- name="editor-canvas"
- >
- { iframeDocument &&
- createPortal(
- <body
- ref={ bodyRef }
- className={ clsx(
- 'block-editor-iframe__body',
- 'editor-styles-wrapper',
- ...bodyClasses
- ) }
- >
- { contentResizeListener }
- <StyleProvider document={ iframeDocument }>
- { children }
- </StyleProvider>
- </body>,
- iframeDocument.documentElement
- ) }
- </iframe>
- </>
- );
-}
-
-function IframeIfReady( props, ref ) {
- const isInitialised = useSelect(
- ( select ) =>
- select( blockEditorStore ).getSettings().__internalIsInitialized,
- []
- );
-
- // We shouldn't render the iframe until the editor settings are initialised.
- // The initial settings are needed to get the styles for the srcDoc, which
- // cannot be changed after the iframe is mounted. srcDoc is used to to set
- // the initial iframe HTML, which is required to avoid a flash of unstyled
- // content.
- if ( ! isInitialised ) {
- return null;
- }
-
- return <Iframe { ...props } forwardedRef={ ref } />;
-}
-
-export default forwardRef( IframeIfReady );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/index.tsx
deleted file mode 100644
index a0a84fd844..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/index.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/tree/v16.4.0/packages/edit-site/src/index.js
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { createContext, useEffect, useRef, useState } from '@wordpress/element';
-import { dispatch } from '@wordpress/data';
-import {
- __experimentalFetchLinkSuggestions as fetchLinkSuggestions,
- __experimentalFetchUrlData as fetchUrlData,
- // @ts-ignore No types for this exist yet.
-} from '@wordpress/core-data';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- registerCoreBlocks,
- __experimentalGetCoreBlocks,
- // @ts-ignore No types for this exist yet.
-} from '@wordpress/block-library';
-import {
- getBlockType,
- // @ts-ignore No types for this exist yet.
- store as blocksStore,
-} from '@wordpress/blocks';
-// @ts-ignore No types for this exist yet.
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-// @ts-ignore No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// @ts-ignore No types for this exist yet.
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-// @ts-ignore No types for this exist yet.
-import { store as preferencesStore } from '@wordpress/preferences';
-// @ts-ignore No types for this exist yet.
-import { store as editorStore } from '@wordpress/editor';
-// @ts-ignore No types for this exist yet.
-import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
-// @ts-ignore No types for this exist yet.
-import { GlobalStylesProvider } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
-import { MediaUpload } from '@wordpress/media-utils';
-import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { CustomizeStoreComponent } from '../types';
-import { Layout } from './layout';
-import './style.scss';
-import { GoBackWarningModal } from './go-back-warning-modal';
-import { onBackButtonClicked } from '../utils';
-import { getNewPath } from '@woocommerce/navigation';
-import useBodyClass from '../hooks/use-body-class';
-import { OptInSubscribe } from './opt-in/opt-in';
-import { OptInContextProvider } from './opt-in/context';
-import './tracking';
-
-const { RouterProvider } = unlock( routerPrivateApis );
-
-addFilter(
- 'editor.MediaUpload',
- 'woo/customize-store/assembler-hub',
- () => MediaUpload
-);
-type CustomizeStoreComponentProps = Parameters< CustomizeStoreComponent >[ 0 ];
-
-export const CustomizeStoreContext = createContext< {
- sendEvent: CustomizeStoreComponentProps[ 'sendEvent' ];
- context: CustomizeStoreComponentProps[ 'context' ];
- currentState: CustomizeStoreComponentProps[ 'currentState' ];
-} >( {
- sendEvent: () => {},
- context: {} as CustomizeStoreComponentProps[ 'context' ],
- currentState: 'assemblerHub',
-} );
-
-export type events =
- | { type: 'FINISH_CUSTOMIZATION' }
- | { type: 'GO_BACK_TO_DESIGN_WITH_AI' }
- | { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' };
-
-const initializeAssembleHub = () => {
- if ( ! window.wcBlockSettings ) {
- // eslint-disable-next-line no-console
- console.warn(
- 'window.blockSettings not found. Skipping initialization.'
- );
- return;
- }
-
- // Set up the block editor settings.
- const settings = window.wcBlockSettings;
- settings.__experimentalFetchLinkSuggestions = (
- search: string,
- searchOptions: {
- isInitialSuggestions: boolean;
- type: 'attachment' | 'post' | 'term' | 'post-format';
- subtype: string;
- page: number;
- perPage: number;
- }
- ) => fetchLinkSuggestions( search, searchOptions, settings );
- settings.__experimentalFetchRichUrlData = fetchUrlData;
-
- const reapplyBlockTypeFilters =
- dispatch( blocksStore ).reapplyBlockTypeFilters;
- reapplyBlockTypeFilters();
-
- const coreBlocks = __experimentalGetCoreBlocks().filter(
- ( { name }: { name: string } ) =>
- name !== 'core/freeform' && ! getBlockType( name )
- );
- registerCoreBlocks( coreBlocks );
-
- // @ts-ignore No types for this exist yet.
- dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
-
- // @ts-ignore No types for this exist yet.
- dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
- editorMode: 'visual',
- fixedToolbar: false,
- focusMode: false,
- distractionFree: false,
- keepCaretInsideBlock: false,
- welcomeGuide: false,
- welcomeGuideStyles: false,
- welcomeGuidePage: false,
- welcomeGuideTemplate: false,
- showListViewByDefault: false,
- showBlockBreadcrumbs: true,
- } );
-
- // @ts-ignore No types for this exist yet.
- dispatch( editSiteStore ).updateSettings( settings );
-
- // @ts-ignore No types for this exist yet.
- dispatch( editorStore ).updateEditorSettings( {
- defaultTemplateTypes: settings.defaultTemplateTypes,
- defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
- } );
-
- // Prevent the default browser action for files dropped outside of dropzones.
- window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
- window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
-
- unlock( dispatch( editSiteStore ) ).setCanvasMode( 'view' );
-};
-
-export const AssemblerHub: CustomizeStoreComponent = ( props ) => {
- const isInitializedRef = useRef( false );
-
- useBodyClass( 'woocommerce-assembler' );
-
- if ( ! isInitializedRef.current ) {
- initializeAssembleHub();
- isInitializedRef.current = true;
- }
-
- const [ showExitModal, setShowExitModal ] = useState( false );
- useEffect( () => {
- onBackButtonClicked( () => setShowExitModal( true ) );
- }, [] );
- // @ts-expect-error temp fix
- // Since we load the assember hub in an iframe, we don't have access to
- // xstate's context values.
- // This is the best workaround I can think of for now.
- // Set the aiOnline value from the parent window so that any child components
- // can access it.
- props.context.aiOnline = window.parent?.window.cys_aiOnline;
-
- return (
- <>
- { showExitModal && (
- <GoBackWarningModal
- setOpenWarningModal={ setShowExitModal }
- onExitClicked={ () => {
- window.location.href = getNewPath( {}, '/', {} );
- } }
- />
- ) }
- <CustomizeStoreContext.Provider value={ props }>
- <ShortcutProvider style={ { height: '100%' } }>
- <OptInContextProvider>
- <GlobalStylesProvider>
- <RouterProvider routes={ [] }>
- <Layout />
- </RouterProvider>
- <OptInSubscribe />
- </GlobalStylesProvider>
- </OptInContextProvider>
- </ShortcutProvider>
- </CustomizeStoreContext.Provider>
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/layout.tsx
deleted file mode 100644
index ce7bcc5198..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/layout.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/tree/v16.4.0/packages/edit-site/src/components/layout/index.js
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import {
- useReducedMotion,
- useResizeObserver,
- useViewportMatch,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useState, useContext } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import {
- // @ts-expect-error No types for this exist yet.
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-// @ts-expect-error No types for this exist yet.
-import useInitEditedEntityFromURL from '@wordpress/edit-site/build-module/components/sync-state-with-url/use-init-edited-entity-from-url';
-// @ts-expect-error No types for this exist yet.
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-// @ts-expect-error No types for this exist yet.
-import ErrorBoundary from '@wordpress/edit-site/build-module/components/error-boundary';
-// @ts-expect-error No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// @ts-expect-error No types for this exist yet.
-import { NavigableRegion } from '@wordpress/interface';
-import { EntityProvider } from '@wordpress/core-data';
-// @ts-expect-error No types for this exist yet.
-import useEditedEntityRecord from '@wordpress/edit-site/build-module/components/use-edited-entity-record';
-
-/**
- * Internal dependencies
- */
-import { Editor } from './editor';
-import Sidebar from './sidebar';
-import { SiteHub } from './site-hub';
-import { LogoBlockContext } from './logo-block-context';
-import ResizableFrame from './resizable-frame';
-import { OnboardingTour, useOnboardingTour } from './onboarding-tour';
-import { HighlightedBlockContextProvider } from './context/highlighted-block-context';
-import { Transitional } from '../transitional';
-import { CustomizeStoreContext } from './';
-import { trackEvent } from '../tracking';
-import { SidebarNavigationExtraScreen } from './sidebar/navigation-extra-screen/sidebar-navigation-extra-screen';
-import './gutenberg-styles/layout.scss';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-const ANIMATION_DURATION = 0.5;
-
-export const Layout = () => {
- const [ logoBlockIds, setLogoBlockIds ] = useState< Array< string > >( [] );
-
- const { currentState } = useContext( CustomizeStoreContext );
-
- // This ensures the edited entity id and type are initialized properly.
- useInitEditedEntityFromURL();
- const {
- shouldTourBeShown,
- isResizeHandleVisible,
- setShowWelcomeTour,
- onClose,
- ...onboardingTourProps
- } = useOnboardingTour();
-
- const takeTour = () => {
- // Click on "Take a tour" button
- trackEvent( 'customize_your_store_assembler_hub_tour_start' );
- setShowWelcomeTour( false );
- };
-
- const skipTour = () => {
- trackEvent( 'customize_your_store_assembler_hub_tour_skip' );
- onClose();
- };
-
- const isMobileViewport = useViewportMatch( 'medium', '<' );
- const disableMotion = useReducedMotion();
- const [ canvasResizer, canvasSize ] = useResizeObserver();
- const isEditorLoading = useIsSiteEditorLoading();
- const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
- useState( false );
- const [ backgroundColor ] = useGlobalStyle( 'color.background' );
- const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-
- const { record: template } = useEditedEntityRecord();
- const { id: templateId, type: templateType } = template;
-
- const editor = <Editor isLoading={ isEditorLoading } />;
-
- if (
- typeof currentState === 'object' &&
- currentState.transitionalScreen === 'transitional'
- ) {
- return (
- // @ts-expect-error Types are not correct when kind is root and type is site.
- <EntityProvider kind="root" type="site">
- <EntityProvider
- kind="postType"
- type={ templateType }
- id={ templateId }
- >
- <Transitional />
- </EntityProvider>
- </EntityProvider>
- );
- }
-
- return (
- // This causes the editor to re-render when the logo block ids change. Maybe we can find a better way to do this.
- <LogoBlockContext.Provider
- value={ {
- logoBlockIds,
- setLogoBlockIds,
- } }
- >
- <HighlightedBlockContextProvider>
- { /* @ts-expect-error Types are not correct when kind is root and type is site. */ }
- <EntityProvider kind="root" type="site">
- <EntityProvider
- kind="postType"
- type={ templateType }
- id={ templateId }
- >
- <div
- className={ clsx( 'woocommerce-edit-site-layout' ) }
- >
- <motion.div
- className="woocommerce-edit-site-layout__header-container"
- animate={ 'view' }
- >
- <SiteHub
- isTransparent={ false }
- className="woocommerce-edit-site-layout__hub"
- />
- </motion.div>
-
- <div className="woocommerce-edit-site-layout__content">
- <div className="woocommerce-edit-site-layout__sidebar">
- <NavigableRegion
- ariaLabel={ __(
- 'Navigation',
- 'woocommerce'
- ) }
- className="woocommerce-edit-site-layout__sidebar-region"
- >
- <motion.div
- animate={ { opacity: 1 } }
- transition={ {
- type: 'tween',
- duration:
- // Disable transitiont in mobile to emulate a full page transition.
- disableMotion ||
- isMobileViewport
- ? 0
- : ANIMATION_DURATION,
- ease: 'easeOut',
- } }
- className="woocommerce-edit-site-layout__sidebar"
- >
- <Sidebar />
- </motion.div>
- </NavigableRegion>
- <SidebarNavigationExtraScreen />
- </div>
-
- { ! isMobileViewport && (
- <div className="woocommerce-edit-site-layout__canvas-container">
- { canvasResizer }
- { !! canvasSize.width && (
- <motion.div
- initial={ false }
- layout="position"
- className={ clsx(
- 'woocommerce-edit-site-layout__canvas'
- ) }
- >
- <ErrorBoundary>
- <ResizableFrame
- isReady={
- ! isEditorLoading
- }
- isHandleVisibleByDefault={
- ! onboardingTourProps.showWelcomeTour &&
- isResizeHandleVisible
- }
- isFullWidth={ false }
- defaultSize={ {
- width:
- canvasSize.width -
- 24 /* $canvas-padding */,
- height: canvasSize.height,
- } }
- isOversized={
- isResizableFrameOversized
- }
- setIsOversized={
- setIsResizableFrameOversized
- }
- innerContentStyle={ {
- background:
- gradientValue ??
- backgroundColor,
- } }
- >
- { editor }
- </ResizableFrame>
- </ErrorBoundary>
- </motion.div>
- ) }
- </div>
- ) }
- </div>
- </div>
- { ! isEditorLoading && shouldTourBeShown && (
- <OnboardingTour
- skipTour={ skipTour }
- takeTour={ takeTour }
- onClose={ onClose }
- { ...onboardingTourProps }
- />
- ) }
- </EntityProvider>
- </EntityProvider>
- </HighlightedBlockContextProvider>
- </LogoBlockContext.Provider>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/logo-block-context.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/logo-block-context.tsx
deleted file mode 100644
index f813d265ce..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/logo-block-context.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const LogoBlockContext = createContext< {
- logoBlockIds: Array< string >;
- setLogoBlockIds: ( clientIds: Array< string > ) => void;
-} >( {
- logoBlockIds: [],
- setLogoBlockIds: () => {},
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/ai-offline-modal.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/ai-offline-modal.tsx
deleted file mode 100644
index e373cb64f2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/ai-offline-modal.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-type AiOfflineModalProps = {
- skipTour: () => void;
- takeTour: () => void;
- shouldTourBeShown: boolean;
-};
-
-export const AiOfflineModal = ( {
- skipTour,
- takeTour,
- shouldTourBeShown,
-}: AiOfflineModalProps ) => {
- return (
- <Modal
- className="woocommerce-customize-store__onboarding-welcome-modal"
- title={ __( 'Welcome to your store!', 'woocommerce' ) }
- onRequestClose={ skipTour }
- shouldCloseOnClickOutside={ false }
- >
- <span className="woocommerce-customize-store__title">
- { __(
- 'Our AI tool had a few issues generating your content.',
- 'woocommerce'
- ) }
- </span>
- <p>
- { __(
- "But don't let that stop you! Start customizing the look and feel of your store by adding your logo and selecting your colors and layout. ",
- 'woocommerce'
- ) }
- { shouldTourBeShown &&
- __(
- "Take a quick tour to discover what's possible.",
- 'woocommerce'
- ) }
- </p>
- { shouldTourBeShown && (
- <div className="woocommerce-customize-store__design-change-warning-modal-footer">
- <Button onClick={ skipTour } variant="link">
- { __( 'Skip', 'woocommerce' ) }
- </Button>
- <Button onClick={ takeTour } variant="primary">
- { __( 'Take a tour', 'woocommerce' ) }
- </Button>
- </div>
- ) }
- </Modal>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx
deleted file mode 100644
index 4109ff9214..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { TourKit, TourKitTypes } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-export * from './use-onboarding-tour';
-import { trackEvent } from '~/customize-store/tracking';
-
-type OnboardingTourProps = {
- onClose: () => void;
- skipTour: () => void;
- takeTour: () => void;
- showWelcomeTour: boolean;
- setIsResizeHandleVisible: ( isVisible: boolean ) => void;
-};
-
-const getLabels = () => {
- return {
- heading: __(
- "Discover what's possible with the store designer",
- 'woocommerce'
- ),
- descriptions: {
- desktop: __(
- "Start designing your store, including adding your logo, changing color schemes, and building your own layouts. Take a quick tour to discover what's possible.",
- 'woocommerce'
- ),
- },
- };
-};
-
-export const OnboardingTour = ( {
- onClose,
- skipTour,
- takeTour,
- showWelcomeTour,
- setIsResizeHandleVisible,
-}: OnboardingTourProps ) => {
- const [ placement, setPlacement ] =
- useState< TourKitTypes.WooConfig[ 'placement' ] >( 'left' );
-
- const { heading, descriptions } = getLabels();
-
- if ( showWelcomeTour ) {
- return (
- <TourKit
- config={ {
- options: {
- effects: {
- arrowIndicator: false,
- overlay: false,
- liveResize: {
- rootElementSelector: '#adminmenuback',
- resize: true,
- },
- },
- portalParentElement:
- document.getElementById( 'wpbody' ),
- popperModifiers: [
- {
- name: 'bottom-left',
- enabled: true,
- phase: 'beforeWrite',
- requires: [ 'computeStyles' ],
- fn: ( { state } ) => {
- state.styles.popper.top = 'auto';
- state.styles.popper.left = 'auto';
- state.styles.popper.bottom = '16px';
- state.styles.popper.transform =
- 'translate3d(16px, 0px, 0px)';
- },
- },
- ],
- classNames: [
- 'woocommerce-customize-store-tour-kit',
- 'woocommerce-customize-store-welcome-tourkit',
- ],
- },
- steps: [
- {
- meta: {
- name: 'welcome-tour',
- primaryButton: {
- text: __( 'Take a tour', 'woocommerce' ),
- },
- descriptions,
- heading,
- skipButton: {
- isVisible: true,
- },
- },
- referenceElements: {
- desktop: '#adminmenuback',
- },
- },
- ],
- closeHandler: ( _steps, _currentStepIndex, source ) => {
- if ( source === 'done-btn' ) {
- // Click on "Take a tour" button
- takeTour();
- } else {
- skipTour();
- }
- },
- } }
- />
- );
- }
-
- return (
- <TourKit
- config={ {
- placement,
- options: {
- effects: {
- spotlight: {
- interactivity: {
- enabled: true,
- rootElementSelector: '#wpwrap',
- },
- },
- arrowIndicator: true,
- autoScroll: {
- behavior: 'auto',
- block: 'center',
- },
- liveResize: {
- mutation: true,
- resize: true,
- rootElementSelector: '#wpwrap',
- },
- },
- callbacks: {
- onPreviousStep: () => {
- setPlacement( 'left' );
- setIsResizeHandleVisible( true );
- },
- onNextStep: () => {
- setPlacement( 'right-start' );
- setIsResizeHandleVisible( false );
- },
- },
- popperModifiers: [
- {
- name: 'right-start',
- enabled: true,
- phase: 'beforeWrite',
- requires: [ 'computeStyles' ],
- fn: ( { state } ) => {
- state.styles.arrow.transform =
- 'translate3d(0px, 96px, 0)';
- },
- },
- {
- name: 'offset',
- options: {
- offset: ( {
- // eslint-disable-next-line @typescript-eslint/no-shadow
- placement,
- }: {
- placement: TourKitTypes.WooConfig[ 'placement' ];
- [ key: string ]: unknown;
- } ) => {
- if ( placement === 'left' ) {
- return [ 0, 20 ];
- }
- return [ 52, 16 ];
- },
- },
- },
- ],
- classNames: 'woocommerce-customize-store-tour-kit',
- },
- steps: [
- {
- referenceElements: {
- desktop: `.woocommerce-edit-site-layout__canvas-container`,
- },
- meta: {
- name: 'view-changes-real-time',
- heading: __(
- 'View your changes in real time',
- 'woocommerce'
- ),
- descriptions: {
- desktop: __(
- 'Any changes you make to the layout and style will appear here in real time — perfect for testing different looks before you make it live. You can also resize this area to check how your store looks on mobile.',
- 'woocommerce'
- ),
- },
- },
- },
- {
- referenceElements: {
- desktop: `.woocommerce-edit-site-layout__sidebar-region`,
- },
- meta: {
- name: 'make-your-store-your-own',
- heading: __(
- 'Make your store your own',
- 'woocommerce'
- ),
- descriptions: {
- desktop: __(
- "Customize the style and layout of your store to fit your brand! Add your logo, change the font and colors, and try out different page layouts. You'll be able to edit the text and images later via the Editor.",
- 'woocommerce'
- ),
- },
- secondaryButton: {
- text: __( 'Previous', 'woocommerce' ),
- },
- },
- },
- ],
- closeHandler: ( _steps, _currentStepIndex, source ) => {
- if ( source === 'done-btn' ) {
- trackEvent(
- 'customize_your_store_assembler_hub_tour_complete'
- );
- } else {
- trackEvent(
- 'customize_your_store_assembler_hub_tour_close'
- );
- }
-
- onClose();
- },
- } }
- ></TourKit>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx
deleted file mode 100644
index 3d346d84b0..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-/**
- * Internal dependencies
- */
-import { OnboardingTour } from '../index';
-import { trackEvent } from '~/customize-store/tracking';
-
-jest.mock( '~/customize-store/tracking', () => ( { trackEvent: jest.fn() } ) );
-jest.mock( '../../', () => ( {
- CustomizeStoreContext: createContext( {
- context: {
- aiOnline: true,
- },
- } ),
-} ) );
-
-describe( 'OnboardingTour', () => {
- let props: {
- onClose: jest.Mock;
- skipTour: jest.Mock;
- takeTour: jest.Mock;
- setShowWelcomeTour: jest.Mock;
- showWelcomeTour: boolean;
- setIsResizeHandleVisible: ( isVisible: boolean ) => void;
- };
-
- beforeEach( () => {
- props = {
- onClose: jest.fn(),
- skipTour: jest.fn(),
- takeTour: jest.fn(),
- setShowWelcomeTour: jest.fn(),
- showWelcomeTour: true,
- setIsResizeHandleVisible: jest.fn(),
- };
- } );
-
- it( 'should render step 1', () => {
- render( <OnboardingTour { ...props } showWelcomeTour={ false } /> );
-
- expect(
- screen.getByText( /View your changes in real time/i )
- ).toBeInTheDocument();
- } );
-
- it( 'should record an event when clicking on "Take a tour" button', async () => {
- render( <OnboardingTour { ...props } /> );
-
- await userEvent.click(
- screen.getByRole( 'button', {
- name: /Take a tour/i,
- } )
- );
-
- expect( props.takeTour ).toHaveBeenCalled();
- } );
-
- it( 'should record an event when clicking on "Skip" button', async () => {
- render( <OnboardingTour { ...props } /> );
-
- await userEvent.click(
- screen.getByRole( 'button', {
- name: /Skip/i,
- } )
- );
-
- expect( props.skipTour ).toHaveBeenCalled();
- } );
-
- it( 'should record an event when clicking on the "Close Tour" button', async () => {
- render( <OnboardingTour { ...props } showWelcomeTour={ false } /> );
-
- await userEvent.click(
- screen.getByRole( 'button', {
- name: 'Close Tour',
- } )
- );
-
- expect( trackEvent ).toHaveBeenCalledWith(
- 'customize_your_store_assembler_hub_tour_close'
- );
- } );
-
- it( 'should record an event when complete the tour', async () => {
- render( <OnboardingTour { ...props } showWelcomeTour={ false } /> );
-
- await userEvent.click(
- screen.getByRole( 'button', {
- name: 'Next',
- } )
- );
-
- await userEvent.click(
- screen.getByRole( 'button', {
- name: 'Done',
- } )
- );
-
- expect( trackEvent ).toHaveBeenCalledWith(
- 'customize_your_store_assembler_hub_tour_complete'
- );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx
deleted file mode 100644
index 45fedebec7..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState } from 'react';
-
-export const CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN =
- 'woocommerce_customize_store_onboarding_tour_hidden';
-
-export const useOnboardingTour = () => {
- const [ showWelcomeTour, setShowWelcomeTour ] = useState( true );
- const [ isResizeHandleVisible, setIsResizeHandleVisible ] =
- useState( true );
-
- const { updateOptions } = useDispatch( optionsStore );
- const { shouldTourBeShown } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const wasTourShown =
- getOption( CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN ) === 'yes' ||
- ! hasFinishedResolution( 'getOption', [
- CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN,
- ] );
-
- return {
- shouldTourBeShown: ! wasTourShown,
- };
- }, [] );
-
- const onClose = () => {
- updateOptions( {
- [ CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN ]: 'yes',
- } );
- };
-
- return {
- onClose,
- shouldTourBeShown,
- showWelcomeTour,
- setShowWelcomeTour,
- setIsResizeHandleVisible,
- isResizeHandleVisible,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/context.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/context.tsx
deleted file mode 100644
index b4da620c08..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/context.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import { useSelect } from '@wordpress/data';
-import React, { createContext, useState } from '@wordpress/element';
-import type { ReactNode } from 'react';
-
-export const enum OPTIN_FLOW_STATUS {
- 'IDLE' = 'IDLE',
- 'LOADING' = 'LOADING',
- 'DONE' = 'DONE',
-}
-
-export const OptInContext = createContext< {
- optInFlowStatus: OPTIN_FLOW_STATUS;
- setOptInFlowStatus: ( status: OPTIN_FLOW_STATUS ) => void;
-} >( {
- optInFlowStatus: OPTIN_FLOW_STATUS.IDLE,
- setOptInFlowStatus: () => {},
-} );
-
-export const OptInContextProvider = ( {
- children,
-}: {
- children: ReactNode;
-} ) => {
- const isAllowTrackingEnabled = useSelect(
- ( select ) =>
- select( optionsStore ).getOption( 'woocommerce_allow_tracking' ) ===
- 'yes',
- []
- );
-
- const [ optInFlowStatus, setOptInFlowStatus ] =
- useState< OPTIN_FLOW_STATUS >(
- isAllowTrackingEnabled
- ? OPTIN_FLOW_STATUS.DONE
- : OPTIN_FLOW_STATUS.IDLE
- );
-
- return (
- <OptInContext.Provider
- value={ {
- optInFlowStatus,
- setOptInFlowStatus,
- } }
- >
- { children }
- </OptInContext.Provider>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/opt-in.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/opt-in.tsx
deleted file mode 100644
index ed0c54d6db..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/opt-in/opt-in.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import apiFetch from '@wordpress/api-fetch';
-import { dispatch, resolveSelect, select, useSelect } from '@wordpress/data';
-import { useContext, useEffect } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import { FontFamily, FontFace } from '../../types/font';
-import { installFontFamilies } from '../utils/fonts';
-import { FONT_FAMILIES_TO_INSTALL } from '../sidebar/global-styles/font-pairing-variations/constants';
-import { OptInContext, OPTIN_FLOW_STATUS } from './context';
-
-type FontFamilies = {
- custom: Array< FontFamily >;
- theme: Array< FontFamily >;
-};
-
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-async function installPatterns() {
- await apiFetch( {
- path: '/wc/private/patterns',
- method: 'POST',
- } );
-
- await dispatch( coreStore ).invalidateResolutionForStoreSelector(
- 'getBlockPatterns'
- );
-}
-
-async function installFonts(
- enabledFontFamilies: FontFamilies
-): Promise< FontFamilies > {
- await installFontFamilies();
-
- const globalStylesId =
- select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-
- const installedFontFamilies = ( await resolveSelect(
- coreStore
- ).getEntityRecords( 'postType', 'wp_font_family', {
- _embed: true,
- per_page: -1,
- } ) ) as Array< {
- id: number;
- font_family_settings: FontFamily;
- _embedded: {
- font_faces: Array< {
- font_face_settings: FontFace;
- } >;
- };
- } >;
-
- const parsedInstalledFontFamilies = ( installedFontFamilies || [] ).map(
- ( fontFamilyPost ) => {
- return {
- id: fontFamilyPost.id,
- ...fontFamilyPost.font_family_settings,
- fontFace:
- fontFamilyPost?._embedded?.font_faces.map(
- ( face ) => face.font_face_settings
- ) || [],
- };
- }
- );
-
- const { custom } = enabledFontFamilies;
-
- const enabledFontSlugs = [
- ...( custom ? custom.map( ( font ) => font.slug ) : [] ),
- ];
-
- const fontFamiliesToEnable = parsedInstalledFontFamilies.reduce(
- ( acc, font ) => {
- if (
- enabledFontSlugs.includes( font.slug ) ||
- FONT_FAMILIES_TO_INSTALL[ font.slug ] === undefined
- ) {
- return acc;
- }
-
- return [ ...acc, { ...font } ];
- },
- [] as Array< FontFamily >
- );
-
- const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
- dispatch( coreStore );
-
- saveSpecifiedEntityEdits(
- 'root',
- 'globalStyles',
- globalStylesId,
- [ 'settings.typography.fontFamilies' ],
- undefined
- );
-
- return {
- ...enabledFontFamilies,
- custom: [
- ...( enabledFontFamilies.custom ?? [] ),
- ...( fontFamiliesToEnable ?? [] ),
- ],
- };
-}
-
-export const OptInSubscribe = () => {
- const { setOptInFlowStatus } = useContext( OptInContext );
-
- const [ enabledFontFamilies, setFontFamilies ]: [
- FontFamilies,
- ( font: FontFamilies ) => void
- ] = useGlobalSetting( 'typography.fontFamilies' );
-
- const isOptedIn = useSelect( ( selectStore ) => {
- const allowTracking = selectStore( optionsStore ).getOption(
- 'woocommerce_allow_tracking'
- );
- return allowTracking === 'yes';
- }, [] );
-
- useEffect(
- function optedInListener() {
- if ( ! isOptedIn ) return;
-
- async function installPatternsAndFonts() {
- await installPatterns();
- const fontFamilies = await installFonts( enabledFontFamilies );
- setFontFamilies( fontFamilies );
- }
-
- setOptInFlowStatus( OPTIN_FLOW_STATUS.LOADING );
- installPatternsAndFonts().finally( () => {
- setOptInFlowStatus( OPTIN_FLOW_STATUS.DONE );
- } );
- },
- // We don't want to run this effect on every render, only when `woocommerce_allow_tracking` changes.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [ isOptedIn ]
- );
-
- return null;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/preload-fonts.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/preload-fonts.tsx
deleted file mode 100644
index 5d1983639e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/preload-fonts.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/**
- * External dependencies
- */
-import {
- // @ts-expect-error No types for this exist yet.
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-// @ts-expect-error No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { FontFamily } from '../types/font';
-import { FontFamiliesLoader } from './sidebar/global-styles/font-pairing-variations/font-families-loader';
-
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-export const PreloadFonts = () => {
- const [ enabledFontFamilies ]: [
- {
- custom: Array< FontFamily >;
- theme: Array< FontFamily >;
- },
- ( font: {
- custom: Array< FontFamily >;
- theme: Array< FontFamily >;
- } ) => void
- ] = useGlobalSetting( 'typography.fontFamilies' );
-
- // theme.json file font families
- const [ baseFontFamilies ] = useGlobalSetting(
- 'typography.fontFamilies',
- undefined,
- 'base'
- );
-
- const iframeInstance = useMemo( () => {
- return document.querySelector(
- '.block-editor-block-preview__content iframe'
- ) as HTMLObjectElement | null;
- }, [] );
-
- return (
- <>
- <FontFamiliesLoader
- fontFamilies={ [
- ...( enabledFontFamilies.custom ?? [] ),
- ...baseFontFamilies.theme,
- ] }
- iframeInstance={ iframeInstance }
- />
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/constants.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/constants.ts
deleted file mode 100644
index 4dada682ed..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const ALLOWED_MEDIA_TYPES = [ 'image' ];
-// Set the default width to a responsible size.
-// Note that this width is also set in the attached frontend CSS file and overrides when we update the template.
-export const DEFAULT_LOGO_WIDTH = 60;
-export const MIN_LOGO_SIZE = 20;
-export const MAX_LOGO_WIDTH = 200;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts
deleted file mode 100644
index 14bbef45ab..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts
+++ /dev/null
@@ -1,1712 +0,0 @@
-// TODO: Fetch AI-picked color palettes from the backend API
-export const COLOR_PALETTES = [
- {
- title: 'New - Neutral',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#000000',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#636363',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#000000',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#ffffff',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- { color: '#FFFFFF', name: 'Color 1', slug: 'theme-1' },
- {
- color: '#1a0c00',
- name: 'Color 5',
- slug: 'theme-5',
- },
- ],
- },
- },
- },
- styles: {
- blocks: {
- 'core/button': {},
- },
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--primary)',
- text: 'var(--wp--preset--color--background)',
- },
- ':hover': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- link: {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- },
- {
- title: 'Ancient Bronze',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#323856',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#8C8369',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#323856',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#F7F2EE',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Arctic Dawn',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#1E226F',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#DD301D',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#0D1263',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#F0F1F5',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Bronze Serenity',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#1e4b4b',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#9e7047',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#1e4b4b',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#e9eded',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Purple Twilight',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#301834',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#6a5eb7',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#090909',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#fefbff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#f3eaf5',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Candy Store',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#293852',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#f1bea7',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#293852',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#fffddb',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- blocks: {
- 'core/button': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- },
- variations: {
- outline: {
- border: {
- color: 'var(--wp--preset--color--secondary)',
- },
- color: {
- text: 'var(--wp--preset--color--primary)',
- },
- },
- },
- },
- },
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--primary)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Midnight Citrus',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#222222',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#c0f500',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#222222',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#f7faed',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- blocks: {
- 'core/button': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- },
- variations: {
- outline: {
- border: {
- color: 'var(--wp--preset--color--secondary)',
- },
- color: {
- text: 'var(--wp--preset--color--primary)',
- },
- },
- },
- },
- },
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- ':hover': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--primary)',
- },
- },
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--primary)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Crimson Tide',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#101317',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#EC5E3F',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#101317',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#EEEEEE',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Neutral',
- },
- {
- title: 'Raspberry Chocolate',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#42332e',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#d64d68',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#241d1a',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#eeeae6',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#D6CCC2',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Gumtree Sunset',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#8699A1',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#BB6154',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#476C77',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#F4F7F7',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#ffffff',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Fuchsia',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#b7127f',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#18020C',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#b7127f',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#f7edf6',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#ffffff',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Cinder',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#c14420',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#2F2D2D',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#c14420',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#f1f2f2',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#DCDCDC',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Canary',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#0F0F05',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#666666',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#0F0F05',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#FCFF9B',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#E8EB8C',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Blue Lagoon',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#004DE5',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#0496FF',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#0036A3',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#FEFDF8',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#DEF2F7',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Vibrant Berry',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- slug: 'primary',
- color: '#7C1D6F',
- name: 'Primary',
- },
- {
- slug: 'secondary',
- color: '#C62FB2',
- name: 'Secondary',
- },
- {
- slug: 'foreground',
- color: '#7C1D6F',
- name: 'Foreground',
- },
- {
- slug: 'background',
- color: '#FFEED6',
- name: 'Background',
- },
- {
- slug: 'tertiary',
- color: '#FDD8DE',
- name: 'Tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Bright',
- },
- {
- title: 'Aquamarine Night',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#deffef',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#56fbb9',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ffffff',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#091C48',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#10317F',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Evergreen Twilight',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#ffffff',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#8EE978',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ffffff',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#181818',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#636363',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Cinnamon Latte',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- slug: 'primary',
- color: '#D9CAB3',
- name: 'Primary',
- },
- {
- slug: 'secondary',
- color: '#BC8034',
- name: 'Secondary',
- },
- {
- slug: 'foreground',
- color: '#FFFFFF',
- name: 'Foreground',
- },
- {
- slug: 'background',
- color: '#3C3F4D',
- name: 'Background',
- },
- {
- slug: 'tertiary',
- color: '#2B2D36',
- name: 'Tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Lightning',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#ebffd2',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#fefefe',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ebffd2',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#0e1fb5',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#0A1680',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Lilac Nightshade',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#f5d6ff',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#C48DDA',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ffffff',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#000000',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#462749',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Charcoal',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#dbdbdb',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#efefef',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#dbdbdb',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#1e1e1e',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#000000',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Rustic Rosewood',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#F4F4F2',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#EE797C',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ffffff',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#1A1A1A',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#3B3939',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Sandalwood Oasis',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#F0EBE3',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#DF9785',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#ffffff',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#2a2a16',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#434323',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Slate',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- slug: 'primary',
- color: '#FFFFFF',
- name: 'Primary',
- },
- {
- slug: 'secondary',
- color: '#FFDF6D',
- name: 'Secondary',
- },
- {
- slug: 'foreground',
- color: '#EFF2F9',
- name: 'Foreground',
- },
- {
- slug: 'background',
- color: '#13161E',
- name: 'Background',
- },
- {
- slug: 'tertiary',
- color: '#303036',
- name: 'Tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- wpcom_category: 'Dark',
- },
- {
- title: 'Blueberry Sorbet',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#2038B6',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#BD4089',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#2038B6',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#FDFBEF',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#F8F2E2',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- },
- },
- },
- {
- title: 'Green Thumb',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#164A41',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#4B7B4D',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#164A41',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#CEEAC4',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- link: {
- color: {
- text: 'var(--wp--preset--color--secondary)',
- },
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- },
- },
- {
- title: 'Golden Haze',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#232224',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#EBB54F',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#515151',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#FFF0AE',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- link: {
- color: {
- text: 'var(--wp--preset--color--secondary)',
- },
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- },
- },
- {
- title: 'Golden Indigo',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- color: '#4866C0',
- name: 'Primary',
- slug: 'primary',
- },
- {
- color: '#C09F50',
- name: 'Secondary',
- slug: 'secondary',
- },
- {
- color: '#405AA7',
- name: 'Foreground',
- slug: 'foreground',
- },
- {
- color: '#ffffff',
- name: 'Background',
- slug: 'background',
- },
- {
- color: '#FBF5EE',
- name: 'Tertiary',
- slug: 'tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- link: {
- color: {
- text: 'var(--wp--preset--color--secondary)',
- },
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- },
- },
- {
- title: 'Ice',
- version: 2,
- settings: {
- color: {
- palette: {
- theme: [
- {
- slug: 'primary',
- color: '#3473FE',
- name: 'Primary',
- },
- {
- slug: 'secondary',
- color: '#12123F',
- name: 'Secondary',
- },
- {
- slug: 'foreground',
- color: '#12123F',
- name: 'Foreground',
- },
- {
- slug: 'background',
- color: '#F1F4FA',
- name: 'Background',
- },
- {
- slug: 'tertiary',
- color: '#DBE6EE',
- name: 'Tertiary',
- },
- ],
- },
- },
- },
- styles: {
- color: {
- background: 'var(--wp--preset--color--background)',
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- button: {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- link: {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--primary)',
- },
- },
- },
- },
- },
- },
-].map( ( color ) => {
- // Add base styles settings for elements to ensure that the colors are applied correctly since default TT3 theme does not have right styles.
- // These styles are referenced in the theme.json file of the creatio-2 theme.
- // https://github.com/Automattic/themes/blob/trunk/creatio-2/theme.json
- return {
- ...color,
- styles: {
- ...color.styles,
- blocks: {
- 'core/button': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- },
- variations: {
- outline: {
- border: {
- color: 'var(--wp--preset--color--secondary)',
- },
- color: {
- text: 'var(--wp--preset--color--secondary)',
- },
- },
- },
- },
- 'core/heading': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- link: {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- 'core/post-date': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- 'core/post-title': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- elements: {
- link: {
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--primary)',
- },
- },
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- 'core/pullquote': {
- border: {
- color: 'var(--wp--preset--color--foreground)',
- style: 'solid',
- width: '1px 0',
- },
- },
- 'core/quote': {
- border: {
- color: 'var(--wp--preset--color--foreground)',
- style: 'solid',
- width: '0 0 0 5px',
- },
- },
- 'core/separator': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- 'core/cover': {
- elements: {
- heading: {
- color: {
- text: '#ffffff',
- },
- },
- },
- },
- 'core/site-title': {
- elements: {
- link: {
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- },
- },
- ...color.styles.blocks,
- },
- elements: {
- heading: {
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- button: {
- ':active': {
- color: {
- background: 'var(--wp--preset--color--foreground)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- ':focus': {
- color: {
- background: 'var(--wp--preset--color--foreground)',
- text: 'var(--wp--preset--color--background)',
- },
- outline: {
- color: 'var(--wp--preset--color--primary)',
- offset: '2px',
- style: 'dotted',
- width: '1px',
- },
- },
- ':hover': {
- color: {
- background: 'var(--wp--preset--color--secondary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- ':visited': {
- color: {
- text: color.styles.elements?.button
- ? color.styles.elements.button.color
- : 'var(--wp--preset--color--background)',
- },
- },
- color: {
- background: 'var(--wp--preset--color--primary)',
- text: 'var(--wp--preset--color--background)',
- },
- },
- link: {
- ':hover': {
- color: {
- text: 'var(--wp--preset--color--primary)',
- },
- typography: {
- textDecoration: 'none',
- },
- },
- color: {
- text: 'var(--wp--preset--color--foreground)',
- },
- },
- ...color.styles.elements,
- },
- },
- };
-} );
-
-export const DEFAULT_COLOR_PALETTE_TITLES = [
- 'New - Neutral',
- 'Blueberry Sorbet',
- 'Ancient Bronze',
- 'Crimson Tide',
- 'Purple Twilight',
- 'Green Thumb',
- 'Golden Haze',
- 'Golden Indigo',
- 'Arctic Dawn',
- 'Raspberry Chocolate',
- 'Canary',
- 'Ice',
- 'Rustic Rosewood',
- 'Cinnamon Latte',
- 'Lightning',
- 'Aquamarine Night',
- 'Charcoal',
- 'Slate',
-];
-
-export const DEFAULT_COLOR_PALETTES = DEFAULT_COLOR_PALETTE_TITLES.map(
- ( title ) => COLOR_PALETTES.find( ( palette ) => palette.title === title )
-);
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/index.tsx
deleted file mode 100644
index 8f655866f2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/d5ab7238e53d0947d4bb0853464b1c58325b6130/packages/edit-site/src/components/global-styles/style-variations-container.js
-
-/**
- * External dependencies
- */
-import { __experimentalGrid as Grid } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { VariationContainer } from '../variation-container';
-import { DEFAULT_COLOR_PALETTES } from './constants';
-import { ColorPaletteVariationPreview } from './preview';
-
-export const ColorPalette = () => {
- return (
- <Grid
- columns={ 3 }
- className="woocommerce-customize-store_color-palette-container"
- >
- { DEFAULT_COLOR_PALETTES?.map( ( variation, index ) => (
- <VariationContainer key={ index } variation={ variation }>
- <ColorPaletteVariationPreview title={ variation?.title } />
- </VariationContainer>
- ) ) }
- </Grid>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/preview.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/preview.tsx
deleted file mode 100644
index 373f9f9fd9..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/preview.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-// Reference: https://github.com/Automattic/wp-calypso/blob/d3c9b16fb99ce242f61baa21119b7c20f8823be6/packages/global-styles/src/components/color-palette-variations/preview.tsx#L20
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import {
- // @ts-expect-error No types for this exist
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useResizeObserver } from '@wordpress/compose';
-// @ts-expect-error No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { GlobalStylesVariationIframe } from '../global-styles-variation-iframe';
-
-export interface Color {
- color: string;
- name: string;
- slug: string;
-}
-
-const STYLE_PREVIEW_HEIGHT = 44;
-const STYLE_PREVIEW_COLOR_SWATCH_SIZE = 16;
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-interface Props {
- title?: string;
-}
-
-export const ColorPaletteVariationPreview = ( { title }: Props ) => {
- const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
- const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
- const [ headingFontFamily = fontFamily ] = useGlobalStyle(
- 'elements.h1.typography.fontFamily'
- );
- const [ headingFontWeight = fontWeight ] = useGlobalStyle(
- 'elements.h1.typography.fontWeight'
- );
- const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
- const [ headingColor = textColor ] = useGlobalStyle(
- 'elements.h1.color.text'
- );
- const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
- const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
- const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
- const [ containerResizeListener, { width } ] = useResizeObserver();
- const normalizedHeight = STYLE_PREVIEW_HEIGHT;
- const normalizedSwatchSize = STYLE_PREVIEW_COLOR_SWATCH_SIZE;
- const uniqueColors = [
- ...new Set< string >(
- themeColors.map( ( { color }: Color ) => color )
- ),
- ];
- const highlightedColors = uniqueColors
- .filter(
- // we exclude background color because it is already visible in the preview.
- ( color ) => color !== backgroundColor
- )
- .slice( 0, 2 );
-
- return (
- <GlobalStylesVariationIframe
- width={ width }
- height={ normalizedHeight }
- containerResizeListener={ containerResizeListener }
- >
- <div
- style={ {
- // Apply the normalized height only when the width is available
- height: width ? normalizedHeight : 0,
- width: '100%',
- background: gradientValue ?? backgroundColor,
- cursor: 'pointer',
- } }
- >
- <div
- style={ {
- height: '100%',
- overflow: 'hidden',
- } }
- >
- { title ? (
- <HStack
- spacing={ 1.8875 }
- justify="center"
- style={ {
- height: '100%',
- overflow: 'hidden',
- } }
- >
- { highlightedColors.map( ( color, index ) => (
- <div
- key={ index }
- style={ {
- height: normalizedSwatchSize,
- width: normalizedSwatchSize,
- background: color,
- borderRadius: normalizedSwatchSize / 2,
- } }
- />
- ) ) }
- </HStack>
- ) : (
- <VStack
- spacing={ 3 }
- justify="center"
- style={ {
- height: '100%',
- overflow: 'hidden',
- padding: 10,
- boxSizing: 'border-box',
- } }
- >
- <div
- style={ {
- fontSize: 40,
- fontFamily: headingFontFamily,
- color: headingColor,
- fontWeight: headingFontWeight,
- lineHeight: '1em',
- textAlign: 'center',
- } }
- >
- { __( 'Default', 'woocommerce' ) }
- </div>
- </VStack>
- ) }
- </div>
- </div>
- </GlobalStylesVariationIframe>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-panel.jsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-panel.jsx
deleted file mode 100644
index 5ed6f17cd7..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/color-panel.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/f9e405e0e53d61cd36af4f3b34f2de75874de1e1/packages/edit-site/src/components/global-styles/screen-colors.js#L23
-/**
- * External dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-import { useContext } from '@wordpress/element';
-import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
-import { debounce } from 'lodash';
-
-const {
- useGlobalStyle,
- useGlobalSetting,
- useSettingsForBlockElement,
- ColorPanel: StylesColorPanel,
- GlobalStylesContext,
-} = unlock( blockEditorPrivateApis );
-
-export const ColorPanel = () => {
- const { setUserConfig } = useContext( GlobalStylesContext );
- const [ style ] = useGlobalStyle( '', undefined, 'user', {
- shouldDecodeEncode: false,
- } );
- const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
- shouldDecodeEncode: false,
- } );
- const [ rawSettings ] = useGlobalSetting( '' );
- const settings = useSettingsForBlockElement( rawSettings );
-
- const onChange = ( _style ) => {
- setStyle( {
- ..._style,
- blocks: {
- ..._style.blocks,
- // Reset the "core/button" color that may have been set via predefined color palette to ensure it uses the custom button color.
- 'core/button': {
- color: {},
- },
- // Reset the "core/heading" color that may have been set via predefined color palette to ensure it uses the custom heading color.
- 'core/heading': {
- color: {},
- },
- },
- } );
- setUserConfig( ( currentConfig ) => ( {
- ...currentConfig,
- settings: mergeBaseAndUserConfigs( currentConfig.settings, {
- color: {
- palette: {
- hasCreatedOwnColors: true,
- },
- },
- } ),
- } ) );
- };
-
- return (
- <StylesColorPanel
- inheritedValue={ inheritedStyle }
- value={ style }
- onChange={ debounce( onChange, 100 ) }
- settings={ settings }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts
deleted file mode 100644
index 562a152752..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts
+++ /dev/null
@@ -1,1034 +0,0 @@
-/**
- * Internal dependencies
- */
-import { FontFamiliesToInstall } from '~/customize-store/types/font';
-
-const VALID_LOOKS = [ 'Contemporary', 'Classic', 'Bold' ] as const;
-type Look = ( typeof VALID_LOOKS )[ number ];
-
-export const FONT_PREVIEW_LARGE_WIDTH = 136;
-export const FONT_PREVIEW_LARGE_HEIGHT = 106;
-export const FONT_PREVIEW_WIDTH = 120;
-export const FONT_PREVIEW_HEIGHT = 74;
-export const SYSTEM_FONT_SLUG = 'system-font';
-
-export const FONT_FAMILIES_TO_INSTALL = {
- inter: {
- fontFamily: 'Inter',
- fontWeights: [ '400', '500', '600' ],
- fontStyles: [ 'normal' ],
- },
- 'bodoni-moda': {
- fontFamily: 'Bodoni Moda',
- fontWeights: [ '400' ],
- fontStyles: [ 'normal' ],
- },
- overpass: {
- fontFamily: 'Overpass',
- fontWeights: [ '300', '400' ],
- fontStyles: [ 'normal' ],
- },
- 'albert-sans': {
- fontFamily: 'Albert Sans',
- fontWeights: [ '700' ],
- fontStyles: [ 'normal' ],
- },
- lora: {
- fontFamily: 'Lora',
- fontWeights: [ '400' ],
- fontStyles: [ 'normal' ],
- },
- montserrat: {
- fontFamily: 'Montserrat',
- fontWeights: [ '500', '700' ],
- fontStyles: [ 'normal' ],
- },
- arvo: {
- fontFamily: 'Arvo',
- fontWeights: [ '400' ],
- fontStyles: [ 'normal' ],
- },
- rubik: {
- fontFamily: 'Rubik',
- fontWeights: [ '400', '800' ],
- fontStyles: [ 'normal' ],
- },
- newsreader: {
- fontFamily: 'Newsreader',
- fontWeights: [ '400' ],
- fontStyles: [ 'normal' ],
- },
- cormorant: {
- fontFamily: 'Cormorant',
- fontWeights: [ '400', '500' ],
- fontStyles: [ 'normal' ],
- },
- 'work-sans': {
- fontFamily: 'Work Sans',
- fontWeights: [ '400' ],
- fontStyles: [ 'normal' ],
- },
- raleway: {
- fontFamily: 'Raleway',
- fontWeights: [ '700' ],
- fontStyles: [ 'normal' ],
- },
-} as FontFamiliesToInstall;
-
-// Generated from /wpcom/v2/sites/{site_id}/global-styles-variation/font-pairings
-// TODO: Consider creating an API endpoint for this data
-export const FONT_PAIRINGS_WHEN_AI_IS_OFFLINE = [
- {
- title: 'Inter + Inter',
- version: 2,
- lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Inter',
- slug: 'inter',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontStyle: 'normal',
- fontWeight: '600',
- lineHeight: '1.2',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Bodoni Moda + Overpass',
- version: 2,
- lookAndFeel: [ 'Classic' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Bodoni Moda',
- slug: 'bodoni-moda',
- },
- {
- fontFamily: 'Overpass',
- slug: 'overpass',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--overpass)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--bodoni-moda)',
- fontStyle: 'normal',
- fontWeight: '400',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--bodoni-moda)',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--bodoni-moda)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--overpass)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '300',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Albert Sans + Lora',
- version: 2,
- lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Albert Sans',
- slug: 'albert-sans',
- },
- {
- fontFamily: 'Lora',
- slug: 'lora',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--albert-sans)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--albert-sans)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--lora)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Montserrat + Arvo',
- version: 2,
- lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Montserrat',
- slug: 'montserrat',
- },
- {
- fontFamily: 'Arvo',
- slug: 'arvo',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--arvo)',
- fontStyle: 'normal',
- fontWeight: '500',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--montserrat)',
- fontStyle: 'normal',
- fontWeight: '700',
- lineHeight: '1.4',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--montserrat)',
- fontWeight: '700',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--montserrat)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--arvo)',
- fontSize: 'var(--wp--preset--font-size--small)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Rubik + Inter',
- version: 2,
- lookAndFeel: [ 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Rubik',
- slug: 'rubik',
- },
- {
- fontFamily: 'Inter',
- slug: 'inter',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--rubik)',
- fontStyle: 'normal',
- fontWeight: '800',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--rubik)',
- fontWeight: '800',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--rubik)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--inter)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Newsreader + Newsreader',
- version: 2,
- lookAndFeel: [ 'Classic' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Newsreader',
- slug: 'newsreader',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--newsreader)',
- fontStyle: 'normal',
- fontWeight: '400',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--newsreader)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--newsreader)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Cormorant + Work Sans',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Cormorant',
- slug: 'cormorant',
- },
- {
- fontFamily: 'Work Sans',
- slug: 'work-sans',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--cormorant)',
- fontStyle: 'normal',
- fontWeight: '500',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--cormorant)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--work-sans)',
- },
- },
- },
- {
- title: 'Raleway + Cormorant',
- version: 2,
- lookAndFeel: [ 'Classic', 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Raleway',
- slug: 'raleway',
- },
- {
- fontFamily: 'Cormorant',
- slug: 'cormorant',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--raleway)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--raleway)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--cormorant)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- lineHeight: '1.67',
- },
- },
- },
-];
-
-export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
- {
- title: 'Cardo Font + System Sans-serif',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Cardo',
- // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240
- slug: 'heading',
- },
- {
- fontFamily: 'System Sans-serif',
- slug: 'system-sans-serif',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--heading)',
- fontStyle: 'normal',
- fontWeight: '300',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--system-sans-serif)',
- },
- },
- },
- {
- title: 'Inter + Cardo Font',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Inter',
- // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L215
- slug: 'body',
- },
- {
- fontFamily: 'Cardo',
- // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240
- slug: 'heading',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--body)',
- fontStyle: 'normal',
- fontWeight: '300',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--heading)',
- },
- },
- },
-];
-
-export const FONT_PAIRINGS = [
- {
- title: 'Commissioner + Crimson Pro',
- version: 2,
- lookAndFeel: [ 'Contemporary' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Commissioner',
- slug: 'commissioner',
- },
- {
- fontFamily: 'Crimson Pro',
- slug: 'crimson-pro',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--crimson-pro)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--commissioner)',
- fontStyle: 'normal',
- fontWeight: '300',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--commissioner)',
- fontWeight: '300',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--commissioner)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--crimson-pro)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'DM Sans + IBM Plex Mono',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'DM Sans',
- slug: 'dm-sans',
- },
- {
- fontFamily: 'IBM Plex Mono',
- slug: 'ibm-plex-mono',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--dm-sans)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--ibm-plex-mono)',
- fontSize: 'var(--wp--preset--font-size--small)',
- fontStyle: 'normal',
- fontWeight: '300',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Fraunces + Libre Franklin',
- version: 2,
- lookAndFeel: [ 'Classic' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Fraunces',
- slug: 'fraunces',
- },
- {
- fontFamily: 'Libre Franklin',
- slug: 'libre-franklin',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--fraunces)',
- fontStyle: 'normal',
- fontWeight: '500',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--libre-franklin)',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Libre Baskerville + DM Sans',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Libre Baskerville',
- slug: 'libre-baskerville',
- },
- {
- fontFamily: 'DM Sans',
- slug: 'dm-sans',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--dm-sans)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-baskerville)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-baskerville)',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-baskerville)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--dm-sans)',
- fontSize: 'var(--wp--preset--font-size--small)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Playfair Display + Fira Sans',
- version: 2,
- lookAndFeel: [ 'Classic' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Playfair Display',
- slug: 'playfair-display',
- },
- {
- fontFamily: 'Fira Sans',
- slug: 'fira-sans',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--fira-sans)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--playfair-display)',
- fontStyle: 'italic',
- fontWeight: '400',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--playfair-display)',
- fontStyle: 'italic',
- fontWeight: '400',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--playfair-display)',
- fontStyle: 'italic',
- fontWeight: '400',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--fira-sans)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Libre Franklin + EB Garamond',
- version: 2,
- lookAndFeel: [ 'Classic' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Libre Franklin',
- slug: 'libre-franklin',
- },
- {
- fontFamily: 'EB Garamond',
- slug: 'eb-garamond',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-franklin)',
- fontSize: 'var(--wp--preset--font-size--small)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-franklin)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-franklin)',
- fontWeight: '500',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--libre-franklin)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--eb-garamond)',
- fontSize: 'var(--wp--preset--font-size--medium)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- {
- title: 'Plus Jakarta Sans + Plus Jakarta Sans',
- version: 2,
- lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Plus Jakarta Sans',
- slug: 'plus-jakarta-sans',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--plus-jakarta-sans)',
- fontStyle: 'normal',
- fontWeight: '700',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--plus-jakarta-sans)',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Rubik + Rubik',
- version: 2,
- lookAndFeel: [ 'Contemporary' ] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Rubik',
- slug: 'rubik',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- heading: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--rubik)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--rubik)',
- fontWeight: '400',
- lineHeight: '1.67',
- },
- },
- },
- {
- title: 'Space Mono + Roboto',
- version: 2,
- lookAndFeel: [] as Look[],
- settings: {
- typography: {
- fontFamilies: {
- theme: [
- {
- fontFamily: 'Space Mono',
- slug: 'space-mono',
- },
- {
- fontFamily: 'Roboto',
- slug: 'roboto',
- },
- ],
- },
- },
- },
- styles: {
- elements: {
- button: {
- typography: {
- fontFamily: 'var(--wp--preset--font-family--roboto)',
- fontWeight: '400',
- lineHeight: '1',
- },
- },
- heading: {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--space-mono)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.15',
- },
- },
- },
- blocks: {
- 'core/site-title': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--space-mono)',
- fontStyle: 'normal',
- fontWeight: '400',
- },
- },
- 'core/post-navigation-link': {
- typography: {
- fontFamily:
- 'var(--wp--preset--font-family--space-mono)',
- },
- },
- },
- typography: {
- fontFamily: 'var(--wp--preset--font-family--roboto)',
- fontSize: 'var(--wp--preset--font-size--small)',
- fontStyle: 'normal',
- fontWeight: '400',
- lineHeight: '1.6',
- },
- },
- },
- ...FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
- ...FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
-];
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com.tsx
deleted file mode 100644
index 9e41d2dfd4..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// TODO: When wp.com will upgrade to WordPress 6.5, we should remove this logic and use the FontFamiliesLoader component instead.
-// Load font families from wp.com.
-
-/**
- * External dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-export type FontFamily = {
- fontFamily: string;
- name: string;
- slug: string;
-};
-
-type Props = {
- fontFamilies: FontFamily[];
- onLoad?: () => void;
- preload?: boolean;
-};
-
-// See https://developers.google.com/fonts/docs/css2
-const FONT_API_BASE = 'https://fonts-api.wp.com/css2';
-// this is the actual host that the .woff files are at, the above is the one for the .css files with the @font-face declarations
-const FONT_HOST = 'https://fonts.wp.com'; // used for preconnecting so that fonts can get loaded faster
-
-const FONT_AXIS = 'ital,wght@0,400;0,700;1,400;1,700';
-
-export const FontFamiliesLoaderDotCom = ( {
- fontFamilies,
- onLoad,
- preload = false,
-}: Props ) => {
- const params = useMemo(
- () =>
- new URLSearchParams( [
- ...fontFamilies.map( ( { fontFamily } ) => [
- 'family',
- `${ fontFamily }:${ FONT_AXIS }`,
- ] ),
- [ 'display', 'swap' ],
- ] ),
- [ fontFamilies ]
- );
-
- if ( ! params.getAll( 'family' ).length ) {
- return null;
- }
-
- return (
- <>
- { preload ? <link rel="preconnect" href={ FONT_HOST } /> : null }
- <link
- rel={ preload ? 'preload' : 'stylesheet' }
- type="text/css"
- as={ preload ? 'style' : undefined }
- href={ `${ FONT_API_BASE }?${ params }` }
- onLoad={ onLoad }
- onError={ onLoad }
- />
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx
deleted file mode 100644
index d355440ffa..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { FontFamily } from '~/customize-store/types/font';
-
-type Props = {
- fontFamilies: Array< FontFamily >;
- iframeInstance: HTMLObjectElement | null;
- onLoad?: () => void;
- preload?: boolean;
-};
-
-const isUrlEncoded = ( url: string ) => {
- if ( typeof url !== 'string' ) {
- return false;
- }
- return url !== decodeURIComponent( url );
-};
-
-const getDisplaySrcFromFontFace = ( input: string, urlPrefix: string ) => {
- if ( ! input ) {
- return;
- }
-
- // If it is a theme font, we need to make the url absolute
- if ( input.startsWith( 'file:.' ) && urlPrefix ) {
- const absoluteUrl = input.replace( 'file:.', urlPrefix );
- return ! isUrlEncoded( absoluteUrl )
- ? encodeURI( absoluteUrl )
- : absoluteUrl;
- }
-
- return ! isUrlEncoded( input ) ? encodeURI( input ) : input;
-};
-export const FontFamiliesLoader = ( {
- fontFamilies,
- iframeInstance,
- onLoad,
-}: Props ) => {
- const { site, currentTheme } = useSelect( ( select ) => {
- return {
- // @ts-expect-error No types for this exist yet.
- site: select( coreStore ).getSite(),
- currentTheme: select( coreStore ).getCurrentTheme(),
- };
- }, [] );
-
- useEffect( () => {
- if ( ! Array.isArray( fontFamilies ) || ! site ) {
- return;
- }
-
- const themeUrl =
- site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
- fontFamilies.forEach( async ( fontFamily ) => {
- fontFamily.fontFace?.forEach( async ( fontFace ) => {
- const src = Array.isArray( fontFace.src )
- ? fontFace.src[ 0 ]
- : fontFace.src;
- const srcFont = getDisplaySrcFromFontFace( src, themeUrl );
- const dataSource = `url(${ srcFont })`;
- const newFont = new FontFace( fontFace.fontFamily, dataSource, {
- style: fontFace.fontStyle,
- weight: fontFace.fontWeight,
- } );
-
- const loadedFace = await newFont.load();
-
- document.fonts.add( loadedFace );
- if ( iframeInstance ) {
- iframeInstance.contentDocument?.fonts.add( loadedFace );
- }
- if ( onLoad ) {
- onLoad();
- }
- } );
- } );
- }, [
- currentTheme?.stylesheet,
- fontFamilies,
- iframeInstance,
- onLoad,
- site,
- ] );
-
- return <></>;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx
deleted file mode 100644
index 9856745abc..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-// @ts-ignore No types for this exist yet.
-import { __experimentalGrid as Grid, Spinner } from '@wordpress/components';
-import { optionsStore } from '@woocommerce/data';
-import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
-import {
- // @ts-expect-error No types for this exist yet.
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-// @ts-expect-error no types exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import {
- FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
- FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
-} from './constants';
-import { VariationContainer } from '../variation-container';
-import { FontPairingVariationPreview } from './preview';
-import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
-import { FontFamily } from './font-families-loader-dot-com';
-import {
- OptInContext,
- OPTIN_FLOW_STATUS,
-} from '~/customize-store/assembler-hub/opt-in/context';
-
-export const FontPairing = () => {
- const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
- const [ custom ] = useGlobalSetting( 'typography.fontFamilies.custom' ) as [
- Array< FontFamily > | undefined
- ];
-
- // theme.json file font families
- const [ baseFontFamilies ] = useGlobalSetting(
- 'typography.fontFamilies',
- undefined,
- 'base'
- ) as [
- {
- theme: Array< FontFamily >;
- }
- ];
-
- const { context } = useContext( CustomizeStoreContext );
- const isFontLibraryAvailable = context.isFontLibraryAvailable;
- const trackingAllowed = useSelect(
- ( select ) =>
- select( optionsStore ).getOption( 'woocommerce_allow_tracking' ) ===
- 'yes',
- []
- );
-
- const { optInFlowStatus } = useContext( OptInContext );
-
- const fontPairings = useMemo( () => {
- const defaultFonts = FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING.map(
- ( pair ) => {
- const fontFamilies = pair.settings.typography.fontFamilies;
-
- const fonts = baseFontFamilies.theme.filter(
- ( baseFontFamily ) =>
- fontFamilies.theme.some(
- ( themeFont ) =>
- themeFont.fontFamily === baseFontFamily.name
- )
- );
-
- return {
- ...pair,
- settings: {
- typography: {
- fontFamilies: {
- theme: fonts,
- },
- },
- },
- };
- }
- );
-
- // We only show the default fonts when:
- // - user did not allow tracking
- // - site doesn't have the Font Library available
- // - opt-in flow is still processing
- if (
- ! trackingAllowed ||
- ! isFontLibraryAvailable ||
- optInFlowStatus !== OPTIN_FLOW_STATUS.DONE
- ) {
- return defaultFonts;
- }
-
- const customFonts = FONT_PAIRINGS_WHEN_AI_IS_OFFLINE.map( ( pair ) => {
- const fontFamilies = pair.settings.typography.fontFamilies;
- const fonts =
- custom?.filter( ( customFont ) =>
- fontFamilies.theme.some(
- ( themeFont ) => themeFont.slug === customFont.slug
- )
- ) ?? [];
-
- return {
- ...pair,
- settings: {
- typography: {
- fontFamilies: {
- theme: fonts,
- },
- },
- },
- };
- } );
-
- return [ ...defaultFonts, ...customFonts ];
- }, [
- baseFontFamilies.theme,
- custom,
- isFontLibraryAvailable,
- optInFlowStatus,
- trackingAllowed,
- ] );
-
- if ( optInFlowStatus === OPTIN_FLOW_STATUS.LOADING ) {
- return (
- <div className="woocommerce-customize-store_font-pairing-spinner-container">
- <Spinner />
- </div>
- );
- }
-
- return (
- <Grid
- columns={ 2 }
- gap={ 3 }
- className="woocommerce-customize-store_font-pairing-container"
- style={ {
- opacity: 0,
- animation: 'containerFadeIn 300ms ease-in-out forwards',
- } }
- >
- { fontPairings.map( ( variation, index ) => (
- <VariationContainer key={ index } variation={ variation }>
- <FontPairingVariationPreview />
- </VariationContainer>
- ) ) }
- </Grid>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/preview.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/preview.tsx
deleted file mode 100644
index 7daf0aa091..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/preview.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-// Reference: https://github.com/Automattic/wp-calypso/blob/d3c9b16fb99ce242f61baa21119b7c20f8823be6/packages/global-styles/src/components/font-pairing-variations/preview.tsx
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import {
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
-import { useMemo, useRef, useState } from '@wordpress/element';
-import {
- // @ts-expect-error No types for this exist yet.
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-// @ts-expect-error No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-import { GlobalStylesVariationIframe } from '../global-styles-variation-iframe';
-import {
- FONT_PREVIEW_LARGE_WIDTH,
- FONT_PREVIEW_LARGE_HEIGHT,
- FONT_PREVIEW_WIDTH,
- FONT_PREVIEW_HEIGHT,
-} from './constants';
-import { FontFamily } from '~/customize-store/types/font';
-import { FontFamiliesLoader } from './font-families-loader';
-
-const { useGlobalStyle, useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-const DEFAULT_LARGE_FONT_STYLES: React.CSSProperties = {
- fontSize: '13vw', // 18px for min-width wide breakpoint and 15px for max-width wide
- lineHeight: '20px',
- color: '#000000',
-};
-
-// For some reason, Chrome doesn't render the fonts correctly if the font-family with spaces is not wrapped in single quotes.
-// Example: "Bodoni Moda", serif => '"Bodoni Moda"', serif
-const formatFontFamily = ( input: string ) => {
- return input
- .split( ',' )
- .map( ( font ) => {
- font = font.trim();
- if ( font.startsWith( '"' ) ) {
- return `'${ font }'`;
- }
- return font;
- } )
- .join( ', ' );
-};
-
-export const FontPairingVariationPreview = () => {
- const [ fontFamilies ] = useGlobalSetting(
- 'typography.fontFamilies.theme'
- ) as [ FontFamily[] ];
-
- const [ textFontFamily = 'serif' ] = useGlobalStyle(
- 'typography.fontFamily'
- );
- const [ textFontStyle = 'normal' ] = useGlobalStyle(
- 'typography.fontStyle'
- );
- const [ textLetterSpacing = '-0.15px' ] = useGlobalStyle(
- 'typography.letterSpacing'
- );
- const [ textFontWeight = 400 ] = useGlobalStyle( 'typography.fontWeight' );
-
- const [ headingFontFamily = textFontFamily ] = useGlobalStyle(
- 'elements.heading.typography.fontFamily'
- );
- const [ headingFontStyle = textFontStyle ] = useGlobalStyle(
- 'elements.heading.typography.fontStyle'
- );
- const [ headingFontWeight = textFontWeight ] = useGlobalStyle(
- 'elements.heading.typography.fontWeight'
- );
- const [ headingLetterSpacing = textLetterSpacing ] = useGlobalStyle(
- 'elements.heading.typography.letterSpacing'
- );
-
- const [ containerResizeListener, { width } ] = useResizeObserver();
- const isDesktop = useViewportMatch( 'large' );
- const defaultWidth = isDesktop
- ? FONT_PREVIEW_LARGE_WIDTH
- : FONT_PREVIEW_WIDTH;
- const defaultHeight = isDesktop
- ? FONT_PREVIEW_LARGE_HEIGHT
- : FONT_PREVIEW_HEIGHT;
-
- const ratio = width ? width / defaultWidth : 1;
- const normalizedHeight = Math.ceil( defaultHeight * ratio );
-
- const [ isLoaded, setIsLoaded ] = useState( false );
-
- const getFontFamilyName = ( targetFontFamily: string ) => {
- const fontFamily = fontFamilies.find(
- ( { fontFamily: _fontFamily } ) => _fontFamily === targetFontFamily
- );
- return fontFamily?.name || fontFamily?.fontFamily || targetFontFamily;
- };
-
- const textFontFamilyName = useMemo(
- () => getFontFamilyName( textFontFamily ),
- [ textFontFamily, fontFamilies ]
- );
-
- const headingFontFamilyName = useMemo(
- () => getFontFamilyName( headingFontFamily ),
- [ headingFontFamily, fontFamilies ]
- );
-
- const handleOnLoad = () => setIsLoaded( true );
-
- const iframeInstance = useRef< HTMLObjectElement | null >( null );
-
- return (
- <GlobalStylesVariationIframe
- width={ width }
- height={ normalizedHeight }
- containerResizeListener={ containerResizeListener }
- iframeInstance={ iframeInstance }
- >
- <>
- <div
- style={ {
- // Apply the normalized height only when the width is available
- height: width ? normalizedHeight : 0,
- width: '100%',
- background: 'white',
- cursor: 'pointer',
- } }
- >
- <div
- style={ {
- height: '100%',
- overflow: 'hidden',
- opacity: isLoaded ? 1 : 0,
- } }
- >
- <HStack
- spacing={ 10 * ratio }
- justify="flex-start"
- style={ {
- height: '100%',
- overflow: 'hidden',
- } }
- >
- <VStack
- spacing={ 1 }
- style={ {
- margin: '10px',
- width: '100%',
- textAlign: isDesktop ? 'center' : 'left',
- } }
- >
- <div
- aria-label={ headingFontFamilyName }
- style={ {
- ...DEFAULT_LARGE_FONT_STYLES,
- letterSpacing: headingLetterSpacing,
- fontWeight: headingFontWeight,
- fontFamily:
- formatFontFamily(
- headingFontFamily
- ),
- fontStyle: headingFontStyle,
- } }
- >
- { headingFontFamilyName }
- </div>
- <div
- aria-label={ textFontFamilyName }
- style={ {
- ...DEFAULT_LARGE_FONT_STYLES,
- fontSize: '13px',
- letterSpacing: textLetterSpacing,
- fontWeight: textFontWeight,
- fontFamily:
- formatFontFamily( textFontFamily ),
- fontStyle: textFontStyle,
- } }
- >
- { textFontFamilyName }
- </div>
- </VStack>
- </HStack>
- </div>
- </div>
- <FontFamiliesLoader
- fontFamilies={ fontFamilies }
- onLoad={ handleOnLoad }
- iframeInstance={ iframeInstance.current }
- />
- </>
- </GlobalStylesVariationIframe>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/index.tsx
deleted file mode 100644
index 0909535580..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// Reference: https://github.com/Automattic/wp-calypso/blob/d3c9b16fb99ce242f61baa21119b7c20f8823be6/packages/global-styles/src/components/global-styles-variation-container/index.tsx#L19
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import {
- // @ts-expect-error No types for this
- __unstableEditorStyles as EditorStyles,
- // @ts-expect-error No types for this
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { useRefEffect } from '@wordpress/compose';
-import { MutableRefObject, useMemo } from 'react';
-// @ts-ignore No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import Iframe from '../../../iframe';
-
-const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
-
-interface Props {
- width: number | null;
- height: number;
- inlineCss?: string;
- containerResizeListener: JSX.Element;
- children: JSX.Element;
- iframeInstance?: MutableRefObject< HTMLObjectElement | null >;
- onFocusOut?: () => void;
-}
-
-export const GlobalStylesVariationIframe = ( {
- width,
- height,
- inlineCss,
- containerResizeListener,
- children,
- onFocusOut,
- iframeInstance,
- ...props
-}: Props ) => {
- const [ styles ] = useGlobalStylesOutput();
- // Reset leaked styles from WP common.css and remove main content layout padding and border.
- const editorStyles = useMemo( () => {
- if ( styles ) {
- return [
- ...styles,
- ...( inlineCss
- ? [
- {
- css: inlineCss,
- isGlobalStyles: true,
- },
- ]
- : [] ),
- {
- css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;transform:scale(1);}',
- isGlobalStyles: true,
- },
- ];
- }
- return styles;
- }, [ inlineCss, styles ] );
-
- return (
- <Iframe
- ref={ iframeInstance }
- className="global-styles-variation-container__iframe"
- style={ {
- height,
- visibility: width ? 'visible' : 'hidden',
- } }
- tabIndex={ -1 }
- loadStyles={ false }
- contentRef={ useRefEffect( ( bodyElement ) => {
- // Disable moving focus to the writing flow wrapper if the focus disappears
- // See https://github.com/WordPress/gutenberg/blob/aa8e1c52c7cb497e224a479673e584baaca97113/packages/block-editor/src/components/writing-flow/use-tab-nav.js#L136
- const handleFocusOut = ( event: Event ) => {
- event.stopImmediatePropagation();
- // Explicitly call the focusOut handler, if available.
- onFocusOut?.();
- };
- bodyElement.addEventListener( 'focusout', handleFocusOut );
- return () => {
- bodyElement.removeEventListener(
- 'focusout',
- handleFocusOut
- );
- };
- }, [] ) }
- scrolling="no"
- { ...props }
- >
- <EditorStyles styles={ editorStyles ?? [] } />
- { containerResizeListener }
- { children }
- </Iframe>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/style.scss
deleted file mode 100644
index fd3ec5228e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/style.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.global-styles-variation-container__iframe {
- border-radius: 3px; /* stylelint-disable-line scales/radii */
- box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
- border: 0;
- display: block;
- max-width: 100%;
-}
-
-.color-block-support-panel {
- padding: 0;
- border-top: 0;
-
- .components-tools-panel-header {
- display: none;
- }
-
- .block-editor-tools-panel-color-gradient-settings__dropdown {
- .components-button {
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
-
- &.is-open {
- background: initial;
- color: $gray-900;
- }
-
- &:focus {
- box-shadow: none;
- }
- }
- }
-
- .block-editor-panel-color-gradient-settings__dropdown {
- padding: 12px 0;
-
- .components-flex {
- flex-direction: row-reverse;
- justify-content: space-between;
- }
- }
- .color-block-support-panel__inner-wrapper {
- .block-editor-tools-panel-color-gradient-settings__item {
- border: 0;
- order: 10; // default
-
- // Background
- &:nth-child(2) {
- order: 1;
- }
-
- // Text
- &.first {
- border-top: 0;
- order: 2;
- }
-
- // Heading
- &:nth-child(6) {
- order: 3;
- }
-
- // Button
- &:nth-child(5) {
- order: 4;
- }
-
- // Link
- &:nth-child(3) {
- order: 5;
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/index.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/index.ts
deleted file mode 100644
index 58142737e6..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { ColorPalette } from './color-palette-variations';
-export { ColorPanel } from './color-panel';
-export { FontPairing } from './font-pairing-variations';
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
deleted file mode 100644
index 60313651ee..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/d5ab7238e53d0947d4bb0853464b1c58325b6130/packages/edit-site/src/components/global-styles/style-variations-container.js
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useMemo, useContext } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
-import {
- privateApis as blockEditorPrivateApis,
- BlockEditorProvider,
-} from '@wordpress/block-editor';
-import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-import { isEqual, noop } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import { trackEvent } from '~/customize-store/tracking';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-// Removes the typography settings from the styles when the user is changing
-// to a new typography variation. Otherwise, some of the user's old
-// typography settings will persist making new typography settings
-// depend on old ones
-const resetTypographySettings = ( variation, userStyles ) => {
- if ( variation.settings.typography ) {
- delete userStyles.typography;
- for ( const elementKey in userStyles.elements ) {
- if ( userStyles.elements[ elementKey ].typography ) {
- delete userStyles.elements[ elementKey ].typography;
- }
- }
- }
-
- return userStyles;
-};
-
-// mergeBaseAndUserConfigs is just a wrapper around deepmerge library: https://github.com/WordPress/gutenberg/blob/237865fad0864c209a7c3e771e23fe66f4fbca25/packages/edit-site/src/components/global-styles/global-styles-provider.js/#L24-L31
-// Deepmerge library merges two objects x and y deeply, returning a new merged object with the elements from both x and y.
-// In the case of the variation.title === 'New - Neutral', the core/button is an empty object, because we don't want that the classes for the core/button are created.
-// Deepmerge merges the userStyles.blocks[ 'core/button' ] with the variation.styles.blocks[ 'core/button' ] and the result is an object with values that doesn't match with the variation. For this reason it is necessary remove the userStyles.blocks[ 'core/button' ].
-const resetStyleSettings = ( variation, userStyles ) => {
- if ( variation.title === 'New - Neutral' ) {
- delete userStyles.blocks[ 'core/button' ];
- }
- return userStyles;
-};
-
-export const VariationContainer = ( { variation, children } ) => {
- const { base, user, setUserConfig } = useContext( GlobalStylesContext );
- const context = useMemo( () => {
- return {
- user: {
- settings: variation.settings ?? {},
- styles: variation.styles ?? {},
- },
- base,
- merged: mergeBaseAndUserConfigs( base, variation ),
- setUserConfig: () => {},
- };
- }, [ variation, base ] );
-
- const selectVariation = () => {
- // Remove the hasCreatedOwnColors flag if the user is switching to a color palette
- // hasCreatedOwnColors flag is used for visually deselecting preset color palettes if user has created their own
- if (
- variation.settings.color &&
- user.settings.color &&
- user.settings.color.palette.hasCreatedOwnColors
- ) {
- delete user.settings.color.palette.hasCreatedOwnColors;
- // some color palettes don't define all the possible color options, e.g headings and captions
- // if the user selects a pre-defined color palette with some own colors defined for these,
- // we need to delete these user customizations as the below merge will persist them since
- // the incoming variation won't have these properties defined
- delete user.styles.color;
- for ( const elementKey in user.styles.elements ) {
- if ( user.styles.elements[ elementKey ].color ) {
- delete user.styles.elements[ elementKey ].color;
- }
- }
- }
-
- const resetTypographySettingsStyles = resetTypographySettings(
- variation,
- user.styles
- );
- const resetStyleSettingsStyles = resetStyleSettings(
- variation,
- resetTypographySettingsStyles
- );
-
- setUserConfig( () => {
- return {
- settings: mergeBaseAndUserConfigs(
- user.settings,
- variation.settings
- ),
- styles: mergeBaseAndUserConfigs(
- resetStyleSettingsStyles,
- variation.styles
- ),
- };
- } );
-
- if ( variation.settings.color?.palette ) {
- trackEvent(
- 'customize_your_store_assembler_hub_color_palette_item_click',
- {
- item: variation.title,
- }
- );
- }
-
- if ( variation.settings.typography ) {
- trackEvent(
- 'customize_your_store_assembler_hub_typography_item_click',
- {
- item: variation.title,
- }
- );
- }
- };
-
- const selectOnEnter = ( event ) => {
- if ( event.keyCode === ENTER ) {
- event.preventDefault();
- selectVariation();
- }
- };
- const isActive = useMemo( () => {
- if ( variation.settings.color ) {
- return isEqual( variation.settings.color, user.settings.color );
- }
- // With the Font Library, the fontFamilies object contains an array of font families installed with the Font Library under the key 'custom'.
- // We need to compare only the active theme font families, so we compare the theme font families with the current variation.
- const { theme } = user.settings.typography.fontFamilies;
- return (
- variation.settings.typography?.fontFamilies.theme.every(
- ( { slug } ) =>
- theme.some( ( { slug: themeSlug } ) => themeSlug === slug )
- ) &&
- theme.length ===
- variation.settings.typography?.fontFamilies.theme.length
- );
- }, [ user, variation ] );
-
- let label = variation?.title;
- if ( variation?.description ) {
- label = sprintf(
- /* translators: %1$s: variation title. %2$s variation description. */
- __( '%1$s (%2$s)', 'woocommerce' ),
- variation?.title,
- variation?.description
- );
- }
-
- return (
- <BlockEditorProvider
- onChange={ noop }
- onInput={ noop }
- settings={ {} }
- useSubRegistry={ true }
- >
- <GlobalStylesContext.Provider value={ context }>
- <div
- className={ clsx(
- 'woocommerce-customize-store_global-styles-variations_item',
- {
- 'is-active': isActive,
- }
- ) }
- role="button"
- onClick={ selectVariation }
- onKeyDown={ selectOnEnter }
- tabIndex="0"
- aria-label={ label }
- aria-current={ isActive }
- >
- <div className="woocommerce-customize-store_global-styles-variations_item-preview">
- { children }
- </div>
- </div>
- </GlobalStylesContext.Provider>
- </BlockEditorProvider>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/index.tsx
deleted file mode 100644
index 61dfbacf18..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/v16.4.0/packages/edit-site/src/components/sidebar/index.js
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { memo, useCallback, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreenColorPalette } from './sidebar-navigation-screen-color-palette';
-import { SidebarNavigationScreenFooter } from './sidebar-navigation-screen-footer/sidebar-navigation-screen-footer';
-import { SidebarNavigationScreenHeader } from './sidebar-navigation-screen-header/sidebar-navigation-screen-header';
-import { SidebarNavigationScreenHomepage } from './sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage';
-import { SidebarNavigationScreenMain } from './sidebar-navigation-screen-main';
-import { SidebarNavigationScreenTypography } from './sidebar-navigation-screen-typography/sidebar-navigation-screen-typography';
-// import { SidebarNavigationScreenPages } from './sidebar-navigation-screen-pages';
-
-import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
-import { SaveHub } from './save-hub';
-// In some cases, the assembler is loaded in an iframe, so we have to re-apply the filter.
-import '~/customize-store/entrepreneur-flow';
-import {
- SidebarContent,
- SidebarNavigationAnimationDirection,
- SidebarNavigationContext,
-} from '../components/sidebar';
-import { SidebarNavigationScreenLogo } from './sidebar-navigation-screen-logo';
-import { isFullComposabilityFeatureAndAPIAvailable } from '../utils/is-full-composability-enabled';
-import { SidebarNavigationScreenHomepagePTK } from './sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk';
-
-const getComponentByPathParams = (
- params: string,
- onNavigateBackClick: () => void
-) => {
- if ( params === '/customize-store/assembler-hub' ) {
- return <SidebarNavigationScreenMain />;
- }
-
- if ( params === '/customize-store/assembler-hub/color-palette' ) {
- return (
- <SidebarNavigationScreenColorPalette
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if ( params === '/customize-store/assembler-hub/logo' ) {
- return (
- <SidebarNavigationScreenLogo
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if ( params === '/customize-store/assembler-hub/typography' ) {
- return (
- <SidebarNavigationScreenTypography
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if ( params === '/customize-store/assembler-hub/header' ) {
- return (
- <SidebarNavigationScreenHeader
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if (
- isFullComposabilityFeatureAndAPIAvailable() &&
- params?.includes( '/customize-store/assembler-hub/homepage' )
- ) {
- return (
- <SidebarNavigationScreenHomepagePTK
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if (
- ! isFullComposabilityFeatureAndAPIAvailable() &&
- params === '/customize-store/assembler-hub/homepage'
- ) {
- return (
- <SidebarNavigationScreenHomepage
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- if ( params === '/customize-store/assembler-hub/footer' ) {
- return (
- <SidebarNavigationScreenFooter
- onNavigateBackClick={ onNavigateBackClick }
- />
- );
- }
-
- return <SidebarNavigationScreenMain />;
-};
-
-function SidebarScreens() {
- const params = useQuery().path;
-
- const { navigate } = useContext( SidebarNavigationContext );
-
- const onNavigateBackClick = useCallback( () => {
- const assemblerUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub',
- {}
- );
- navigateTo( { url: assemblerUrl } );
- navigate( SidebarNavigationAnimationDirection.Back );
- }, [ navigate ] );
-
- return <>{ getComponentByPathParams( params, onNavigateBackClick ) }</>;
-}
-
-function Sidebar() {
- return (
- <>
- <SidebarContent>
- <SidebarScreens />
- </SidebarContent>
- <SaveHub />
- </>
- );
-}
-
-export default memo( Sidebar );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/sidebar-navigation-extra-screen.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/sidebar-navigation-extra-screen.tsx
deleted file mode 100644
index 5304eb9a94..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/sidebar-navigation-extra-screen.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { useQuery } from '@woocommerce/navigation';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { SidebarPatternScreen } from '../pattern-screen/sidebar-pattern-screen';
-
-import './style.scss';
-import { PATTERN_CATEGORIES } from '../pattern-screen/categories';
-
-const getPatternCategoryByPath = ( path: string ) => {
- // Define the regex pattern to match everything after "/homepage/"
- const regex = /\/homepage\/(.*)/;
-
- // Apply the regex pattern to the pathname part of the URL
- const match = path.match( regex );
-
- const patternCategory = match?.[ 1 ];
-
- if (
- patternCategory &&
- Object.keys( PATTERN_CATEGORIES ).includes( patternCategory )
- ) {
- return patternCategory;
- }
-
- return null;
-};
-
-export const SidebarNavigationExtraScreen = () => {
- const { path } = useQuery();
-
- const patternCategory = useMemo(
- () => ( path ? getPatternCategoryByPath( path ) : null ),
- [ path ]
- );
-
- if ( patternCategory ) {
- return (
- <div className="woocommerce-customize-store-edit-site-layout__sidebar-extra">
- <SidebarPatternScreen category={ patternCategory } />
- </div>
- );
- }
-
- return null;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/style.scss
deleted file mode 100644
index f5fa9919e2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/navigation-extra-screen/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.woocommerce-customize-store-edit-site-layout__sidebar-extra {
- width: 380px;
- padding: 16px 6px 16px 6px;
- background-color: #f5f5f5;
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/categories.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/categories.ts
deleted file mode 100644
index e9fb5e3856..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/categories.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const PATTERN_CATEGORIES = {
- intro: {
- label: __( 'Intro', 'woocommerce' ),
- description: __(
- 'Welcome shoppers to your store with one of our introductory patterns.',
- 'woocommerce'
- ),
- },
- 'featured-selling': {
- label: __( 'Featured selling', 'woocommerce' ),
- description: __(
- 'Put the spotlight on one or more of your products or product categories.',
- 'woocommerce'
- ),
- },
- about: {
- label: __( 'About', 'woocommerce' ),
- description: __(
- 'Show your shoppers what’s special about your business.',
- 'woocommerce'
- ),
- },
- services: {
- label: __( 'Services', 'woocommerce' ),
- description: __(
- 'Share information on any services that your business can provide.',
- 'woocommerce'
- ),
- },
- reviews: {
- label: __( 'Reviews', 'woocommerce' ),
- description: __(
- 'Encourage sales by sharing positive feedback from happy shoppers.',
- 'woocommerce'
- ),
- },
- 'social-media': {
- label: __( 'Social media', 'woocommerce' ),
- description: __(
- 'Promote your social channels and give shoppers a way to see your latest products and news.',
- 'woocommerce'
- ),
- },
- // newsletter: {
- // label: __( 'Newsletter', 'woocommerce' ),
- // description: __(
- // 'Keep in touch with your shoppers with a newsletter signup form.',
- // 'woocommerce'
- // ),
- // },
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
deleted file mode 100644
index 33b7d51563..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { BlockInstance } from '@wordpress/blocks';
-import { close } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { capitalize } from 'lodash';
-import { Button, Spinner } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- // @ts-expect-error No types for this exist yet.
- __experimentalBlockPatternsList as BlockPatternList,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { usePatternsByCategory } from '../../hooks/use-patterns';
-import './style.scss';
-import { useEditorBlocks } from '../../hooks/use-editor-blocks';
-import { PATTERN_CATEGORIES } from './categories';
-import { THEME_SLUG } from '~/customize-store/data/constants';
-import {
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
- PRODUCT_HERO_PATTERN_BUTTON_STYLE,
-} from '../../utils/black-background-pattern-update-button';
-import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
-import {
- sortPatternsByCategory,
- addIsAddedClassToPatternPreview,
-} from './utils';
-import { trackEvent } from '~/customize-store/tracking';
-import { useInsertPattern } from '../../hooks/use-insert-pattern';
-
-export const SidebarPatternScreen = ( { category }: { category: string } ) => {
- const { patterns, isLoading } = usePatternsByCategory( category );
-
- const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
- const sortedPatterns = useMemo( () => {
- const patternsWithoutThemePatterns = patterns.filter(
- ( pattern ) =>
- ! pattern.name.includes( THEME_SLUG ) &&
- pattern.source !== 'pattern-directory/theme' &&
- pattern.source !== 'pattern-directory/core'
- );
-
- const patternWithPatchedProductHeroPattern =
- patternsWithoutThemePatterns.map( ( pattern ) => {
- if (
- pattern.name !==
- 'woocommerce-blocks/just-arrived-full-hero' &&
- pattern.name !==
- 'woocommerce-blocks/featured-category-cover-image'
- ) {
- return pattern;
- }
-
- if ( ! isActiveNewNeutralVariation ) {
- const blocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- pattern.blocks,
- ( patternBlocks: BlockInstance[] ) => {
- patternBlocks.forEach(
- ( block: BlockInstance ) =>
- ( block.attributes.style = {} )
- );
- }
- );
- return { ...pattern, blocks };
- }
-
- const blocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- pattern.blocks,
- ( patternBlocks: BlockInstance[] ) => {
- patternBlocks.forEach(
- ( block ) =>
- ( block.attributes.style =
- PRODUCT_HERO_PATTERN_BUTTON_STYLE )
- );
- }
- );
-
- return { ...pattern, blocks };
- } );
-
- return sortPatternsByCategory(
- patternWithPatchedProductHeroPattern,
- category as keyof typeof PATTERN_CATEGORIES
- );
- }, [ category, isActiveNewNeutralVariation, patterns ] );
-
- const asyncSortedPatterns = useAsyncList( sortedPatterns );
-
- const [ patternPagination, setPatternPagination ] = useState( 10 );
-
- const refElement = useRef< HTMLDivElement >( null );
-
- const currentTemplateId: string | undefined = useSelect(
- ( sel ) => sel( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ blocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const isEditorLoading = useIsSiteEditorLoading();
-
- const isSpinnerVisible = isLoading || isEditorLoading;
-
- useEffect( () => {
- if ( isSpinnerVisible || refElement.current === null ) {
- return;
- }
-
- // We want to add the is-added class to the pattern preview when the pattern is loaded in the editor and for each mutation.
- addIsAddedClassToPatternPreview( refElement.current, blocks );
-
- const observer = new MutationObserver( () => {
- addIsAddedClassToPatternPreview(
- refElement.current as HTMLElement,
- blocks
- );
- } );
-
- const previewPatternList = document.querySelector(
- '.woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern .block-editor-block-patterns-list'
- );
-
- if ( previewPatternList ) {
- observer.observe( previewPatternList, {
- childList: true,
- } );
- }
-
- return () => {
- observer.disconnect();
- };
- }, [ isLoading, blocks, isSpinnerVisible ] );
-
- const { insertPattern, insertedPattern: blockToScroll } =
- useInsertPattern();
-
- useEffect( () => {
- if ( isEditorLoading ) {
- return;
- }
- const iframe = window.document.querySelector(
- '.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
- ) as HTMLIFrameElement;
-
- const blockList = iframe?.contentWindow?.document.body.querySelector(
- '.block-editor-block-list__layout'
- );
-
- const observer = new MutationObserver( () => {
- if ( blockToScroll.current ) {
- const block = blockList?.querySelector(
- `[id="block-${ blockToScroll.current }"]`
- );
-
- if ( block ) {
- block.scrollIntoView( {
- behavior: 'smooth',
- block: 'end',
- } );
- blockToScroll.current = null;
- }
- }
- } );
-
- if ( blockList ) {
- observer.observe( blockList, { childList: true } );
- }
-
- return () => {
- observer.disconnect();
- };
- }, [ blockToScroll, isEditorLoading ] );
-
- return (
- <div
- className="woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern"
- onScroll={ ( event ) => {
- const element = event.target as HTMLElement;
- const scrollTop = element.scrollTop;
- const percentage =
- scrollTop / ( element.scrollHeight - element.clientHeight );
-
- if ( percentage > 0.5 ) {
- setPatternPagination( ( prev ) => prev + 10 );
- }
- } }
- >
- <div className="woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern__header">
- <h1>
- { capitalize(
- PATTERN_CATEGORIES[
- category as keyof typeof PATTERN_CATEGORIES
- ].label
- ) }
- </h1>
- <Button
- onClick={ () => {
- const homepageUrl = getNewPath(
- { customizing: true },
- `/customize-store/assembler-hub/homepage`,
- {}
- );
- navigateTo( { url: homepageUrl } );
- trackEvent(
- 'customize_your_store_assembler_pattern_sidebar_close'
- );
- } }
- iconSize={ 18 }
- icon={ close }
- label={ __( 'Close', 'woocommerce' ) }
- />
- </div>
- <div className="woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern__description">
- <span>
- {
- PATTERN_CATEGORIES[
- category as keyof typeof PATTERN_CATEGORIES
- ].description
- }
- </span>
- </div>
- { isSpinnerVisible && (
- <span className="components-placeholder__preview">
- <Spinner />
- </span>
- ) }
- { ! isSpinnerVisible && (
- <BlockPatternList
- shownPatterns={ asyncSortedPatterns.slice(
- 0,
- patternPagination
- ) }
- blockPatterns={ asyncSortedPatterns.slice(
- 0,
- patternPagination
- ) }
- onClickPattern={ insertPattern }
- label={ 'Homepage' }
- orientation="vertical"
- category={ category }
- isDraggable={ false }
- showTitlesAsTooltip={ true }
- ref={ refElement }
- />
- ) }
- </div>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/style.scss
deleted file mode 100644
index a3dfbffe7b..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/style.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern {
- height: 100%;
- display: flex;
- flex-direction: column;
- gap: 10px;
- background-color: #fff;
- border-radius: 12px;
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
- padding: 16px 24px 24px 24px;
- overflow: auto;
-
- .block-editor-block-preview__container {
- margin-bottom: 2px;
- }
-
- .woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 10px;
-
- h1 {
- font-size: 16px;
- padding: 0;
- }
-
- span {
- font-size: 16px;
- font-weight: 600;
- }
- }
-
- .woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern__description {
- font-size: 13px;
- color: #757575;
- }
-
- .block-editor-block-patterns-list {
- margin-top: 22px;
- overflow-y: unset;
- height: unset;
- }
-
- .block-editor-block-patterns-list__item {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- border: none;
- }
-
- &.is-added {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
-
- &:hover,
- &:focus {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
- }
-
- div.block-editor-block-patterns-list > div:nth-last-child(1 of .block-editor-block-patterns-list__list-item) {
- margin-bottom: 0;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/utils.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/utils.ts
deleted file mode 100644
index 40c77d4693..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/pattern-screen/utils.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { Pattern } from '~/customize-store/types/pattern';
-import { PATTERN_CATEGORIES } from './categories';
-
-/**
- * Adds a 'is-added' CSS class to each pattern preview element in the pattern list that matches a block's pattern name.
- * This function iterates through an array of blocks added in the page, extracts the pattern name from each block's metadata,
- * and finds the corresponding pattern preview element in the pattern list by its ID. If found, the 'is-added' class is added to the element.
- */
-export const addIsAddedClassToPatternPreview = (
- patternListEl: HTMLElement,
- blocks: BlockInstance[]
-) => {
- patternListEl.querySelectorAll( '.is-added' ).forEach( ( element ) => {
- element.classList.remove( 'is-added' );
- } );
-
- blocks.forEach( ( block ) => {
- const patterName = block.attributes.metadata?.patternName;
- if ( ! patterName ) {
- return;
- }
-
- const element = patternListEl.querySelector( `[id="${ patterName }"]` );
-
- if ( element ) {
- element.classList.add( 'is-added' );
- }
- } );
-};
-
-const orderPatternList = {
- intro: [
- 'Intro: Two column with content and image',
- 'Heading with image and two columns below',
- 'Fullwidth content with background image',
- 'Two column with image and content',
- 'Centered heading with two column text',
- 'Content with button and fullwidth image',
- 'Center-aligned content overlaid on an image',
- 'Left-aligned content overlaid on an image',
- 'Centered Content',
- 'Large left-aligned heading',
- 'Fullwidth image with content and button',
- 'Pull right with wide image below',
- ],
- about: [
- 'Content right with image left',
- 'Content left with image right',
- 'Heading left and content right',
- 'Four image grid, content on the left',
- 'Content with grid of images on right',
- 'Heading with two media columns',
- 'Heading with content and large image below',
- 'Centered heading and button',
- 'Content left, image right',
- 'Tall content with image left',
- 'Fullwidth image, content pull right',
- 'Right-aligned Content',
- 'Large heading with content on right',
- 'Tall content with image right',
- 'Spread right, heavy text',
- 'Heading with button and text',
- 'Left-aligned content',
- 'Pull left, fullwidth image',
- ],
- services: [
- 'Three columns with images and content',
- 'Heading with four text sections',
- 'Two columns with images',
- 'Heading with six text sections',
- 'Headings left, content right',
- ],
-} as Record< string, string[] >;
-
-const orderByPriority = (
- aElementTitle: string,
- bElementTitle: string,
- category: string
-) => {
- const aIndex = orderPatternList[ category ]?.indexOf( aElementTitle );
- const bIndex = orderPatternList[ category ]?.indexOf( bElementTitle );
-
- if ( aIndex === -1 && bIndex === -1 ) {
- return null;
- }
-
- if ( aIndex > -1 && bIndex > -1 ) {
- return aIndex - bIndex;
- }
-
- if ( aIndex === -1 && bIndex > -1 ) {
- return 1;
- }
- if ( bIndex === -1 && aIndex > -1 ) {
- return -1;
- }
-};
-
-/**
- * Sorts patterns by category and priority based on the orderPatternList object . For 'intro' and 'about' categories
- * prioritized DotCom Patterns. For intro category, it also prioritizes the "centered-content-with-image-below" pattern.
- * For other categories, it simply sorts patterns to prioritize Woo Patterns.
- */
-export const sortPatternsByCategory = (
- patterns: Pattern[],
- category: keyof typeof PATTERN_CATEGORIES
-) => {
- const prefix = 'woocommerce-blocks';
- if ( category === 'intro' || category === 'about' ) {
- return patterns.sort( ( a, b ) => {
- if (
- a.name ===
- 'woocommerce-blocks/centered-content-with-image-below'
- ) {
- return -1;
- }
-
- if (
- b.name ===
- 'woocommerce-blocks/centered-content-with-image-below'
- ) {
- return 1;
- }
-
- const priority = orderByPriority( a.title, b.title, category );
-
- if ( typeof priority === 'number' ) {
- return priority;
- }
-
- if ( a.name.includes( prefix ) && ! b.name.includes( prefix ) ) {
- return 1;
- }
-
- if ( ! a.name.includes( prefix ) && b.name.includes( prefix ) ) {
- return -1;
- }
-
- // If neither title is in the list, keep their original order
- return 0;
- } );
- }
-
- return patterns.sort( ( a, b ) => {
- const priority = orderByPriority( a.title, b.title, category );
-
- if ( typeof priority === 'number' ) {
- return priority;
- }
-
- if ( a.name.includes( prefix ) && ! b.name.includes( prefix ) ) {
- return -1;
- }
- if ( ! a.name.includes( prefix ) && b.name.includes( prefix ) ) {
- return 1;
- }
- return 0;
- } );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx
deleted file mode 100644
index ac68fad0e8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/v16.4.0/packages/edit-site/src/components/save-hub/index.js
-/**
- * External dependencies
- */
-import {
- useCallback,
- useContext,
- useEffect,
- useState,
-} from '@wordpress/element';
-import { useQuery } from '@woocommerce/navigation';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
- __experimentalHStack as HStack,
- Button,
- Spinner,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useEntitiesSavedStatesIsDirty as useIsDirty } from '@wordpress/editor';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-
-/**
- * Internal dependencies
- */
-import { CustomizeStoreContext } from '../';
-import { trackEvent } from '~/customize-store/tracking';
-import { useEditorBlocks } from '../hooks/use-editor-blocks';
-import { useIsNoBlocksPlaceholderPresent } from '../hooks/block-placeholder/use-is-no-blocks-placeholder-present';
-import '../gutenberg-styles/save-hub.scss';
-
-const PUBLISH_ON_SAVE_ENTITIES = [
- {
- kind: 'postType',
- name: 'wp_navigation',
- },
-];
-let shouldTriggerSave = true;
-
-export const SaveHub = () => {
- const urlParams = useQuery();
- const { sendEvent } = useContext( CustomizeStoreContext );
- const [ isResolving, setIsResolving ] = useState< boolean >( false );
-
- const currentTemplateId: string | undefined = useSelect(
- ( select ) =>
- select( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ blocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const isNoBlocksPlaceholderPresent =
- useIsNoBlocksPlaceholderPresent( blocks );
-
- const isEditorLoading = useIsSiteEditorLoading();
- const { __unstableMarkLastChangeAsPersistent } =
- useDispatch( blockEditorStore );
-
- const { createErrorNotice } = useDispatch( noticesStore );
-
- const {
- dirtyEntityRecords,
- isDirty,
- }: {
- dirtyEntityRecords: {
- key?: string | number;
- kind: string;
- name: string;
- property?: string;
- title: string;
- }[];
- isDirty: boolean;
- } = useIsDirty();
-
- const {
- editEntityRecord,
- saveEditedEntityRecord,
- __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
- } = useDispatch( coreStore );
-
- const save = useCallback( async () => {
- for ( const { kind, name, key, property } of dirtyEntityRecords ) {
- if ( kind === 'root' && name === 'site' ) {
- await saveSpecifiedEntityEdits(
- 'root',
- 'site',
- undefined,
- [ property ],
- undefined
- );
- } else {
- if (
- PUBLISH_ON_SAVE_ENTITIES.some(
- ( typeToPublish ) =>
- typeToPublish.kind === kind &&
- typeToPublish.name === name
- ) &&
- typeof key !== 'undefined'
- ) {
- editEntityRecord( kind, name, key, {
- status: 'publish',
- } );
- }
-
- await saveEditedEntityRecord( kind, name, key, undefined );
- __unstableMarkLastChangeAsPersistent();
- }
- }
- }, [
- dirtyEntityRecords,
- editEntityRecord,
- saveEditedEntityRecord,
- saveSpecifiedEntityEdits,
- __unstableMarkLastChangeAsPersistent,
- ] );
-
- const isMainScreen = urlParams.path === '/customize-store/assembler-hub';
-
- // Trigger a save when the editor is loaded and there are unsaved changes in main screen. This is needed to ensure FE is displayed correctly because some patterns have dynamic attributes that only generate in Editor.
- useEffect( () => {
- if ( isEditorLoading ) {
- return;
- }
-
- if ( ! isMainScreen ) {
- shouldTriggerSave = false;
- return;
- }
-
- if ( shouldTriggerSave && isDirty ) {
- save();
- shouldTriggerSave = false;
- }
- }, [ isEditorLoading, isDirty, isMainScreen, save ] );
-
- const onDone = async () => {
- trackEvent( 'customize_your_store_assembler_hub_done_click' );
- setIsResolving( true );
-
- try {
- await save();
- sendEvent( 'FINISH_CUSTOMIZATION' );
- } catch ( error ) {
- createErrorNotice(
- `${ __( 'Saving failed.', 'woocommerce' ) } ${ error }`
- );
- setIsResolving( false );
- }
- };
-
- if ( isMainScreen ) {
- return (
- <HStack
- className="woocommerce-edit-site-save-hub"
- alignment="right"
- spacing={ 4 }
- >
- <Button
- variant="primary"
- onClick={ onDone }
- className="woocommerce-edit-site-save-hub__button"
- disabled={
- isResolving ||
- isEditorLoading ||
- isNoBlocksPlaceholderPresent
- }
- aria-disabled={ isResolving }
- __next40pxDefaultSize
- >
- { isResolving ? (
- <Spinner />
- ) : (
- __( 'Finish customizing', 'woocommerce' )
- ) }
- </Button>
- </HStack>
- );
- }
-
- return null;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
deleted file mode 100644
index a96eb1e429..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-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';
-// @ts-ignore No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from './sidebar-navigation-screen';
-import { ColorPalette, ColorPanel } from './global-styles';
-import { trackEvent } from '~/customize-store/tracking';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-const SidebarNavigationScreenColorPaletteContent = () => {
- // @ts-ignore No types for this exist yet.
- const { user } = useContext( GlobalStylesContext );
- const hasCreatedOwnColors = !! (
- user.settings.color && user.settings.color.palette.hasCreatedOwnColors
- );
-
- function handlePanelBodyToggle( open?: boolean ) {
- trackEvent(
- 'customize_your_store_assembler_hub_color_palette_create_toggle',
- { open }
- );
- }
-
- // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
- // loaded. This is necessary because the Iframe component waits until
- // the block editor store's `__internalIsInitialized` is true before
- // rendering the iframe. Without this, the iframe previews will not render
- // in mobile viewport sizes, where the editor canvas is hidden.
- return (
- <div
- className="woocommerce-customize-store_sidebar-color-content"
- style={ {
- opacity: 0,
- animation: 'containerFadeIn 300ms ease-in-out forwards',
- } }
- >
- <ColorPalette />
- <PanelBody
- className="woocommerce-customize-store__color-panel-container"
- title={ __( 'or create your own', 'woocommerce' ) }
- initialOpen={ hasCreatedOwnColors }
- onToggle={ handlePanelBodyToggle }
- >
- <ColorPanel />
- </PanelBody>
- </div>
- );
-};
-
-export const SidebarNavigationScreenColorPalette = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const title = __( 'Choose your color palette', 'woocommerce' );
- const description = __(
- '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'
- );
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ onNavigateBackClick }
- description={ description }
- content={ <SidebarNavigationScreenColorPaletteContent /> }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx
deleted file mode 100644
index 9f7acbc8cd..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- useCallback,
- useContext,
- useEffect,
- useMemo,
-} from '@wordpress/element';
-import { BlockInstance } from '@wordpress/blocks';
-import { Spinner } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { __experimentalBlockPatternsList as BlockPatternList } from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
-import { useEditorBlocks } from '../../hooks/use-editor-blocks';
-import { usePatternsByCategory } from '../../hooks/use-patterns';
-import { HighlightedBlockContext } from '../../context/highlighted-block-context';
-import { useEditorScroll } from '../../hooks/use-editor-scroll';
-import { useSelectedPattern } from '../../hooks/use-selected-pattern';
-import { findPatternByBlock } from '../utils';
-import { footerTemplateId } from '~/customize-store/data/homepageTemplates';
-
-import './style.scss';
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-const SUPPORTED_FOOTER_PATTERNS = [
- 'woocommerce-blocks/footer-with-3-menus',
- 'woocommerce-blocks/footer-simple-menu',
- 'woocommerce-blocks/footer-large',
-];
-
-export const SidebarNavigationScreenFooter = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const { scroll } = useEditorScroll( {
- editorSelector: '.woocommerce-customize-store__block-editor iframe',
- scrollDirection: 'bottom',
- } );
-
- const { isLoading, patterns } = usePatternsByCategory( 'woo-commerce' );
-
- const currentTemplateId: string | undefined = useSelect(
- ( select ) =>
- select( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ mainTemplateBlocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const [ blocks, , onChange ] = useEditorBlocks(
- 'wp_template_part',
- footerTemplateId
- );
-
- const footerTemplatePartBlockClientId = mainTemplateBlocks.find(
- ( block ) => block.attributes.slug === 'footer'
- );
-
- const { setHighlightedBlockClientId, resetHighlightedBlockClientId } =
- useContext( HighlightedBlockContext );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const { selectedPattern, setSelectedPattern } = useSelectedPattern();
-
- useEffect( () => {
- setHighlightedBlockClientId(
- footerTemplatePartBlockClientId?.clientId ?? null
- );
- }, [
- footerTemplatePartBlockClientId?.clientId,
- setHighlightedBlockClientId,
- ] );
-
- const footerPatterns = useMemo(
- () =>
- patterns
- .filter( ( pattern ) =>
- SUPPORTED_FOOTER_PATTERNS.includes( pattern.name )
- )
- .sort(
- ( a, b ) =>
- SUPPORTED_FOOTER_PATTERNS.indexOf( a.name ) -
- SUPPORTED_FOOTER_PATTERNS.indexOf( b.name )
- ),
- [ patterns ]
- );
-
- useEffect( () => {
- // Set the selected pattern when the footer screen is loaded.
- if ( selectedPattern || ! blocks.length || ! footerPatterns.length ) {
- return;
- }
-
- const currentSelectedPattern = findPatternByBlock(
- footerPatterns,
- blocks[ blocks.length - 1 ]
- );
- setSelectedPattern( currentSelectedPattern );
- // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes
- }, [ blocks, footerPatterns ] );
-
- const onClickFooterPattern = useCallback(
- ( pattern: PatternWithBlocks, selectedBlocks: BlockInstance[] ) => {
- setSelectedPattern( pattern );
- onChange( [ ...blocks.slice( 0, -1 ), selectedBlocks[ 0 ] ], {
- selection: {},
- } );
- scroll();
- },
- [ blocks, onChange, setSelectedPattern, scroll ]
- );
-
- const title = __( 'Choose your footer', 'woocommerce' );
-
- const description = __(
- "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'
- );
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ () => {
- resetHighlightedBlockClientId();
- onNavigateBackClick();
- } }
- description={ description }
- content={
- <>
- <div className="woocommerce-customize-store__sidebar-footer-content">
- { isLoading && (
- <span className="components-placeholder__preview">
- <Spinner />
- </span>
- ) }
-
- { ! isLoading && (
- <BlockPatternList
- shownPatterns={ footerPatterns }
- blockPatterns={ footerPatterns }
- onClickPattern={ onClickFooterPattern }
- label={ 'Footers' }
- orientation="vertical"
- isDraggable={ false }
- onHover={ () => {} }
- showTitlesAsTooltip={ true }
- />
- ) }
- </div>
- </>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/style.scss
deleted file mode 100644
index edcfa8880f..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/style.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.woocommerce-customize-store__sidebar-footer-content {
- .block-editor-block-preview__container {
- margin-bottom: 2px;
- }
-
- .block-editor-block-patterns-list__item {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- border: none;
- }
-
- &.is-selected {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
-
- &:hover {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx
deleted file mode 100644
index 379a9e49ab..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- useCallback,
- useContext,
- useEffect,
- useMemo,
-} from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { BlockInstance } from '@wordpress/blocks';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { __experimentalBlockPatternsList as BlockPatternList } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
-import { usePatternsByCategory } from '../../hooks/use-patterns';
-import { useSelectedPattern } from '../../hooks/use-selected-pattern';
-import { useEditorBlocks } from '../../hooks/use-editor-blocks';
-import { HighlightedBlockContext } from '../../context/highlighted-block-context';
-import { useEditorScroll } from '../../hooks/use-editor-scroll';
-import { findPatternByBlock } from '../utils';
-import { headerTemplateId } from '~/customize-store/data/homepageTemplates';
-
-import './style.scss';
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-const SUPPORTED_HEADER_PATTERNS = [
- 'woocommerce-blocks/header-centered-menu',
- 'woocommerce-blocks/header-essential',
- 'woocommerce-blocks/header-minimal',
- 'woocommerce-blocks/header-large',
- 'woocommerce-blocks/header-distraction-free',
-];
-export const SidebarNavigationScreenHeader = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const { scroll } = useEditorScroll( {
- editorSelector: '.woocommerce-customize-store__block-editor iframe',
- scrollDirection: 'top',
- } );
-
- const { isLoading, patterns } = usePatternsByCategory( 'woo-commerce' );
-
- const currentTemplateId: string | undefined = useSelect(
- ( select ) =>
- select( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ mainTemplateBlocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const [ blocks, , onChange ] = useEditorBlocks(
- 'wp_template_part',
- headerTemplateId
- );
-
- const headerTemplatePartBlock = mainTemplateBlocks.find(
- ( block ) => block.attributes.slug === 'header'
- );
-
- const { setHighlightedBlockClientId, resetHighlightedBlockClientId } =
- useContext( HighlightedBlockContext );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const { selectedPattern, setSelectedPattern } = useSelectedPattern();
-
- useEffect( () => {
- setHighlightedBlockClientId(
- headerTemplatePartBlock?.clientId ?? null
- );
- }, [ headerTemplatePartBlock?.clientId, setHighlightedBlockClientId ] );
- const headerPatterns = useMemo(
- () =>
- patterns
- .filter( ( pattern ) =>
- SUPPORTED_HEADER_PATTERNS.includes( pattern.name )
- )
- .sort(
- ( a, b ) =>
- SUPPORTED_HEADER_PATTERNS.indexOf( a.name ) -
- SUPPORTED_HEADER_PATTERNS.indexOf( b.name )
- ),
- [ patterns ]
- );
-
- useEffect( () => {
- if ( selectedPattern || ! blocks.length || ! headerPatterns.length ) {
- return;
- }
-
- const currentSelectedPattern = findPatternByBlock(
- headerPatterns,
- blocks[ 0 ]
- );
- setSelectedPattern( currentSelectedPattern );
-
- // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes
- }, [ blocks, headerPatterns ] );
- const onClickHeaderPattern = useCallback(
- ( pattern: PatternWithBlocks, selectedBlocks: BlockInstance[] ) => {
- setSelectedPattern( pattern );
- onChange( [ selectedBlocks[ 0 ], ...blocks.slice( 1 ) ], {
- selection: {},
- } );
- scroll();
- },
- [ blocks, onChange, setSelectedPattern, scroll ]
- );
-
- const title = __( 'Choose your header', 'woocommerce' );
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ () => {
- resetHighlightedBlockClientId();
- onNavigateBackClick();
- } }
- 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={
- <>
- <div className="woocommerce-customize-store__sidebar-header-content">
- { isLoading && (
- <span className="components-placeholder__preview">
- <Spinner />
- </span>
- ) }
-
- { ! isLoading && (
- <BlockPatternList
- shownPatterns={ headerPatterns }
- blockPatterns={ headerPatterns }
- onClickPattern={ onClickHeaderPattern }
- label={ 'Headers' }
- orientation="vertical"
- isDraggable={ false }
- onHover={ () => {} }
- showTitlesAsTooltip={ true }
- />
- ) }
- </div>
- </>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/style.scss
deleted file mode 100644
index 6a82a4e633..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/style.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.woocommerce-customize-store__sidebar-header-content {
- .block-editor-block-preview__container {
- margin-bottom: 2px;
- }
-
- .block-editor-block-patterns-list__item {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- border: none;
- }
-
- &.is-selected {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
-
- &:hover {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx
deleted file mode 100644
index c6877a0dc1..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage-ptk.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/**
- * External dependencies
- */
-import {
- Button,
- CheckboxControl,
- __experimentalItemGroup as ItemGroup,
- Modal,
- __experimentalNavigatorButton as NavigatorButton,
- Spinner,
-} from '@wordpress/components';
-import {
- createInterpolateElement,
- useContext,
- useMemo,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import interpolateComponents from '@automattic/interpolate-components';
-import { store as coreStore } from '@wordpress/core-data';
-// @ts-expect-error No types for this exist yet.
-import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
-import { trackEvent } from '~/customize-store/tracking';
-import { CustomizeStoreContext } from '../..';
-import { Link } from '@woocommerce/components';
-import { PATTERN_CATEGORIES } from '../pattern-screen/categories';
-import { capitalize } from 'lodash';
-import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
-import { useSelect } from '@wordpress/data';
-import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
-import { useEditorBlocks } from '../../hooks/use-editor-blocks';
-import { isTrackingAllowed } from '../../utils/is-tracking-allowed';
-import clsx from 'clsx';
-import './style.scss';
-import { usePatterns } from '~/customize-store/assembler-hub/hooks/use-patterns';
-import { THEME_SLUG } from '~/customize-store/data/constants';
-import apiFetch from '@wordpress/api-fetch';
-import { enableTracking } from '~/customize-store/design-without-ai/services';
-
-const isActiveElement = ( path: string | undefined, category: string ) => {
- if ( path?.includes( category ) ) {
- return true;
- }
-};
-
-export const SidebarNavigationScreenHomepagePTK = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const { context } = useContext( CustomizeStoreContext );
-
- const isNetworkOffline = useNetworkStatus();
- const isPTKPatternsAPIAvailable = context.isPTKPatternsAPIAvailable;
-
- const currentTemplateId: string | undefined = useSelect(
- ( sel ) => sel( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ blocks ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const numberOfPatternsAdded = useMemo( () => {
- const categories = Object.keys( PATTERN_CATEGORIES );
-
- const initialAccumulator = categories.reduce(
- ( acc, cat ) => ( {
- ...acc,
- [ cat ]: 0,
- } ),
- {} as Record< string, number >
- );
-
- return blocks.reduce( ( acc, block ) => {
- const blockCategories: Array< string > =
- block.attributes?.metadata?.categories ?? [];
-
- const foundCategory = blockCategories.find( ( blockCategory ) =>
- categories.includes( blockCategory )
- );
-
- if ( foundCategory ) {
- return {
- ...acc,
- [ foundCategory ]: acc[ foundCategory ] + 1,
- };
- }
-
- return acc;
- }, initialAccumulator );
- }, [ blocks ] );
-
- const {
- blockPatterns,
- isLoading: isLoadingPatterns,
- invalidateCache,
- } = usePatterns();
-
- const patternsFromPTK = blockPatterns.filter(
- ( pattern ) =>
- ! pattern.name.includes( THEME_SLUG ) &&
- ! pattern.name.includes( 'woocommerce' ) &&
- pattern.source !== 'core' &&
- pattern.source !== 'pattern-directory/featured' &&
- pattern.source !== 'pattern-directory/theme' &&
- pattern.source !== 'pattern-directory/core'
- );
-
- const notice = useMemo( () => {
- let noticeText;
- if ( isNetworkOffline ) {
- noticeText = __(
- "Looks like we can't detect your network. Please double-check your internet connection and refresh the page.",
- 'woocommerce'
- );
- } else if ( ! isPTKPatternsAPIAvailable ) {
- noticeText = __(
- "Unfortunately, we're experiencing some technical issues — please come back later to access more patterns.",
- 'woocommerce'
- );
- } else if ( ! isTrackingAllowed() ) {
- noticeText = __(
- 'Opt in to <OptInModal>usage tracking</OptInModal> to get access to more patterns.',
- 'woocommerce'
- );
- } else if ( ! isLoadingPatterns && patternsFromPTK.length === 0 ) {
- noticeText = __(
- 'Unfortunately, a technical issue is preventing more patterns from being displayed. Please <FetchPatterns>try again</FetchPatterns> later.',
- 'woocommerce'
- );
- }
- return noticeText;
- }, [
- isNetworkOffline,
- isPTKPatternsAPIAvailable,
- isLoadingPatterns,
- patternsFromPTK.length,
- ] );
-
- const [ isModalOpen, setIsModalOpen ] = useState( false );
-
- const openModal = () => setIsModalOpen( true );
- const closeModal = () => setIsModalOpen( false );
-
- const [ optInDataSharing, setIsOptInDataSharing ] =
- useState< boolean >( true );
-
- const [ isSettingTracking, setIsSettingTracking ] = useState( false );
-
- const optIn = () => {
- trackEvent(
- 'customize_your_store_assembler_hub_opt_in_usage_tracking'
- );
- };
-
- const skipOptIn = () => {
- trackEvent(
- 'customize_your_store_assembler_hub_skip_opt_in_usage_tracking'
- );
- };
-
- 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.',
- 'woocommerce'
- );
-
- const path = useQuery().path;
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ onNavigateBackClick }
- description={ sidebarMessage }
- content={
- <div className="woocommerce-customize-store__sidebar-homepage-content">
- <div className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage">
- { Object.entries( PATTERN_CATEGORIES ).map(
- ( [ categoryKey, { label } ], index ) => (
- <ItemGroup key={ index }>
- <NavigatorButton
- className={ clsx( {
- 'woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-item--active':
- isActiveElement(
- path,
- categoryKey
- ),
- } ) }
- path={ `/customize-store/assembler-hub/homepage/${ categoryKey }` }
- onClick={ () => {
- const categoryUrl = getNewPath(
- { customizing: true },
- `/customize-store/assembler-hub/homepage/${ categoryKey }`,
- {}
- );
- navigateTo( {
- url: categoryUrl,
- } );
- trackEvent(
- 'customize_your_store_assembler_pattern_category_click',
- { category: categoryKey }
- );
- } }
- as={ SidebarNavigationItem }
- withChevron
- >
- <div className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container">
- <span>{ capitalize( label ) }</span>
- { blocks.length > 0 &&
- numberOfPatternsAdded[
- categoryKey
- ] > 0 && (
- <span className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern">
- {
- numberOfPatternsAdded[
- categoryKey
- ]
- }
- </span>
- ) }
- </div>
- </NavigatorButton>
- </ItemGroup>
- )
- ) }
- { notice && (
- <div className="woocommerce-customize-store_sidebar-patterns-upgrade-notice">
- <h4>
- { __(
- 'Want more patterns?',
- 'woocommerce'
- ) }
- </h4>
- <p>
- { createInterpolateElement( notice, {
- OptInModal: (
- <Button
- onClick={ () => {
- openModal();
- } }
- variant="link"
- />
- ),
- FetchPatterns: (
- <Button
- onClick={ async () => {
- await apiFetch( {
- path: `/wc/private/patterns`,
- method: 'POST',
- } );
-
- invalidateCache();
- } }
- variant="link"
- />
- ),
- } ) }
- </p>
- { isModalOpen && (
- <Modal
- className={
- 'woocommerce-customize-store__opt-in-usage-tracking-modal'
- }
- title={ __(
- 'Access more patterns',
- 'woocommerce'
- ) }
- onRequestClose={ closeModal }
- shouldCloseOnClickOutside={ false }
- >
- <CheckboxControl
- className="core-profiler__checkbox"
- // @ts-expect-error Types are incorrect for this prop.
- label={ interpolateComponents( {
- mixedString: __(
- 'More patterns from the WooCommerce.com library are available! Opt in to connect your store and access the full library, plus get more relevant content and a tailored store setup experience. Opting in will enable {{link}}usage tracking{{/link}}, which you can opt out of at any time via WooCommerce settings.',
- 'woocommerce'
- ),
- components: {
- link: (
- <Link
- href="https://woocommerce.com/usage-tracking?utm_medium=product"
- target="_blank"
- type="external"
- />
- ),
- },
- } ) }
- checked={ optInDataSharing }
- onChange={ setIsOptInDataSharing }
- />
- <div className="woocommerce-customize-store__design-change-warning-modal-footer">
- <Button
- onClick={ () => {
- skipOptIn();
- closeModal();
- } }
- variant="link"
- >
- { __(
- 'Cancel',
- 'woocommerce'
- ) }
- </Button>
- <Button
- onClick={ async () => {
- optIn();
- await enableTracking();
- setIsSettingTracking(
- true
- );
- closeModal();
- setIsSettingTracking(
- false
- );
- } }
- variant="primary"
- disabled={ ! optInDataSharing }
- >
- { isSettingTracking ? (
- <Spinner />
- ) : (
- __(
- 'Opt in',
- 'woocommerce'
- )
- ) }
- </Button>
- </div>
- </Modal>
- ) }
- </div>
- ) }
- </div>
- </div>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/style.scss
deleted file mode 100644
index 3a516bf53f..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container {
- display: flex;
- justify-content: space-between;
-
- .woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern {
- color: $gray-600;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx
deleted file mode 100644
index 509b2229cb..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/sidebar-navigation-screen-homepage.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useEffect } from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { BlockInstance } from '@wordpress/blocks';
-import { select, useSelect } from '@wordpress/data';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- // @ts-expect-error No types for this exist yet.
- __experimentalBlockPatternsList as BlockPatternList,
- store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
-import { useEditorBlocks } from '../../hooks/use-editor-blocks';
-import { useHomeTemplates } from '../../hooks/use-home-templates';
-import { useSelectedPattern } from '../../hooks/use-selected-pattern';
-import { useEditorScroll } from '../../hooks/use-editor-scroll';
-import {
- PRODUCT_HERO_PATTERN_BUTTON_STYLE,
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
-} from '../../utils/black-background-pattern-update-button';
-import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
-import './style.scss';
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-export const SidebarNavigationScreenHomepage = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const { scroll } = useEditorScroll( {
- editorSelector: '.woocommerce-customize-store__block-editor iframe',
- scrollDirection: 'top',
- } );
- const { isLoading, homeTemplates } = useHomeTemplates();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const { selectedPattern, setSelectedPattern } = useSelectedPattern();
-
- const currentTemplateId: string | undefined = useSelect(
- ( sel ) => sel( coreStore ).getDefaultTemplateId( { slug: 'home' } ),
- []
- );
-
- const [ blocks, , onChange ] = useEditorBlocks(
- 'wp_template',
- currentTemplateId || ''
- );
-
- const onClickPattern = useCallback(
- ( pattern: PatternWithBlocks, selectedBlocks: BlockInstance[] ) => {
- if ( pattern === selectedPattern ) {
- return;
- }
- setSelectedPattern( pattern );
- onChange(
- [ blocks[ 0 ], ...selectedBlocks, blocks[ blocks.length - 1 ] ],
- { selection: {} }
- );
- scroll();
- },
- [ selectedPattern, setSelectedPattern, onChange, blocks, scroll ]
- );
-
- const isEditorLoading = useIsSiteEditorLoading();
-
- const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
-
- const homePatterns = useMemo( () => {
- return Object.entries( homeTemplates ).map(
- ( [ templateName, patterns ] ) => {
- if ( templateName === 'template1' ) {
- return {
- name: templateName,
- title: templateName,
- blocks: patterns.reduce(
- ( acc: BlockInstance[], pattern ) => {
- const parsedPattern = unlock(
- select( blockEditorStore )
- ).__experimentalGetParsedPattern(
- pattern.name
- );
-
- if ( ! parsedPattern ) {
- return acc;
- }
-
- if ( ! isActiveNewNeutralVariation ) {
- const updatedBlocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- parsedPattern.blocks,
- (
- buttonBlocks: BlockInstance[]
- ) => {
- buttonBlocks.forEach(
- ( buttonBlock ) => {
- buttonBlock.attributes.style =
- {};
- }
- );
- }
- );
-
- return [ ...acc, ...updatedBlocks ];
- }
- const updatedBlocks =
- findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
- parsedPattern.blocks,
- ( buttonBlocks: BlockInstance[] ) => {
- buttonBlocks.forEach(
- ( buttonBlock ) => {
- buttonBlock.attributes.style =
- PRODUCT_HERO_PATTERN_BUTTON_STYLE;
- }
- );
- }
- );
-
- return [ ...acc, ...updatedBlocks ];
- },
- []
- ),
- blockTypes: [ '' ],
- categories: [ '' ],
- content: '',
- source: '',
- };
- }
-
- return {
- name: templateName,
- title: templateName,
- blocks: patterns.reduce(
- ( acc: BlockInstance[], pattern ) => {
- const parsedPattern = unlock(
- select( blockEditorStore )
- ).__experimentalGetParsedPattern( pattern.name );
-
- if ( ! parsedPattern ) {
- return acc;
- }
-
- return [ ...acc, ...parsedPattern.blocks ];
- },
- []
- ),
- blockTypes: [ '' ],
- categories: [ '' ],
- content: '',
- source: '',
- };
- }
- );
- }, [ homeTemplates, isActiveNewNeutralVariation ] );
-
- useEffect( () => {
- if (
- selectedPattern ||
- ! blocks.length ||
- ! homePatterns.length ||
- isLoading ||
- isEditorLoading
- ) {
- return;
- }
-
- const currentSelectedPattern = homePatterns.find( ( patterns ) => {
- //'blocks' contains all blocks in the template, including the
- // header and footer blocks, while the 'patterns.blocks' does
- // not. For that reason we are removing the first and last
- // blocks from the 'blocks' to be able to compare then
- const homeBlocks = blocks.slice( 1, blocks.length - 1 );
-
- if ( patterns.blocks.length !== homeBlocks.length ) {
- return false;
- }
-
- return homeBlocks.every(
- ( block, i ) => block.name === patterns.blocks[ i ].name
- );
- } );
-
- setSelectedPattern( currentSelectedPattern );
- // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes
- }, [ blocks, homePatterns, isLoading, isEditorLoading ] );
-
- const title = __( 'Choose your homepage', 'woocommerce' );
- const sidebarMessage = __(
- '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'
- );
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ onNavigateBackClick }
- description={ sidebarMessage }
- content={
- <div className="woocommerce-customize-store__sidebar-homepage-content">
- <div className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage">
- { /* This is necessary to fix this issue: https://github.com/woocommerce/woocommerce/issues/45711
- If the user switch the homepage while the editor is loading, header and footer could disappear.
- For more details check: https://github.com/woocommerce/woocommerce/pull/45735
- */ }
- { isLoading || isEditorLoading ? (
- <span className="components-placeholder__preview">
- <Spinner />
- </span>
- ) : (
- <BlockPatternList
- shownPatterns={ homePatterns }
- blockPatterns={ homePatterns }
- onClickPattern={ onClickPattern }
- label={ 'Homepage' }
- orientation="vertical"
- category={ 'homepage' }
- isDraggable={ false }
- showTitlesAsTooltip={ false }
- />
- ) }
- </div>
- </div>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/style.scss
deleted file mode 100644
index cb7e0429b3..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage/style.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.woocommerce-customize-store__sidebar-homepage-content {
- .block-editor-block-patterns-list__item {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- border: none;
- }
-
- &.is-selected {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
-
- &:hover {
- .auto-block-preview__container,
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 0 #fff,
- 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
- border-color: var(--wp-admin-theme-color);
- border-radius: 4px;
- &::after {
- outline: none;
- }
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
deleted file mode 100644
index 5c18eec9e8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState, useContext, cloneElement } from '@wordpress/element';
-import {
- RangeControl,
- ToggleControl,
- DropZone,
- Button,
- Spinner,
- DropdownMenu,
- MenuGroup,
- MenuItem,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-import { Icon, upload, moreVertical } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
-import { isBlobURL } from '@wordpress/blob';
-import {
- MediaUpload,
- MediaUploadCheck,
- store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
-import interpolateComponents from '@automattic/interpolate-components';
-import { Link } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from './sidebar-navigation-screen';
-import { LogoBlockContext } from '../logo-block-context';
-import {
- useLogoAttributes,
- LogoAttributes,
-} from '../hooks/use-logo-attributes';
-import {
- MIN_LOGO_SIZE,
- DEFAULT_LOGO_WIDTH,
- MAX_LOGO_WIDTH,
- ALLOWED_MEDIA_TYPES,
-} from './constants';
-import { trackEvent } from '~/customize-store/tracking';
-
-type Media = {
- id: string | number;
-} & { [ key: string ]: string };
-
-const useLogoEdit = ( {
- shouldSyncIcon,
- setAttributes,
-}: {
- shouldSyncIcon: LogoAttributes[ 'shouldSyncIcon' ];
- setAttributes: ( newAttributes: LogoAttributes ) => void;
-} ) => {
- const { siteIconId, mediaUpload } = useSelect( ( select ) => {
- const { canUser, getEditedEntityRecord } = select( coreStore );
- const _canUserEdit = canUser( 'update', 'settings' );
- const siteSettings = _canUserEdit
- ? // @ts-expect-error No support for root and site
- ( getEditedEntityRecord( 'root', 'site' ) as {
- site_icon: string | undefined;
- } )
- : undefined;
-
- const _siteIconId = siteSettings?.site_icon;
- return {
- siteIconId: _siteIconId,
- mediaUpload:
- // @ts-expect-error Selector is not typed
- select( blockEditorStore ).getSettings().mediaUpload,
- };
- }, [] );
-
- const { editEntityRecord } = useDispatch( coreStore );
-
- const setIcon = ( newValue: string | undefined | null | number ) =>
- // The new value needs to be `null` to reset the Site Icon.
- // @ts-expect-error No support for root and site
- editEntityRecord( 'root', 'site', undefined, {
- site_icon: newValue ?? null,
- } );
-
- const setLogo = (
- newValue: string | undefined | null | number,
- shouldForceSync = false
- ) => {
- // `shouldForceSync` is used to force syncing when the attribute
- // may not have updated yet.
- if ( shouldSyncIcon || shouldForceSync ) {
- setIcon( newValue );
- }
-
- // @ts-expect-error No support for root and site
- editEntityRecord( 'root', 'site', undefined, {
- site_logo: newValue,
- } );
- };
-
- const onSelectLogo = ( media: Media, shouldForceSync = false ) => {
- if ( ! media ) {
- return;
- }
-
- if ( ! media.id && media.url ) {
- // This is a temporary blob image.
- setLogo( undefined );
- return;
- }
-
- setLogo( media.id, shouldForceSync );
- setAttributes( { width: DEFAULT_LOGO_WIDTH } );
- };
-
- const onInitialSelectLogo = ( media: Media ) => {
- // Initialize the syncSiteIcon toggle. If we currently have no site logo and no
- // site icon, automatically sync the logo to the icon.
- if ( shouldSyncIcon === undefined ) {
- const shouldForceSync = ! siteIconId;
- setAttributes( { shouldSyncIcon: shouldForceSync } );
-
- // Because we cannot rely on the `shouldSyncIcon` attribute to have updated by
- // the time `setLogo` is called, pass an argument to force the syncing.
- onSelectLogo( media, shouldForceSync );
- return;
- }
-
- onSelectLogo( media );
- };
-
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore The types for this are incorrect.
- const { createErrorNotice } = useDispatch( noticesStore );
- const onUploadError = ( message: string ) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore The types for this are incorrect.
- createErrorNotice( message, { type: 'snackbar' } );
- };
-
- const onFilesDrop = ( filesList: File[] ) => {
- mediaUpload( {
- allowedTypes: [ 'image' ],
- filesList,
- onFileChange( [ image ]: Media[] ) {
- if ( isBlobURL( image?.url ) ) {
- return;
- }
- onInitialSelectLogo( image );
- },
- onError: onUploadError,
- } );
- };
-
- const onRemoveLogo = () => {
- setLogo( null );
- setAttributes( { width: undefined } );
- };
-
- return {
- onFilesDrop,
- onInitialSelectLogo,
- setIcon,
- siteIconId,
- onRemoveLogo,
- };
-};
-
-// Reference: https://github.com/WordPress/gutenberg/blob/83f3fbc740c97afac3474a6c37098e259191dc2c/packages/block-library/src/site-logo/edit.js#L63
-const LogoSettings = ( {
- attributes: { width, isLink, shouldSyncIcon, align = '' },
- canUserEdit,
- naturalWidth,
- naturalHeight,
- setAttributes,
- setIcon,
- logoId,
-}: {
- attributes: LogoAttributes;
- setAttributes: ( newAttributes: LogoAttributes ) => void;
- canUserEdit: boolean;
- naturalWidth: number;
- naturalHeight: number;
- setIcon: ( newValue: string | undefined ) => void;
- logoId: string;
-} ) => {
- const isLargeViewport = useViewportMatch( 'medium' );
- const isWideAligned = [ 'wide', 'full' ].includes( align );
- const isResizable = ! isWideAligned && isLargeViewport;
-
- const currentWidth = width || DEFAULT_LOGO_WIDTH;
- const ratio = naturalWidth / naturalHeight;
- const minWidth =
- naturalWidth < naturalHeight
- ? MIN_LOGO_SIZE
- : Math.ceil( MIN_LOGO_SIZE * ratio );
-
- // With the current implementation of ResizableBox, an image needs an
- // explicit pixel value for the max-width. In absence of being able to
- // set the content-width, this max-width is currently dictated by the
- // vanilla editor style. The following variable adds a buffer to this
- // vanilla style, so 3rd party themes have some wiggleroom. This does,
- // in most cases, allow you to scale the image beyond the width of the
- // main column, though not infinitely.
- // @todo It would be good to revisit this once a content-width variable
- // becomes available.
- const maxWidthBuffer = MAX_LOGO_WIDTH * 2.5;
-
- return (
- <div className="woocommerce-customize-store__sidebar-group">
- <div className="woocommerce-customize-store__sidebar-group-header">
- { __( 'Settings', 'woocommerce' ) }
- </div>
- <RangeControl
- __nextHasNoMarginBottom
- __next40pxDefaultSize
- label={ __( 'Image width', 'woocommerce' ) }
- onChange={ ( newWidth ) =>
- setAttributes( { width: newWidth } )
- }
- min={ minWidth }
- max={ MAX_LOGO_WIDTH }
- initialPosition={ Math.min(
- DEFAULT_LOGO_WIDTH,
- maxWidthBuffer
- ) }
- value={ currentWidth }
- disabled={ ! isResizable }
- />
- <ToggleControl
- __nextHasNoMarginBottom
- label={ __( 'Link logo to homepage', 'woocommerce' ) }
- onChange={ () => {
- setAttributes( { isLink: ! isLink } );
- } }
- checked={ isLink }
- />
- { canUserEdit && (
- <>
- <ToggleControl
- __nextHasNoMarginBottom
- label={ __( 'Use as site icon', 'woocommerce' ) }
- onChange={ ( value: boolean ) => {
- setAttributes( { shouldSyncIcon: value } );
- setIcon( value ? logoId : undefined );
- } }
- checked={ !! shouldSyncIcon }
- help={ __(
- 'Site icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.',
- 'woocommerce'
- ) }
- />
- </>
- ) }
- </div>
- );
-};
-
-const LogoEdit = ( {
- siteLogoId,
- attributes,
- setAttributes,
- mediaItemData,
- isLoading,
- canUserEdit,
-}: {
- siteLogoId: string;
- setAttributes: ( newAttributes: LogoAttributes ) => void;
- attributes: LogoAttributes;
- mediaItemData: { id: string; alt_text: string; source_url: string };
- isLoading: boolean;
- canUserEdit: boolean;
-} ) => {
- const { alt_text: alt, source_url: logoUrl } = mediaItemData || {};
-
- const { onFilesDrop, onInitialSelectLogo, setIcon } = useLogoEdit( {
- shouldSyncIcon: attributes.shouldSyncIcon,
- setAttributes,
- } );
-
- const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState< {
- naturalWidth?: number;
- naturalHeight?: number;
- } >( {} );
-
- if ( isLoading ) {
- return (
- <span className="components-placeholder__preview">
- <Spinner />
- </span>
- );
- }
-
- function handleMediaUploadSelect( media: Media ) {
- onInitialSelectLogo( media );
- trackEvent( 'customize_your_store_assembler_hub_logo_select' );
- }
-
- if ( ! logoUrl ) {
- return (
- <MediaUploadCheck>
- <MediaUpload
- onSelect={ handleMediaUploadSelect }
- allowedTypes={ ALLOWED_MEDIA_TYPES }
- render={ ( { open }: { open: () => void } ) => (
- <Button
- variant="link"
- onClick={ () => {
- open();
- trackEvent(
- 'customize_your_store_assembler_hub_logo_add_click'
- );
- } }
- className="block-library-site-logo__inspector-upload-container"
- >
- <span>
- <Icon
- icon={ upload }
- size={ 20 }
- className="icon-control"
- />
- </span>
- <DropZone onFilesDrop={ onFilesDrop } />
- </Button>
- ) }
- />
- </MediaUploadCheck>
- );
- }
-
- const logoImg = (
- <div className="woocommerce-customize-store__sidebar-logo-container">
- <img
- className="woocommerce-customize-store_custom-logo"
- src={ logoUrl }
- alt={ alt }
- onLoad={ ( event ) => {
- setNaturalSize( {
- naturalWidth: ( event.target as HTMLImageElement )
- .naturalWidth,
- naturalHeight: ( event.target as HTMLImageElement )
- .naturalHeight,
- } );
- } }
- />
- </div>
- );
-
- if ( ! naturalHeight || ! naturalWidth ) {
- // Load the image first to get the natural size so we can set the ratio.
- return logoImg;
- }
-
- return (
- <>
- <MediaUploadCheck>
- <MediaUpload
- onSelect={ handleMediaUploadSelect }
- allowedTypes={ ALLOWED_MEDIA_TYPES }
- render={ ( { open }: { open: () => void } ) =>
- cloneElement( logoImg, {
- onClick() {
- open();
- trackEvent(
- 'customize_your_store_assembler_hub_logo_edit_click'
- );
- },
- } )
- }
- />
- </MediaUploadCheck>
- { !! logoUrl && (
- <LogoSettings
- attributes={ attributes }
- setAttributes={ setAttributes }
- naturalWidth={ naturalWidth }
- naturalHeight={ naturalHeight }
- canUserEdit={ canUserEdit }
- setIcon={ setIcon }
- logoId={ mediaItemData?.id || siteLogoId }
- />
- ) }
- </>
- );
-};
-
-export const SidebarNavigationScreenLogo = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- // Get the current logo block client ID and attributes. These are used for the logo settings.
- const { logoBlockIds } = useContext( LogoBlockContext );
- const { attributes, isAttributesLoading } = useLogoAttributes();
-
- const { siteLogoId, canUserEdit, mediaItemData, isRequestingMediaItem } =
- useSelect( ( select ) => {
- const { canUser, getEntityRecord, getEditedEntityRecord } =
- select( coreStore );
-
- const _canUserEdit = canUser( 'update', 'settings' );
- const siteSettings = _canUserEdit
- ? // @ts-expect-error No support for root and site
- ( getEditedEntityRecord( 'root', 'site' ) as {
- site_logo: string;
- } )
- : undefined;
- // @ts-expect-error No support for root and site
- const siteData = getEntityRecord( 'root', '__unstableBase' ) as {
- site_logo: string;
- };
- const _siteLogoId = _canUserEdit
- ? siteSettings?.site_logo
- : siteData?.site_logo;
-
- const mediaItem =
- _siteLogoId &&
- // @ts-expect-error No getMedia selector type definition
- select( coreStore ).getMedia( _siteLogoId, {
- context: 'view',
- } );
- const _isRequestingMediaItem =
- _siteLogoId &&
- // @ts-expect-error No hasFinishedResolution selector type definition
- ! select( coreStore ).hasFinishedResolution( 'getMedia', [
- _siteLogoId,
- { context: 'view' },
- ] );
-
- return {
- siteLogoId: _siteLogoId ?? '',
- canUserEdit: _canUserEdit ?? false,
- mediaItemData: mediaItem,
- isRequestingMediaItem: _isRequestingMediaItem,
- };
- }, [] );
-
- const { updateBlockAttributes } = useDispatch( blockEditorStore );
- const setAttributes = ( newAttributes: LogoAttributes ) => {
- if ( ! logoBlockIds.length ) {
- return;
- }
- logoBlockIds.forEach( ( clientId ) =>
- updateBlockAttributes( clientId, newAttributes )
- );
- };
-
- const { onInitialSelectLogo, onRemoveLogo } = useLogoEdit( {
- shouldSyncIcon: attributes.shouldSyncIcon,
- setAttributes,
- } );
-
- const isLoading =
- siteLogoId === undefined ||
- isRequestingMediaItem ||
- isAttributesLoading;
-
- return (
- <SidebarNavigationScreen
- title={ __( 'Add your logo', 'woocommerce' ) }
- description={ __(
- "Ensure your store is on-brand by adding your logo. For best results, upload a SVG or PNG that's a minimum of 300px wide.",
- 'woocommerce'
- ) }
- onNavigateBackClick={ onNavigateBackClick }
- content={
- <div className="woocommerce-customize-store__sidebar-logo-content">
- <div className="woocommerce-customize-store__sidebar-group-header woocommerce-customize-store__logo-header-container">
- <span>{ __( 'Logo', 'woocommerce' ) }</span>
- { Boolean( siteLogoId ) && (
- <DropdownMenu
- icon={ moreVertical }
- label={ __( 'Options', 'woocommerce' ) }
- className="woocommerce-customize-store__logo-dropdown-menu"
- popoverProps={ {
- className:
- 'woocommerce-customize-store__logo-dropdown-popover',
- placement: 'bottom-end',
- } }
- >
- { ( { onClose } ) => (
- <>
- <MenuGroup className="woocommerce-customize-store__logo-menu-group">
- <MediaUploadCheck>
- <MediaUpload
- onSelect={ (
- media: Parameters<
- typeof onInitialSelectLogo
- >[ 0 ]
- ) => {
- onInitialSelectLogo(
- media
- );
- onClose();
- trackEvent(
- 'customize_your_store_assembler_hub_logo_select'
- );
- } }
- allowedTypes={
- ALLOWED_MEDIA_TYPES
- }
- render={ ( {
- open,
- }: {
- open: () => void;
- } ) => (
- <MenuItem
- onClick={ () => {
- open();
- trackEvent(
- 'customize_your_store_assembler_hub_logo_replace_click'
- );
- } }
- >
- { __(
- 'Replace',
- 'woocommerce'
- ) }
- </MenuItem>
- ) }
- />
- </MediaUploadCheck>
- </MenuGroup>
-
- <MenuGroup className="woocommerce-customize-store__logo-menu-group">
- <MenuItem
- className="woocommerce-customize-store__logo-menu-item-delete"
- onClick={ () => {
- onClose();
- onRemoveLogo();
- trackEvent(
- 'customize_your_store_assembler_hub_logo_remove_click'
- );
- } }
- >
- { __(
- 'Delete',
- 'woocommerce'
- ) }
- </MenuItem>
- </MenuGroup>
- </>
- ) }
- </DropdownMenu>
- ) }
- </div>
- <LogoEdit
- siteLogoId={ siteLogoId }
- attributes={ attributes }
- setAttributes={ setAttributes }
- canUserEdit={ canUserEdit }
- mediaItemData={ mediaItemData }
- isLoading={ isLoading }
- />
- <div className="woocommerce-customize-store__fiverr-cta-group">
- <strong>
- { __( "DON'T HAVE A LOGO YET?", 'woocommerce' ) }
- </strong>
- <p>
- { interpolateComponents( {
- mixedString: __(
- 'Build your brand by creating a memorable logo using {{link}}Fiverr{{/link}}.',
- 'woocommerce'
- ),
- components: {
- link: (
- <Link
- href="https://go.fiverr.com/visit/?bta=917527&brand=logomaker&landingPage=https%253A%252F%252Fwww.fiverr.com%252Flogo-maker%252Fwoo"
- target="_blank"
- type="external"
- rel="noreferrer"
- onClick={ () => {
- trackEvent(
- 'customize_your_store_fiverr_logo_maker_cta_click'
- );
- } }
- />
- ),
- },
- } ) }
- </p>
- </div>
- </div>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx
deleted file mode 100644
index 3760776abb..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-main.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-/**
- * WordPress dependencies
- */
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { createInterpolateElement, useContext } from '@wordpress/element';
-import {
- // @ts-ignore No types for this exist yet.
- __experimentalItemGroup as ItemGroup,
- // @ts-ignore No types for this exist yet.
- __experimentalNavigatorButton as NavigatorButton,
- // @ts-ignore No types for this exist yet.
- __experimentalHeading as Heading,
- Button,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import {
- siteLogo,
- color,
- typography,
- header,
- home,
- footer,
-} from '@wordpress/icons';
-// @ts-ignore No types for this exist yet.
-import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from './sidebar-navigation-screen';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import {
- SidebarNavigationAnimationDirection,
- SidebarNavigationContext,
-} from '../components/sidebar';
-import { isFullComposabilityFeatureAndAPIAvailable } from '../utils/is-full-composability-enabled';
-import { trackEvent } from '~/customize-store/tracking';
-import { redirectToThemes } from '~/customize-store/utils';
-
-const PickYourTheme = () => {
- return (
- <div className="woocommerce-edit-site-sidebar-navigation-screen-theme-banner">
- <h2 className="woocommerce-edit-site-sidebar-navigation-screen-theme-banner__title">
- { __( 'Pick your perfect theme', 'woocommerce' ) }
- </h2>
- <p className="woocommerce-edit-site-sidebar-navigation-screen-theme-banner__description">
- { createInterpolateElement(
- sprintf(
- /* translators: %s is a line break */
- __(
- 'Bring your vision to life%s— no coding required.',
- 'woocommerce'
- ),
- '<br />'
- ),
- {
- br: <br />,
- }
- ) }
- </p>
- <Button
- variant="tertiary"
- className="woocommerce-edit-site-sidebar-navigation-screen-theme-banner__button"
- onClick={ () => {
- trackEvent(
- 'customize_your_store_sidebar_all_themes_click'
- );
- redirectToThemes();
- } }
- >
- { __( 'Browse free and paid themes', 'woocommerce' ) }
- </Button>
- </div>
- );
-};
-
-export const SidebarNavigationScreenMain = () => {
- const { navigate } = useContext( SidebarNavigationContext );
-
- return (
- <SidebarNavigationScreen
- isRoot
- title={ __( "Let's get creative", 'woocommerce' ) }
- 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={
- <>
- <div className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-header">
- <Heading level={ 2 }>
- { __( 'Style', 'woocommerce' ) }
- </Heading>
- </div>
- <ItemGroup>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/logo"
- withChevron
- icon={ siteLogo }
- onClick={ () => {
- const logoUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/logo',
- {}
- );
-
- navigateTo( { url: logoUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'logo',
- }
- );
- } }
- >
- { __( 'Add your logo', 'woocommerce' ) }
- </NavigatorButton>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/color-palette"
- withChevron
- icon={ color }
- onClick={ () => {
- const colorPaletteUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/color-palette',
- {}
- );
-
- navigateTo( { url: colorPaletteUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'color-palette',
- }
- );
- } }
- >
- { __( 'Choose your color palette', 'woocommerce' ) }
- </NavigatorButton>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/typography"
- withChevron
- icon={ typography }
- onClick={ () => {
- const typographyUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/typography',
- {}
- );
-
- navigateTo( { url: typographyUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'typography',
- }
- );
- } }
- >
- { __( 'Choose fonts', 'woocommerce' ) }
- </NavigatorButton>
- </ItemGroup>
- <div className="woocommerce-edit-site-sidebar-navigation-screen-patterns__group-header">
- <Heading level={ 2 }>
- { __( 'Layout', 'woocommerce' ) }
- </Heading>
- </div>
- <ItemGroup>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/header"
- withChevron
- icon={ header }
- onClick={ () => {
- const headerUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/header',
- {}
- );
-
- navigateTo( { url: headerUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'header',
- }
- );
- } }
- >
- { __( 'Choose your header', 'woocommerce' ) }
- </NavigatorButton>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/homepage"
- withChevron
- icon={ home }
- onClick={ () => {
- const homepageUrl =
- isFullComposabilityFeatureAndAPIAvailable()
- ? getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/homepage/intro',
- {}
- )
- : getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/homepage',
- {}
- );
-
- navigateTo( { url: homepageUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'home',
- }
- );
- } }
- >
- { __( 'Design your homepage', 'woocommerce' ) }
- </NavigatorButton>
- <NavigatorButton
- as={ SidebarNavigationItem }
- path="/customize-store/assembler-hub/footer"
- withChevron
- icon={ footer }
- onClick={ () => {
- const footerUrl = getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub/footer',
- {}
- );
-
- navigateTo( { url: footerUrl } );
- navigate(
- SidebarNavigationAnimationDirection.Forward
- );
- trackEvent(
- 'customize_your_store_assembler_hub_sidebar_item_click',
- {
- item: 'footer',
- }
- );
- } }
- >
- { __( 'Choose your footer', 'woocommerce' ) }
- </NavigatorButton>
- </ItemGroup>
- <PickYourTheme />
- </>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx
deleted file mode 100644
index 1969bd5899..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-pages.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from './sidebar-navigation-screen';
-
-export const SidebarNavigationScreenPages = () => {
- return (
- <SidebarNavigationScreen
- title={ __( 'Add more pages', 'woocommerce' ) }
- 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/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx
deleted file mode 100644
index bdc2eee3b1..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography/sidebar-navigation-screen-typography.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- createInterpolateElement,
- useContext,
- useState,
-} from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { Link } from '@woocommerce/components';
-import { optionsStore } from '@woocommerce/data';
-import { Button, Modal, CheckboxControl, Spinner } from '@wordpress/components';
-import interpolateComponents from '@automattic/interpolate-components';
-
-/**
- * Internal dependencies
- */
-import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
-import { ADMIN_URL } from '~/utils/admin-settings';
-import { FontPairing } from '../global-styles';
-import { CustomizeStoreContext } from '../..';
-import { trackEvent } from '~/customize-store/tracking';
-import { enableTracking } from '~/customize-store/design-without-ai/services';
-
-export const SidebarNavigationScreenTypography = ( {
- onNavigateBackClick,
-}: {
- onNavigateBackClick: () => void;
-} ) => {
- const { context } = useContext( CustomizeStoreContext );
- const isFontLibraryAvailable = context.isFontLibraryAvailable;
-
- const title = __( 'Choose fonts', 'woocommerce' );
- const label = __(
- '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'
- );
-
- const trackingAllowed = useSelect(
- ( select ) =>
- select( optionsStore ).getOption( 'woocommerce_allow_tracking' ),
- []
- );
-
- const isTrackingDisallowed = trackingAllowed === 'no' || ! trackingAllowed;
- let upgradeNotice;
- if ( isTrackingDisallowed && ! isFontLibraryAvailable ) {
- upgradeNotice = __(
- 'Upgrade to the <WordPressLink>latest version of WordPress</WordPressLink> and <OptInModal>opt in to usage tracking</OptInModal> to get access to more fonts.',
- 'woocommerce'
- );
- } else if ( isTrackingDisallowed && isFontLibraryAvailable ) {
- upgradeNotice = __(
- 'Opt in to <OptInModal>usage tracking</OptInModal> to get access to more fonts.',
- 'woocommerce'
- );
- } else if ( trackingAllowed && ! isFontLibraryAvailable ) {
- upgradeNotice = __(
- 'Upgrade to the <WordPressLink>latest version of WordPress</WordPressLink> to get access to more fonts.',
- 'woocommerce'
- );
- } else {
- upgradeNotice = '';
- }
-
- const optIn = () => {
- trackEvent(
- 'customize_your_store_assembler_hub_opt_in_usage_tracking'
- );
- };
-
- const skipOptIn = () => {
- trackEvent(
- 'customize_your_store_assembler_hub_skip_opt_in_usage_tracking'
- );
- };
-
- const [ isModalOpen, setIsModalOpen ] = useState( false );
-
- const openModal = () => setIsModalOpen( true );
- const closeModal = () => setIsModalOpen( false );
-
- const [ isSettingTracking, setIsSettingTracking ] = useState( false );
-
- const [ OptInDataSharing, setIsOptInDataSharing ] =
- useState< boolean >( true );
-
- return (
- <SidebarNavigationScreen
- title={ title }
- onNavigateBackClick={ onNavigateBackClick }
- description={ label }
- content={
- <div className="woocommerce-customize-store_sidebar-typography-content">
- { isFontLibraryAvailable && <FontPairing /> }
- { upgradeNotice && (
- <div className="woocommerce-customize-store_sidebar-typography-upgrade-notice">
- <h4>
- { __(
- 'Want more font pairings?',
- 'woocommerce'
- ) }
- </h4>
- <p>
- { createInterpolateElement( upgradeNotice, {
- WordPressLink: (
- <Button
- href={ `${ ADMIN_URL }update-core.php` }
- variant="link"
- />
- ),
- OptInModal: (
- <Button
- onClick={ () => {
- openModal();
- } }
- variant="link"
- />
- ),
- } ) }
- </p>
- { isModalOpen && (
- <Modal
- className={
- 'woocommerce-customize-store__opt-in-usage-tracking-modal'
- }
- title={ __(
- 'Access more fonts',
- 'woocommerce'
- ) }
- onRequestClose={ closeModal }
- shouldCloseOnClickOutside={ false }
- >
- <CheckboxControl
- className="core-profiler__checkbox"
- // @ts-expect-error Type mismatch
- label={ interpolateComponents( {
- mixedString: __(
- 'More fonts are available! Opt in to connect your store and access the full font library, plus get more relevant content and a tailored store setup experience. Opting in will enable {{link}}usage tracking{{/link}}, which you can opt out of at any time via WooCommerce settings.',
- 'woocommerce'
- ),
- components: {
- link: (
- <Link
- href="https://woocommerce.com/usage-tracking?utm_medium=product"
- target="_blank"
- type="external"
- />
- ),
- },
- } ) }
- checked={ OptInDataSharing }
- onChange={ setIsOptInDataSharing }
- />
- <div className="woocommerce-customize-store__design-change-warning-modal-footer">
- <Button
- onClick={ () => {
- skipOptIn();
- closeModal();
- } }
- variant="link"
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- onClick={ async () => {
- optIn();
- await enableTracking();
-
- closeModal();
- setIsSettingTracking( false );
- } }
- variant="primary"
- disabled={ ! OptInDataSharing }
- >
- { isSettingTracking ? (
- <Spinner />
- ) : (
- __( 'Opt in', 'woocommerce' )
- ) }
- </Button>
- </div>
- </Modal>
- ) }
- </div>
- ) }
- </div>
- }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
deleted file mode 100644
index 5f5b2cf02e..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-// Reference: https://github.com/WordPress/gutenberg/blob/v16.4.0/packages/edit-site/src/components/sidebar-navigation-screen/index.js
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useState } from '@wordpress/element';
-import {
- // @ts-ignore No types for this exist yet.
- __experimentalHStack as HStack,
- // @ts-ignore No types for this exist yet.
- __experimentalHeading as Heading,
- // @ts-ignore No types for this exist yet.
- __experimentalUseNavigator as useNavigator,
- // @ts-ignore No types for this exist yet.
- __experimentalVStack as VStack,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
-// @ts-ignore No types for this exist yet.
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-// @ts-ignore No types for this exist yet.
-import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
-// @ts-ignore No types for this exist yet.
-import SidebarButton from '@wordpress/edit-site/build-module/components/sidebar-button';
-import { GoBackWarningModal } from '../go-back-warning-modal';
-
-/**
- * Internal dependencies
- */
-import '../gutenberg-styles/sidebar-navigation-screen.scss';
-import { isEntrepreneurFlow } from '~/customize-store/entrepreneur-flow';
-const { useLocation } = unlock( routerPrivateApis );
-
-export const SidebarNavigationScreen = ( {
- isRoot,
- title,
- actions,
- meta,
- content,
- footer,
- description,
- backPath: backPathProp,
- onNavigateBackClick,
-}: {
- isRoot?: boolean;
- title: string;
- actions?: React.ReactNode;
- meta?: React.ReactNode;
- content: React.ReactNode;
- footer?: React.ReactNode;
- description?: React.ReactNode;
- backPath?: string;
- onNavigateBackClick?: () => void;
-} ) => {
- const [ openWarningModal, setOpenWarningModal ] =
- useState< boolean >( false );
- const location = useLocation();
- const navigator = useNavigator();
- const icon = isRTL() ? chevronRight : chevronLeft;
-
- return (
- <>
- <VStack
- className={ clsx(
- 'woocommerce-edit-site-sidebar-navigation-screen__main',
- {
- 'has-footer': !! footer,
- }
- ) }
- spacing={ 0 }
- justify="flex-start"
- >
- <HStack
- spacing={ 4 }
- alignment="flex-start"
- className="woocommerce-edit-site-sidebar-navigation-screen__title-icon"
- >
- { ! isRoot && (
- <SidebarButton
- onClick={ () => {
- onNavigateBackClick?.();
- const backPath =
- backPathProp ?? location.state?.backPath;
- if ( backPath ) {
- navigator.goTo( backPath, {
- isBack: true,
- } );
- } else {
- navigator.goToParent();
- }
- } }
- icon={ icon }
- label={ __( 'Back', 'woocommerce' ) }
- showTooltip={ false }
- />
- ) }
- { isRoot && ! isEntrepreneurFlow() && (
- <SidebarButton
- onClick={ () => {
- setOpenWarningModal( true );
- } }
- icon={ icon }
- label={ __( 'Back', 'woocommerce' ) }
- showTooltip={ false }
- />
- ) }
- <Heading
- className="woocommerce-edit-site-sidebar-navigation-screen__title"
- style={
- isEntrepreneurFlow() ? { padding: '0 16px' } : {}
- }
- color={ '#e0e0e0' /* $gray-200 */ }
- level={ 1 }
- as="h1"
- >
- { title }
- </Heading>
- { actions && (
- <div className="woocommerce-edit-site-sidebar-navigation-screen__actions">
- { actions }
- </div>
- ) }
- </HStack>
- { meta && (
- <>
- <div className="woocommerce-edit-site-sidebar-navigation-screen__meta">
- { meta }
- </div>
- </>
- ) }
-
- <div className="woocommerce-edit-site-sidebar-navigation-screen__content">
- { description && (
- <p className="woocommerce-edit-site-sidebar-navigation-screen__description">
- { description }
- </p>
- ) }
- { content }
- </div>
- </VStack>
- { footer && (
- <footer className="woocommerce-edit-site-sidebar-navigation-screen__footer">
- { footer }
- </footer>
- ) }
- { openWarningModal && (
- <GoBackWarningModal
- setOpenWarningModal={ setOpenWarningModal }
- onExitClicked={ () => {
- window.parent.__wcCustomizeStore.sendEventToIntroMachine(
- { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' }
- );
- } }
- />
- ) }
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/test/utils.test.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/test/utils.test.ts
deleted file mode 100644
index 992644fc59..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/test/utils.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-/**
- * Internal dependencies
- */
-import { findPatternByBlock } from '../utils';
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-describe( 'findPatternByBlock', () => {
- // Sample patterns and blocks for testing
- const pattern1: PatternWithBlocks = {
- blockTypes: [ 'type1' ],
- categories: [ 'category1' ],
- content: 'content1',
- name: 'pattern1',
- source: 'source1',
- title: 'title1',
- blocks: [
- {
- attributes: {
- attr1: 'value1',
- attr2: 'value2',
- className: 'class1',
- },
- clientId: 'clientId1',
- innerBlocks: [],
- isValid: true,
- name: 'block1',
- originalContent: 'originalContent1',
- },
- ],
- };
-
- const pattern2: PatternWithBlocks = {
- blockTypes: [ 'type2' ],
- categories: [ 'category2' ],
- content: 'content2',
- name: 'pattern2',
- source: 'source2',
- title: 'title2',
- blocks: [
- {
- attributes: {
- attr1: 'value1',
- attr2: 'value2',
- className: 'class2',
- },
- clientId: 'clientId2',
- innerBlocks: [],
- isValid: true,
- name: 'block2',
- originalContent: 'originalContent2',
- },
- ],
- };
-
- const patterns: PatternWithBlocks[] = [ pattern1, pattern2 ];
-
- it( 'should find a pattern by block attributes', () => {
- const blockToFind: BlockInstance = {
- attributes: {
- attr1: 'value1',
- attr2: 'value2',
- className: 'class1 preview-opacity', // Include the preview opacity class
- },
- clientId: 'clientId1',
- innerBlocks: [],
- isValid: true,
- name: 'block1',
- originalContent: 'originalContent1',
- };
-
- const result = findPatternByBlock( patterns, blockToFind );
-
- expect( result ).toEqual( pattern1 );
- } );
-
- it( 'should not find a pattern for a block with different attributes', () => {
- const blockToFind: BlockInstance = {
- attributes: {
- attr1: 'value1',
- attr2: 'value2',
- className: 'class3', // Different className
- },
- clientId: 'clientId3', // Different clientId
- innerBlocks: [],
- isValid: true,
- name: 'block3', // Different block name
- originalContent: 'originalContent3', // Different original content
- };
-
- const result = findPatternByBlock( patterns, blockToFind );
-
- expect( result ).toBeUndefined();
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/utils.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/utils.ts
deleted file mode 100644
index dcc27523da..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/sidebar/utils.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-
-export const findPatternByBlock = (
- patterns: PatternWithBlocks[],
- block: BlockInstance
-) => {
- const blockAttributes = block.attributes;
- if (
- blockAttributes.className &&
- blockAttributes.className.includes( 'preview-opacity' )
- ) {
- // Remove the preview opacity class from the footer block because it's added by the editor, not the pattern.
- blockAttributes.className = blockAttributes.className.replaceAll(
- ' preview-opacity',
- ''
- );
- }
-
- return patterns.find( ( pattern ) => {
- const patternBlocks = pattern.blocks[ 0 ];
-
- return (
- patternBlocks.attributes.className === block.attributes.className
- );
- } );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/style.scss
deleted file mode 100644
index 5a683e4f0b..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/style.scss
+++ /dev/null
@@ -1,838 +0,0 @@
-@keyframes containerFadeIn {
- 0%,
- 80% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-.woocommerce-customize-store-header,
-.woocommerce-edit-site-layout__header-container {
- .woocommerce-edit-site-site-hub__view-mode-toggle-container a {
- color: unset;
- }
-}
-
-.woocommerce-edit-site-layout__header-container {
- position: fixed;
- z-index: 4;
-}
-
-body.woocommerce-assembler {
- overflow: hidden;
-}
-
-.woocommerce-customize-store__step-assemblerHub,
-.woocommerce-customize-store__step-transitionalScreen,
-.woocommerce-customize-store__step-intro {
- a {
- text-decoration: none;
- }
-
- .woocommerce-edit-site-layout {
- bottom: 0;
- left: 0;
- min-height: 100vh;
- position: fixed;
- right: 0;
- top: 0;
- background-color: #f5f5f5;
- }
-
- /* Sidebar Header */
- .woocommerce-edit-site-layout__hub {
- width: 380px;
- height: 64px;
- }
-
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- height: 64px;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__title-icon {
- align-items: center;
- padding-top: 80px;
- padding-bottom: 0;
- gap: 0;
- width: 348px;
- max-width: 100%;
- z-index: 2;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen-patterns__group-header {
- margin-top: 32px;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__title-icon,
- .woocommerce-edit-site-site-hub__view-mode-toggle-container,
- .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
- background-color: #f5f5f5;
- }
-
- .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
- align-items: center;
- display: flex;
- color: $gray-900;
- }
-
- .woocommerce-edit-site-site-hub__site-title {
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 500;
- line-height: 20px; /* 153.846% */
- margin: 0;
- }
-
- .edit-site-site-icon__image {
- border-radius: 2px;
- }
-
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- .woocommerce-edit-site-layout__view-mode-toggle,
- .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon,
- .edit-site-site-icon__icon {
- width: 32px;
- height: 32px;
- }
- }
-
- /* Sidebar */
- .woocommerce-edit-site-layout__sidebar-region {
- width: 380px;
- z-index: 3;
- background-color: #f5f5f5;
- }
-
- .woocommerce-edit-site-layout__sidebar {
- .woocommerce-edit-site-sidebar__content {
- display: flex;
- flex-direction: column;
-
- .components-navigator-screen {
- will-change: auto;
- padding: 0 16px;
- overflow-x: hidden;
- flex: 1;
-
- &::-webkit-scrollbar-thumb {
- background-color: #c1c1c1;
- }
-
- &::-webkit-scrollbar-track-piece:start {
- background: transparent;
- margin-top: 250px;
- }
-
- &::-webkit-scrollbar-track-piece:end {
- background: transparent;
- margin-bottom: 400px;
- }
- }
- }
-
- .edit-site-sidebar-button {
- color: $gray-900;
- height: 40px;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__title {
- font-size: 1rem;
- color: $gray-900;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-style: normal;
- font-weight: 600;
- line-height: 24px; /* 150% */
- padding: 0;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__description {
- color: $gray-700;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 20px; /* 153.846% */
- margin-block: 0 32px;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__content .components-heading {
- color: $gray-700;
- font-size: 0.6875rem;
- font-style: normal;
- font-weight: 600;
- line-height: 16px; /* 145.455% */
- text-transform: uppercase;
- }
-
- .edit-site-sidebar-navigation-item {
- border-radius: 4px;
- padding: 8px 8px 8px 16px;
- align-items: center;
- gap: 8px;
- align-self: stretch;
- width: 100%;
- border: 1.5px solid transparent;
-
- svg {
- color: $gray-800;
- }
-
- &:hover,
- &:active,
- &:focus,
- &.woocommerce-edit-site-sidebar-navigation-screen-patterns__group-homepage-item--active {
- background: #e4e4e4;
- color: $gray-600;
- }
-
- .components-flex-item {
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
- letter-spacing: -0.078px;
- }
- }
-
- .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
- fill: #ccc;
- }
-
- .woocommerce-edit-site-save-hub {
- border-top: 0;
- padding: 32px 29px 32px 32px;
-
- button.is-primary:disabled {
- opacity: 0.5;
- }
-
- button .components-spinner {
- margin-top: 0;
- }
- }
- }
-
- .woocommerce-customize-store__sidebar-group-header {
- color: $gray-900;
- font-size: 0.6875rem;
- font-style: normal;
- font-weight: 600;
- line-height: 16px; /* 145.455% */
- text-transform: uppercase;
- }
-
- .woocommerce-customize-store__sidebar-group {
- padding: 0 8px;
-
- .woocommerce-customize-store__sidebar-group-header {
- padding: 16px 0;
- }
- }
-
- button.block-library-site-logo__inspector-upload-container {
- margin: 12px 0 32px;
- display: flex;
- padding: 32px;
- justify-content: center;
- align-items: center;
- gap: $gap;
- align-self: stretch;
- border-radius: 4px;
- background: #e4e4e4;
- width: 324px;
- height: 88px;
-
- svg {
- color: $gray-600;
- }
- }
-
- .woocommerce-customize-store__sidebar-logo-container {
- padding: 32px;
- cursor: pointer;
- width: 324px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .woocommerce-customize-store_custom-logo {
- max-width: 250px;
- max-height: 250px;
- }
- }
-
- .woocommerce-customize-store__sidebar-logo-content {
- .components-toggle-control {
- margin-bottom: 24px;
-
- label {
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
- margin-bottom: 0;
- }
-
- .components-form-toggle:not(.is-checked) {
- .components-form-toggle__track {
- background-color: $gray-600;
- border-color: $gray-600;
- }
- }
-
- .components-form-toggle__thumb {
- background-color: #fff;
- border-color: #fff;
- }
- }
-
- .components-range-control {
- margin-bottom: 24px;
- padding-top: 8px;
-
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-
- input[type="number"] {
- -moz-appearance: textfield;
- }
-
- .components-base-control__label {
- text-transform: none;
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
- margin-bottom: 8px;
- }
-
- .components-input-control__container {
- width: 84px;
- }
-
- .components-input-control__input {
- display: flex;
- height: 36px;
- align-items: center;
- border-radius: 2px;
- border: 1px solid $gray-600;
- background: #fff;
- color: $gray-900;
-
- &:focus + .components-input-control__backdrop {
- box-shadow: none;
- border: 1px solid var(--wp-admin-theme-color-darker-10);
- }
- }
- }
-
- .components-base-control__help {
- color: $gray-700;
- font-size: 0.75rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 133.333% */
- }
- }
-
- .woocommerce-customize-store__fiverr-cta-group {
- margin-top: 32px;
- padding-top: 32px;
- border-top: 1px solid var(--gutenberg-gray-700, #dcdcde);
- color: var(--gutenberg-gray-900, #1e1e1e);
- font-size: 11px;
-
- p {
- margin-top: 6px;
- }
- }
-
- .block-editor-block-patterns-list__item-title {
- display: none;
- }
-
- /* Color sidebar */
-
- .woocommerce-customize-store__color-panel-container {
- border: 0;
- margin-top: 24px;
- padding: 0;
-
- .components-panel__body-title {
- margin: 0 !important;
-
- &:hover {
- background: initial;
- }
- }
-
- .components-panel__body-toggle.components-button {
- padding: 16px 0;
- text-transform: uppercase;
- color: $gray-900;
- font-size: 0.6875rem;
- font-weight: 600;
- line-height: 16px; /* 145.455% */
-
- &:focus {
- box-shadow: none;
- }
-
- .components-panel__arrow {
- right: 0;
- color: $gray-900;
- }
- }
-
- .color-block-support-panel {
- border-top: 0;
- padding: 0;
- }
- }
-
- .woocommerce-customize-store_color-palette-container {
- gap: 7px;
- }
-
- .woocommerce-customize-store_color-palette-spinner-container,
- .woocommerce-customize-store_font-pairing-spinner-container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 174px;
- }
-
- .woocommerce-customize-store_sidebar-color-content {
- width: 324px;
-
- .woocommerce-customize-store_global-styles-variations_item {
- border: 1.5px solid transparent;
- padding: 2.5px;
- border-radius: 4px;
-
- &:hover,
- &.is-active {
- border: 1.5px solid var(--wp-admin-theme-color);
- }
-
- .woocommerce-customize-store_global-styles-variations_item-preview {
- border: 1px solid #dcdcde;
- border-radius: 2px;
- background: #fff;
- }
- }
- }
-
- .woocommerce-customize-store_sidebar-typography-content {
- width: 324px;
-
- .woocommerce-customize-store_global-styles-variations_item {
- border-radius: 2px;
- outline: 1px solid #dcdcde;
- background: #fff;
-
- &:hover,
- &.is-active {
- border-radius: 2px;
- outline: 1.5px solid var(--wp-admin-theme-color);
- background: #fff;
- }
- }
-
- .global-styles-variation-container__iframe {
- box-shadow: none;
- }
- }
-
- .woocommerce-customize-store_sidebar-patterns-upgrade-notice {
- color: #1e1e1e;
- padding: 0 0 40px;
- margin-top: 48px;
- font-size: 11px;
-
- h4 {
- text-transform: uppercase;
- margin-bottom: 4px;
- }
-
- p {
- margin: 0;
- }
-
- a,
- button {
- text-decoration: none;
- }
- }
-
- .woocommerce-customize-store_sidebar-typography-upgrade-notice {
- margin-top: 48px;
- color: #1e1e1e;
- padding: 0;
-
- h4 {
- text-transform: uppercase;
- margin-bottom: 4px;
- }
-
- p {
- margin: 0;
- }
-
- a,
- button {
- text-decoration: none;
- }
- }
-
- .block-editor-block-preview__content {
- height: 100%;
- width: 100%;
- }
-
- .woocommerce-edit-site-sidebar-navigation-screen__content {
- .block-editor-block-preview__content {
- left: 0;
- margin: 0;
- min-height: auto;
- overflow: visible;
- text-align: initial;
- top: 0;
- transform-origin: top left;
- position: relative;
- }
-
- .block-editor-block-patterns-list {
- width: 324px;
- overflow-y: unset;
- }
- }
-
- .woocommerce-customize-store__sidebar-homepage-content {
- .block-editor-block-preview__content {
- background-color: #fff;
- max-height: 280px !important;
- }
- }
-
- /* Preview Canvas */
- .woocommerce-edit-site-layout__canvas {
- bottom: 16px;
- top: 16px;
- left: 6px; // the default styles for this undersizes the width by 24px so we want to center this
- padding: 0 4px 0 16px;
- }
-
- .woocommerce-edit-site-resizable-frame__handle {
- background: var(--wp-admin-theme-color);
- cursor: ew-resize;
- }
-
- .woocommerce-edit-site-layout__canvas .components-resizable-box__container {
- border-radius: 12px;
- /* new frame */
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
- }
-
- .woocommerce-customize-store__block-editor,
- .woocommerce-edit-site-layout:not(.is-full-canvas) .woocommerce-edit-site-layout__canvas > div .interface-interface-skeleton__content {
- border-radius: 12px;
-
- .woocommerce-customize-store__block-editor,
- .woocommerce-block-preview-container,
- .auto-block-preview__container {
- height: 100%;
- overflow: hidden;
- }
-
- iframe {
- width: 100%;
- height: 100%;
- }
- }
-
- .customize-your-store-edit-site-resizable-frame__inner-content {
- height: 100%;
- border-radius: 12px;
- }
-}
-
-.woocommerce-customize-store__step-assemblerHub,
-.woocommerce-customize-store__step-transitionalScreen {
- .woocommerce-edit-site-layout {
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- padding: 16px 12px 0 16px;
- }
- }
-}
-
-.woocommerce-customize-store__step-intro {
- .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
- background-color: #fff;
- }
-
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- height: 32px;
- }
-
- .woocommerce-edit-site-layout {
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- padding-left: 16px;
- }
- }
-}
-
-.woocommerce-customize-store-tour-kit {
- .woocommerce-tour-kit-step {
- width: 319px;
- box-shadow: none;
- border: 1px solid var(--gutenberg-gray-300, #ddd);
- }
-
- .tour-kit-frame__container {
- box-shadow: none;
- }
-
- .components-elevation {
- display: none;
- }
-
- .tour-kit-frame__arrow::before {
- box-shadow: none !important;
- }
-
- .tour-kit-frame__container[data-popper-placement^="left"] {
- & > .tour-kit-frame__arrow {
- right: -5px;
-
- &::before {
- background: #fff;
- border-top: 1px solid var(--gutenberg-gray-300, #ddd);
- border-right: 1px solid var(--gutenberg-gray-300, #ddd);
- }
- }
- }
-
- .tour-kit-frame__container[data-popper-placement^="right"] {
- & > .tour-kit-frame__arrow {
- &::before {
- border-bottom: 1px solid var(--gutenberg-gray-300, #ddd);
- border-left: 1px solid var(--gutenberg-gray-300, #ddd);
- background: #fff;
- }
- }
- }
-
- .tour-kit-frame__container[data-popper-placement^="top"] {
- & > .tour-kit-frame__arrow {
- &::before {
- border-bottom: 1px solid var(--gutenberg-gray-300, #ddd);
- border-right: 1px solid var(--gutenberg-gray-300, #ddd);
- }
- }
- }
-
- .tour-kit-frame__container[data-popper-placement^="bottom"] {
- & > .tour-kit-frame__arrow {
- &::before {
- border-top: 1px solid var(--gutenberg-gray-300, #ddd);
- border-left: 1px solid var(--gutenberg-gray-300, #ddd);
- }
- }
- }
-
- .woocommerce-tour-kit-step__heading {
- color: $gray-900;
- font-size: 1rem;
- font-style: normal;
- font-weight: 600;
- line-height: 24px; /* 150% */
- }
-
- .woocommerce-tour-kit-step__description {
- color: $gray-900;
- font-size: 0.8125rem;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
- margin-top: 8px;
- }
-
- .woocommerce-tour-kit-step-navigation__step {
- color: $gray-700;
- line-height: 16px;
- }
-
- &:not(.woocommerce-customize-store-welcome-tourkit) {
- .woocommerce-tour-kit-step__body {
- margin-top: -16px;
- }
- }
-}
-
-.woocommerce-customize-store-welcome-tourkit {
- .tour-kit-frame__container {
- box-shadow: none;
- }
-
- &.ai-offline {
- .woocommerce-tour-kit-step {
- width: 430px;
-
- .components-card__header {
- background-image: none;
- height: auto;
- margin: 0;
- }
- }
-
- .tour-kit-frame__container {
- bottom: 0;
- }
- }
-
- .woocommerce-tour-kit-step {
- width: 335px;
- border-radius: 8px;
- border: 1px solid #dcdcdc;
-
- /* Shadow / Popover */
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
-
- .components-card__header {
- align-items: flex-start;
- height: 194px;
- background-image: url(../assets/images/welcome-tour.svg);
- background-size: 160px;
- background-position: center;
- background-repeat: no-repeat;
- margin-bottom: $gap;
- }
- }
-
- .woocommerce-tour-kit-step-navigation .components-button.is-primary {
- margin-left: 12px;
- }
-}
-
-@keyframes woocommerce-edit-site-canvas-loader__fade-in-animation {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-.woocommerce-edit-site-canvas-spinner {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-
- animation: 0.5s ease 1s woocommerce-edit-site-canvas-spinner__fade-in-animation;
- animation-fill-mode: forwards;
- @include reduce-motion("animation");
-
- circle {
- stroke: rgba($black, 0.3);
- }
-}
-
-.woocommerce-assembler-hub__resizable-frame__drag-handler {
- background: #000;
- left: 5px !important;
- border-radius: 2px;
-
- .components-popover__content {
- color: #f0f0f0;
- font-size: 0.75rem;
- font-style: normal;
- font-weight: 500;
- line-height: 1.4;
- background: inherit;
- padding: 4px 8px;
- width: max-content;
- box-shadow: none;
- text-align: center;
- }
-}
-
-.woocommerce-customize-store {
- .block-editor-color-gradient-control {
- .components-circular-option-picker {
- display: none;
- }
- }
-}
-
-.woocommerce-customize-store__logo-header-container {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.components-dropdown-menu__menu .woocommerce-customize-store__logo-menu-group.components-menu-group {
- border-top: 0;
- padding: 0 8px;
-
- .components-menu-item__button {
- width: 112px;
- }
-
- .components-menu-item__item {
- min-width: auto;
- }
-}
-
-// Hack to hide when the media modal is open
-// Otherwise in Firefox the popover remains visible on top of the modal
-// Changing the z-index of Popovers have wider implications.
-.modal-open .woocommerce-customize-store__logo-dropdown-popover {
- display: none;
-}
-
-.woocommerce-customize-store__logo-dropdown-popover {
- .components-popover__content {
- padding: 16px 8px;
- }
-}
-
-.woocommerce-customize-store__logo-menu-item-delete {
- color: #cc1818;
-}
-
-.components-resizable-box__handle {
- display: none !important;
-}
-
-.woocommerce-customize-store_popover-tooltip {
- pointer-events: none;
-
- .components-popover__content {
- width: fit-content;
- user-select: none;
- }
-}
-
-.woocommerce-edit-site-layout__content {
- .woocommerce-edit-site-layout__sidebar {
- display: flex;
- max-width: 700px;
- }
-
- .woocommerce-edit-site-layout__canvas-container {
- background-color: #f5f5f5;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/delete.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/delete.tsx
deleted file mode 100644
index fd2bd84009..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/delete.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash } from '@wordpress/icons';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { trackEvent } from '~/customize-store/tracking';
-
-export default function Delete( {
- clientId,
- currentBlockName,
- nextBlockClientId,
-}: {
- clientId: string;
- currentBlockName: string | undefined;
- nextBlockClientId: string | undefined;
-} ) {
- const { removeBlock, selectBlock } = useDispatch( blockEditorStore );
-
- return (
- <ToolbarGroup>
- <ToolbarButton
- showTooltip={ true }
- label={ __( 'Delete', 'woocommerce' ) }
- icon={ trash }
- onClick={ () => {
- removeBlock( clientId );
- if ( nextBlockClientId ) {
- selectBlock( nextBlockClientId );
- }
- trackEvent(
- 'customize_your_store_assembler_pattern_delete_click',
- { pattern: currentBlockName }
- );
- } }
- />
- </ToolbarGroup>
- );
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx
deleted file mode 100644
index a4b67850b1..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * External dependencies
- */
-import { capitalize } from 'lodash';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { Button, Path, SVG, ToolbarGroup } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { PatternWithBlocks } from '~/customize-store/types/pattern';
-import { PATTERN_CATEGORIES } from '../sidebar/pattern-screen/categories';
-import { usePatternsByCategory } from '../hooks/use-patterns';
-import { trackEvent } from '~/customize-store/tracking';
-
-// This is the icon that is used in the Shuffle button. Currently we are using an outdated version of @wordpress/icons.
-// import { shuffle } from '@wordpress/icons';
-
-// Copied-pasted from a recent version of @wordpress/icons
-const shuffleIcon = (
- <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/SVG">
- <Path d="M17.192 6.75L15.47 5.03l1.06-1.06 3.537 3.53-3.537 3.53-1.06-1.06 1.723-1.72h-3.19c-.602 0-.993.202-1.28.498-.309.319-.538.792-.695 1.383-.13.488-.222 1.023-.296 1.508-.034.664-.116 1.413-.303 2.117-.193.721-.513 1.467-1.068 2.04-.575.594-1.359.954-2.357.954H4v-1.5h4.003c.601 0 .993-.202 1.28-.498.308-.319.538-.792.695-1.383.149-.557.216-1.093.288-1.662l.039-.31a9.653 9.653 0 0 1 .272-1.653c.193-.722.513-1.467 1.067-2.04.576-.594 1.36-.954 2.358-.954h3.19zM8.004 6.75c.8 0 1.46.23 1.988.628a6.24 6.24 0 0 0-.684 1.396 1.725 1.725 0 0 0-.024-.026c-.287-.296-.679-.498-1.28-.498H4v-1.5h4.003zM12.699 14.726c-.161.459-.38.94-.684 1.396.527.397 1.188.628 1.988.628h3.19l-1.722 1.72 1.06 1.06L20.067 16l-3.537-3.53-1.06 1.06 1.723 1.72h-3.19c-.602 0-.993-.202-1.28-.498a1.96 1.96 0 0 1-.024-.026z" />
- </SVG>
-);
-
-const getCategoryLabelFromCategories = ( categories: string[] ) => {
- for ( const category in PATTERN_CATEGORIES ) {
- if ( categories.includes( category ) ) {
- return PATTERN_CATEGORIES[
- category as keyof typeof PATTERN_CATEGORIES
- ].label;
- }
- }
-};
-
-/**
- * Selects a random pattern from the provided array that is not the current pattern.
- * If the randomly selected pattern is the same as the current, it attempts to select the next pattern in the array.
- * If the current pattern is the last in the array, it selects the first pattern.
- * If there's only one pattern in the array, it will return that pattern.
- */
-const getNextPattern = (
- patterns: PatternWithBlocks[],
- patternName: string
-) => {
- const numberOfPatterns = patterns.length;
- const currentPatternIndex = patterns.findIndex(
- ( { name } ) => name === patternName
- );
- const nextPatternIndex = Math.floor( Math.random() * numberOfPatterns );
-
- if ( nextPatternIndex !== currentPatternIndex ) {
- return patterns[ nextPatternIndex ];
- }
-
- if ( currentPatternIndex === nextPatternIndex ) {
- if ( nextPatternIndex === 0 ) {
- return patterns[ 1 ];
- }
-
- if ( nextPatternIndex === numberOfPatterns ) {
- return patterns[ 0 ];
- }
-
- return patterns[ nextPatternIndex - 1 ];
- }
-
- return patterns[ 0 ];
-};
-
-export default function Shuffle( { clientId }: { clientId: string } ) {
- const {
- category,
- patternName,
- }: {
- category: string;
- patternName: string;
- } = useSelect(
- ( select ) => {
- // @ts-expect-error Selector is not typed
- const { getBlockAttributes } = select( blockEditorStore );
- const attributes = getBlockAttributes( clientId );
- const categories = attributes?.metadata?.categories;
- // We know that the category is one of the keys of PATTERN_CATEGORIES.
- const _category = Object.keys( PATTERN_CATEGORIES ).find( ( cat ) =>
- categories?.includes( cat )
- ) as string;
-
- const _patternName = attributes?.metadata?.patternName;
-
- return {
- category: _category,
- patternName: _patternName,
- };
- },
- [ clientId ]
- );
-
- const { patterns } = usePatternsByCategory( category );
-
- const { replaceBlocks } = useDispatch( blockEditorStore );
-
- // We need at least two patterns to shuffle.
- if ( patterns.length < 2 ) {
- return null;
- }
-
- const categoryLabel = getCategoryLabelFromCategories( [ category ] );
-
- return (
- <ToolbarGroup className="woocommerce-customize-your-store-toolbar-shuffle-container">
- <Button
- icon={ shuffleIcon }
- label={ __( 'Shuffle', 'woocommerce' ) }
- onClick={ () => {
- const nextPattern = getNextPattern( patterns, patternName );
- // @ts-expect-error - attributes is marked as readonly.
- nextPattern.blocks[ 0 ].attributes = {
- ...nextPattern.blocks[ 0 ].attributes,
- metadata: {
- ...nextPattern.blocks[ 0 ].attributes.metadata,
- categories: [ category ],
- patternName: nextPattern.name,
- },
- };
- replaceBlocks( clientId, nextPattern.blocks );
- trackEvent(
- 'customize_your_store_assembler_pattern_shuffle_click',
- { category, pattern: nextPattern.name }
- );
- } }
- >
- { categoryLabel && (
- <span>{ capitalize( categoryLabel ) }</span>
- ) }
- </Button>
- </ToolbarGroup>
- );
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/style.scss b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/style.scss
deleted file mode 100644
index cd3a7fe920..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.woocommerce-customize-store_block-toolbar-popover {
- background: transparent;
- color: #000;
-
- .components-popover__content {
- width: fit-content;
- }
-
- .woocommerce-customize-store-block-toolbar {
- .block-editor-block-mover__drag-handle {
- display: none;
- }
-
- .block-editor-block-mover {
- padding: 0;
- }
- }
-
- .woocommerce-customize-your-store-toolbar-shuffle-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- user-select: none;
-
- span {
- max-width: fit-content;
- padding-left: 6px;
- padding-right: 6px;
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/toolbar.tsx b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/toolbar.tsx
deleted file mode 100644
index abb555d9f2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/toolbar/toolbar.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * External dependencies
- */
-
-import { BlockInstance } from '@wordpress/blocks';
-import {
- ToolbarGroup,
- Toolbar as WPToolbar,
- Popover,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import {
- useContext,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from '@wordpress/element';
-import { useQuery } from '@woocommerce/navigation';
-import { BlockMover, store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Shuffle from './shuffle';
-import Delete from './delete';
-import './style.scss';
-import { useIsNoBlocksPlaceholderPresent } from '../hooks/block-placeholder/use-is-no-blocks-placeholder-present';
-import { SelectedBlockContext } from '../context/selected-block-ref-context';
-
-const isHomepageUrl = ( path: string ) => {
- return path.includes( '/customize-store/assembler-hub/homepage' );
-};
-
-export const Toolbar = () => {
- const [ isHomepageSidebarOpen, setIsHomepageSidebarOpen ] =
- useState( false );
-
- const {
- currentBlock,
- nextBlock,
- previousBlock,
- allBlocks,
- }: {
- currentBlock: BlockInstance | undefined;
- nextBlock: BlockInstance | undefined;
- previousBlock: BlockInstance | undefined;
- allBlocks: BlockInstance[];
- } = useSelect( ( select ) => {
- const {
- // @ts-expect-error Selector is not typed
- getSelectedBlockClientId,
- // @ts-expect-error Selector is not typed
- getNextBlockClientId,
- // @ts-expect-error Selector is not typed
- getPreviousBlockClientId,
- // @ts-expect-error Selector is not typed
- getBlocksByClientId,
- // @ts-expect-error Selector is not typed
- getBlocks,
- } = select( blockEditorStore );
-
- const selectedBlockId = getSelectedBlockClientId();
- const nextBlockClientId = getNextBlockClientId();
- const previousBlockClientId = getPreviousBlockClientId();
-
- const [ current ] = getBlocksByClientId(
- selectedBlockId ? [ selectedBlockId ] : []
- );
-
- const [ next ] = getBlocksByClientId(
- nextBlockClientId ? [ nextBlockClientId ] : []
- );
-
- const [ previous ] = getBlocksByClientId(
- previousBlockClientId ? [ previousBlockClientId ] : []
- );
-
- const blocks = getBlocks();
-
- return {
- currentBlock: current,
- nextBlock: next,
- previousBlock: previous,
- allBlocks: blocks,
- };
- }, [] );
-
- const query = useQuery();
-
- useEffect( () => {
- const path = query.path;
- if ( ! path ) {
- return;
- }
- setIsHomepageSidebarOpen( isHomepageUrl( path ) );
- }, [ query ] );
-
- const selectedBlockClientId = currentBlock?.clientId ?? null;
-
- const { isBlockMoverUpButtonDisabled, isBlockMoverDownButtonDisabled } =
- useMemo( () => {
- const isPreviousBlockTemplatePart =
- previousBlock?.name === 'core/template-part';
- const isNextBlockTemplatePart =
- nextBlock?.name === 'core/template-part';
-
- return {
- isBlockMoverUpButtonDisabled:
- isPreviousBlockTemplatePart ||
- // The first block is the header, which is not movable.
- allBlocks[ 1 ]?.clientId === selectedBlockClientId,
- isBlockMoverDownButtonDisabled:
- isNextBlockTemplatePart ||
- // The last block is the footer, which is not movable.
- allBlocks[ allBlocks.length - 2 ]?.clientId ===
- selectedBlockClientId,
- };
- }, [
- allBlocks,
- nextBlock?.name,
- previousBlock?.name,
- selectedBlockClientId,
- ] );
-
- const isNoBlocksPlaceholderPresent =
- useIsNoBlocksPlaceholderPresent( allBlocks );
-
- const isHeaderOrFooter = useMemo( () => {
- const selectedBlock = allBlocks.find( ( { clientId } ) => {
- return clientId === selectedBlockClientId;
- } );
-
- return selectedBlock?.name === 'core/template-part';
- }, [ allBlocks, selectedBlockClientId ] );
-
- const { selectedBlockRef } = useContext( SelectedBlockContext );
-
- const blockPopoverRef = useRef< HTMLDivElement | null >( null );
-
- const popoverAnchor = useMemo( () => {
- if ( ! selectedBlockRef || ! selectedBlockClientId ) {
- return undefined;
- }
-
- return {
- getBoundingClientRect() {
- const { top, width, height } =
- selectedBlockRef.getBoundingClientRect();
-
- const rect = window.document
- .querySelector(
- '.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
- )
- ?.getBoundingClientRect();
-
- if ( ! rect ) {
- return new window.DOMRect( 0, 0, 0, 0 );
- }
-
- return new window.DOMRect(
- rect?.left + 10,
- Math.max( top + 70 + rect.top, 100 ),
- width,
- height
- );
- },
- };
- }, [ selectedBlockRef, selectedBlockClientId ] );
-
- if (
- ! isHomepageSidebarOpen ||
- ! selectedBlockClientId ||
- isNoBlocksPlaceholderPresent ||
- isHeaderOrFooter ||
- ! popoverAnchor
- ) {
- return null;
- }
-
- return (
- <Popover
- as="div"
- animate={ false }
- className="components-tooltip woocommerce-customize-store_block-toolbar-popover"
- variant="unstyled"
- resize={ false }
- flip={ false }
- shift={ true }
- anchor={ popoverAnchor }
- placement="top-start"
- ref={ blockPopoverRef }
- >
- <div className="woocommerce-customize-store-block-toolbar">
- <WPToolbar label="Options">
- <>
- <ToolbarGroup>
- <BlockMover
- clientIds={ [ selectedBlockClientId ] }
- // @ts-expect-error - isBlockMoverUpButtonDisabled isn't defined in the type.
- isBlockMoverUpButtonDisabled={
- isBlockMoverUpButtonDisabled
- }
- isBlockMoverDownButtonDisabled={
- isBlockMoverDownButtonDisabled
- }
- />
- </ToolbarGroup>
- <Shuffle clientId={ selectedBlockClientId } />
- <Delete
- clientId={ selectedBlockClientId }
- currentBlockName={ currentBlock?.name }
- nextBlockClientId={ nextBlock?.clientId }
- />
- </>
- </WPToolbar>
- </div>
- </Popover>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/tracking/index.js b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/tracking/index.js
deleted file mode 100644
index 4c25ddc2fd..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/tracking/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-// Partially copied from: https://github.com/Automattic/wp-calypso/blob/6241a94e52e60a662245bdb06ecae9c724bcec5f/apps/wpcom-block-editor/src/wpcom/features/tracking.js
-
-/**
- * External dependencies
- */
-import { use } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { trackEvent } from '~/customize-store/tracking';
-
-const rewrittenActions = {};
-const originalActions = {};
-
-/**
- * Tracker can be
- * - string - which means it is an event name and should be tracked as such automatically
- * - function - in case you need to load additional properties from the action.
- *
- * @type {Object}
- */
-const REDUX_TRACKING = {
- 'core/block-editor': {
- moveBlocksUp: () =>
- trackEvent(
- 'customize_your_store_assembler_pattern_move_up_click'
- ),
- moveBlocksDown: () =>
- trackEvent(
- 'customize_your_store_assembler_pattern_move_down_click'
- ),
- },
-};
-
-use(
- ( registry ) => ( {
- dispatch: ( namespace ) => {
- const namespaceName =
- typeof namespace === 'object' ? namespace.name : namespace;
- const actions = { ...registry.dispatch( namespaceName ) };
-
- const trackers = REDUX_TRACKING[ namespaceName ];
-
- // Initialize namespace level objects if not yet done.
- if ( ! rewrittenActions[ namespaceName ] ) {
- rewrittenActions[ namespaceName ] = {};
- }
- if ( ! originalActions[ namespaceName ] ) {
- originalActions[ namespaceName ] = {};
- }
-
- if ( trackers ) {
- Object.keys( trackers ).forEach( ( actionName ) => {
- const originalAction = actions[ actionName ];
- const tracker = trackers[ actionName ];
- // If we havent stored the originalAction, or it is no longer the same as the
- // one we last wrote a corresponding rewrittenAction for, we need to update.
- if (
- ! originalActions[ namespaceName ][ actionName ] ||
- originalActions[ namespaceName ][ actionName ] !==
- originalAction
- ) {
- // Save the originalAction and rewrittenAction for future reference.
- originalActions[ namespaceName ][ actionName ] =
- originalAction;
- rewrittenActions[ namespaceName ][ actionName ] = (
- ...args
- ) => {
- // We use a try-catch here to make sure the `originalAction`
- // is always called. We don't want to break the original
- // behaviour when our tracking throws an error.
- try {
- if ( typeof tracker === 'string' ) {
- // Simple track - just based on the event name.
- trackEvent( tracker );
- } else if ( typeof tracker === 'function' ) {
- // Advanced tracking - call function.
- tracker( ...args );
- }
- } catch ( err ) {
- // eslint-disable-next-line no-console
- console.error( err );
- }
- return originalAction( ...args );
- };
- }
- // Replace the action in the registry with the rewrittenAction.
- actions[ actionName ] =
- rewrittenActions[ namespaceName ][ actionName ];
- } );
- }
- return actions;
- },
- } ),
- {}
-);
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/black-background-pattern-update-button.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/black-background-pattern-update-button.ts
deleted file mode 100644
index e7251059f2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/black-background-pattern-update-button.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-const updateFeaturedCategoryCoverImagePattern = (
- featuredCategoryCoverImagePatternParentBlocks: BlockInstance[],
- callback: ( buttonBlocks: BlockInstance[] ) => void
-) => {
- const coverBlocks = featuredCategoryCoverImagePatternParentBlocks.map(
- ( featuredCategoryCoverImagePatternParentBlock ) =>
- featuredCategoryCoverImagePatternParentBlock.innerBlocks.find(
- ( block ) => block.name === 'core/cover'
- )
- );
-
- const parentButtonBlocks = coverBlocks.map( ( coverBlock ) =>
- coverBlock?.innerBlocks.find(
- ( block ) => block.name === 'core/buttons'
- )
- );
-
- const buttonBlocks = parentButtonBlocks.map(
- ( parentButtonBlock ) => parentButtonBlock?.innerBlocks[ 0 ]
- );
-
- callback( buttonBlocks as BlockInstance[] );
-};
-
-const updateJustArrivedFullHeroPattern = (
- justArrivedFullHeroPatterns: BlockInstance[],
- callback: ( buttonBlocks: BlockInstance[] ) => void
-) => {
- const parentButtonBlocks = justArrivedFullHeroPatterns.map(
- ( justArrivedFullHeroPattern ) =>
- justArrivedFullHeroPattern?.innerBlocks[ 0 ].innerBlocks.find(
- ( block ) => block.name === 'core/buttons'
- )
- );
-
- const buttonBlocks = parentButtonBlocks
- .map( ( parentButtonBlock ) => parentButtonBlock?.innerBlocks[ 0 ] )
- .filter( Boolean );
-
- if ( ! buttonBlocks ) {
- return;
- }
-
- callback( buttonBlocks as BlockInstance[] );
-};
-
-export const isJustArrivedFullHeroPattern = ( block: BlockInstance ) =>
- block.name === 'core/cover' &&
- block.attributes.url.includes(
- 'music-black-and-white-white-photography.jpg'
- );
-
-export const isFeaturedCategoryCoverImagePattern = ( block: BlockInstance ) =>
- block.attributes?.metadata?.name === 'Featured Category Cover Image';
-
-/**
- * This is temporary solution to change the button color on the cover block when the color palette is New - Neutral.
- * The real fix should be done on Gutenberg side: https://github.com/WordPress/gutenberg/issues/58004
- *
- */
-export const findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate =
- (
- blocks: BlockInstance[],
- callback: ( buttonBlocks: BlockInstance[] ) => void
- ) => {
- const justArrivedFullHeroPatterns = blocks.filter(
- isJustArrivedFullHeroPattern
- );
-
- if ( justArrivedFullHeroPatterns ) {
- updateJustArrivedFullHeroPattern(
- justArrivedFullHeroPatterns,
- callback
- );
- }
-
- const featuredCategoryCoverImagePatterns = blocks.filter(
- isFeaturedCategoryCoverImagePattern
- );
-
- if ( featuredCategoryCoverImagePatterns ) {
- updateFeaturedCategoryCoverImagePattern(
- featuredCategoryCoverImagePatterns,
- callback
- );
- }
- return blocks;
- };
-
-export const PRODUCT_HERO_PATTERN_BUTTON_STYLE = {
- color: { background: '#ffffff', text: '#000000' },
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/fonts.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/fonts.ts
deleted file mode 100644
index b36ec44969..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/fonts.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * External dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { resolveSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import {
- FontFace,
- FontFamiliesToInstall,
- FontFamily,
-} from '~/customize-store/types/font';
-import { FONT_FAMILIES_TO_INSTALL } from '../sidebar/global-styles/font-pairing-variations/constants';
-
-export type FontCollectionsResponse = Array< {
- slug: string;
- description: string;
- name: string;
-} >;
-
-export type FontCollectionResponse = {
- slug: string;
- name: string;
- font_families: Array< {
- font_family_settings: FontFamily;
- categories: Array< string >;
- } >;
-};
-
-const getInstalledFontFamilyByNameFontFamily = (
- installedFontFamilies: Array< {
- id: number;
- font_family_settings: FontFamily;
- font_face: Array< FontFace >;
- } >,
- nameFontFamily: string
-) => {
- return installedFontFamilies.find(
- ( { font_family_settings } ) =>
- font_family_settings.slug === nameFontFamily
- );
-};
-
-const getFontFamiliesToInstall = (
- fontCollection: FontCollectionResponse,
- slugFontFamily: string,
- fontFamilyToInstall: FontFamiliesToInstall[ 'slug' ]
-) => {
- const fontFromCollection = fontCollection.font_families.find(
- ( { font_family_settings } ) =>
- font_family_settings.slug === slugFontFamily
- );
-
- if ( ! fontFromCollection ) {
- return null;
- }
-
- const fontFace = fontFromCollection?.font_family_settings.fontFace.filter(
- ( { fontWeight } ) =>
- fontFamilyToInstall.fontWeights.includes( fontWeight )
- );
-
- const fontFamilyWithFontFace = {
- ...fontFromCollection?.font_family_settings,
- fontFace,
- };
-
- return fontFamilyWithFontFace;
-};
-
-/**
- * Retrieves font families and font faces to install based on a provided font collection and a list of installed font families.
- * The fontFamilyWithFontFaceToInstall include fontFamilies with font faces that are not installed yet.
- * The fontFaceToInstall include font faces that are not installed yet, but already have the font family installed.
- *
- * @param fontCollection - The complete font collection containing all available font data.
- * @param installedFontFamilies - An array of installed font families with associated font faces and settings.
- * @return An object containing font families with font faces to install and individual font faces to install.
- */
-export const getFontFamiliesAndFontFaceToInstall = (
- fontCollection: FontCollectionResponse,
- installedFontFamilies: Array< {
- id: number;
- font_face: Array< FontFace >;
- font_family_settings: FontFamily;
- } >
-) => {
- return Object.entries( FONT_FAMILIES_TO_INSTALL ).reduce(
- ( acc, [ slug, fontData ] ) => {
- const fontFamilyWithFontFaceToInstall = getFontFamiliesToInstall(
- fontCollection,
- slug,
- fontData
- );
-
- if ( ! fontFamilyWithFontFaceToInstall ) {
- return acc;
- }
-
- const fontFamily = getInstalledFontFamilyByNameFontFamily(
- installedFontFamilies,
- fontFamilyWithFontFaceToInstall.slug
- );
-
- if ( ! fontFamily ) {
- return {
- ...acc,
- fontFamiliesWithFontFacesToInstall: [
- ...acc.fontFamiliesWithFontFacesToInstall,
- fontFamilyWithFontFaceToInstall,
- ],
- };
- }
-
- const fontFace = fontFamily.font_face.filter( ( { fontWeight } ) =>
- fontData.fontWeights.includes( fontWeight )
- );
-
- return {
- ...acc,
- fontFacesToInstall: [
- ...acc.fontFacesToInstall,
- ...fontFace.map( ( face ) => ( {
- ...face,
- fontFamilyId: fontFamily.id,
- } ) ),
- ],
- };
- },
- {
- fontFamiliesWithFontFacesToInstall: [],
- fontFacesToInstall: [],
- } as {
- fontFamiliesWithFontFacesToInstall: Array< FontFamily >;
- fontFacesToInstall: Array<
- FontFace & {
- fontFamilyId: number;
- }
- >;
- }
- );
-};
-
-export const installFontFamily = ( data: FontFamily ) => {
- const config = {
- path: '/wp/v2/font-families',
- method: 'POST',
- data: {
- font_family_settings: JSON.stringify( {
- name: data.name,
- slug: data.slug,
- fontFamily: data.fontFamily,
- preview: data.preview,
- } ),
- },
- };
-
- return apiFetch< {
- id: number;
- font_family_settings: string;
- } >( config );
-};
-
-async function downloadFontFaceAssets( src: string ) {
- try {
- const fontBlob = await ( await fetch( new Request( src ) ) ).blob();
- const fileName = src.split( '/' ).pop() as string;
- return new File( [ fontBlob ], fileName, {
- type: fontBlob.type,
- } );
- } catch ( error ) {
- throw new Error( `Error downloading font face asset from ${ src }` );
- }
-}
-
-function makeFontFacesFormData(
- fontFaceFile: File,
- formData: FormData,
- index: number
-) {
- const fileId = `file-${ index }`;
- formData.append( fileId, fontFaceFile, fontFaceFile.name );
- return fileId;
-}
-
-export const installFontFace = async (
- data: FontFace & {
- fontFamilyId: number;
- },
- index: number
-) => {
- const { fontFamilyId, ...font } = data;
- const fontFaceAssets = await downloadFontFaceAssets(
- Array.isArray( font.src ) ? font.src[ 0 ] : font.src
- );
- const formData = new FormData();
-
- const fontFile = await makeFontFacesFormData(
- fontFaceAssets,
- formData,
- index
- );
-
- formData.append(
- 'font_face_settings',
- JSON.stringify( { ...font, src: fontFile } )
- );
- const config = {
- path: `/wp/v2/font-families/${ data.fontFamilyId }/font-faces/`,
- method: 'POST',
- body: formData,
- };
-
- return apiFetch( config );
-};
-
-export const installFontFamilies = async () => {
- const installedFontFamily = ( await resolveSelect(
- 'core'
- ).getEntityRecords( 'postType', 'wp_font_family', {
- per_page: -1,
- } ) ) as Array< {
- id: number;
- font_faces: Array< number >;
- font_family_settings: FontFamily;
- } >;
-
- const installedFontFamiliesWithFontFaces = await Promise.all(
- installedFontFamily.map( async ( fontFamily ) => {
- const fontFaces = await apiFetch< Array< FontFace > >( {
- path: `/wp/v2/font-families/${ fontFamily.id }/font-faces`,
- method: 'GET',
- } );
-
- return {
- ...fontFamily,
- font_face: fontFaces,
- };
- } )
- );
-
- const fontCollection = await apiFetch< FontCollectionResponse >( {
- path: `/wp/v2/font-collections/google-fonts`,
- method: 'GET',
- } );
-
- const { fontFacesToInstall, fontFamiliesWithFontFacesToInstall } =
- getFontFamiliesAndFontFaceToInstall(
- fontCollection,
- installedFontFamiliesWithFontFaces
- );
-
- const fontFamiliesWithFontFaceToInstallPromises =
- fontFamiliesWithFontFacesToInstall.map( async ( fontFamily ) => {
- const fontFamilyResponse = await installFontFamily( fontFamily );
- return Promise.all(
- fontFamily.fontFace.map( async ( fontFace, index ) => {
- return installFontFace(
- {
- ...fontFace,
- fontFamilyId: fontFamilyResponse.id,
- },
- index
- );
- } )
- );
- } );
-
- const fontFacesToInstallPromises =
- fontFacesToInstall.map( installFontFace );
-
- return ( await Promise.all( [
- ...fontFamiliesWithFontFaceToInstallPromises,
- ...fontFacesToInstallPromises,
- ] ) ) as Array<
- Array< {
- font_face_settings: FontFace;
- } >
- >;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-full-composability-enabled.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-full-composability-enabled.ts
deleted file mode 100644
index 3909735b28..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-full-composability-enabled.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { BlockPopover } from '@wordpress/block-editor';
-
-const isPatternToolkitFullComposabilityFeatureFlagEnabled = () => {
- // @ts-expect-error temp fix
- if ( window.parent?.window.cys_aiFlow ) {
- return false;
- }
-
- return window.wcAdminFeatures[ 'pattern-toolkit-full-composability' ];
-};
-
-const isGutenbergAPIAvailableForFullComposability = () => {
- return [ BlockPopover ].every(
- ( api ) => api !== undefined && api !== null
- );
-};
-
-export const isFullComposabilityFeatureAndAPIAvailable = () => {
- // @ts-expect-error temp fix
- if ( window.parent?.window.cys_aiFlow ) {
- return false;
- }
-
- return (
- isPatternToolkitFullComposabilityFeatureFlagEnabled() &&
- isGutenbergAPIAvailableForFullComposability()
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-tracking-allowed.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-tracking-allowed.ts
deleted file mode 100644
index 43e4d0dff8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/is-tracking-allowed.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isTrackingAllowed = () => window.wcTracks?.isEnabled || false;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/select-block-on-hover.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/select-block-on-hover.ts
deleted file mode 100644
index 7d321974f3..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/select-block-on-hover.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-const BLOCK_SELECTOR = "[data-is-parent-block='true'], header, footer";
-
-const getBlockClientId = ( node: HTMLElement ) => {
- while ( node && node.nodeType !== node.ELEMENT_NODE ) {
- node = node.parentNode as HTMLElement;
- }
-
- if ( ! node ) {
- return;
- }
-
- const elementNode = node;
- const blockNode = elementNode.closest( BLOCK_SELECTOR );
-
- if ( ! blockNode ) {
- return;
- }
-
- return blockNode.id.slice( 'block-'.length );
-};
-
-export const selectBlockOnHover = (
- event: MouseEvent,
- {
- selectBlockByClientId,
- }: {
- selectBlockByClientId: (
- clientId: string,
- initialPosition: 0 | -1 | null
- ) => void;
- getBlockParents: ( clientId: string ) => string[];
- setBlockEditingMode?: ( clientId: string, mode: string ) => void;
- }
-) => {
- const target = event.target as HTMLElement;
-
- const blockClientId = getBlockClientId( target );
-
- if ( ! blockClientId ) {
- return;
- }
-
- selectBlockByClientId( blockClientId, null );
-
- return blockClientId;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/tests/fonts.test.ts b/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/tests/fonts.test.ts
deleted file mode 100644
index 69c7ecda10..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/utils/tests/fonts.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getFontFamiliesAndFontFaceToInstall } from '../fonts';
-
-describe( 'font families and font face installation', () => {
- test( 'should not get any font family if no new font family is provided', () => {
- const fontCollection = {
- slug: 'unknown',
- font_families: [],
- };
- const result = getFontFamiliesAndFontFaceToInstall(
- fontCollection as never,
- []
- );
-
- expect( result.fontFacesToInstall ).toStrictEqual( [] );
- expect( result.fontFamiliesWithFontFacesToInstall ).toStrictEqual( [] );
- } );
-
- test( 'should get new font families from collection if they are not installed', () => {
- const fontCollection = {
- slug: 'inter',
- font_families: [
- { font_family_settings: { slug: 'inter', fontFace: [] } },
- ],
- };
- const result = getFontFamiliesAndFontFaceToInstall(
- fontCollection as never,
- []
- );
-
- expect( result.fontFacesToInstall ).toStrictEqual( [] );
- expect( result.fontFamiliesWithFontFacesToInstall ).toStrictEqual( [
- { slug: 'inter', fontFace: [] },
- ] );
- } );
-
- test( 'should get a new font face to install from font families', () => {
- const fontCollection = {
- slug: 'inter',
- font_families: [
- { font_family_settings: { slug: 'inter', fontFace: [] } },
- ],
- };
- const fontFamilyId = 'ID';
- const fontWeight = '500';
- const installedFontFamilies = [
- {
- id: fontFamilyId,
- font_family_settings: { slug: 'inter' },
- font_face: [ { fontWeight } ],
- },
- ];
- const result = getFontFamiliesAndFontFaceToInstall(
- fontCollection as never,
- installedFontFamilies as never
- );
-
- expect( result.fontFacesToInstall ).toStrictEqual( [
- { fontFamilyId, fontWeight },
- ] );
- expect( result.fontFamiliesWithFontFacesToInstall ).toStrictEqual( [] );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-illu.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/banner-1-illu.svg
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-illu.svg
rename to plugins/woocommerce/client/admin/client/customize-store/assets/banner-1-illu.svg
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-shape.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/banner-1-shape.svg
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-shape.svg
rename to plugins/woocommerce/client/admin/client/customize-store/assets/banner-1-shape.svg
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-illu.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/banner-2-illu.svg
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-illu.svg
rename to plugins/woocommerce/client/admin/client/customize-store/assets/banner-2-illu.svg
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-shape.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/banner-2-shape.svg
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-shape.svg
rename to plugins/woocommerce/client/admin/client/customize-store/assets/banner-2-shape.svg
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/icons/lesson-plan.js b/plugins/woocommerce/client/admin/client/customize-store/assets/icons/lesson-plan.js
deleted file mode 100644
index ba138f1bf8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/icons/lesson-plan.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const lessonPLan = (
- <SVG
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- fill="none"
- viewBox="0 0 24 24"
- >
- <Path
- fill="#1E1E1E"
- d="m8.85 4.821-1.203-.895-2.083 2.802-1.114-.83L3.553 7.1 5.87 8.829l2.98-4.008ZM20 7.75h-8.889v-1.5H20v1.5Zm0 5h-8.889v-1.5H20v1.5Z"
- />
- <Path
- fill="#1E1E1E"
- fillRule="evenodd"
- d="M6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
- clipRule="evenodd"
- />
- <Path fill="#1E1E1E" d="M11.111 17.75H20v-1.5h-8.889v1.5Z" />
- </SVG>
-);
-export default lessonPLan;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/design-your-own.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/design-your-own.svg
deleted file mode 100644
index 14fbe6efe8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/design-your-own.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="292" height="167" viewBox="0 0 292 167" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M172.355 16.4116H6.04958C3.04735 16.4116 0.5 18.9598 0.5 21.9629V28.1513H177.814V21.9629C177.905 18.8688 175.448 16.4116 172.355 16.4116Z" fill="#BEA0F2"/>
-<path d="M195.865 110.693V154.057H240.125V110.693H195.865ZM207.237 142.681V122.078H228.744V142.681H207.237Z" fill="#E5E5E5" fill-opacity="0.6"/>
-<path d="M195.865 38.3438V98.9624H291.5V38.3438H195.865ZM207.237 87.5867V49.7194H280.128V87.5867H207.237Z" fill="#E5E5E5" fill-opacity="0.6"/>
-<path d="M280.262 106.298C278.833 105.161 264.514 94.1675 264.514 94.1675C264.514 94.1675 262.676 112.141 262.521 113.961C262.367 115.772 264.122 116.573 265.542 115.372C267.516 113.715 271.528 110.439 271.528 110.439C271.528 110.439 276.659 109.766 279.215 109.475C281.062 109.256 281.69 107.427 280.262 106.298Z" fill="#3C2861"/>
-<path d="M99.0199 80.7158C100.075 80.7158 100.93 79.8601 100.93 78.8047C100.93 77.7492 100.075 76.8936 99.0199 76.8936C97.9647 76.8936 97.1094 77.7492 97.1094 78.8047C97.1094 79.8601 97.9647 80.7158 99.0199 80.7158Z" fill="#3C2861"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M217.471 164.623V78.7139H218.381V164.623H217.471Z" fill="#3C2861"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M98.5645 164.623V81.1709H99.4745V164.623H98.5645Z" fill="#3C2861"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M99.0195 163.804H218.017V164.714H99.0195V163.804Z" fill="#3C2861"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M99.0195 78.3496H216.016V79.2597H99.0195V78.3496Z" fill="#3C2861"/>
-<path d="M217.926 80.7158C218.981 80.7158 219.837 79.8601 219.837 78.8047C219.837 77.7492 218.981 76.8936 217.926 76.8936C216.871 76.8936 216.016 77.7492 216.016 78.8047C216.016 79.8601 216.871 80.7158 217.926 80.7158Z" fill="#3C2861"/>
-<path d="M218.018 166.17C219.073 166.17 219.928 165.314 219.928 164.259C219.928 163.203 219.073 162.348 218.018 162.348C216.963 162.348 216.107 163.203 216.107 164.259C216.107 165.314 216.963 166.17 218.018 166.17Z" fill="#3C2861"/>
-<path d="M99.0199 166.17C100.075 166.17 100.93 165.314 100.93 164.259C100.93 163.203 100.075 162.348 99.0199 162.348C97.9647 162.348 97.1094 163.203 97.1094 164.259C97.1094 165.314 97.9647 166.17 99.0199 166.17Z" fill="#3C2861"/>
-<path d="M0.591797 27.6963L0.864727 121.523C0.864727 124.617 3.3211 127.074 6.4143 127.074H172.447C175.449 127.074 177.996 124.526 177.996 121.523L177.723 27.6963H0.591797Z" fill="#E5E5E5" fill-opacity="0.6"/>
-<path d="M166.168 115.334H71.0971L70.8242 39.3447H166.168V115.334Z" fill="white"/>
-<path d="M15.9662 24.1469C17.0213 24.1469 17.8767 23.2913 17.8767 22.2358C17.8767 21.1803 17.0213 20.3247 15.9662 20.3247C14.911 20.3247 14.0557 21.1803 14.0557 22.2358C14.0557 23.2913 14.911 24.1469 15.9662 24.1469Z" fill="#EAE2FF"/>
-<path d="M8.41539 24.1469C9.47054 24.1469 10.3259 23.2913 10.3259 22.2358C10.3259 21.1803 9.47054 20.3247 8.41539 20.3247C7.36025 20.3247 6.50488 21.1803 6.50488 22.2358C6.50488 23.2913 7.36025 24.1469 8.41539 24.1469Z" fill="white"/>
-<path d="M23.517 24.1469C24.5721 24.1469 25.4275 23.2913 25.4275 22.2358C25.4275 21.1803 24.5721 20.3247 23.517 20.3247C22.4618 20.3247 21.6064 21.1803 21.6064 22.2358C21.6064 23.2913 22.4618 24.1469 23.517 24.1469Z" fill="#3C2861"/>
-<path d="M160.528 75.0696C164.201 65.7023 154.223 53.0242 138.24 46.7522C122.257 40.4802 106.322 42.9893 102.649 52.3566C98.9751 61.7238 108.954 74.4019 124.937 80.6739C140.919 86.9459 156.854 84.4368 160.528 75.0696Z" fill="#EAE2FF"/>
-<path d="M129.172 90.1226C130.799 82.9208 121.529 74.6899 108.468 71.7383C95.4068 68.7867 83.5001 72.2322 81.8737 79.4341C80.2472 86.6359 89.5169 94.8668 102.578 97.8184C115.639 100.77 127.546 97.3245 129.172 90.1226Z" fill="#EAE2FF"/>
-<path d="M57.7245 107.417C56.9057 106.598 55.723 106.052 54.4494 106.052H16.967C14.4196 106.052 12.3271 108.145 12.3271 110.693C12.3271 111.967 12.873 113.15 13.6918 113.969C14.5106 114.788 15.6933 115.334 16.967 115.334H54.4494C56.9967 115.334 59.0892 113.241 59.0892 110.693C59.0892 109.419 58.5433 108.236 57.7245 107.417Z" fill="white"/>
-<path d="M4.28826 158.902C1.95831 156.571 0.5 153.386 0.5 149.764C0.5 142.696 6.27459 136.92 13.3399 136.92C20.4051 136.92 26.1797 142.696 26.1797 149.764C26.1797 156.831 20.4051 162.608 13.3399 162.608C9.89523 162.692 6.61821 161.224 4.28826 158.902Z" fill="#3C2861"/>
-<path d="M46.1602 162.692C53.2514 162.692 59.0001 156.941 59.0001 149.848C59.0001 142.754 53.2514 137.004 46.1602 137.004C39.0689 137.004 33.3203 142.754 33.3203 149.848C33.3203 156.941 39.0689 162.692 46.1602 162.692Z" fill="#CFB9F6"/>
-<path d="M12.3271 66.3735H59.0892V71.1968H12.3271V66.3735Z" fill="white"/>
-<path d="M12.3271 76.3843H59.0892V81.2076H12.3271V76.3843Z" fill="white"/>
-<path d="M12.3271 86.4858H35.7082V91.3091H12.3271V86.4858Z" fill="white"/>
-<path d="M12.3271 39.3447H59.0892V48.7183H12.3271V39.3447Z" fill="white"/>
-<path d="M247.008 27.2823L245.345 22.8098H234.009L232.346 27.2823H226L236.192 0.861328H243.26L253.451 27.2823H247H247.008ZM239.73 6.47832L235.567 17.8178H243.779L239.722 6.47832H239.73Z" fill="#3C2861"/>
-<path d="M268.949 27.2821V24.782C267.391 26.6571 265.411 27.6961 263.025 27.6961C258.246 27.6961 254.497 24.0515 254.497 17.6066C254.497 11.1616 258.14 7.51709 263.025 7.51709C265.314 7.51709 267.391 8.45055 268.949 10.4311V7.93106H274.045V27.071H268.949V27.2821ZM268.949 21.1456V14.3841C268.113 13.1341 266.247 12.2006 264.583 12.2006C261.67 12.2006 259.698 14.4896 259.698 17.7121C259.698 20.9346 261.67 23.3291 264.583 23.3291C266.247 23.3291 268.121 22.3956 268.949 21.1456Z" fill="#3C2861"/>
-<path d="M108.317 103.857C108.816 99.0021 102.131 94.3362 93.3844 93.4351C84.6378 92.534 77.1421 95.739 76.6423 100.594C76.1425 105.448 82.8278 110.114 91.5745 111.015C100.321 111.916 107.817 108.711 108.317 103.857Z" fill="#EAE2FF"/>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-background.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-background.svg
deleted file mode 100644
index 7994b03573..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-background.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg width="274" height="218" viewBox="0 0 274 218" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M344.717 99.6822C360.259 85.4539 350.108 53.1012 322.054 27.4184C293.994 1.72958 258.654 -7.55779 243.112 6.66443C233.335 15.6156 233.728 31.7529 242.358 48.8808C198.769 21.0187 152.761 14.0847 130.071 34.8507C107.388 55.6167 114.962 97.737 145.396 137.648C126.681 129.748 109.06 129.381 99.2828 138.338C83.7411 152.567 93.8924 184.919 121.946 210.602C150 236.285 185.346 245.578 200.881 231.35C210.658 222.399 210.265 206.262 201.635 189.134C245.224 216.996 291.233 223.93 313.922 203.158C336.605 182.392 329.031 140.272 298.597 100.361C317.313 108.261 334.933 108.621 344.711 99.6702L344.717 99.6822Z" fill="#DFD1FB" fill-opacity="0.3"/>
-<path d="M63 95H157V139.616C157 140.933 155.831 142 154.387 142H65.6134C64.1695 142 63 140.933 63 139.616V95Z" fill="#BEA0F2"/>
-<path d="M65.6134 87H154.387C155.831 87 157 88.2115 157 89.7073V95H63V89.7073C63 88.2115 64.1695 87 65.6134 87Z" fill="#271B3D"/>
-<path d="M68.2134 92.2761C68.9212 92.2761 69.4951 91.751 69.4951 91.1034C69.4951 90.4557 68.9212 89.9306 68.2134 89.9306C67.5055 89.9306 66.9316 90.4557 66.9316 91.1034C66.9316 91.751 67.5055 92.2761 68.2134 92.2761Z" fill="white"/>
-<path d="M73.8584 92.2761C74.5662 92.2761 75.1401 91.751 75.1401 91.1034C75.1401 90.4557 74.5662 89.9306 73.8584 89.9306C73.1505 89.9306 72.5767 90.4557 72.5767 91.1034C72.5767 91.751 73.1505 92.2761 73.8584 92.2761Z" fill="white"/>
-<path d="M79.5014 92.2761C80.2093 92.2761 80.7832 91.751 80.7832 91.1034C80.7832 90.4557 80.2093 89.9306 79.5014 89.9306C78.7936 89.9306 78.2197 90.4557 78.2197 91.1034C78.2197 91.751 78.7936 92.2761 79.5014 92.2761Z" fill="white"/>
-<path d="M3.95575 167.229L0 163.61L50.2147 119.349L52.3292 121.284L3.95575 167.229Z" fill="#BEA0F2"/>
-<path d="M40.927 132.184L52.3291 121.284L50.2146 119.349L38.3018 129.782L40.927 132.184Z" fill="#271B3D"/>
-<path d="M146.801 120.628H98.4961V123.605H146.801V120.628Z" fill="#271B3D"/>
-<path d="M130.484 128.743H98.4961V131.719H130.484V128.743Z" fill="#271B3D"/>
-<path d="M146.801 112.514H98.4961V115.491H146.801V112.514Z" fill="#271B3D"/>
-<path d="M114.602 45H173.113C174.55 45 175.715 46.0656 175.715 47.3812V52.0365H112V47.3812C112 46.0656 113.165 45 114.602 45Z" fill="#271B3D"/>
-<path d="M173.389 47.1698L173.142 46.9436L171.668 48.292L170.194 46.9436L169.947 47.1698L171.421 48.5182L169.947 49.8666L170.194 50.0928L171.668 48.7444L173.142 50.0928L173.389 49.8666L171.915 48.5182L173.389 47.1698Z" fill="white"/>
-<path d="M112 52.0249V78.4385C112 79.7541 113.165 80.8197 114.602 80.8197H173.077C174.515 80.8197 175.679 79.7541 175.679 78.4385V52.0249H112Z" fill="#BEA0F2"/>
-<path d="M57.2829 109.409C57.2829 112.96 54.1534 116.198 54.9342 116.91C55.7117 117.621 59.251 114.761 63.1319 114.761C67.0129 114.761 70.5522 117.624 71.3297 116.91C72.1072 116.195 68.981 112.96 68.981 109.409C68.981 105.858 72.1105 102.619 71.3297 101.908C70.5522 101.197 67.0129 104.057 63.1319 104.057C59.251 104.057 55.7117 101.194 54.9342 101.908C54.1567 102.619 57.2829 105.858 57.2829 109.409Z" fill="#271B3D"/>
-<path d="M52.5862 99.7594C54.032 98.4365 54.4583 96.6819 53.5385 95.8404C52.6188 94.9988 50.7011 95.3889 49.2554 96.7117C47.8097 98.0345 47.3833 99.7891 48.3031 100.631C49.2229 101.472 51.1405 101.082 52.5862 99.7594Z" fill="#271B3D"/>
-<path d="M46.8364 94.4937C47.8248 93.5894 48.1163 92.3898 47.4874 91.8144C46.8586 91.239 45.5475 91.5057 44.5592 92.4101C43.5708 93.3144 43.2793 94.514 43.9082 95.0894C44.537 95.6648 45.8481 95.3981 46.8364 94.4937Z" fill="#271B3D"/>
-<path d="M176.488 137.392C176.488 134.739 174.14 132.588 171.244 132.588C168.347 132.588 165.999 134.739 165.999 137.392C165.999 140.045 168.347 142.195 171.244 142.195C174.14 142.195 176.488 140.045 176.488 137.392Z" fill="white"/>
-<path d="M176.488 122.1C176.488 119.447 174.14 117.296 171.244 117.296C168.347 117.296 165.999 119.447 165.999 122.1C165.999 124.753 168.347 126.903 171.244 126.903C174.14 126.903 176.488 124.753 176.488 122.1Z" fill="#BEA0F2"/>
-<path d="M176.488 106.804C176.488 104.151 174.14 102 171.244 102C168.347 102 165.999 104.151 165.999 106.804C165.999 109.457 168.347 111.607 171.244 111.607C174.14 111.607 176.488 109.457 176.488 106.804Z" fill="#271B3D"/>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-no-ai.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-no-ai.svg
deleted file mode 100644
index f11f58c2da..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-no-ai.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg width="278" height="248" viewBox="0 0 278 248" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1098_21376)">
-<path d="M346.028 92.5025C367.308 73.0208 353.409 28.7225 314.997 -6.44322C276.576 -41.6172 228.188 -54.3337 206.908 -34.8602C193.52 -22.604 194.059 -0.508283 205.875 22.9438C146.192 -15.2059 83.1954 -24.7001 52.1281 3.73331C21.0698 32.1667 31.4405 89.8392 73.112 144.487C47.486 133.669 23.3595 133.167 9.97181 145.432C-11.3084 164.914 2.59108 209.212 41.0032 244.378C79.4153 279.543 127.812 292.268 149.083 272.786C162.471 260.53 161.932 238.435 150.116 214.983C209.799 253.132 272.796 262.626 303.863 234.185C334.921 205.751 324.55 148.079 282.879 93.4314C308.505 104.249 332.632 104.742 346.019 92.4861L346.028 92.5025Z" fill="#DFD1FB" fill-opacity="0.3"/>
-<path d="M250.456 139H205.082V149.044H250.456V139Z" fill="#271B3D"/>
-<path d="M250.456 149.044H205.082V165.783H250.456V149.044Z" fill="#BEA0F2"/>
-<path d="M243.469 142.348L246.817 145.696" stroke="white" stroke-width="0.568" stroke-miterlimit="10"/>
-<path d="M246.817 142.348L243.469 145.696" stroke="white" stroke-width="0.568" stroke-miterlimit="10"/>
-<path d="M216.974 225.041H250.453V208.301H216.974V225.041Z" fill="#BEA0F2"/>
-<path d="M141.998 225.041H175.477V208.301H141.998V225.041Z" fill="#BEA0F2"/>
-<path d="M179.488 225.041H212.967V208.301H179.488V225.041Z" fill="#BEA0F2"/>
-<path d="M196.217 204.706H229.696V187.966H196.217V204.706Z" fill="#BEA0F2"/>
-<path d="M233.713 204.706H250.453V187.966H233.713V204.706Z" fill="#BEA0F2"/>
-<path d="M158.955 200.313C169.504 204.28 175.497 197.605 175.497 197.605L148.382 187.407L174.767 175.445C174.767 175.445 168.349 169.178 158.081 173.835C154.188 175.599 147.063 180.166 140.632 184.494L128.399 179.894C128.938 176.309 126.926 172.703 123.4 171.377C119.349 169.854 114.813 171.91 113.29 175.964C111.767 180.015 113.822 184.551 117.876 186.075C121.479 187.431 125.456 185.951 127.368 182.76C128.657 183.557 131.82 185.495 135.737 187.829C131.988 190.41 128.961 192.553 127.723 193.437C125.607 190.38 121.532 189.168 118.03 190.758C114.087 192.546 112.336 197.206 114.123 201.15C115.911 205.094 120.575 206.845 124.515 205.057C127.947 203.5 129.718 199.768 128.941 196.229L140.843 190.832C147.549 194.726 154.958 198.813 158.958 200.317L158.955 200.313ZM119.259 182.389C117.24 181.629 116.213 179.365 116.972 177.347C117.732 175.325 119.996 174.3 122.014 175.06C124.033 175.82 125.061 178.083 124.301 180.102C123.541 182.121 121.278 183.149 119.259 182.389ZM122.888 201.468C120.923 202.359 118.596 201.485 117.706 199.52C116.815 197.555 117.689 195.228 119.654 194.337C121.619 193.447 123.946 194.321 124.837 196.286C125.727 198.251 124.853 200.578 122.888 201.468Z" fill="#271B3D"/>
-<path d="M201.242 178.043H208.704" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M211.895 178.043H219.354" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M222.544 178.043H230.007" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M233.197 178.043H240.656" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M243.054 178.043H250.516" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M190.592 178.043H198.051" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M179.939 178.043H187.398" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-<path d="M138.702 147.349C138.702 146.543 138.314 145.8 137.658 145.189L132.713 147.37L137.631 149.537C138.301 148.922 138.702 148.166 138.702 147.349Z" fill="#271B3D"/>
-<path d="M137.658 145.189C138.31 145.801 138.702 146.543 138.702 147.35C138.702 148.166 138.304 148.919 137.631 149.537L150.962 155.736H155.391V139H150.962L137.658 145.189Z" fill="#BEA0F2"/>
-<path d="M151.039 139C149.643 139.759 148.565 140.354 148.565 142.078C148.565 143.23 149.154 144.201 150.199 144.719C149.161 145.243 148.572 146.224 148.565 147.37C148.572 148.512 149.158 149.493 150.199 150.021C149.154 150.538 148.565 151.509 148.565 152.662C148.565 154.385 149.643 154.98 151.039 155.739H195.763L198.663 151.086V143.654L195.763 139H151.039Z" fill="#271B3D"/>
-<path d="M195.766 155.739L198.665 151.088V143.655L195.766 139H187.728L184.829 143.655V151.088L187.728 155.739H195.766Z" fill="#BEA0F2"/>
-<path d="M191.745 150.396C192.864 150.396 193.771 149.028 193.771 147.34C193.771 145.652 192.864 144.283 191.745 144.283C190.627 144.283 189.72 145.652 189.72 147.34C189.72 149.028 190.627 150.396 191.745 150.396Z" fill="#271B3D"/>
-<path d="M52 147.591H129.932" stroke="#271B3D" stroke-width="0.8" stroke-miterlimit="10"/>
-</g>
-<defs>
-<clipPath id="clip0_1098_21376">
-<rect width="278" height="248" rx="4" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-offline.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-offline.svg
deleted file mode 100644
index 69884803ed..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-offline.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg width="239" height="218" viewBox="0 0 239 218" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M309.717 99.6822C325.259 85.4539 315.108 53.1012 287.054 27.4184C258.994 1.72958 223.654 -7.55779 208.112 6.66443C198.335 15.6156 198.728 31.7529 207.358 48.8808C163.769 21.0187 117.761 14.0847 95.0711 34.8507C72.3881 55.6167 79.9622 97.737 110.396 137.648C91.6808 129.748 74.0603 129.381 64.2828 138.338C48.7411 152.567 58.8924 184.919 86.9461 210.602C115 236.285 150.346 245.578 165.881 231.35C175.658 222.399 175.265 206.262 166.635 189.134C210.224 216.996 256.233 223.93 278.922 203.158C301.605 182.392 294.031 140.272 263.597 100.361C282.313 108.261 299.933 108.621 309.711 99.6702L309.717 99.6822Z" fill="#DFD1FB" fill-opacity="0.3"/>
-<path d="M18.2184 59C1.7186 59 -5.49569 68 8.2189 83C24.2192 100.5 25.219 111 8.21848 127.5" stroke="black"/>
-<path d="M28.2378 94.5836H121.845V139.145C121.845 140.461 120.681 141.526 119.243 141.526H30.8403C29.4024 141.526 28.2378 140.461 28.2378 139.145V94.5836Z" fill="#BEA0F2"/>
-<path d="M30.8403 87.5854H119.243C120.681 87.5854 121.845 88.651 121.845 89.9667V94.6219H28.2378V89.9667C28.2378 88.651 29.4024 87.5854 30.8403 87.5854Z" fill="#271B3D"/>
-<path d="M33.3906 92.2762C34.0985 92.2762 34.6723 91.7511 34.6723 91.1034C34.6723 90.4557 34.0985 89.9307 33.3906 89.9307C32.6827 89.9307 32.1089 90.4557 32.1089 91.1034C32.1089 91.7511 32.6827 92.2762 33.3906 92.2762Z" fill="white"/>
-<path d="M39.0356 92.2762C39.7435 92.2762 40.3173 91.7511 40.3173 91.1034C40.3173 90.4557 39.7435 89.9307 39.0356 89.9307C38.3277 89.9307 37.7539 90.4557 37.7539 91.1034C37.7539 91.7511 38.3277 92.2762 39.0356 92.2762Z" fill="white"/>
-<path d="M44.6787 92.2762C45.3866 92.2762 45.9604 91.7511 45.9604 91.1034C45.9604 90.4557 45.3866 89.9307 44.6787 89.9307C43.9708 89.9307 43.397 90.4557 43.397 91.1034C43.397 91.7511 43.9708 92.2762 44.6787 92.2762Z" fill="white"/>
-<path d="M111.978 120.628H63.6733V123.605H111.978V120.628Z" fill="#271B3D"/>
-<path d="M95.6609 128.742H63.6733V131.719H95.6609V128.742Z" fill="#271B3D"/>
-<path d="M111.978 112.514H63.6733V115.491H111.978V112.514Z" fill="#271B3D"/>
-<path d="M79.7797 45H138.29C139.728 45 140.892 46.0656 140.892 47.3812V52.0365H77.1772V47.3812C77.1772 46.0656 78.3419 45 79.7797 45Z" fill="#271B3D"/>
-<path d="M138.566 47.1698L138.319 46.9436L136.845 48.292L135.372 46.9436L135.125 47.1698L136.598 48.5182L135.125 49.8665L135.372 50.0928L136.845 48.7444L138.319 50.0928L138.566 49.8665L137.093 48.5182L138.566 47.1698Z" fill="white"/>
-<path d="M77.1772 52.0249V78.4385C77.1772 79.7541 78.3419 80.8197 79.7797 80.8197H138.254C139.692 80.8197 140.856 79.7541 140.856 78.4385V52.0249H77.1772Z" fill="#BEA0F2"/>
-<path d="M28.2378 95.5837H121.845V140.145C121.845 141.461 120.681 142.526 119.243 142.526H30.8403C29.4024 142.526 28.2378 141.461 28.2378 140.145V95.5837Z" fill="#BEA0F2"/>
-<path d="M30.8403 88.5854H119.243C120.681 88.5854 121.845 89.651 121.845 90.9667V95.6219H28.2378V90.9667C28.2378 89.651 29.4024 88.5854 30.8403 88.5854Z" fill="#271B3D"/>
-<path d="M33.3906 93.2762C34.0985 93.2762 34.6723 92.7511 34.6723 92.1034C34.6723 91.4557 34.0985 90.9307 33.3906 90.9307C32.6827 90.9307 32.1089 91.4557 32.1089 92.1034C32.1089 92.7511 32.6827 93.2762 33.3906 93.2762Z" fill="white"/>
-<path d="M39.0356 93.2762C39.7435 93.2762 40.3173 92.7511 40.3173 92.1034C40.3173 91.4557 39.7435 90.9307 39.0356 90.9307C38.3277 90.9307 37.7539 91.4557 37.7539 92.1034C37.7539 92.7511 38.3277 93.2762 39.0356 93.2762Z" fill="white"/>
-<path d="M44.6787 93.2762C45.3866 93.2762 45.9604 92.7511 45.9604 92.1034C45.9604 91.4557 45.3866 90.9307 44.6787 90.9307C43.9708 90.9307 43.397 91.4557 43.397 92.1034C43.397 92.7511 43.9708 93.2762 44.6787 93.2762Z" fill="white"/>
-<path d="M79.7914 46H138.563C140.007 46 141.177 47.0601 141.177 48.3689V53H77.1772V48.3689C77.1772 47.0601 78.3471 46 79.7914 46Z" fill="#271B3D"/>
-<path d="M138.566 48.1698L138.319 47.9436L136.845 49.292L135.372 47.9436L135.125 48.1698L136.598 49.5182L135.125 50.8665L135.372 51.0928L136.845 49.7444L138.319 51.0928L138.566 50.8665L137.093 49.5182L138.566 48.1698Z" fill="white"/>
-<path d="M77.1772 53V79.6018C77.1772 80.9268 78.3477 82 79.7928 82H138.562C140.007 82 141.177 80.9268 141.177 79.6018V53H77.1772Z" fill="#BEA0F2"/>
-<path d="M83.6089 136L85.9587 133.65C78.9041 126.994 67.8217 126.994 60.7671 133.65L63.1169 136C68.8754 130.637 77.8504 130.637 83.6089 136Z" fill="#271B3D"/>
-<path d="M91.4137 128.195L93.7635 125.845C88.25 120.553 81.0294 117.642 73.3637 117.642C65.698 117.642 58.4774 120.55 52.9639 125.845L55.3136 128.195C60.2002 123.529 66.5857 120.966 73.3637 120.966C80.1417 120.966 86.5298 123.529 91.4137 128.195Z" fill="#271B3D"/>
-<path d="M99.201 120.408L101.551 118.058C93.9508 110.695 83.9696 106.649 73.364 106.649C62.7584 106.649 52.7771 110.698 45.1772 118.058L47.527 120.408C54.4973 113.675 63.6461 109.971 73.364 109.971C83.0818 109.971 92.2307 113.672 99.201 120.408Z" fill="#271B3D"/>
-<path d="M99.156 115.532C103.445 115.532 106.922 112.055 106.922 107.766C106.922 103.477 103.445 100 99.156 100C94.867 100 91.3901 103.477 91.3901 107.766C91.3901 112.055 94.867 115.532 99.156 115.532Z" fill="white"/>
-<path d="M102.283 105.09L101.832 104.642L99.1557 107.318L96.4793 104.642L96.0288 105.09L98.7079 107.766L96.0288 110.442L96.4793 110.893L99.1557 108.216L101.832 110.893L102.283 110.442L99.6062 107.766L102.283 105.09Z" fill="#271B3D"/>
-<path d="M40.3481 67.7286H62.6662C63.6752 67.7286 64.4921 66.9564 64.4921 65.6951C64.4921 64.4339 63.6752 63.4705 62.6662 63.4705H40.3481V67.7286Z" fill="#271B3D"/>
-<path d="M40.3481 54.2885H62.6662C63.6752 54.2885 64.4921 53.5163 64.4921 52.2551C64.4921 50.9939 63.6752 50.0304 62.6662 50.0304H40.3481V54.2885Z" fill="#271B3D"/>
-<path d="M64.4919 52.2551C64.4919 50.9939 63.6751 50.0304 62.6661 50.0304H60.5952V54.2885H62.6661C63.6751 54.2885 64.4919 53.5163 64.4919 52.2551Z" fill="#BEA0F2"/>
-<path d="M64.4919 65.6951C64.4919 64.4339 63.6751 63.4705 62.6661 63.4705H60.5952V67.7286H62.6661C63.6751 67.7286 64.4919 66.9564 64.4919 65.6951Z" fill="#BEA0F2"/>
-<path d="M50.0192 45H37.6409C32.6257 45 28.9129 47.989 27.1322 52.4774H25.241C24.162 52.4774 23.4531 52.707 22.415 54.3114C22.0977 54.7998 21.7493 55.3614 20.555 55.3614H19.8581C18.8824 55.3614 18.0918 56.1648 18.0918 57.1563V60.8437C18.0918 61.8352 18.8824 62.6386 19.8581 62.6386H20.555C21.7493 62.6386 22.0977 63.2002 22.415 63.6886C23.4531 65.293 24.162 65.5226 25.241 65.5226H27.137C28.9201 70.0061 32.6305 72.9902 37.6433 72.9902C41.8103 72.9902 50.0216 73 50.0216 73C50.9444 73 51.6918 72.2405 51.6918 71.3028V46.6923C51.6918 45.7546 50.9444 45 50.0216 45H50.0192Z" fill="#BEA0F2"/>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-themes.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-themes.svg
deleted file mode 100644
index 68e8cfaf2c..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/intro-banner-themes.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg width="272" height="247" viewBox="0 0 272 247" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2001_965)">
-<path d="M20.9932 168.554C-8.53496 153.053 -6.39153 99.2186 25.7942 48.3206C57.9779 -2.58481 108.001 -31.2838 137.537 -15.7847C156.125 -6.02646 162.154 18.9135 156.06 48.7475C211.009 -11.8311 278.26 -41.2677 321.375 -18.6406C364.491 3.99388 370.277 71.7663 340.324 145.479C365.588 125.703 392.291 117.952 410.88 127.71C440.408 143.211 438.265 197.045 406.079 247.944C373.895 298.849 323.87 327.541 294.342 312.039C275.754 302.281 269.725 277.341 275.819 247.507C220.862 308.088 153.611 337.525 110.504 314.895C67.3882 292.261 61.6017 224.488 91.555 150.775C66.2909 170.552 39.5877 178.303 20.9992 168.544L20.9932 168.554Z" fill="#DFD1FB" fill-opacity="0.3"/>
-<path d="M86.7809 121.071L139.332 121.071C142.697 121.071 145.425 118.496 145.425 115.32V75.0986C145.425 71.9225 142.697 69.3478 139.332 69.3478H86.7809C83.4159 69.3478 80.688 71.9225 80.688 75.0986L80.688 115.32C80.688 118.496 83.4159 121.071 86.7809 121.071Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M176.475 110.726H211.148C213.368 110.726 215.168 108.916 215.168 106.682V78.3974C215.168 76.1639 213.368 74.3533 211.148 74.3533H176.475C174.254 74.3533 172.454 76.1639 172.454 78.3974L172.454 106.682C172.454 108.916 174.254 110.726 176.475 110.726Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M106.049 177.741H192.393C197.922 177.741 202.404 173.259 202.404 167.73V97.7121C202.404 92.1833 197.922 87.7012 192.393 87.7012L106.049 87.7012C100.52 87.7012 96.038 92.1833 96.038 97.7121L96.038 167.73C96.038 173.259 100.52 177.741 106.049 177.741Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M110.053 114.897C110.053 117.017 111.771 118.735 113.891 118.735C116.01 118.735 117.728 117.017 117.728 114.897C117.728 112.778 116.01 111.06 113.891 111.06C111.771 111.06 110.053 112.778 110.053 114.897Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M124.402 114.731H146.76" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M167.115 114.731L174.457 114.731" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M180.463 114.731L187.804 114.731" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M187.804 125.743H110.053V150.77H187.804V125.743Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M111.054 159.78H128.623" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M129.063 168.456H146.632" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M111.054 168.456H122.035" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M135.651 159.78H146.632" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M202.404 102.598L202.404 97.7121C202.404 92.1828 197.922 87.7012 192.393 87.7012H106.049C100.52 87.7012 96.0382 92.1828 96.0382 97.7121L96.0383 102.598H202.404Z" fill="#A77EFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M100.376 99.3806V96.6374C100.376 93.9645 101.49 91.7056 105.308 91.7056H108.051C103.812 91.7056 100.376 95.1413 100.376 99.3806Z" fill="#F2EDFF" stroke="#F2EDFF" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M201.987 136.921L201.987 153.94L188.853 161.364C187.009 162.406 184.812 162.623 182.8 161.963L182.795 162.442C182.776 164.023 181.986 165.495 180.677 166.383C179.58 167.128 178.164 167.214 176.985 166.607L175.248 165.713C174.529 168.172 172.262 169.851 169.701 169.821L159.851 169.708L201.987 136.921Z" fill="#2C045D"/>
-<path d="M159.653 158.39C165.626 151.079 176.69 155.972 172.691 165.194C171.297 168.125 168.946 168.597 165.9 168.659C163.266 168.712 160.83 170.114 159.793 171.453C159.371 171.998 158.609 171.839 158.42 171.167C157.679 168.529 155.469 163.516 159.653 158.39Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M178.739 162.769C181.349 160.564 180.962 155.815 177.875 152.161C174.789 148.507 170.171 147.332 167.561 149.536C164.952 151.741 165.338 156.49 168.425 160.144C171.511 163.798 176.129 164.973 178.739 162.769Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M214.383 121.323C211.379 117.767 205.973 117.55 202.696 120.854L172.978 149.887C172.856 150.01 172.765 150.163 172.724 150.332C172.474 151.368 173.207 153.204 174.637 154.897C176.067 156.59 177.752 157.619 178.818 157.546C178.991 157.533 179.157 157.47 179.299 157.37L212.891 132.924C216.697 130.245 217.387 124.879 214.383 121.323Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M212.891 132.921L208.995 135.663C207.527 136.448 204.476 134.816 201.947 131.82C199.459 128.874 198.352 125.645 199.293 124.29L202.703 120.854C205.98 117.55 211.386 117.767 214.388 121.32C217.392 124.876 216.699 130.242 212.894 132.919L212.891 132.921Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M208.938 135.692L204.826 138.574C202.796 138.403 200.379 137.035 198.46 134.764C196.542 132.493 195.601 129.896 195.767 127.871L199.261 124.334C198.371 125.715 199.483 128.908 201.945 131.823C204.407 134.737 207.448 136.408 208.94 135.695L208.938 135.692Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M208.004 124.813C210.127 124.992 211.932 124.139 212.036 122.909C212.139 121.679 210.502 120.537 208.379 120.358C206.256 120.179 204.451 121.032 204.347 122.262C204.243 123.492 205.881 124.634 208.004 124.813Z" fill="#F2EDFF"/>
-<path d="M172.755 164.436C171.359 167.366 169.01 167.839 165.964 167.901C163.33 167.956 160.893 169.358 159.857 170.697C159.432 171.242 158.67 171.083 158.481 170.411C158.051 168.873 157.121 166.527 157.249 163.823C156.883 166.842 157.949 169.484 158.417 171.167C158.606 171.839 159.368 171.998 159.793 171.453C160.83 170.113 163.266 168.712 165.901 168.656C168.946 168.594 171.295 168.121 172.691 165.191C172.942 164.614 173.132 164.052 173.27 163.512C173.223 163.496 173.173 163.479 173.126 163.463C173.021 163.782 172.899 164.108 172.755 164.436Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_2001_965">
-<rect width="272" height="247" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-analyzing-your-responses.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-analyzing-your-responses.svg
deleted file mode 100644
index 1294b34472..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-analyzing-your-responses.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-<svg width="216" height="136" viewBox="0 0 216 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Layer_1" clip-path="url(#clip0_4824_30258)">
-<g id="Group">
-<path id="Vector" d="M20.9525 135.993C32.5242 135.993 41.905 126.674 41.905 115.178C41.905 103.682 32.5242 94.3627 20.9525 94.3627C9.38074 94.3627 0 103.682 0 115.178C0 126.674 9.38074 135.993 20.9525 135.993Z" fill="#271B3D"/>
-<path id="Vector_2" d="M20.9525 135.993C26.7245 135.993 31.9462 133.676 35.7359 129.926C33.8337 122.573 27.9379 117.212 20.9525 117.212C13.9672 117.212 8.07131 122.573 6.16919 129.926C9.95885 133.676 15.1842 135.993 20.9525 135.993Z" fill="#BEA0F2"/>
-<path id="Vector_3" d="M20.9524 114.816C25.1122 114.816 28.4843 111.466 28.4843 107.333C28.4843 103.201 25.1122 99.8506 20.9524 99.8506C16.7926 99.8506 13.4204 103.201 13.4204 107.333C13.4204 111.466 16.7926 114.816 20.9524 114.816Z" fill="#BEA0F2"/>
-</g>
-<g id="Group_2">
-<path id="Vector_4" d="M193.437 136C191.52 136 189.961 134.472 189.931 132.572V60.7075C189.931 58.7853 191.502 57.225 193.437 57.225C195.372 57.225 196.942 58.7853 196.942 60.7075V132.579C196.942 134.472 195.354 136 193.437 136Z" fill="#BEA0F2"/>
-<path id="Vector_5" d="M196.942 132.579V79.2817H189.931V132.572C189.961 134.469 191.52 136 193.437 136C195.354 136 196.942 134.476 196.942 132.579Z" fill="#271B3D"/>
-</g>
-<g id="Group_3">
-<path id="Vector_6" d="M174.376 136C172.459 136 170.899 134.472 170.87 132.572V60.7075C170.87 58.7853 172.441 57.225 174.376 57.225C176.31 57.225 177.881 58.7853 177.881 60.7075V132.579C177.881 134.472 176.292 136 174.376 136Z" fill="#BEA0F2"/>
-<path id="Vector_7" d="M177.881 132.579V94.1274H170.87V132.572C170.899 134.469 172.459 136 174.376 136C176.292 136 177.881 134.476 177.881 132.579Z" fill="#271B3D"/>
-</g>
-<g id="Group_4">
-<path id="Vector_8" d="M212.494 136C210.578 136 209.018 134.472 208.989 132.572V60.7075C208.989 58.7853 210.56 57.225 212.494 57.225C214.429 57.225 216 58.7853 216 60.7075V132.579C216 134.472 214.411 136 212.494 136Z" fill="#BEA0F2"/>
-<path id="Vector_9" d="M216 132.579V98.7791H208.989V132.572C209.018 134.469 210.578 136 212.494 136C214.411 136 216 134.476 216 132.579Z" fill="#271B3D"/>
-</g>
-<path id="Vector_10" d="M167.798 32.4354V24.6307L161.301 23.7836C160.711 21.0759 159.64 18.5455 158.175 16.2938L162.161 11.1317L156.612 5.61844L151.415 9.57873C149.149 8.11625 146.606 7.04834 143.869 6.47276L143.024 0.0219116H135.167L134.315 6.47638C131.589 7.05558 129.042 8.11987 126.775 9.58235L121.579 5.62206L116.029 11.1353L120.016 16.2975C118.544 18.5491 117.469 21.0759 116.889 23.7873L110.392 24.6343V32.4391L116.889 33.2861C117.472 35.9939 118.544 38.5243 120.016 40.7759L116.029 45.9381L121.579 51.4513L126.775 47.4911C129.042 48.9535 131.585 50.0214 134.315 50.597L135.167 57.0515H143.024L143.876 50.597C146.602 50.0178 149.149 48.9535 151.415 47.4911L156.612 51.4513L162.161 45.9381L158.175 40.7759C159.647 38.5243 160.722 35.9975 161.301 33.2861L167.798 32.4391V32.4354ZM139.099 36.6455C134.253 36.6455 130.321 32.7395 130.321 27.9249C130.321 23.1103 134.253 19.2043 139.099 19.2043C143.945 19.2043 147.877 23.1103 147.877 27.9249C147.877 32.7395 143.945 36.6455 139.099 36.6455Z" fill="#BEA0F2"/>
-<g id="Group_5">
-<path id="Vector_11" d="M97.613 0H9.37571L0.182129 57.1201H22.8363L22.7489 84.7914L40.6295 57.1201H88.4194L97.613 0Z" fill="#271B3D"/>
-<g id="Group_6">
-<path id="Vector_12" d="M34.7344 31.552C36.5094 31.552 37.9484 30.1225 37.9484 28.3591C37.9484 26.5958 36.5094 25.1663 34.7344 25.1663C32.9594 25.1663 31.5205 26.5958 31.5205 28.3591C31.5205 30.1225 32.9594 31.552 34.7344 31.552Z" fill="white"/>
-<path id="Vector_13" d="M48.8975 31.552C50.6725 31.552 52.1114 30.1225 52.1114 28.3591C52.1114 26.5958 50.6725 25.1663 48.8975 25.1663C47.1225 25.1663 45.6836 26.5958 45.6836 28.3591C45.6836 30.1225 47.1225 31.552 48.8975 31.552Z" fill="white"/>
-<path id="Vector_14" d="M63.0606 31.552C64.8356 31.552 66.2745 30.1225 66.2745 28.3591C66.2745 26.5958 64.8356 25.1663 63.0606 25.1663C61.2856 25.1663 59.8467 26.5958 59.8467 28.3591C59.8467 30.1225 61.2856 31.552 63.0606 31.552Z" fill="white"/>
-</g>
-</g>
-<g id="Group_7">
-<path id="Vector_15" d="M71.1472 104.017C77.2763 104.017 82.2648 108.969 82.2648 115.062C82.2648 121.154 77.2799 126.107 71.1472 126.107C65.0145 126.107 60.0296 121.154 60.0296 115.062C60.0296 108.969 65.0145 104.017 71.1472 104.017ZM71.1472 94.1274C59.5086 94.1274 50.0781 103.5 50.0781 115.058C50.0781 126.617 59.5122 135.989 71.1472 135.989C82.7822 135.989 92.2163 126.617 92.2163 115.058C92.2163 103.5 82.7822 94.1274 71.1472 94.1274Z" fill="#271B3D"/>
-<path id="Vector_16" d="M60.7219 96.875L65.7359 105.422C67.3393 104.531 69.1831 104.017 71.1471 104.017V94.1274C67.3538 94.1274 63.7974 95.1301 60.7219 96.8714V96.875Z" fill="#BEA0F2"/>
-</g>
-<g id="Group_8">
-<path id="Vector_17" d="M121.346 94.1274C109.707 94.1274 100.277 103.5 100.277 115.058C100.277 126.617 109.711 135.989 121.346 135.989C132.981 135.989 142.415 126.617 142.415 115.058C142.415 103.5 132.981 94.1274 121.346 94.1274Z" fill="#BEA0F2"/>
-<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M130.941 103.841L118.228 126.872L111.452 115.078L112.357 114.568L118.21 124.755L130.028 103.346L130.941 103.841Z" fill="white"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_4824_30258">
-<rect width="216" height="136" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-applying-the-finishing-touches.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-applying-the-finishing-touches.svg
deleted file mode 100644
index 08d2a648b2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-applying-the-finishing-touches.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="216" height="136" viewBox="0 0 216 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Frame" clip-path="url(#clip0_4824_14060)">
-<g id="Layer 1">
-<path id="Vector" d="M173.664 111.245V103.441L167.168 102.594C166.577 99.886 165.506 97.3558 164.041 95.1043L168.027 89.9426L162.478 84.4298L157.282 88.3898C155.016 86.9274 152.473 85.8596 149.736 85.284L148.891 78.8301H141.035L140.183 85.284C137.457 85.8632 134.91 86.9274 132.644 88.3898L127.448 84.4298L121.899 89.9426L125.885 95.1043C124.413 97.3558 123.338 99.8823 122.759 102.594L116.262 103.441V111.245L122.759 112.092C123.342 114.799 124.413 117.329 125.885 119.581L121.899 124.743L127.448 130.255L132.644 126.295C134.91 127.758 137.454 128.826 140.183 129.401L141.035 135.855H148.891L149.744 129.401C152.469 128.822 155.016 127.758 157.282 126.295L162.478 130.255L168.027 124.743L164.041 119.581C165.513 117.329 166.588 114.803 167.168 112.092L173.664 111.245ZM144.967 115.454C140.121 115.454 136.189 111.549 136.189 106.734C136.189 101.92 140.121 98.0146 144.967 98.0146C149.813 98.0146 153.744 101.92 153.744 106.734C153.744 111.549 149.813 115.454 144.967 115.454Z" fill="#BEA0F2"/>
-<path id="Vector_2" d="M0.149414 18.3374H109.004V62.7477C109.004 64.3476 107.699 65.6435 106.089 65.6435H3.06434C1.45385 65.6435 0.149414 64.3476 0.149414 62.7477V18.3374Z" fill="#BEA0F2"/>
-<g id="Group">
-<path id="Vector_3" d="M3.06434 0H106.089C107.699 0 109.004 1.29586 109.004 2.89577V18.3918H0.149414V2.89577C0.149414 1.29586 1.45385 0 3.06434 0Z" fill="#271B3D"/>
-<path id="Vector_4" d="M7.4477 11.0327C8.57259 11.0327 9.4845 10.1268 9.4845 9.00926C9.4845 7.89176 8.57259 6.98584 7.4477 6.98584C6.3228 6.98584 5.41089 7.89176 5.41089 9.00926C5.41089 10.1268 6.3228 11.0327 7.4477 11.0327Z" fill="white"/>
-<path id="Vector_5" d="M14.622 11.0327C15.7469 11.0327 16.6588 10.1268 16.6588 9.00926C16.6588 7.89176 15.7469 6.98584 14.622 6.98584C13.4971 6.98584 12.5852 7.89176 12.5852 9.00926C12.5852 10.1268 13.4971 11.0327 14.622 11.0327Z" fill="white"/>
-<path id="Vector_6" d="M21.7963 11.0327C22.9212 11.0327 23.8331 10.1268 23.8331 9.00926C23.8331 7.89176 22.9212 6.98584 21.7963 6.98584C20.6714 6.98584 19.7595 7.89176 19.7595 9.00926C19.7595 10.1268 20.6714 11.0327 21.7963 11.0327Z" fill="white"/>
-</g>
-<path id="Vector_7" d="M97.1911 118.173L106.876 113.54L109.266 103.129L102.565 94.7822H91.8167L85.116 103.129L87.5062 113.54L97.1911 118.173Z" fill="#BEA0F2"/>
-<g id="Group_2">
-<g id="Group_3">
-<path id="Vector_8" d="M191.351 0C176.259 0 162.194 30.9522 168.082 58.0277C172.065 76.3326 181.538 74.2512 181.538 88.9147H201.178C201.178 74.2512 210.651 76.3326 214.634 58.0277C220.518 30.9522 206.454 0 191.351 0Z" fill="#BEA0F2"/>
-<path id="Vector_9" d="M179.855 88.3501V94.9706H182.73C182.73 99.5242 186.071 103.64 191.354 103.64C196.637 103.64 199.979 99.5278 199.979 94.9706H202.854V88.3501H179.855Z" fill="#271B3D"/>
-</g>
-<path id="Vector_10" d="M194.003 88.8639C194.003 80.5639 192.976 72.0467 191.354 64.2824C189.736 72.043 188.709 80.5639 188.709 88.8639H187.317C187.317 79.6517 189.008 70.2042 190.83 61.8065C190.298 59.3668 189.755 57.0104 189.241 54.7806C186.774 44.0988 184.825 35.6613 187.35 32.0886C188.21 30.8688 189.558 30.2534 191.358 30.2534C193.158 30.2534 194.506 30.8688 195.366 32.0886C197.891 35.6613 195.942 44.0952 193.479 54.7806C192.961 57.0104 192.422 59.3632 191.89 61.8065C193.712 70.2042 195.402 79.6517 195.402 88.8639H194.007H194.003ZM191.354 32.6135C189.868 32.6135 188.822 33.0696 188.159 34.0107C185.943 37.1417 187.835 44.1206 190.232 54.4983C190.596 56.0765 190.975 57.7162 191.354 59.403C191.733 57.7126 192.112 56.0765 192.477 54.4983C194.874 44.1169 196.765 37.1454 194.55 34.0107C193.887 33.0732 192.841 32.6135 191.354 32.6135Z" fill="#271B3D"/>
-</g>
-<g id="Group_4">
-<path id="Vector_11" d="M4.43069 136L0 131.599L56.2436 77.7734L58.612 80.1263L4.43069 136Z" fill="#BEA0F2"/>
-<path id="Vector_12" d="M45.8408 93.3817L58.6119 80.1263L56.2435 77.7734L42.9004 90.4605L45.8408 93.3817Z" fill="#271B3D"/>
-</g>
-<g id="Group_5">
-<g id="Group_6">
-<path id="Vector_13" d="M54.6658 40.2295H5.29785V43.8492H54.6658V40.2295Z" fill="#271B3D"/>
-<path id="Vector_14" d="M36.269 50.0967H5.29785V53.7164H36.269V50.0967Z" fill="#271B3D"/>
-</g>
-<path id="Vector_15" d="M54.6658 30.3623H5.29785V33.982H54.6658V30.3623Z" fill="#271B3D"/>
-</g>
-</g>
-<g id="Layer 4">
-<g id="Group_7">
-<path id="Vector_16" d="M61.986 65.5241C58.9108 68.5792 53.6311 68.9013 53.6311 70.1248C53.6311 71.3483 58.9108 71.6704 61.986 74.7255C65.0613 77.7805 65.3856 83.0255 66.6171 83.0255C67.8487 83.0255 68.173 77.7805 71.2482 74.7255C74.3235 71.6704 79.6031 71.3483 79.6031 70.1248C79.6031 68.9013 74.3235 68.5792 71.2482 65.5241C68.173 62.4691 67.8487 57.2241 66.6171 57.2241C65.3856 57.2241 65.0613 62.4691 61.986 65.5241Z" fill="#271B3D"/>
-<g id="Group_8">
-<path id="Vector_17" d="M81.2123 84.6206C82.8316 83.0119 83.3091 80.8782 82.2789 79.8548C81.2487 78.8313 79.1009 79.3057 77.4816 80.9144C75.8623 82.5231 75.3847 84.6568 76.4149 85.6802C77.4451 86.7037 79.593 86.2293 81.2123 84.6206Z" fill="#271B3D"/>
-<path id="Vector_18" d="M86.4712 89.8473C87.5782 88.7475 87.9047 87.2888 87.2003 86.589C86.496 85.8893 85.0276 86.2136 83.9205 87.3134C82.8135 88.4131 82.487 89.8719 83.1914 90.5717C83.8957 91.2714 85.3642 90.9471 86.4712 89.8473Z" fill="#271B3D"/>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_4824_14060">
-<rect width="216" height="136" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-assembling-ai-optimized-store.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-assembling-ai-optimized-store.svg
deleted file mode 100644
index 119219c448..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-assembling-ai-optimized-store.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="216px" height="136px" viewBox="0 0 216 136" version="1.1">
-<defs>
-<clipPath id="clip1">
- <path d="M 0.515625 0 L 215.484375 0 L 215.484375 136 L 0.515625 136 Z M 0.515625 0 "/>
-</clipPath>
-<clipPath id="clip2">
- <path d="M 211 131 L 215.484375 131 L 215.484375 136 L 211 136 Z M 211 131 "/>
-</clipPath>
-</defs>
-<g id="surface1">
-<g clip-path="url(#clip1)" clip-rule="nonzero">
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 0.515625 0 L 215.484375 0 L 215.484375 136 L 0.515625 136 Z M 0.515625 0 "/>
-</g>
-<g clip-path="url(#clip2)" clip-rule="nonzero">
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 215.453125 131.578125 L 211.273438 131.578125 L 211.273438 135.660156 L 215.453125 135.660156 Z M 215.453125 131.578125 "/>
-</g>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 200.851562 14.28125 L 200.851562 48.28125 L 204.335938 48.28125 L 204.335938 14.28125 Z M 200.851562 14.28125 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 207.820312 4.078125 L 207.820312 48.28125 L 211.304688 48.28125 L 211.304688 4.078125 Z M 207.820312 4.078125 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 193.882812 24.140625 L 193.882812 48.28125 L 197.367188 48.28125 L 197.367188 24.140625 Z M 193.882812 24.140625 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 88.550781 128.679688 L 96.972656 106.078125 L 118.679688 106.078125 L 127.101562 128.679688 L 143.363281 128.679688 L 143.363281 131.921875 L 72.289062 131.921875 L 72.289062 128.679688 Z M 88.550781 128.679688 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 92.394531 38.125 L 33.164062 38.125 L 33.164062 95.925781 L 92.394531 95.925781 Z M 92.394531 38.125 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 47.980469 67.867188 L 40.960938 70.34375 C 38.378906 71.253906 38.132812 72.867188 38.796875 73.964844 C 39.601562 75.285156 41.523438 75.160156 43.621094 73.792969 C 45.574219 72.519531 48.570312 70.480469 49.542969 69.796875 Z M 47.980469 67.867188 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 77.574219 67.867188 C 77.574219 67.867188 83.425781 69.929688 84.59375 70.34375 C 87.175781 71.253906 87.421875 72.867188 86.757812 73.964844 C 85.953125 75.285156 84.03125 75.160156 81.933594 73.792969 C 79.980469 72.519531 76.984375 70.480469 76.011719 69.796875 Z M 77.574219 67.867188 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 46.425781 61.804688 L 55.042969 73.023438 L 55.398438 72.824219 L 53.09375 60.066406 Z M 46.425781 61.804688 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 52.082031 72.761719 C 48.261719 72.761719 45.695312 69.460938 45.695312 66.152344 C 45.695312 62.539062 49.035156 61.121094 52.148438 61.121094 C 55.265625 61.121094 58.792969 62.710938 58.792969 65.921875 C 58.792969 69.609375 56.019531 72.761719 52.082031 72.761719 Z M 52.082031 72.761719 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 54.28125 72.40625 C 54.527344 72.324219 54.757812 72.230469 54.984375 72.121094 L 53.003906 61.164062 C 52.71875 61.136719 52.429688 61.121094 52.148438 61.121094 C 50.238281 61.121094 48.238281 61.660156 46.984375 62.90625 Z M 54.28125 72.40625 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 66.761719 65.921875 C 66.761719 62.710938 70.292969 61.121094 73.40625 61.121094 C 76.519531 61.121094 79.859375 62.539062 79.859375 66.152344 C 79.859375 69.464844 77.289062 72.761719 73.472656 72.761719 C 69.535156 72.761719 66.761719 69.609375 66.761719 65.921875 Z M 66.761719 65.921875 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 71.273438 72.40625 C 71.03125 72.324219 70.796875 72.230469 70.570312 72.121094 L 72.550781 61.164062 C 72.839844 61.136719 73.125 61.121094 73.40625 61.121094 C 75.320312 61.121094 77.316406 61.660156 78.570312 62.90625 Z M 71.273438 72.40625 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 73.539062 59.15625 C 66.585938 59.15625 64.664062 64.078125 62.777344 64.078125 C 60.886719 64.078125 58.972656 59.15625 52.011719 59.15625 C 47.609375 59.15625 43.007812 61.921875 40.617188 63.042969 L 40.617188 66.414062 L 43.183594 66.414062 C 43.539062 68.570312 45.328125 74.804688 52.078125 74.804688 C 59.625 74.804688 59.792969 67.304688 62.773438 67.304688 C 65.75 67.304688 65.921875 74.804688 73.464844 74.804688 C 80.21875 74.804688 82.003906 68.570312 82.359375 66.414062 L 84.929688 66.414062 L 84.929688 63.042969 C 82.539062 61.921875 77.933594 59.15625 73.53125 59.15625 Z M 52.082031 72.761719 C 48.261719 72.761719 45.695312 69.460938 45.695312 66.152344 C 45.695312 62.539062 49.035156 61.121094 52.148438 61.121094 C 55.265625 61.121094 58.792969 62.710938 58.792969 65.921875 C 58.792969 69.609375 56.019531 72.761719 52.082031 72.761719 Z M 73.472656 72.761719 C 69.535156 72.761719 66.761719 69.609375 66.761719 65.921875 C 66.761719 62.710938 70.292969 61.121094 73.40625 61.121094 C 76.519531 61.121094 79.859375 62.539062 79.859375 66.152344 C 79.859375 69.464844 77.289062 72.761719 73.472656 72.761719 Z M 73.472656 72.761719 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 155.867188 44.960938 L 96.636719 44.960938 L 96.636719 48.363281 L 155.867188 48.363281 Z M 155.867188 44.960938 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 126.253906 51.613281 L 96.636719 51.613281 L 96.636719 55.011719 L 126.253906 55.011719 Z M 126.253906 51.613281 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 155.867188 38.160156 L 96.636719 38.160156 L 96.636719 41.5625 L 155.867188 41.5625 Z M 155.867188 38.160156 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 159.304688 71.523438 L 159.304688 80.863281 L 175.355469 80.863281 C 175.355469 80.863281 173.632812 84.292969 173.632812 88.132812 C 173.632812 91.96875 176.171875 95.824219 181.066406 95.824219 C 185.960938 95.824219 188.5 91.839844 188.5 88.132812 C 188.5 84.421875 186.777344 80.863281 186.777344 80.863281 L 198.511719 80.863281 L 198.511719 71.523438 C 204.359375 74.753906 211.207031 73.65625 211.207031 66.953125 C 211.207031 60.25 204.359375 59.152344 198.511719 62.382812 L 198.511719 53.042969 L 186.777344 53.042969 C 186.777344 53.042969 188.5 49.613281 188.5 45.773438 C 188.5 41.9375 185.960938 38.082031 181.066406 38.082031 C 176.171875 38.082031 173.632812 42.066406 173.632812 45.773438 C 173.632812 49.484375 175.355469 53.042969 175.355469 53.042969 L 159.304688 53.042969 L 159.304688 62.382812 C 165.152344 59.152344 172 60.25 172 66.953125 C 172 73.65625 165.152344 74.753906 159.304688 71.523438 Z M 159.304688 71.523438 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 155.867188 87.378906 L 96.636719 87.378906 L 96.636719 95.878906 L 155.867188 95.878906 Z M 155.867188 87.378906 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 34.308594 119.105469 L 34.308594 115.152344 L 30.957031 114.726562 C 30.65625 113.351562 30.105469 112.070312 29.34375 110.929688 L 31.402344 108.3125 L 28.539062 105.515625 L 25.855469 107.527344 C 24.6875 106.78125 23.375 106.246094 21.96875 105.953125 L 21.527344 102.679688 L 17.476562 102.679688 L 17.039062 105.953125 C 15.632812 106.246094 14.320312 106.78125 13.148438 107.527344 L 10.464844 105.515625 L 7.601562 108.3125 L 9.660156 110.929688 C 8.898438 112.070312 8.347656 113.351562 8.046875 114.726562 L 4.695312 115.152344 L 4.695312 119.105469 L 8.046875 119.535156 C 8.351562 120.90625 8.90625 122.1875 9.660156 123.332031 L 7.601562 125.949219 L 10.464844 128.742188 L 13.148438 126.734375 C 14.320312 127.476562 15.632812 128.015625 17.042969 128.308594 L 17.476562 131.578125 L 21.527344 131.578125 L 21.96875 128.308594 C 23.375 128.015625 24.6875 127.476562 25.855469 126.734375 L 28.539062 128.742188 L 31.402344 125.949219 L 29.34375 123.332031 C 30.105469 122.1875 30.65625 120.90625 30.957031 119.535156 Z M 19.5625 123.417969 C 15.832031 123.417969 12.804688 120.464844 12.804688 116.820312 C 12.804688 113.179688 15.832031 110.226562 19.5625 110.226562 C 23.296875 110.226562 26.324219 113.179688 26.324219 116.820312 C 26.324219 120.464844 23.296875 123.417969 19.5625 123.417969 Z M 19.5625 123.417969 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 182.777344 24.164062 L 33.164062 24.164062 L 33.164062 34.363281 L 182.777344 34.363281 Z M 182.777344 24.164062 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 37.308594 30.75 C 38.214844 30.75 38.953125 30.03125 38.953125 29.144531 C 38.953125 28.257812 38.214844 27.539062 37.308594 27.539062 C 36.398438 27.539062 35.664062 28.257812 35.664062 29.144531 C 35.664062 30.03125 36.398438 30.75 37.308594 30.75 Z M 37.308594 30.75 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 43.269531 30.75 C 44.175781 30.75 44.914062 30.03125 44.914062 29.144531 C 44.914062 28.257812 44.175781 27.539062 43.269531 27.539062 C 42.359375 27.539062 41.625 28.257812 41.625 29.144531 C 41.625 30.03125 42.359375 30.75 43.269531 30.75 Z M 43.269531 30.75 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 49.234375 30.75 C 50.140625 30.75 50.878906 30.03125 50.878906 29.144531 C 50.878906 28.257812 50.140625 27.539062 49.234375 27.539062 C 48.324219 27.539062 47.589844 28.257812 47.589844 29.144531 C 47.589844 30.03125 48.324219 30.75 49.234375 30.75 Z M 49.234375 30.75 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 33.265625 100.394531 L 33.265625 101.214844 C 33.265625 104.140625 35.769531 106.515625 38.863281 106.515625 L 177.277344 106.515625 C 180.371094 106.515625 182.878906 104.144531 182.878906 101.214844 L 182.878906 100.394531 Z M 33.265625 100.394531 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 182.878906 20.398438 L 182.878906 19.582031 C 182.878906 16.65625 180.371094 14.28125 177.277344 14.28125 L 38.863281 14.28125 C 35.773438 14.28125 33.265625 16.652344 33.265625 19.582031 L 33.265625 20.398438 Z M 182.878906 20.398438 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 211.210938 123.40625 C 211.210938 127.878906 207.53125 131.511719 202.96875 131.578125 L 167.679688 131.578125 C 163.054688 131.578125 159.304688 127.921875 159.304688 123.40625 C 159.304688 118.890625 163.054688 115.234375 167.679688 115.234375 L 202.984375 115.234375 C 207.542969 115.234375 211.214844 118.941406 211.214844 123.40625 Z M 211.210938 123.40625 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 202.792969 129.21875 C 206.082031 129.21875 208.746094 126.617188 208.746094 123.40625 C 208.746094 120.195312 206.082031 117.597656 202.792969 117.597656 C 199.503906 117.597656 196.839844 120.195312 196.839844 123.40625 C 196.839844 126.617188 199.503906 129.21875 202.792969 129.21875 Z M 202.792969 129.21875 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 116.382812 63.886719 L 96.636719 63.886719 L 96.636719 83.152344 L 116.382812 83.152344 Z M 116.382812 63.886719 "/>
-<path style="fill:none;stroke-width:0.908286;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(15.294118%,10.588235%,23.921569%);stroke-opacity:1;stroke-miterlimit:10;" d="M 98.346354 73.519531 L 108.755968 73.519531 " transform="matrix(1.028571,0,0,1,0,0)"/>
-<path style="fill:none;stroke-width:0.908286;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(15.294118%,10.588235%,23.921569%);stroke-opacity:1;stroke-miterlimit:10;" d="M 103.549262 68.296875 L 103.549262 78.742188 " transform="matrix(1.028571,0,0,1,0,0)"/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(74.509804%,62.745098%,94.901961%);fill-opacity:1;" d="M 8.046875 98.058594 C 6.214844 98.058594 4.722656 96.625 4.695312 94.839844 L 4.695312 7.351562 C 4.695312 5.546875 6.195312 4.082031 8.046875 4.082031 C 9.898438 4.082031 11.398438 5.546875 11.398438 7.351562 L 11.398438 94.847656 C 11.398438 96.625 9.878906 98.058594 8.046875 98.058594 Z M 8.046875 98.058594 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 33.148438 L 11.398438 29.839844 L 4.695312 25.332031 L 4.695312 28.640625 Z M 11.398438 33.148438 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 39.578125 L 11.398438 36.269531 L 4.695312 31.757812 L 4.695312 35.070312 Z M 11.398438 39.578125 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 46.003906 L 11.398438 42.699219 L 4.695312 38.1875 L 4.695312 41.5 Z M 11.398438 46.003906 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 52.433594 L 11.398438 49.125 L 4.695312 44.617188 L 4.695312 47.929688 Z M 11.398438 52.433594 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 58.863281 L 11.398438 55.554688 L 4.695312 51.046875 L 4.695312 54.359375 Z M 11.398438 58.863281 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 65.292969 L 11.398438 61.984375 L 4.695312 57.476562 L 4.695312 60.785156 Z M 11.398438 65.292969 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 71.722656 L 11.398438 68.410156 L 4.695312 63.90625 L 4.695312 67.214844 Z M 11.398438 71.722656 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 78.152344 L 11.398438 74.839844 L 4.695312 70.335938 L 4.695312 73.644531 Z M 11.398438 78.152344 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 84.582031 L 11.398438 81.269531 L 4.695312 76.765625 L 4.695312 80.074219 Z M 11.398438 84.582031 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 11.398438 91.011719 L 11.398438 87.699219 L 4.695312 83.191406 L 4.695312 86.503906 Z M 11.398438 91.011719 "/>
-<path style=" stroke:none;fill-rule:nonzero;fill:rgb(15.294118%,10.588235%,23.921569%);fill-opacity:1;" d="M 4.695312 89.621094 L 4.695312 92.933594 L 10.609375 96.910156 C 11.101562 96.351562 11.398438 95.636719 11.398438 94.847656 L 11.398438 94.128906 Z M 4.695312 89.621094 "/>
-</g>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-comparing-top-performing-stores.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-comparing-top-performing-stores.svg
deleted file mode 100644
index 12e2ea7eb6..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-comparing-top-performing-stores.svg
+++ /dev/null
@@ -1,61 +0,0 @@
-<svg width="216" height="136" viewBox="0 0 216 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Comparing" clip-path="url(#clip0_4824_20218)">
-<g id="Layer 1">
-<g id="Group">
-<path id="Vector" d="M0 131.57C0 129.147 1.95966 127.18 4.39285 127.14H118.702C121.168 127.14 123.164 129.122 123.164 131.57C123.164 134.018 121.168 136 118.702 136H4.38192C1.95602 135.996 0 133.989 0 131.57Z" fill="#BEA0F2"/>
-<g id="Group_2">
-<path id="Vector_2" d="M9.9585 135.996H13L16.668 127.14H13.6228L9.9585 135.996Z" fill="#271B3D"/>
-<path id="Vector_3" d="M22.0845 135.996H25.126L28.794 127.14H25.7488L22.0845 135.996Z" fill="#271B3D"/>
-<path id="Vector_4" d="M19.6878 127.14L16.0198 135.996H19.0649L22.7329 127.14H19.6878Z" fill="#271B3D"/>
-<path id="Vector_5" d="M31.8682 127.14L28.2002 135.996H31.2453L34.9133 127.14H31.8682Z" fill="#271B3D"/>
-<path id="Vector_6" d="M37.9585 127.14L34.2905 135.996H37.3357L41.0036 127.14H37.9585Z" fill="#271B3D"/>
-<path id="Vector_7" d="M44.0486 127.14L40.3806 135.996H43.4257L47.0937 127.14H44.0486Z" fill="#271B3D"/>
-<path id="Vector_8" d="M50.139 127.14L46.4746 135.996H49.5161L53.1841 127.14H50.139Z" fill="#271B3D"/>
-<path id="Vector_9" d="M56.2293 127.14L52.5649 135.996H55.6064L59.2744 127.14H56.2293Z" fill="#271B3D"/>
-<path id="Vector_10" d="M62.3013 127.14L58.6333 135.996H61.6784L65.3464 127.14H62.3013Z" fill="#271B3D"/>
-<path id="Vector_11" d="M68.3733 127.14L64.7053 135.996H67.7468L71.4148 127.14H68.3733Z" fill="#271B3D"/>
-<path id="Vector_12" d="M74.4417 127.14L70.7737 135.996H73.8188L77.4868 127.14H74.4417Z" fill="#271B3D"/>
-<path id="Vector_13" d="M80.5137 127.14L76.8457 135.996H79.8908L83.5552 127.14H80.5137Z" fill="#271B3D"/>
-<path id="Vector_14" d="M86.5821 127.14L82.9177 135.996H85.9592L89.6272 127.14H86.5821Z" fill="#271B3D"/>
-<path id="Vector_15" d="M10.6033 127.14H7.55819L3.90112 135.971C4.05775 135.989 4.21802 135.996 4.37829 135.996H6.93532L10.6033 127.137V127.14Z" fill="#271B3D"/>
-<path id="Vector_16" d="M1.37686 134.785L4.54219 127.14H4.39285C2.72823 127.166 1.2858 128.099 0.539089 129.458L0.178482 130.326C0.0619224 130.72 0 131.136 0 131.567C0 132.825 0.528162 133.971 1.37686 134.781V134.785Z" fill="#271B3D"/>
-</g>
-</g>
-<g id="Group_3">
-<path id="Vector_17" d="M123.131 18.1391V61.5016H126.773V18.1391H123.131Z" fill="#BEA0F2"/>
-<path id="Vector_18" d="M131.075 -1.90735e-05V61.5016H134.718V-1.90735e-05H131.075Z" fill="#BEA0F2"/>
-<path id="Vector_19" d="M139.023 33.8951V61.5016H142.666V33.8951H139.023Z" fill="#BEA0F2"/>
-</g>
-<g id="Group_4">
-<path id="Vector_20" d="M216 72.7012H154.078V76.2668H216V72.7012Z" fill="#271B3D"/>
-<path id="Vector_21" d="M201.175 80.5304H154.078V84.096H201.175V80.5304Z" fill="#271B3D"/>
-</g>
-<path id="Vector_22" d="M180.941 80.5303H154.078V89.8891H180.941V80.5303Z" fill="#271B3D"/>
-<path id="Vector_23" d="M75.8039 95.2954H130.715C132.649 95.2954 134.219 96.854 134.219 98.7743C134.219 100.694 132.649 102.253 130.715 102.253H75.7966L75.8039 95.2954Z" fill="#BEA0F2"/>
-<path id="Vector_24" d="M159.498 76.3137C171.973 76.3137 182.121 86.3886 182.121 98.7742C182.121 111.16 171.973 121.235 159.498 121.235C147.022 121.235 136.874 111.16 136.874 98.7742C136.874 86.3886 147.022 76.3137 159.498 76.3137ZM159.498 69.8044C143.383 69.8044 130.318 82.7759 130.318 98.7742C130.318 114.773 143.383 127.744 159.498 127.744C175.612 127.744 188.678 114.773 188.678 98.7742C188.678 82.7759 175.612 69.8044 159.498 69.8044Z" fill="#BEA0F2"/>
-</g>
-<g id="Layer 4">
-<g id="Group_5">
-<path id="Vector_25" d="M216 0H154.078V61.5016H216V0Z" fill="#271B3D"/>
-<g id="Group_6">
-<path id="Vector_26" d="M193.082 19.3649H177.029V10.5521C184.533 14.049 193.082 10.5521 193.082 10.5521V19.3649Z" fill="#BEA0F2"/>
-<path id="Vector_27" d="M192.331 10.422C192.331 13.8574 190.976 17.3218 185.039 17.3218C179.102 17.3218 177.747 13.8574 177.747 10.422C169.653 10.422 160.03 16.2188 157.451 18.7792L164.889 30.3114L169.194 29.2084L169.26 52.5333H200.811L200.877 29.2084L205.182 30.3114L212.62 18.7792C210.041 16.2188 200.418 10.422 192.324 10.422H192.331Z" fill="white"/>
-</g>
-</g>
-<g id="Group_7">
-<g id="Group_8">
-<path id="Vector_28" d="M61.9224 90.7607H0V94.377H61.9224V90.7607Z" fill="#271B3D"/>
-<path id="Vector_29" d="M45.1451 98.6478H0V102.264H45.1451V98.6478Z" fill="#271B3D"/>
-</g>
-<path id="Vector_30" d="M61.9224 18.1392H0V79.6154H61.9224V18.1392Z" fill="#BEA0F2"/>
-</g>
-<path id="Vector_31" d="M8.29044 44.2556C9.77658 46.3892 18.2454 47.7019 25.1443 46.0204C23.221 42.7585 24.0297 41.1384 24.8565 41.0589C26.2042 40.9251 30.8739 45.1742 34.7167 46.9968C39.299 49.1701 43.5316 50.2875 46.9155 50.9421C56.9032 52.8804 56.3422 58.0806 56.0436 61.2629H6.47284C5.48208 56.1495 5.31452 48.6855 8.29044 44.2556Z" fill="white"/>
-<path id="Vector_32" d="M56.0361 57.6431H5.96997C6.08289 58.9232 6.25773 60.1491 6.47264 61.2629H56.0434C56.1417 60.2106 56.2655 58.9413 56.0324 57.6431H56.0361Z" fill="#271B3D"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_4824_20218">
-<rect width="216" height="136" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-designing-the-best-look.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-designing-the-best-look.svg
deleted file mode 100644
index 6110d2d5fa..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-designing-the-best-look.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="216" height="136" viewBox="0 0 216 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M209.249 86.6924H173.087C169.359 86.6924 166.336 89.6934 166.336 93.3953V129.297C166.336 132.999 169.359 136 173.087 136H209.249C212.978 136 216 132.999 216 129.297V93.3953C216 89.6934 212.978 86.6924 209.249 86.6924Z" fill="#BEA0F2"/>
-<path d="M190.12 120.091L187.869 114.687H176.556L174.304 120.091H173.178L181.631 99.9536H182.786L191.239 120.091H190.113H190.12ZM182.214 101.071L176.924 113.783H187.504L182.214 101.071Z" fill="#271B3D"/>
-<path d="M203.988 120.091V118.312C202.618 119.791 200.978 120.457 198.909 120.457C196.325 120.457 193.768 118.706 193.768 115.595C193.768 112.484 196.293 110.733 198.909 110.733C200.978 110.733 202.618 111.399 203.988 112.878V109.587C203.988 107.232 202.104 105.962 199.852 105.962C197.936 105.962 196.507 106.628 195.138 108.255L194.438 107.651C195.866 105.991 197.389 105.145 199.852 105.145C202.741 105.145 204.898 106.595 204.898 109.554V120.091H203.988ZM203.988 117.404V113.779C202.862 112.3 201.069 111.544 199.153 111.544C196.478 111.544 194.773 113.323 194.773 115.588C194.773 117.852 196.475 119.632 199.153 119.632C201.069 119.632 202.862 118.876 203.988 117.396V117.404Z" fill="#271B3D"/>
-<path d="M129.784 120.091L127.992 115.591H117.896L116.103 120.091H113.214L121.393 99.9536H124.527L132.677 120.091H129.788H129.784ZM122.942 102.522L118.654 113.392H127.259L122.942 102.522Z" fill="#271B3D"/>
-<path d="M144.413 120.091V118.431C143.229 119.758 141.524 120.453 139.549 120.453C137.086 120.453 134.441 118.793 134.441 115.624C134.441 112.455 137.057 110.824 139.549 110.824C141.557 110.824 143.229 111.457 144.413 112.784V110.158C144.413 108.226 142.832 107.109 140.704 107.109C138.941 107.109 137.512 107.713 136.204 109.131L135.14 107.561C136.722 105.929 138.605 105.145 141.01 105.145C144.144 105.145 146.698 106.534 146.698 110.064V120.088H144.417L144.413 120.091ZM144.413 117.013V114.235C143.531 113.056 141.979 112.455 140.398 112.455C138.237 112.455 136.747 113.783 136.747 115.624C136.747 117.465 138.237 118.825 140.398 118.825C141.979 118.825 143.531 118.221 144.413 117.013Z" fill="#271B3D"/>
-<path d="M215.92 0H112.507V10.8519H215.92V0Z" fill="#271B3D"/>
-<path d="M215.92 20.6909H112.507V31.5428H215.92V20.6909Z" fill="#271B3D"/>
-<path d="M180.655 43.3752H112.507V54.2272H180.655V43.3752Z" fill="#271B3D"/>
-<path d="M90.3437 124.11H0V129.536H90.3437V124.11Z" fill="#271B3D"/>
-<path d="M21.9448 121.024V132.625C21.9448 135.107 24.1091 135.92 26.7396 135.92C29.3702 135.92 31.5345 135.107 31.5345 132.625V121.024C31.5345 118.543 29.3702 117.729 26.7396 117.729C24.1091 117.729 21.9448 118.543 21.9448 121.024Z" fill="#BEA0F2"/>
-<path d="M90.3437 102.305H0V107.731H90.3437V102.305Z" fill="#271B3D"/>
-<path d="M60.5037 99.2192V110.82C60.5037 113.301 62.6679 114.115 65.2985 114.115C67.9291 114.115 70.0933 113.301 70.0933 110.82V99.2192C70.0933 96.7377 67.9291 95.9238 65.2985 95.9238C62.6679 95.9238 60.5037 96.7377 60.5037 99.2192Z" fill="#BEA0F2"/>
-<path d="M112.762 50.4471C108.415 50.4471 104.451 46.9672 103.581 47.8354C102.71 48.6999 106.211 52.6355 106.211 56.951C106.211 61.2664 102.706 65.2021 103.581 66.0666C104.455 66.9311 108.415 63.4549 112.762 63.4549C117.109 63.4549 121.073 66.9348 121.944 66.0666C122.814 65.2021 119.313 61.2664 119.313 56.951C119.313 52.6355 122.818 48.6999 121.944 47.8354C121.069 46.9708 117.109 50.4471 112.762 50.4471Z" fill="#BEA0F2"/>
-<path d="M128.603 72.343C130.222 70.7354 130.699 68.6031 129.669 67.5803C128.639 66.5575 126.491 67.0317 124.872 68.6392C123.253 70.2468 122.775 72.3792 123.805 73.4019C124.836 74.4247 126.983 73.9506 128.603 72.343Z" fill="#BEA0F2"/>
-<path d="M133.861 77.5667C134.968 76.4676 135.295 75.0098 134.59 74.3106C133.886 73.6113 132.418 73.9354 131.311 75.0344C130.204 76.1335 129.877 77.5913 130.581 78.2905C131.286 78.9898 132.754 78.6657 133.861 77.5667Z" fill="#BEA0F2"/>
-<path d="M88.9409 89.9298H2.84547C1.95282 89.9298 1.22412 89.21 1.22412 88.3201V2.8431C1.22412 1.95686 1.94917 1.2334 2.84547 1.2334H88.9409C89.8335 1.2334 90.5622 1.95324 90.5622 2.8431V88.3201C90.5622 89.2064 89.8372 89.9298 88.9409 89.9298ZM2.84547 1.59513C2.15321 1.59513 1.58847 2.15581 1.58847 2.8431V88.3201C1.58847 89.0074 2.15321 89.5681 2.84547 89.5681H88.9409C89.6331 89.5681 90.1979 89.0074 90.1979 88.3201V2.8431C90.1979 2.15581 89.6331 1.59513 88.9409 1.59513H2.84547Z" fill="#271B3D"/>
-<path d="M91.7829 1.42703C91.7829 0.638902 91.1394 0 90.3456 0C89.5517 0 88.9082 0.638902 88.9082 1.42703C88.9082 2.21515 89.5517 2.85406 90.3456 2.85406C91.1394 2.85406 91.7829 2.21515 91.7829 1.42703Z" fill="#271B3D"/>
-<path d="M2.8747 1.42703C2.8747 0.638902 2.23118 0 1.43735 0C0.643524 0 0 0.638902 0 1.42703C0 2.21515 0.643524 2.85406 1.43735 2.85406C2.23118 2.85406 2.8747 2.21515 2.8747 1.42703Z" fill="#271B3D"/>
-<path d="M91.7829 89.7146C91.7829 88.9265 91.1394 88.2876 90.3456 88.2876C89.5517 88.2876 88.9082 88.9265 88.9082 89.7146C88.9082 90.5027 89.5517 91.1417 90.3456 91.1417C91.1394 91.1417 91.7829 90.5027 91.7829 89.7146Z" fill="#271B3D"/>
-<path d="M2.8747 89.7146C2.8747 88.9265 2.23118 88.2876 1.43735 88.2876C0.643524 88.2876 0 88.9265 0 89.7146C0 90.5027 0.643524 91.1417 1.43735 91.1417C2.23118 91.1417 2.8747 90.5027 2.8747 89.7146Z" fill="#271B3D"/>
-<path d="M150.997 128.59H109.312V129.536H150.997V128.59Z" fill="#271B3D"/>
-<g clip-path="url(#clip0_4824_29746)">
-<path d="M34.0241 4.98413C28.7538 4.98413 24.1391 13.0249 21.6276 25.012C20.0688 13.0249 17.2109 4.98413 13.9324 4.98413C8.99608 4.98413 5 23.2855 5 45.8539C5 68.4223 8.99608 86.7237 13.9324 86.7237C17.1986 86.7237 20.0564 78.6829 21.6153 66.6958C24.1267 78.6829 28.7414 86.7237 34.0118 86.7237C38.7873 86.7237 43.0184 80.1382 45.6412 70.0009C49.8105 80.1382 56.5284 86.7237 64.0999 86.7237C76.7438 86.7237 86.9876 68.4223 86.9876 45.8539C86.9876 23.2855 76.7562 4.98413 64.1122 4.98413C56.5284 4.98413 49.8105 11.5697 45.6536 21.7069C43.0308 11.5697 38.7996 4.98413 34.0241 4.98413Z" fill="#BEA0F2"/>
-</g>
-<defs>
-<clipPath id="clip0_4824_29746">
-<rect width="82" height="81.7396" fill="white" transform="translate(5 4.98413)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-generating-content.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-generating-content.svg
deleted file mode 100644
index 688396dbb2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-generating-content.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg width="210" height="136" viewBox="0 0 210 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="209.78" height="136" transform="translate(0.110107)" fill="white"/>
-<path d="M201.543 18.6301V15.1413L198.656 14.7634C198.395 13.551 197.918 12.4201 197.267 11.4142L199.037 9.10577L196.572 6.64038L194.264 8.41093C193.258 7.75678 192.127 7.27998 190.912 7.02123L190.537 4.13428H187.049L186.671 7.02123C185.459 7.27998 184.328 7.75678 183.322 8.41093L181.014 6.64038L178.549 9.10577L180.319 11.4142C179.665 12.4201 179.188 13.551 178.93 14.7634L176.043 15.1413V18.6301L178.93 19.0081C179.188 20.2204 179.665 21.3514 180.319 22.3573L178.549 24.6657L181.014 27.1311L183.322 25.3605C184.328 26.0147 185.459 26.4915 186.671 26.7502L187.049 29.6343H190.537L190.915 26.7502C192.127 26.4915 193.258 26.0147 194.264 25.3605L196.572 27.1311L199.037 24.6657L197.267 22.3573C197.921 21.3514 198.398 20.2204 198.656 19.0081L201.543 18.6301Z" fill="#BEA0F2"/>
-<path d="M29.7446 4.134L29.7446 70.094H36.5446L36.5446 4.134H29.7446Z" fill="#271B3D"/>
-<path d="M27.7215 53.1251C29.8873 53.1251 30.5333 51.5271 33.1411 51.5271C35.7489 51.5271 36.3949 53.1251 38.5607 53.1251C40.8795 53.1251 41.6411 51.1055 41.6411 48.6507C41.6411 46.1959 40.8795 44.1763 38.5607 44.1763C36.3949 44.1763 35.7489 45.7743 33.1411 45.7743C30.5333 45.7743 29.8873 44.1763 27.7215 44.1763C25.4027 44.1763 24.6411 46.1959 24.6411 48.6507C24.6411 51.1055 25.4027 53.1251 27.7215 53.1251Z" fill="#BEA0F2"/>
-<path d="M106.87 102H66.0703V105.4H106.87V102Z" fill="#271B3D"/>
-<path d="M122.85 108.8H66.0703V112.2H122.85V108.8Z" fill="#271B3D"/>
-<path d="M123.928 123.42H66.1279V131.92H123.928V123.42Z" fill="#BEA0F2"/>
-<path d="M98.0303 115.6H66.0703V119H98.0303V115.6Z" fill="#271B3D"/>
-<path d="M205.868 80.3523V65.9363H181.691C181.691 65.9363 184.285 60.6391 184.285 54.7197C184.285 48.8003 180.46 42.8435 173.085 42.8435C165.711 42.8435 161.886 48.9907 161.886 54.7197C161.886 60.4487 164.48 65.9363 164.48 65.9363H146.803V75.0619V80.3523C137.994 75.3679 127.682 77.0543 127.682 87.4073C127.682 97.7603 137.994 99.4467 146.803 94.4623V108.878H164.48C164.48 108.878 161.886 114.176 161.886 120.095C161.886 126.014 165.711 131.971 173.085 131.971C180.46 131.971 184.285 125.824 184.285 120.095C184.285 114.366 181.691 108.878 181.691 108.878H205.868V94.4623C197.059 99.4467 186.746 97.7603 186.746 87.4073C186.746 77.0543 197.059 75.3679 205.868 80.3523Z" fill="#271B3D"/>
-<path d="M61.9902 74.1199H4.19019V131.92H61.9902V74.1199Z" fill="#BEA0F2"/>
-<path d="M22.4957 78.4377C27.7317 80.2737 29.0033 86.5161 29.0033 86.5161C29.0033 86.5161 31.7539 80.7361 40.1281 80.7565C36.2963 90.0521 31.5839 109.184 34.1407 116.14C36.7485 123.229 46.9315 120.316 46.7071 126.912H31.8763L27.9391 122.978L27.4291 122.985L28.0445 126.912H21.8837C20.3945 118.272 16.7123 98.4535 22.4923 78.4377H22.4957Z" fill="white"/>
-<path d="M50.0901 4.134L50.0901 70.094H56.8901L56.8901 4.134H50.0901Z" fill="#271B3D"/>
-<path d="M48.0706 31.171C50.2364 31.171 50.8824 29.573 53.4902 29.573C56.098 29.573 56.744 31.171 58.9098 31.171C61.2286 31.171 61.9902 29.1514 61.9902 26.6966C61.9902 24.2418 61.2286 22.2222 58.9098 22.2222C56.744 22.2222 56.098 23.8202 53.4902 23.8202C50.8824 23.8202 50.2364 22.2222 48.0706 22.2222C45.7518 22.2222 44.9902 24.2418 44.9902 26.6966C44.9902 29.1514 45.7518 31.171 48.0706 31.171Z" fill="#BEA0F2"/>
-<path d="M86.5822 43.1796C97.3794 43.1796 106.132 34.4268 106.132 23.6296C106.132 12.8324 97.3794 4.07959 86.5822 4.07959C75.7851 4.07959 67.0322 12.8324 67.0322 23.6296C67.0322 34.4268 75.7851 43.1796 86.5822 43.1796Z" fill="#271B3D"/>
-<path d="M86.5821 43.1795C91.9677 43.1795 96.8399 41.0035 100.376 37.4811C98.6011 30.5757 93.0999 25.5403 86.5821 25.5403C80.0643 25.5403 74.5631 30.5757 72.7883 37.4811C76.3243 41.0035 81.1999 43.1795 86.5821 43.1795Z" fill="#BEA0F2"/>
-<path d="M86.5822 23.2895C90.4636 23.2895 93.61 20.143 93.61 16.2617C93.61 12.3803 90.4636 9.23389 86.5822 9.23389C82.7009 9.23389 79.5544 12.3803 79.5544 16.2617C79.5544 20.143 82.7009 23.2895 86.5822 23.2895Z" fill="#BEA0F2"/>
-<path d="M25.1306 84.5918C31.8864 94.5708 31.0772 113.257 26.2526 113.444C20.7276 113.658 23.6482 93.3604 34.4432 87.1588" stroke="#261B3C" stroke-width="0.34" stroke-miterlimit="10"/>
-<path d="M9.39551 4.134L9.39551 70.094H16.1955L16.1955 4.134H9.39551Z" fill="#271B3D"/>
-<path d="M7.37605 40.9935C9.54185 40.9935 10.1879 39.3955 12.7957 39.3955C15.4035 39.3955 16.0495 40.9935 18.2153 40.9935C20.5341 40.9935 21.2957 38.9739 21.2957 36.5191C21.2957 34.0643 20.5341 32.0447 18.2153 32.0447C16.0495 32.0447 15.4035 33.6427 12.7957 33.6427C10.1879 33.6427 9.54185 32.0447 7.37605 32.0447C5.05725 32.0447 4.29565 34.0643 4.29565 36.5191C4.29565 38.9739 5.05725 40.9935 7.37605 40.9935Z" fill="#BEA0F2"/>
-<path d="M23.1044 80.835C19.1298 105.07 21.4316 117.246 23.5226 125.27" stroke="#271B3D" stroke-width="0.34" stroke-miterlimit="10"/>
-<path d="M31.5839 106.978C31.5839 106.978 29.2821 116.909 37.1395 122.183" stroke="#271B3D" stroke-width="0.34" stroke-miterlimit="10"/>
-<path d="M205.279 30.6477C197.136 37.9611 177.685 36.7269 172.15 24.1401" stroke="#271B3D" stroke-width="0.34" stroke-miterlimit="10"/>
-<path d="M135.1 37.7569L151.532 43.3195L166.455 33.8304L168.634 16.4275L156.426 4.21948L139.027 6.39864L129.534 21.3222L135.1 37.7569Z" fill="#BEA0F2"/>
-<path d="M157.736 15.1218L139.897 32.9565" stroke="#271B3D" stroke-width="0.34" stroke-miterlimit="10"/>
-<path d="M112.65 65.96H66.7502V74.12H112.65V65.96Z" fill="#271B3D"/>
-<path d="M112.65 74.1199H66.7502V94.8599H112.65V74.1199Z" fill="#BEA0F2"/>
-<path d="M72.0985 71.5494C72.9848 71.5494 73.7033 70.831 73.7033 69.9446C73.7033 69.0583 72.9848 68.3398 72.0985 68.3398C71.2121 68.3398 70.4937 69.0583 70.4937 69.9446C70.4937 70.831 71.2121 71.5494 72.0985 71.5494Z" fill="white"/>
-<path d="M77.8272 71.5494C78.7135 71.5494 79.432 70.831 79.432 69.9446C79.432 69.0583 78.7135 68.3398 77.8272 68.3398C76.9409 68.3398 76.2224 69.0583 76.2224 69.9446C76.2224 70.831 76.9409 71.5494 77.8272 71.5494Z" fill="white"/>
-<path d="M67.0901 57.12C67.0901 55.2609 68.5249 53.7482 70.3099 53.72H138.34C140.146 53.72 141.611 55.2433 141.611 57.12C141.611 58.9967 140.146 60.52 138.34 60.52H70.3031C68.5249 60.52 67.0901 58.979 67.0901 57.12Z" fill="#BEA0F2"/>
-<path d="M70.3031 60.52H120.361V53.72H70.3099C68.5283 53.7482 67.0901 55.2609 67.0901 57.12C67.0901 58.979 68.5215 60.52 70.3031 60.52Z" fill="#271B3D"/>
-<path d="M188.95 21.0189C191.468 21.0189 193.509 18.9776 193.509 16.4595C193.509 13.9415 191.468 11.9001 188.95 11.9001C186.431 11.9001 184.39 13.9415 184.39 16.4595C184.39 18.9776 186.431 21.0189 188.95 21.0189Z" fill="white"/>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-opening-the-doors.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-opening-the-doors.svg
deleted file mode 100644
index 2f352d2405..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-opening-the-doors.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="210" height="136" viewBox="0 0 210 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="209.829" height="136" transform="translate(0.0856934)" fill="white"/>
-<path d="M143.939 4.08008H81.0244V24.4801H143.939V4.08008Z" fill="#BEA0F2"/>
-<path d="M66.0609 4.08008H24.9114V7.48008H66.0609V4.08008Z" fill="#271B3D"/>
-<path d="M56.1986 17.6802H24.9114V21.0802H56.1986V17.6802Z" fill="#271B3D"/>
-<path d="M76.9434 10.8804H25.2515V14.2804H76.9434V10.8804Z" fill="#271B3D"/>
-<path d="M12.6685 21.0801C17.364 21.0801 21.1704 17.2745 21.1704 12.5801C21.1704 7.88566 17.364 4.08008 12.6685 4.08008C7.97296 4.08008 4.1665 7.88566 4.1665 12.5801C4.1665 17.2745 7.97296 21.0801 12.6685 21.0801Z" fill="#271B3D"/>
-<path d="M37.7595 103.02C37.7595 98.3705 41.3508 94.5907 45.8058 94.52H105.738C110.254 94.52 113.913 98.3245 113.913 103.02C113.913 107.716 110.254 111.52 105.738 111.52H45.7922C41.344 111.52 37.7595 107.662 37.7595 103.02Z" fill="#BEA0F2"/>
-<path d="M45.7922 111.52H83.2995V94.52H45.8058C41.3508 94.5907 37.7595 98.3705 37.7595 103.02C37.7595 107.666 41.3406 111.52 45.7922 111.52Z" fill="#271B3D"/>
-<path d="M205.769 65.96H147.955V69.36H205.769V65.96Z" fill="#271B3D"/>
-<path d="M176.862 72.7598H147.955V76.1598H176.862V72.7598Z" fill="#271B3D"/>
-<path d="M139.827 16.7449L140.188 7.86409L125.949 22.1985L125.245 21.4947L139.569 7.27249L130.72 7.63289L130.605 6.66729L141.011 6.35449L141.093 6.43609L140.797 16.8571L139.831 16.7415L139.827 16.7449Z" fill="black"/>
-<path d="M205.833 95.54H120.814V131.92H205.833V95.54Z" fill="#BEA0F2"/>
-<path d="M205.769 4.08008H147.955V61.8801H205.769V4.08008Z" fill="#271B3D"/>
-<path d="M195.577 31.4619V25.1052H192.553V31.4619H188.913V28.2835H185.889V31.4619H174.01C173.281 26.7444 169.207 23.1196 164.304 23.1196C158.89 23.1196 154.481 27.5407 154.481 32.9796C154.481 38.4185 158.886 42.8396 164.304 42.8396C169.207 42.8396 173.281 39.2185 174.01 34.4974H199.032V31.4619H195.581H195.577ZM164.301 39.8041C160.555 39.8041 157.506 36.7436 157.506 32.9832C157.506 29.2228 160.555 26.1623 164.301 26.1623C168.047 26.1623 171.096 29.2228 171.096 32.9832C171.096 36.7436 168.047 39.8041 164.301 39.8041Z" fill="white"/>
-<path d="M80.783 74.5077C91.5827 74.5077 100.338 65.7549 100.338 54.9577C100.338 44.1606 91.5827 35.4077 80.783 35.4077C69.9834 35.4077 61.2285 44.1606 61.2285 54.9577C61.2285 65.7549 69.9834 74.5077 80.783 74.5077Z" fill="#BEA0F2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M83.7965 55.3466C85.7648 54.1463 88.1051 52.1176 88.1051 48.7635C88.1051 44.3341 84.7198 41.5649 80.7832 41.5649C76.8466 41.5649 73.4612 44.3341 73.4612 48.7635C73.4612 52.1142 75.7981 54.1463 77.7698 55.3466L72.4771 67.5764H89.0926L83.7999 55.3466H83.7965Z" fill="#271B3D"/>
-<path d="M191.438 117.633C189.918 119.133 185.415 122.811 182.875 121.846C182.572 121.73 182.364 121.526 182.228 121.21C181.582 119.711 182.439 116.107 184.776 110.493L183.572 109.732C183.344 109.983 179.008 114.781 175.614 119.109L177.96 110.609L176.644 110.041C176.624 110.072 174.679 113.268 172.179 116.307C169.054 120.112 166.401 122.043 164.721 121.754C164.252 121.672 163.878 121.417 163.606 120.992C163.357 120.601 163.204 120.088 163.147 119.486C167 118.405 170.349 116.056 171.155 113.424C171.482 112.356 171.363 111.323 170.822 110.595C170.451 110.092 169.714 109.494 168.306 109.494C165.252 109.494 162.977 112.87 162.072 116.219C161.868 116.97 161.745 117.691 161.698 118.361C160.773 118.555 159.841 118.657 158.936 118.67C159.215 118.109 159.464 117.528 159.674 116.95C160.678 114.209 161.045 110.898 159.069 109.817C157.869 109.16 155.774 109.432 153.332 111.85L153.774 110.201L152.635 109.443C151.383 110.412 149.897 111.173 148.377 111.683C148.547 111.064 148.69 110.446 148.795 109.84C149.55 105.529 148.435 102.425 145.738 101.317C143.83 100.535 141.555 100.966 139.804 102.449C137.841 104.111 136.964 106.658 137.515 109.096C137.988 111.187 139.29 112.669 141.283 113.383C142.759 113.914 144.459 113.971 146.17 113.706C144.425 118.014 141.429 121.608 139.076 121.706C138.205 121.74 137.494 121.383 136.94 120.639C135.532 118.748 135.491 114.998 136.842 111.078L135.474 110.605C133.951 115.029 134.066 119.204 135.78 121.499C136.627 122.635 137.784 123.202 139.137 123.145C142.5 123.002 146.054 118.31 147.846 113.339C149.282 112.948 150.673 112.36 151.887 111.663L147.707 127.245L149.105 127.619L151.101 120.183C151.23 120.829 151.441 121.428 151.761 121.921C152.199 122.594 152.801 123.012 153.546 123.162C153.713 123.196 153.876 123.213 154.039 123.213C155.529 123.213 156.981 121.88 158.127 120.091C159.314 120.142 160.535 120.04 161.732 119.809C161.827 120.561 162.045 121.217 162.388 121.757C162.881 122.529 163.602 123.015 164.476 123.168C166.762 123.563 169.734 121.56 173.308 117.205C174.067 116.283 174.767 115.355 175.383 114.505L173.196 122.431L174.488 123.032C176.413 120.238 179.678 116.362 181.987 113.703C180.603 117.671 180.259 120.275 180.906 121.768C181.198 122.451 181.691 122.927 182.368 123.185C182.827 123.359 183.313 123.437 183.81 123.437C187.493 123.437 191.91 119.197 192.461 118.65L191.445 117.62L191.438 117.633ZM163.466 116.593C164.201 113.869 166.027 110.939 168.302 110.939C168.748 110.939 169.343 111.027 169.656 111.452C169.921 111.809 169.962 112.373 169.771 112.999C169.336 114.424 167.707 115.947 165.415 117.079C164.697 117.433 163.949 117.732 163.187 117.97C163.245 117.531 163.337 117.072 163.466 116.593ZM147.37 109.592C147.221 110.439 147.006 111.292 146.741 112.132C144.905 112.523 143.13 112.516 141.773 112.03C140.249 111.483 139.29 110.391 138.926 108.783C138.409 106.498 139.521 104.584 140.739 103.557C141.657 102.782 142.715 102.374 143.745 102.374C144.238 102.374 144.728 102.466 145.19 102.656C147.948 103.785 147.741 107.488 147.37 109.592ZM153.828 121.757C153.468 121.683 153.193 121.489 152.965 121.142C151.995 119.66 152.424 116.205 152.703 114.815C154.753 112.03 157.178 110.429 158.375 111.088C159.294 111.591 159.27 113.849 158.317 116.457C157.151 119.646 155.134 122.029 153.828 121.761V121.757Z" fill="#271B3D"/>
-<path d="M122.708 97.1278L163.279 84.167" stroke="#261B3C" stroke-width="0.961714" stroke-miterlimit="10"/>
-<path d="M203.511 97.1278L163.279 84.167" stroke="#261B3C" stroke-width="0.961714" stroke-miterlimit="10"/>
-<path d="M163.181 85.7721C164.067 85.7721 164.786 85.0536 164.786 84.1673C164.786 83.281 164.067 82.5625 163.181 82.5625C162.294 82.5625 161.575 83.281 161.575 84.1673C161.575 85.0536 162.294 85.7721 163.181 85.7721Z" fill="#271B3D"/>
-<path d="M196.311 11.1056L201.412 17.0001V4.08008H191.21V17.0001L196.311 11.1056Z" fill="#BEA0F2"/>
-<path d="M22.1228 55.1958C11.8354 55.1958 4.28223 63.2062 4.28223 73.0322C4.28223 78.581 6.59136 83.5042 11.2436 87.013C14.9811 89.8316 17.0692 90.923 17.0692 95.7918V127.949L22.0479 131.862V131.92L22.0853 131.89L22.1228 131.92V131.862L27.1015 127.949V121.489L23.5341 117.922L26.6934 114.764L23.5341 111.605L26.6934 108.447L23.5341 105.288L27.1015 101.721V95.7884C27.1015 90.9196 29.1896 89.8282 32.9271 87.0096C37.5759 83.5008 39.8885 78.5776 39.8885 73.0288C39.8885 63.2028 32.4101 55.1924 22.1262 55.1924L22.1228 55.1958ZM22.0853 71.8524C19.1505 71.8524 16.7733 69.4758 16.7733 66.5416C16.7733 63.6074 19.1505 61.2308 22.0853 61.2308C25.0202 61.2308 27.3974 63.6074 27.3974 66.5416C27.3974 69.4758 25.0202 71.8524 22.0853 71.8524Z" fill="#271B3D"/>
-<path d="M18.6746 62.4718L18.678 62.4683V62.4648L18.6746 62.4718Z" fill="#BEA0F2"/>
-<path d="M36.8924 35.4043C26.0336 35.4043 17.229 44.2069 17.229 55.0631C17.229 55.3215 17.2358 55.5799 17.246 55.8349C18.4703 55.5051 19.7524 55.2943 21.0855 55.2229C21.0855 55.1685 21.0821 55.1175 21.0821 55.0631C21.0821 46.3489 28.1727 39.2599 36.889 39.2599C45.6052 39.2599 52.6958 46.3489 52.6958 55.0631C52.6958 63.7773 45.6052 70.8663 36.889 70.8663C30.3628 70.8663 24.7515 66.8951 22.3404 61.2409C22.2554 61.2375 22.1703 61.2273 22.0819 61.2273C20.7862 61.2273 19.5994 61.6931 18.6777 62.4649C21.6024 69.6525 28.6522 74.7219 36.8924 74.7219C47.7511 74.7219 56.5557 65.9193 56.5557 55.0631C56.5557 44.2069 47.7511 35.4043 36.8924 35.4043Z" fill="#BEA0F2"/>
-<g clip-path="url(#clip0_7234_132480)">
-<path d="M124.311 44.9368C129.999 44.9368 134.629 49.5618 134.629 55.2519C134.629 60.9419 130.003 65.567 124.311 65.567C118.62 65.567 113.994 60.9419 113.994 55.2519C113.994 49.5618 118.62 44.9368 124.311 44.9368ZM124.311 35.7002C113.514 35.7002 104.759 44.4533 104.759 55.2485C104.759 66.0437 113.514 74.7968 124.311 74.7968C135.109 74.7968 143.864 66.0437 143.864 55.2485C143.864 44.4533 135.112 35.7002 124.311 35.7002Z" fill="#271B3D"/>
-<path d="M114.636 38.2629L119.29 46.2452C120.778 45.4135 122.489 44.9334 124.311 44.9334V35.7002C120.791 35.7002 117.491 36.6367 114.636 38.2629Z" fill="#BEA0F2"/>
-</g>
-<g clip-path="url(#clip1_7234_132480)">
-<path d="M37.8342 123.418C37.8342 118.77 41.4255 114.994 45.8805 114.92H105.813C110.329 114.92 113.988 118.724 113.988 123.418C113.988 128.113 110.329 131.916 105.813 131.916H45.8669C41.4153 131.916 37.8342 128.063 37.8342 123.418Z" fill="#BEA0F2"/>
-<path d="M37.8342 123.418C37.8342 118.77 41.4255 114.994 45.8805 114.92H105.813C110.329 114.92 113.988 118.724 113.988 123.418C113.988 128.113 110.329 131.916 105.813 131.916H45.8669C41.4153 131.916 37.8342 128.063 37.8342 123.418Z" fill="#BEA0F2"/>
-<path d="M56.083 131.916H61.6603L68.3803 114.92H62.803L56.083 131.916Z" fill="#271B3D"/>
-<path d="M78.3037 131.916H83.881L90.601 114.92H85.0237L78.3037 131.916Z" fill="#271B3D"/>
-<path d="M73.9133 114.92L67.1934 131.916H72.7707L79.4906 114.92H73.9133Z" fill="#271B3D"/>
-<path d="M57.2698 114.92H51.6925L44.9929 131.863C45.2786 131.895 45.5711 131.916 45.8669 131.916H50.5498L57.2698 114.92Z" fill="#271B3D"/>
-<path d="M40.3576 129.59L46.1594 114.92H45.8839C42.83 114.969 40.1876 116.758 38.8205 119.371L38.1607 121.036C37.9499 121.792 37.8342 122.591 37.8342 123.418C37.8342 125.833 38.8035 128.031 40.3576 129.587V129.59Z" fill="#271B3D"/>
-</g>
-<defs>
-<clipPath id="clip0_7234_132480">
-<rect width="39.1091" height="39.1" fill="white" transform="translate(104.759 35.7002)"/>
-</clipPath>
-<clipPath id="clip1_7234_132480">
-<rect width="76.1538" height="17" fill="white" transform="translate(37.8342 114.92)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-turning-lights.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-turning-lights.svg
deleted file mode 100644
index 8c07ed382a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/loader-turning-lights.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-<svg width="210" height="136" viewBox="0 0 210 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1345_11791)">
-<rect width="209.829" height="136" transform="translate(0.0859375)"/>
-<path d="M172.091 48.5791C151.611 48.5791 138.348 59.3299 138.348 75.8539C138.348 96.4511 160.181 99.2459 160.181 109.98H184C184 99.2425 205.833 96.4511 205.833 75.8539C205.833 59.3299 192.567 48.5791 172.091 48.5791Z" fill="#BEA0F2"/>
-<path d="M38.049 4.10718C13.8864 4.10718 0.313868 22.7562 5.13278 36.788C10.387 52.1152 26.6224 59.1056 26.6224 79.254H49.4825C49.4825 59.1056 65.7144 52.1152 70.972 36.788C75.7875 22.7562 62.215 4.10718 38.049 4.10718Z" fill="#BEA0F2"/>
-<path d="M48.6696 46.8928C43.0821 46.8928 39.7969 50.5784 39.7969 56.2768V56.984C39.4024 56.984 38.9943 56.984 38.6066 56.9874H37.8653C37.3007 56.9874 36.964 56.9874 36.3043 56.9874V56.2802C36.3043 50.5784 33.0191 46.8928 27.4316 46.8928C22.4563 46.8928 19.603 48.7696 19.603 52.0336C19.603 54.485 21.9904 56.1408 26.7005 56.9568C29.5809 57.4566 32.373 57.579 35.131 57.6062V79.2506H36.3043V57.6096C36.964 57.613 37.2973 57.613 37.8653 57.6096C38.4298 57.6096 39.1371 57.6096 39.7969 57.6096V79.2472H40.9702V57.6028C43.7282 57.5756 46.5203 57.4532 49.4007 56.9534C54.1108 56.1374 56.4982 54.4816 56.4982 52.0302C56.4982 48.7628 53.6449 46.8894 48.6696 46.8894V46.8928ZM35.1344 56.9772C32.4036 56.9466 29.649 56.8276 26.8195 56.338C22.4631 55.5832 21.283 53.7914 21.283 51.9248C21.283 48.586 24.7552 47.5218 27.4384 47.5218C32.4342 47.5218 35.1378 50.9592 35.1378 56.2768V56.9806L35.1344 56.9772ZM49.2851 56.338C46.4522 56.8276 43.701 56.95 40.9702 56.9772V56.2734C40.9702 50.9558 43.6738 47.5184 48.6696 47.5184C51.3494 47.5184 54.8216 48.5826 54.8216 51.9214C54.8216 53.788 53.6381 55.5798 49.2817 56.3346L49.2851 56.338Z" fill="white"/>
-<path d="M205.834 4.08008H149.802L144.279 50.3575L155.669 38.3487H201.64L205.834 4.08008Z" fill="#271B3D"/>
-<path d="M125.888 103.146C122.317 98.1377 120.267 95.7339 116.237 95.7339C111.816 95.7339 109.874 100.739 112.53 103.867C115.451 107.307 125.939 110.898 125.939 110.898C125.939 110.898 102.865 107.828 96.8862 107.828C93.5874 107.828 90.207 109.902 90.207 113.839C90.207 117.776 93.5874 119.85 96.8862 119.85C102.865 119.85 125.939 116.78 125.939 116.78C125.939 116.78 115.448 120.37 112.53 123.811C109.877 126.939 111.816 131.944 116.237 131.944C120.27 131.944 122.321 129.543 125.888 124.532C127.099 122.835 133.247 113.835 133.247 113.835C133.247 113.835 127.099 104.839 125.888 103.139V103.146Z" fill="#271B3D"/>
-<path d="M75.9232 82.6199L134.077 82.6199V65.6199H75.9232V82.6199Z" fill="#BEA0F2"/>
-<path d="M117.073 65.6199H75.9233V69.0199H117.073V65.6199Z" fill="#271B3D"/>
-<path d="M133.907 72.4539H76.0933V75.8539H133.907V72.4539Z" fill="#271B3D"/>
-<path d="M108.571 79.22H75.9233V82.62H108.571V79.22Z" fill="#271B3D"/>
-<path d="M84.0852 95.54H47.6968V131.92H84.0852V95.54Z" fill="#BEA0F2"/>
-<path d="M68.5095 120.068L75.0459 114.043L54.8384 114.114V113.118L75.0255 113.186L68.5129 107.185L69.1149 106.42L76.6952 113.557V113.672L69.1149 120.833L68.5129 120.068H68.5095Z" fill="#271B3D"/>
-<path d="M166.527 19.9988L170.618 31.79L190.659 9.42139" stroke="white" stroke-width="0.971429" stroke-miterlimit="10"/>
-<path d="M181.45 88.3354C181.45 82.3616 177.872 78.6454 172.111 78.625C172.111 78.625 172.098 78.625 172.091 78.625C172.084 78.625 172.077 78.625 172.07 78.625C166.31 78.6454 162.732 82.8342 162.732 88.3354C162.732 93.8366 166.116 96.4512 170.941 99.892C168.02 102.619 166.456 106.933 166.456 109.976H168.911C168.911 107.154 169.452 103.153 172.091 100.786C174.733 103.153 175.271 107.154 175.271 109.976H177.726C177.726 106.933 176.158 102.615 173.24 99.892C178.066 96.4512 181.45 93.5374 181.45 88.3354ZM172.091 99.2426C167.306 95.8494 163.834 93.6904 163.834 88.3354C163.834 82.9804 167.133 79.6246 172.091 79.6144C177.049 79.6246 180.348 83.1606 180.348 88.3354C180.348 92.9764 176.876 95.8494 172.091 99.2426Z" fill="#271B3D"/>
-<path d="M40.8955 123.76C40.8955 128.224 37.3023 131.852 32.8448 131.92H12.347C7.83168 131.923 4.16699 128.268 4.16699 123.76C4.16699 119.252 7.82827 115.6 12.347 115.6H32.855C37.3057 115.6 40.8921 119.303 40.8921 123.76H40.8955Z" fill="#BEA0F2"/>
-<path d="M32.628 129.54C35.821 129.54 38.4094 126.952 38.4094 123.76C38.4094 120.568 35.821 117.98 32.628 117.98C29.4351 117.98 26.8467 120.568 26.8467 123.76C26.8467 126.952 29.4351 129.54 32.628 129.54Z" fill="#271B3D"/>
-<path d="M133.907 4.10718H76.0938V61.9072H133.907V4.10718Z" fill="#271B3D"/>
-<path d="M116.974 42.1361C116.974 38.1377 114.529 34.3093 109.731 31.6981H124.67L110.731 8.70728H99.2733L85.3335 31.6981H100.273C95.4746 34.3093 93.0295 38.1377 93.0295 42.1361C93.0295 46.6615 96.5765 51.2277 101.253 53.6723C94.7843 52.3667 93.7709 57.3001 93.7709 57.3001H116.24C116.24 57.3001 115.226 52.3667 108.758 53.6723C113.434 51.2277 116.981 46.6615 116.981 42.1361H116.974Z" fill="white"/>
-<path d="M105 8.71069H99.2733L85.3301 31.6981H100.27H109.731H124.67L110.727 8.71069H105Z" fill="#BEA0F2"/>
-<path d="M120.032 24.0515H89.9688L85.3301 31.6981L120.032 24.0515Z" fill="white"/>
-<path d="M115.393 16.4016H94.6074L89.9688 24.0516L115.393 16.4016Z" fill="white"/>
-<path d="M110.727 8.71069H99.2733L94.6074 16.4015L110.727 8.71069Z" fill="white"/>
-<path d="M46.5747 25.2382C55.6174 16.0378 63.8337 12.7433 73.0634 11.2812" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
-<path d="M68.6966 28.6041L46.9111 11.0737" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
-<path d="M55.6172 34.136C58.5793 24.854 59.6607 12.8928 57.7529 4.10376" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
-<path d="M21.4053 79.2539V82.6539H26.6187C26.6187 82.6981 26.6187 83.8779 26.6187 83.9187C26.6969 89.4913 31.9035 94.4893 38.0487 94.4893C44.1939 94.4893 49.3903 89.5015 49.4788 83.9323C49.4788 83.8847 49.4788 82.7015 49.4788 82.6539H54.6922V79.2539H21.4053Z" fill="#271B3D"/>
-<path d="M188.391 113.38V109.98H155.788V113.38H160.178C160.178 113.628 160.178 114.213 160.178 114.944H155.788V118.344H160.178C160.178 119.405 160.178 120.258 160.178 120.282C160.178 125.708 164.793 131.947 172.091 131.947C179.389 131.947 184.004 125.705 184.004 120.282C184.004 120.255 184.004 119.425 184.004 118.344H188.394V114.944H184.004C184.004 114.213 184.004 113.631 184.004 113.38H188.391Z" fill="#271B3D"/>
-</g>
-<defs>
-<clipPath id="clip0_1345_11791">
-<rect width="209.829" height="136" fill="white" transform="translate(0.0859375)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/no-blocks.png b/plugins/woocommerce/client/admin/client/customize-store/assets/images/no-blocks.png
deleted file mode 100644
index 9935ad9951..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/assets/images/no-blocks.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/professional-theme.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/professional-theme.svg
deleted file mode 100644
index 4eb4fe98ac..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/professional-theme.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="603" height="364" viewBox="0 0 603 364" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="603" height="364" fill="url(#pattern0_1249_4)"/>
-<defs>
-<pattern id="pattern0_1249_4" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_1249_4" transform="scale(0.00165837 0.00274725)"/>
-</pattern>
-<image id="image0_1249_4" width="603" height="364" xlink:href="data:image/png;base64,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"/>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/sidebar-theme-banner.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/sidebar-theme-banner.svg
deleted file mode 100644
index e423391364..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/sidebar-theme-banner.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="122" height="178" viewBox="0 0 122 178" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2002_1007)">
-<path d="M15.3818 139.905C-5.23211 129.083 -3.73574 91.501 18.7334 55.9686C41.2012 20.431 76.1227 0.395978 96.7421 11.216C109.719 18.0284 113.928 35.4392 109.673 56.2666C148.034 13.9761 194.983 -6.57387 225.081 9.22235C255.181 25.0237 259.22 72.3363 238.31 123.796C255.947 109.99 274.589 104.579 287.566 111.391C308.179 122.213 306.683 159.795 284.214 195.327C261.746 230.865 226.823 250.895 206.209 240.073C193.233 233.261 189.024 215.85 193.278 195.023C154.912 237.315 107.963 257.865 77.8705 242.067C47.7706 226.266 43.731 178.953 64.6417 127.493C47.0046 141.3 28.3628 146.71 15.386 139.898L15.3818 139.905Z" fill="#DFD1FB" fill-opacity="0.3"/>
-<path d="M11.7106 105.305L77.0381 105.305C81.2212 105.305 84.6123 101.914 84.6123 97.7312L84.6123 44.756C84.6123 40.5729 81.2212 37.1818 77.0381 37.1818L11.7106 37.1818C7.52752 37.1818 4.13644 40.5729 4.13644 44.756L4.13645 97.7312C4.13645 101.914 7.52753 105.305 11.7106 105.305Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.7402 57.7583C14.7402 59.3618 16.0401 60.6617 17.6437 60.6617C19.2472 60.6617 20.5471 59.3618 20.5471 57.7583C20.5471 56.1548 19.2472 54.8549 17.6437 54.8549C16.0401 54.8549 14.7402 56.1548 14.7402 57.7583Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M25.5966 57.6321H42.5123" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M57.9132 57.6321L63.4676 57.6321" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M68.0121 57.6321L73.5665 57.6321" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M73.5665 65.9637H14.7402V84.8992H73.5665V65.9637Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.4978 91.716H28.7905" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M29.1228 98.2803H42.4155" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.4977 98.2803H23.8056" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M34.1077 91.716H42.4156" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M84.6125 48.4526L84.6124 44.756C84.6124 40.5725 81.2217 37.1818 77.0382 37.1818H11.7108C7.52731 37.1818 4.1366 40.5725 4.1366 44.756L4.13666 48.4526H84.6125Z" fill="#A77EFF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.41858 46.0184V43.9429C7.41858 41.9206 8.26151 40.2115 11.15 40.2115H13.2255C10.018 40.2115 7.41858 42.8109 7.41858 46.0184Z" fill="#F2EDFF" stroke="#F2EDFF" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M84.2968 74.4215L84.2968 87.2976L74.3597 92.9149C72.9649 93.7033 71.3026 93.8677 69.7804 93.3677L69.7762 93.7302C69.7625 94.9265 69.1641 96.0403 68.1742 96.7122C67.3442 97.2755 66.2728 97.3405 65.3808 96.8816L64.0667 96.2055C63.5228 98.0653 61.8073 99.3356 59.8697 99.3133L52.4175 99.2276L84.2968 74.4215Z" fill="#2C045D"/>
-<path d="M52.2676 90.6645C56.7861 85.1329 65.1576 88.835 62.1319 95.8125C61.0773 98.0297 59.2984 98.3875 56.9941 98.4344C55.001 98.4744 53.1575 99.5347 52.3734 100.548C52.0537 100.961 51.4772 100.84 51.3343 100.332C50.7742 98.3355 49.1019 94.5428 52.2676 90.6645Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M66.7077 93.9775C68.6822 92.3097 68.3897 88.7165 66.0544 85.9519C63.7191 83.1873 60.2254 82.2982 58.2509 83.9661C56.2764 85.6339 56.5689 89.2272 58.9042 91.9917C61.2394 94.7563 64.7332 95.6454 66.7077 93.9775Z" fill="#B999FF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M93.6758 62.6197C91.4032 59.9294 87.3127 59.7653 84.8331 62.2652L62.3491 84.2309C62.2567 84.3243 62.1881 84.4399 62.1571 84.5678C61.9679 85.3518 62.5221 86.7408 63.6041 88.0216C64.686 89.3024 65.961 90.081 66.7674 90.0257C66.8987 90.0165 67.0242 89.9682 67.1316 89.8926L92.5471 71.3972C95.4263 69.3704 95.9483 65.31 93.6758 62.6197Z" fill="#B999FF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M92.5471 71.3949L89.5995 73.4692C88.4885 74.0634 86.1799 72.8283 84.267 70.5618C82.3841 68.3327 81.5471 65.8901 82.2586 64.8651L84.8385 62.2651C87.3181 59.7652 91.4086 59.9293 93.6795 62.6177C95.9521 65.308 95.4282 69.3682 92.5491 71.3932L92.5471 71.3949Z" fill="#2C045D" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M89.5559 73.4916L86.4449 75.6717C84.9093 75.5425 83.0803 74.5077 81.6288 72.7894C80.1773 71.071 79.4656 69.1061 79.5909 67.5738L82.2342 64.8983C81.5615 65.9431 82.4027 68.3585 84.2655 70.5638C86.1284 72.7691 88.429 74.033 89.5575 73.4936L89.5559 73.4916Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M88.8494 65.2603C90.4559 65.3955 91.8217 64.7506 91.9 63.8198C91.9784 62.889 90.7396 62.0249 89.1332 61.8896C87.5268 61.7544 86.161 62.3993 86.0826 63.3301C86.0043 64.2609 87.243 65.125 88.8494 65.2603Z" fill="#F2EDFF"/>
-<path d="M62.1802 95.2388C61.1238 97.4558 59.3467 97.8137 57.0423 97.8606C55.0492 97.9024 53.2056 98.9627 52.4216 99.9761C52.1 100.389 51.5235 100.268 51.3806 99.7598C51.0556 98.596 50.3518 96.8211 50.4486 94.7752C50.1717 97.0597 50.9781 99.0584 51.3325 100.331C51.4754 100.84 52.0519 100.96 52.3734 100.548C53.1575 99.5342 55.0011 98.4739 56.9942 98.4321C59.2986 98.3852 61.0757 98.0272 62.1321 95.8102C62.3214 95.3738 62.4657 94.9483 62.57 94.5397C62.5343 94.5275 62.4967 94.5151 62.4609 94.5029C62.3817 94.7445 62.2893 94.9905 62.1802 95.2388Z" fill="#2C045D" stroke="#2C045D" stroke-width="1.70386" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_2002_1007">
-<rect width="122" height="178" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/welcome-tour.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/welcome-tour.svg
deleted file mode 100644
index fb5ba17e60..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/assets/images/welcome-tour.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="160" height="90" viewBox="0 0 160 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Layer_4" clip-path="url(#clip0_3551_284196)">
-<g id="Group">
-<g id="Group_2">
-<path id="Vector" d="M159.06 0.919983H101.92V58.06H159.06V0.919983Z" stroke="#271B3D" stroke-width="0.5" stroke-miterlimit="10"/>
-<path id="Vector_2" d="M159.08 0H159.01C158.519 0 158.12 0.398467 158.12 0.89V0.96C158.12 1.45153 158.519 1.85 159.01 1.85H159.08C159.572 1.85 159.97 1.45153 159.97 0.96V0.89C159.97 0.398467 159.572 0 159.08 0Z" fill="#271B3D"/>
-<path id="Vector_3" d="M101.98 0H101.91C101.418 0 101.02 0.398467 101.02 0.89V0.96C101.02 1.45153 101.418 1.85 101.91 1.85H101.98C102.472 1.85 102.87 1.45153 102.87 0.96V0.89C102.87 0.398467 102.472 0 101.98 0Z" fill="#271B3D"/>
-<path id="Vector_4" d="M159.14 57.12H158.95C158.492 57.12 158.12 57.4916 158.12 57.95V58.14C158.12 58.5984 158.492 58.97 158.95 58.97H159.14C159.599 58.97 159.97 58.5984 159.97 58.14V57.95C159.97 57.4916 159.599 57.12 159.14 57.12Z" fill="#271B3D"/>
-<path id="Vector_5" d="M101.98 57.12H101.91C101.418 57.12 101.02 57.5185 101.02 58.01V58.08C101.02 58.5715 101.418 58.97 101.91 58.97H101.98C102.472 58.97 102.87 58.5715 102.87 58.08V58.01C102.87 57.5185 102.472 57.12 101.98 57.12Z" fill="#271B3D"/>
-</g>
-<path id="Vector_6" d="M122.91 3.53998C119.57 3.53998 116.65 8.63998 115.06 16.25C114.07 8.63998 112.27 3.53998 110.2 3.53998C107.08 3.53998 104.55 15.16 104.55 29.48C104.55 43.8 107.08 55.42 110.2 55.42C112.27 55.42 114.08 50.32 115.06 42.71C116.65 50.32 119.57 55.42 122.91 55.42C125.93 55.42 128.61 51.24 130.27 44.81C132.91 51.24 137.16 55.42 141.95 55.42C149.95 55.42 156.43 43.8 156.43 29.48C156.43 15.16 149.95 3.53998 141.95 3.53998C137.15 3.53998 132.9 7.71998 130.27 14.15C128.61 7.71998 125.93 3.53998 122.91 3.53998Z" fill="#BEA0F2"/>
-</g>
-<path id="Vector_7" d="M88.68 0H0V12.91H88.68V0Z" fill="#DCDCDE"/>
-<path id="Vector_8" d="M52.96 21.63H0V34.54H52.96V21.63Z" fill="#DCDCDE"/>
-<g id="Group_3">
-<path id="Vector_9" d="M128.05 88.71V87.75C130.27 87.48 130.55 87.13 130.07 85.84C129.63 84.51 128.94 82.8 128.22 80.64H120.83C120.28 82.18 119.77 83.51 119.29 84.91C118.54 87.13 119.02 87.41 121.82 87.75V88.71H113.92V87.75C116.07 87.48 116.62 87.24 117.82 84.16L124.9 66.21L125.99 66C128.14 71.85 130.5 78.31 132.66 84.22C133.75 87.19 134.06 87.47 136.49 87.74V88.7H128.05V88.71ZM124.63 70.49C123.54 73.43 122.37 76.54 121.35 79.24H127.74L124.63 70.49Z" fill="#271B3D"/>
-<path id="Vector_10" d="M149.18 89.12C148.67 89.12 147.91 88.85 147.57 88.47C147.13 88.03 146.92 87.55 146.75 86.93C145.38 87.85 143.71 89.12 142.65 89.12C140.22 89.12 138.48 87.1 138.48 84.91C138.48 83.23 139.4 82.14 141.28 81.49C143.37 80.77 145.93 79.88 146.68 79.27V78.59C146.68 76.16 145.45 74.76 143.67 74.76C142.88 74.76 142.4 75.14 142.06 75.55C141.68 76.03 141.44 76.78 141.14 77.77C140.97 78.32 140.66 78.56 140.15 78.56C139.5 78.56 138.65 77.88 138.65 77.06C138.65 76.58 139.09 76.17 139.78 75.69C140.77 74.97 142.75 73.71 144.7 73.3C145.73 73.3 146.79 73.61 147.57 74.22C148.77 75.25 149.31 76.41 149.31 78.19V84.79C149.31 86.36 149.89 86.84 150.51 86.84C150.92 86.84 151.36 86.67 151.74 86.46L152.08 87.42L149.17 89.13L149.18 89.12ZM146.68 80.47C145.93 80.85 144.29 81.56 143.5 81.91C142.2 82.49 141.41 83.14 141.41 84.41C141.41 86.22 142.78 87.04 143.87 87.04C144.76 87.04 145.99 86.49 146.67 85.81V80.48L146.68 80.47Z" fill="#271B3D"/>
-</g>
-<g id="Group_4">
-<g id="Group_5">
-<path id="Vector_11" d="M3.34 89.12L0 85.77L42.4 44.93L44.19 46.72L3.34 89.12Z" fill="#BEA0F2"/>
-<path id="Vector_12" d="M34.5601 56.77L44.1901 46.72L42.4001 44.93L32.3401 54.56L34.5601 56.77Z" fill="#271B3D"/>
-</g>
-<g id="Group_6">
-<path id="Vector_13" d="M57.91 35.71C57.91 32.43 60.55 29.44 59.89 28.79C59.23 28.13 56.25 30.77 52.97 30.77C49.69 30.77 46.7 28.13 46.05 28.79C45.4 29.45 48.03 32.43 48.03 35.71C48.03 38.99 45.39 41.98 46.05 42.63C46.71 43.29 49.69 40.65 52.97 40.65C56.25 40.65 59.24 43.29 59.89 42.63C60.54 41.97 57.91 38.99 57.91 35.71Z" fill="#271B3D"/>
-<g id="Group_7">
-<path id="Vector_14" d="M66.0295 48.7586C67.3417 47.4464 67.7279 45.7052 66.8922 44.8695C66.0564 44.0338 64.3152 44.42 63.0031 45.7322C61.6909 47.0443 61.3047 48.7855 62.1404 49.6212C62.9761 50.457 64.7173 50.0707 66.0295 48.7586Z" fill="#271B3D"/>
-<path id="Vector_15" d="M70.6859 53.4353C71.5451 52.5762 71.7983 51.4365 71.2516 50.8897C70.7049 50.343 69.5652 50.5963 68.706 51.4554C67.8469 52.3146 67.5936 53.4543 68.1403 54.001C68.6871 54.5477 69.8268 54.2945 70.6859 53.4353Z" fill="#271B3D"/>
-<path id="Vector_16" d="M74.4677 57.1995C75.0886 56.5786 75.2722 55.7555 74.8778 55.361C74.4834 54.9666 73.6603 55.1502 73.0393 55.7711C72.4184 56.3921 72.2348 57.2152 72.6292 57.6096C73.0236 58.0041 73.8468 57.8204 74.4677 57.1995Z" fill="#271B3D"/>
-</g>
-</g>
-</g>
-<g id="Group_8">
-<path id="Vector_17" d="M39.3001 89.11C43.0004 89.11 46.0001 86.1103 46.0001 82.41C46.0001 78.7097 43.0004 75.71 39.3001 75.71C35.5998 75.71 32.6001 78.7097 32.6001 82.41C32.6001 86.1103 35.5998 89.11 39.3001 89.11Z" fill="#DCDCDE"/>
-<path id="Vector_18" d="M60.6402 89.11C64.3405 89.11 67.3402 86.1103 67.3402 82.41C67.3402 78.7097 64.3405 75.71 60.6402 75.71C56.9399 75.71 53.9402 78.7097 53.9402 82.41C53.9402 86.1103 56.9399 89.11 60.6402 89.11Z" fill="#DFD1FB"/>
-<path id="Vector_19" d="M81.98 89.11C85.6803 89.11 88.68 86.1103 88.68 82.41C88.68 78.7097 85.6803 75.71 81.98 75.71C78.2797 75.71 75.28 78.7097 75.28 82.41C75.28 86.1103 78.2797 89.11 81.98 89.11Z" fill="#BEA0F2"/>
-</g>
-<path id="Vector_20" d="M13.0201 43.23H0.0700684V56.18H13.0201V43.23Z" fill="#DCDCDE"/>
-</g>
-<defs>
-<clipPath id="clip0_3551_284196">
-<rect width="159.97" height="89.12" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/data/actions.ts b/plugins/woocommerce/client/admin/client/customize-store/data/actions.ts
deleted file mode 100644
index 97d5155250..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/data/actions.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { resolveSelect, dispatch } from '@wordpress/data';
-// @ts-ignore No types for this exist yet.
-import { store as coreStore } from '@wordpress/core-data';
-import { BlockInstance, parse, serialize } from '@wordpress/blocks';
-import {
- registerCoreBlocks,
- __experimentalGetCoreBlocks,
- // @ts-ignore No types for this exist yet.
-} from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import {
- patternsToNameMap,
- getTemplatePatterns,
-} from '../assembler-hub/hooks/use-home-templates';
-import { setLogoWidth } from '../utils';
-import {
- FOOTER_TEMPLATES,
- HEADER_TEMPLATES,
- HOMEPAGE_TEMPLATES,
-} from './homepageTemplates';
-import { THEME_SLUG } from './constants';
-import { Pattern } from '../types/pattern';
-import { isFullComposabilityFeatureAndAPIAvailable } from '../assembler-hub/utils/is-full-composability-enabled';
-
-const parsePattern = ( pattern: Pattern ) => {
- const blocks = parse( pattern.content );
-
- if ( blocks.length > 0 ) {
- // @ts-expect-error No types for this exist yet.
- blocks[ 0 ].attributes = {
- ...blocks[ 0 ].attributes,
- metadata: {
- ...( blocks[ 0 ].attributes.metadata || {} ),
- categories: pattern.categories,
- patternName: pattern.name,
- name: blocks[ 0 ].attributes.metadata?.name || pattern.title,
- },
- };
- }
- return blocks;
-};
-
-/**
- * This function can be removed once the full composability feature is available for all the version of WordPress that we support.
- */
-export const updateTemplatePrePTK = async ( {
- homepageTemplateId,
-}: {
- homepageTemplateId: keyof typeof HOMEPAGE_TEMPLATES;
-} ) => {
- // @ts-ignore No types for this exist yet.
- const { invalidateResolutionForStoreSelector } = dispatch( coreStore );
-
- // Ensure that the patterns are up to date because we populate images and content in previous step.
- invalidateResolutionForStoreSelector( 'getBlockPatterns' );
- invalidateResolutionForStoreSelector( 'getDefaultTemplateId' );
-
- const patterns = ( await resolveSelect(
- coreStore
- // @ts-ignore No types for this exist yet.
- ).getBlockPatterns() ) as Pattern[];
-
- const patternsByName = patternsToNameMap( patterns );
- const homepageTemplate = getTemplatePatterns(
- HOMEPAGE_TEMPLATES[ homepageTemplateId ].blocks,
- patternsByName
- );
-
- const headerTemplate = getTemplatePatterns(
- HEADER_TEMPLATES[ homepageTemplateId ].blocks,
- patternsByName
- );
-
- const footerTemplate = getTemplatePatterns(
- FOOTER_TEMPLATES[ homepageTemplateId ].blocks,
- patternsByName
- );
-
- const headerTemplateContent = [ ...headerTemplate ]
- .filter( Boolean )
- .map( ( pattern ) => pattern.content )
- .join( '\n\n' );
-
- const footerTemplateContent = [ ...footerTemplate ]
- .filter( Boolean )
- .map( ( pattern ) => pattern.content )
- .join( '\n\n' );
-
- // Combine the header, homepage, and footer patterns into a single content string.
- let content = [ ...homepageTemplate ]
- .filter( Boolean )
- .map( ( pattern ) => pattern.content )
- .join( '\n\n' );
-
- content =
- `<!-- wp:template-part {"slug":"header", "theme": "${ THEME_SLUG }"} /-->` +
- content +
- `<!-- wp:template-part {"slug":"footer", "theme": "${ THEME_SLUG }"} /-->`;
-
- // Replace the logo width with the default width.
- content = setLogoWidth( content );
-
- const currentTemplateId: string | undefined = await resolveSelect(
- coreStore
- // @ts-ignore No types for this exist yet.
- ).getDefaultTemplateId( { slug: 'home' } );
-
- // @ts-ignore No types for this exist yet.
- const { saveEntityRecord } = dispatch( coreStore );
-
- await Promise.all( [
- saveEntityRecord(
- 'postType',
- 'wp_template_part',
- {
- id: `${ THEME_SLUG }//header`,
- content: headerTemplateContent,
- },
- {
- throwOnError: true,
- }
- ),
- saveEntityRecord(
- 'postType',
- 'wp_template_part',
- {
- id: `${ THEME_SLUG }//footer`,
- content: footerTemplateContent,
- },
- {
- throwOnError: true,
- }
- ),
- saveEntityRecord(
- 'postType',
- 'wp_template',
- {
- id: currentTemplateId,
- content,
- },
- {
- throwOnError: true,
- }
- ),
- ] );
-};
-
-const updateTemplatePTK = async () => {
- // @ts-ignore No types for this exist yet.
- const { invalidateResolutionForStoreSelector } = dispatch( coreStore );
-
- // Ensure that the patterns are up to date because we populate images and content in previous step.
- invalidateResolutionForStoreSelector( 'getBlockPatterns' );
- invalidateResolutionForStoreSelector( 'getDefaultTemplateId' );
- registerCoreBlocks( __experimentalGetCoreBlocks() );
-
- const DEFAULT_PATTERNS = {
- header: 'woocommerce-blocks/header-essential',
- intro: 'woocommerce-blocks/centered-content-with-image-below',
- footer: 'woocommerce-blocks/footer-with-3-menus',
- } as const;
-
- const allPatterns = ( await resolveSelect(
- coreStore
- // @ts-ignore No types for this exist yet.
- ).getBlockPatterns() ) as Pattern[];
-
- const patterns = Object.entries( DEFAULT_PATTERNS ).reduce(
- ( acc, [ category, patternName ] ) => {
- const foundPattern = allPatterns.find(
- ( pattern ) => pattern.name === patternName
- );
-
- const parsedPattern = foundPattern
- ? parsePattern( foundPattern )
- : [];
- return {
- ...acc,
- [ category ]: parsedPattern,
- };
- },
- {
- footer: [] as BlockInstance[],
- intro: [] as BlockInstance[],
- header: [] as BlockInstance[],
- }
- );
-
- const headerTemplateContent = serialize( patterns.header );
- const footerTemplateContent = serialize( patterns.footer );
-
- // Combine the header, homepage, and footer patterns into a single content string.
- let content = serialize( patterns.intro );
- content =
- `<!-- wp:template-part {"slug":"header", "theme": "${ THEME_SLUG }"} /-->` +
- content +
- `<!-- wp:template-part {"slug":"footer", "theme": "${ THEME_SLUG }"} /-->`;
-
- // Replace the logo width with the default width.
- content = setLogoWidth( content );
-
- const currentTemplateId: string | undefined = await resolveSelect(
- coreStore
- // @ts-ignore No types for this exist yet.
- ).getDefaultTemplateId( { slug: 'home' } );
-
- // @ts-ignore No types for this exist yet.
- const { saveEntityRecord } = dispatch( coreStore );
-
- await Promise.all( [
- saveEntityRecord(
- 'postType',
- 'wp_template_part',
- {
- id: `${ THEME_SLUG }//header`,
- content: headerTemplateContent,
- },
- {
- throwOnError: true,
- }
- ),
- saveEntityRecord(
- 'postType',
- 'wp_template_part',
- {
- id: `${ THEME_SLUG }//footer`,
- content: footerTemplateContent,
- },
- {
- throwOnError: true,
- }
- ),
- saveEntityRecord(
- 'postType',
- 'wp_template',
- {
- id: currentTemplateId,
- content,
- },
- {
- throwOnError: true,
- }
- ),
- ] );
-};
-
-// Update the current theme template
-export const updateTemplate = async ( {
- homepageTemplateId,
-}: {
- homepageTemplateId: keyof typeof HOMEPAGE_TEMPLATES;
-} ) => {
- if ( isFullComposabilityFeatureAndAPIAvailable() ) {
- await updateTemplatePTK();
- } else {
- await updateTemplatePrePTK( { homepageTemplateId } );
- }
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/data/constants.ts b/plugins/woocommerce/client/admin/client/customize-store/data/constants.ts
deleted file mode 100644
index 1704ca9975..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/data/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const THEME_SLUG = 'twentytwentyfour';
diff --git a/plugins/woocommerce/client/admin/client/customize-store/data/homepageTemplates.ts b/plugins/woocommerce/client/admin/client/customize-store/data/homepageTemplates.ts
deleted file mode 100644
index a854f54202..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/data/homepageTemplates.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Internal dependencies
- */
-import { isWooExpress } from '~/utils/is-woo-express';
-import { THEME_SLUG } from './constants';
-
-const introPatternWooExpress = 'woocommerce-blocks/hero-product-split';
-export const headerTemplateId = `${ THEME_SLUG }//header`;
-export const footerTemplateId = `${ THEME_SLUG }//footer`;
-
-export const HEADER_TEMPLATES = {
- template1: {
- blocks: [ 'woocommerce-blocks/header-centered-menu' ],
- },
- template2: {
- blocks: [ 'woocommerce-blocks/header-essential' ],
- },
- template3: {
- blocks: [ 'woocommerce-blocks/header-centered-menu' ],
- },
-};
-
-export const FOOTER_TEMPLATES = {
- template1: {
- blocks: [ 'woocommerce-blocks/footer-with-3-menus' ],
- },
- template2: {
- blocks: [ 'woocommerce-blocks/footer-large' ],
- },
- template3: {
- blocks: [ 'woocommerce-blocks/footer-with-3-menus' ],
- },
-};
-
-export const HOMEPAGE_TEMPLATES = {
- template1: {
- blocks: [
- // Body
- isWooExpress()
- ? introPatternWooExpress
- : 'woocommerce-blocks/just-arrived-full-hero',
- 'woocommerce-blocks/product-collection-5-columns',
- 'woocommerce-blocks/hero-product-3-split',
- 'woocommerce-blocks/product-collection-3-columns',
- 'woocommerce-blocks/testimonials-3-columns',
- 'woocommerce-blocks/featured-category-triple',
- 'woocommerce-blocks/social-follow-us-in-social-media',
- ],
- metadata: {
- businessType: [ 'e-commerce', 'large-business' ],
- contentFocus: [ 'featured products' ],
- audience: [ 'general' ],
- design: [ 'contemporary' ],
- features: [
- 'fullwidth-image-banner',
- 'testimonials',
- 'social-media',
- 'search',
- ],
- complexity: 'high',
- },
- },
- template2: {
- blocks: [
- // Body
- isWooExpress()
- ? introPatternWooExpress
- : 'woocommerce-blocks/featured-category-cover-image',
- 'woocommerce-blocks/product-collection-4-columns',
- 'woocommerce-blocks/hero-product-chessboard',
- 'woocommerce-blocks/product-collection-5-columns',
- 'woocommerce-blocks/testimonials-3-columns',
- ],
- metadata: {
- businessType: [ 'e-commerce', 'subscription', 'large-business' ],
- contentFocus: [ 'catalog' ],
- audience: [ 'general' ],
- design: [ 'contemporary' ],
- features: [ 'small-banner', 'testimonials', 'newsletter' ],
- complexity: 'high',
- },
- },
- template3: {
- blocks: [
- // Body
- 'woocommerce-blocks/hero-product-split',
- 'woocommerce-blocks/product-collection-featured-products-5-columns',
- 'woocommerce-blocks/featured-category-triple',
- 'woocommerce-blocks/product-query-product-gallery',
- ],
- metadata: {
- businessType: [ 'subscription', 'large-business' ],
- contentFocus: [ 'catalog', 'call-to-action' ],
- audience: [ 'general' ],
- design: [ 'contemporary' ],
- features: [ 'small-banner', 'social-media' ],
- complexity: 'high',
- },
- },
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/data/service.ts b/plugins/woocommerce/client/admin/client/customize-store/data/service.ts
deleted file mode 100644
index e140c95476..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/data/service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-
-export const installAndActivateTheme = async ( themeSlug: string ) => {
- await apiFetch( {
- path: `/wc-admin/onboarding/themes/install?theme=${ themeSlug }`,
- method: 'POST',
- } );
-
- await apiFetch( {
- path: `/wc-admin/onboarding/themes/activate?theme=${ themeSlug }&theme_switch_via_cys_ai_loader=1`,
- method: 'POST',
- } );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/actions.ts b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/actions.ts
deleted file mode 100644
index b334a996ce..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/actions.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { sendParent } from 'xstate';
-import { getNewPath } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { DesignWithoutAIStateMachineContext } from './types';
-import { DesignWithoutAIStateMachineEvents } from './state-machine';
-import { navigateOrParent } from '../utils';
-
-const redirectToAssemblerHub = async () => {
- // This is a workaround to update the "activeThemeHasMods" in the parent's machine
- // state context. We should find a better way to do this using xstate actions,
- // since state machines should rely only on their context.
- // Will be fixed on: https://github.com/woocommerce/woocommerce/issues/44349
- // This is needed because the iframe loads the entire Customize Store app.
- // This means that the iframe instance will have different state machines
- // than the parent window.
- // Check https://github.com/woocommerce/woocommerce/pull/44206 for more details.
- window.parent.__wcCustomizeStore.activeThemeHasMods = true;
-};
-
-const redirectToIntroWithError = sendParent<
- DesignWithoutAIStateMachineContext,
- DesignWithoutAIStateMachineEvents,
- DesignWithoutAIStateMachineEvents
->( ( context, event ) => {
- const errorEvent = event as {
- type: string;
- data?: { data?: { status: number } };
- };
- return {
- type: 'NO_AI_FLOW_ERROR',
- errorStatus: errorEvent?.data?.data?.status,
- };
-} );
-
-const redirectToAssemblerHubSection = (
- _context: unknown,
- _evt: unknown,
- { action }: { action: unknown }
-) => {
- const { section } = action as { section: string };
-
- navigateOrParent(
- window,
- getNewPath(
- { customizing: true },
- `/customize-store/assembler-hub/${ section }`,
- {}
- )
- );
-};
-
-export const actions = {
- redirectToAssemblerHub,
- redirectToIntroWithError,
- redirectToAssemblerHubSection,
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/guards.ts b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/guards.ts
deleted file mode 100644
index 540ddf3c19..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/guards.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Internal dependencies
- */
-import { DesignWithoutAIStateMachineContext } from './types';
-
-export const isFontLibraryAvailable = (
- context: DesignWithoutAIStateMachineContext
-) => {
- return context.isFontLibraryAvailable;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/index.tsx
deleted file mode 100644
index 98a8260afc..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { useMachine, useSelector } from '@xstate/react';
-import { AnyInterpreter, Sender } from 'xstate';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { customizeStoreStateMachineEvents } from '..';
-import {
- CustomizeStoreComponent,
- customizeStoreStateMachineContext,
-} from '../types';
-import { designWithNoAiStateMachineDefinition } from './state-machine';
-import { findComponentMeta } from '~/utils/xstate/find-component';
-import { AssembleHubLoader } from './pages/ApiCallLoader';
-import { useXStateInspect } from '~/xstate';
-
-export type DesignWithoutAiComponent = typeof AssembleHubLoader;
-export type DesignWithoutAiComponentMeta = {
- component: DesignWithoutAiComponent;
-};
-
-export const DesignWithNoAiController = ( {
- parentMachine,
- parentContext,
-}: {
- parentMachine?: AnyInterpreter;
- sendEventToParent?: Sender< customizeStoreStateMachineEvents >;
- parentContext?: customizeStoreStateMachineContext;
-} ) => {
- interface Theme {
- is_block_theme?: boolean;
- }
-
- const currentTheme = useSelect( ( select ) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- return select( 'core' ).getCurrentTheme() as Theme;
- }, [] );
-
- const isBlockTheme = currentTheme?.is_block_theme;
-
- const { versionEnabled } = useXStateInspect();
- const [ , send, service ] = useMachine(
- designWithNoAiStateMachineDefinition,
- {
- devTools: versionEnabled === 'V4',
- parent: parentMachine,
- context: {
- ...designWithNoAiStateMachineDefinition.context,
- isFontLibraryAvailable:
- parentContext?.isFontLibraryAvailable ?? false,
- isPTKPatternsAPIAvailable:
- parentContext?.isPTKPatternsAPIAvailable ?? false,
- isBlockTheme,
- },
- }
- );
-
- // eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
- const currentNodeMeta = useSelector( service, ( currentState ) =>
- findComponentMeta< DesignWithoutAiComponentMeta >(
- currentState?.meta ?? undefined
- )
- );
-
- const CurrentComponent = currentNodeMeta?.component;
-
- return (
- <div className={ `woocommerce-design-without-ai__container` }>
- { CurrentComponent ? (
- <CurrentComponent sendEvent={ send } />
- ) : (
- <div />
- ) }
- </div>
- );
-};
-
-//loader should send event 'THEME_SUGGESTED' when it's done
-export const DesignWithoutAi: CustomizeStoreComponent = ( {
- parentMachine,
- context,
-} ) => {
- return (
- <DesignWithNoAiController
- parentMachine={ parentMachine }
- parentContext={ context }
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
deleted file mode 100644
index fbaa9eeb52..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * External dependencies
- */
-import { Loader } from '@woocommerce/onboarding';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { getNewPath } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import loaderAssemblingStore from '../../assets/images/loader-assembling-ai-optimized-store.svg';
-import loaderTurningLights from '../../assets/images/loader-turning-lights.svg';
-import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg';
-import {
- attachIframeListeners,
- createAugmentedSteps,
- onIframeLoad,
-} from '~/customize-store/utils';
-import { DesignWithoutAIStateMachineEvents } from '../state-machine';
-
-const loaderSteps = [
- {
- title: __( 'Setting up the foundations', 'woocommerce' ),
- image: (
- <img
- src={ loaderAssemblingStore }
- alt={ __( 'Setting up the foundations', 'woocommerce' ) }
- />
- ),
- progress: 25,
- },
- {
- title: __( 'Turning on the lights', 'woocommerce' ),
- image: (
- <img
- src={ loaderTurningLights }
- alt={ __( 'Turning on the lights', 'woocommerce' ) }
- />
- ),
- progress: 50,
- },
- {
- title: __( 'Opening the doors', 'woocommerce' ),
- image: (
- <img
- src={ openingTheDoors }
- alt={ __( 'Opening the doors', 'woocommerce' ) }
- />
- ),
- progress: 100,
- },
-];
-
-// Loader for the API call without the last frame.
-export const ApiCallLoader = () => {
- const [ progress, setProgress ] = useState( 5 );
-
- useEffect( () => {
- const preload = ( src: string ) => {
- const img = new Image();
-
- img.src = src;
- img.onload = () => {};
- };
-
- // We preload the these images to avoid flickering. We only need to preload them because the others are small enough to be inlined in base64.
- preload( loaderAssemblingStore );
- preload( loaderTurningLights );
- preload( openingTheDoors );
- }, [] );
-
- const augmentedSteps = createAugmentedSteps(
- loaderSteps.slice( 0, -1 ),
- 10
- );
-
- return (
- <Loader>
- <Loader.Sequence
- interval={ ( 5 * 1000 ) / ( augmentedSteps.length - 1 ) }
- shouldLoop={ false }
- onChange={ ( index ) => {
- // to get around bad set state timing issue
- setTimeout( () => {
- setProgress( augmentedSteps[ index ].progress );
- }, 0 );
- } }
- >
- { augmentedSteps.map( ( step ) => (
- <Loader.Layout key={ step.title }>
- <Loader.Illustration>
- { step.image }
- </Loader.Illustration>
- <Loader.Title>{ step.title }</Loader.Title>
- </Loader.Layout>
- ) ) }
- </Loader.Sequence>
- <Loader.ProgressBar
- className="smooth-transition"
- progress={ progress || 0 }
- />
- </Loader>
- );
-};
-
-type SendEventFn = ( event: DesignWithoutAIStateMachineEvents ) => void;
-
-const AssemblerHub = ( { sendEvent }: { sendEvent: SendEventFn } ) => {
- const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
- const iframe = useRef< HTMLIFrameElement >( null );
- const [ isVisible, setIsVisible ] = useState( false );
-
- useEffect( () => {
- window.addEventListener( 'message', ( event ) => {
- if ( event.data?.type === 'INSTALL_FONTS' ) {
- sendEvent( { type: 'INSTALL_FONTS' } );
- }
- } );
- }, [ sendEvent ] );
-
- return (
- <iframe
- ref={ iframe }
- onLoad={ ( frame ) => {
- const showIframe = () => setIsVisible( true );
- attachIframeListeners( frame.currentTarget );
- onIframeLoad( showIframe );
- // Ceiling wait time set to 60 seconds
- setTimeout( showIframe, 60 * 1000 );
- window.parent.history?.pushState( {}, '', assemblerUrl );
- } }
- style={ { opacity: isVisible ? 1 : 0 } }
- src={ assemblerUrl }
- title="assembler-hub"
- className="cys-fullscreen-iframe"
- />
- );
-};
-
-export const AssembleHubLoader = ( {
- sendEvent,
-}: {
- sendEvent: SendEventFn;
-} ) => {
- // Show the last two steps of the loader so that the last frame is the shortest time possible
- const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 );
-
- const [ progress, setProgress ] = useState( augmentedSteps[ 0 ].progress );
-
- return (
- <>
- <Loader>
- <Loader.Sequence
- interval={ ( 2 * 1000 ) / ( augmentedSteps.length - 1 ) }
- shouldLoop={ false }
- onChange={ ( index ) => {
- // to get around bad set state timing issue
- setTimeout( () => {
- setProgress( augmentedSteps[ index ].progress );
- }, 0 );
- } }
- >
- { augmentedSteps.map( ( step, index ) => (
- <Loader.Layout key={ index }>
- <Loader.Illustration>
- { step.image }
- </Loader.Illustration>
- <Loader.Title>{ step.title }</Loader.Title>
- </Loader.Layout>
- ) ) }
- </Loader.Sequence>
- <Loader.ProgressBar
- className="smooth-transition"
- progress={ progress || 0 }
- />
- </Loader>
- <AssemblerHub sendEvent={ sendEvent } />
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/services.ts b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/services.ts
deleted file mode 100644
index b3daf7cdaa..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/services.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import apiFetch from '@wordpress/api-fetch';
-import { dispatch, resolveSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { Sender } from 'xstate';
-// @ts-expect-error No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
-
-/**
- * Internal dependencies
- */
-import { COLOR_PALETTES } from '../assembler-hub/sidebar/global-styles/color-palette-variations/constants';
-import {
- FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
- FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
-} from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants';
-import { updateTemplate } from '../data/actions';
-import { THEME_SLUG } from '../data/constants';
-import { HOMEPAGE_TEMPLATES } from '../data/homepageTemplates';
-import { installAndActivateTheme as setTheme } from '../data/service';
-import { trackEvent } from '../tracking';
-import { DesignWithoutAIStateMachineContext, Theme } from './types';
-import { installFontFamilies as installDefaultFontFamilies } from '../assembler-hub/utils/fonts';
-
-const assembleSite = async () => {
- await updateTemplate( {
- homepageTemplateId: 'template1' as keyof typeof HOMEPAGE_TEMPLATES,
- } );
-};
-
-const browserPopstateHandler =
- () => ( sendBack: Sender< { type: 'EXTERNAL_URL_UPDATE' } > ) => {
- const popstateHandler = () => {
- sendBack( { type: 'EXTERNAL_URL_UPDATE' } );
- };
- window.addEventListener( 'popstate', popstateHandler );
- return () => {
- window.removeEventListener( 'popstate', popstateHandler );
- };
- };
-
-const getActiveThemeWithRetries = async (): Promise< Theme[] | null > => {
- let retries = 3;
-
- while ( retries > 0 ) {
- const activeThemes = ( await resolveSelect( 'core' ).getEntityRecords(
- 'root',
- 'theme',
- { status: 'active' },
- true
- ) ) as Theme[];
- if ( activeThemes ) {
- return activeThemes;
- }
-
- retries--;
- }
-
- return null;
-};
-
-const getCurrentGlobalStylesId = async (): Promise< number | null > => {
- const activeThemes = await getActiveThemeWithRetries();
- if ( ! activeThemes ) {
- return null;
- }
-
- const currentThemeLinks = activeThemes[ 0 ]?._links;
- const url = currentThemeLinks?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href;
- const globalStylesObject = ( await apiFetch( { url } ) ) as { id: number };
-
- return globalStylesObject.id;
-};
-
-const updateGlobalStylesWithDefaultValues = async (
- context: DesignWithoutAIStateMachineContext
-) => {
- // We are using the first color palette and font pairing that are displayed on the color/font picker on the sidebar.
- const colorPalette = COLOR_PALETTES[ 0 ];
-
- const allowTracking =
- ( await resolveSelect( optionsStore ).getOption(
- 'woocommerce_allow_tracking'
- ) ) === 'yes';
-
- const fontPairing =
- context.isFontLibraryAvailable && allowTracking
- ? FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ]
- : FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING[ 0 ];
-
- const globalStylesId = await getCurrentGlobalStylesId();
- if ( ! globalStylesId ) {
- return;
- }
-
- const { saveEntityRecord } = dispatch( coreStore );
-
- await saveEntityRecord(
- 'root',
- 'globalStyles',
- {
- id: globalStylesId,
- styles: mergeBaseAndUserConfigs(
- colorPalette?.styles || {},
- fontPairing?.styles || {}
- ),
- settings: mergeBaseAndUserConfigs(
- colorPalette?.settings || {},
- fontPairing?.settings || {}
- ),
- },
- {
- throwOnError: true,
- }
- );
-};
-
-const updateShowOnFront = async () => {
- try {
- await apiFetch( {
- path: '/wp/v2/settings',
- method: 'POST',
- data: {
- show_on_front: 'posts',
- },
- } );
- } catch ( error ) {
- throw error;
- }
-};
-
-const installAndActivateTheme = async (
- context: DesignWithoutAIStateMachineContext
-) => {
- try {
- await setTheme( THEME_SLUG );
- await updateGlobalStylesWithDefaultValues( context );
- } catch ( error ) {
- trackEvent(
- 'customize_your_store__no_ai_install_and_activate_theme_error',
- {
- theme: THEME_SLUG,
- error: error instanceof Error ? error.message : 'unknown',
- }
- );
- throw error;
- }
-};
-
-export const installPatterns = async () => {
- if ( ! window.wcAdminFeatures[ 'pattern-toolkit-full-composability' ] ) {
- return;
- }
-
- const isTrackingEnabled = window.wcTracks?.isEnabled || false;
- if ( ! isTrackingEnabled ) {
- return;
- }
-
- try {
- const { success } = await apiFetch< {
- success: boolean;
- } >( {
- path: '/wc/private/patterns',
- method: 'POST',
- } );
-
- if ( ! success ) {
- throw new Error( 'Fetching patterns failed' );
- }
- } catch ( error ) {
- throw error;
- }
-};
-
-const installFontFamilies = async () => {
- const isTrackingEnabled = window.wcTracks?.isEnabled || false;
- if ( ! isTrackingEnabled ) {
- return;
- }
-
- try {
- await installDefaultFontFamilies();
- } catch ( error ) {
- throw error;
- }
-};
-
-const createProducts = async () => {
- try {
- const { success } = await apiFetch< {
- success: boolean;
- } >( {
- path: `/wc-admin/onboarding/products`,
- method: 'POST',
- } );
-
- if ( ! success ) {
- throw new Error( 'Product creation failed' );
- }
- } catch ( error ) {
- throw error;
- }
-};
-
-export const enableTracking = async () => {
- try {
- await dispatch( optionsStore ).updateOptions( {
- woocommerce_allow_tracking: 'yes',
- } );
- window.wcTracks.isEnabled = true;
- } catch ( error ) {
- throw error;
- }
-};
-
-export const services = {
- assembleSite,
- browserPopstateHandler,
- installAndActivateTheme,
- createProducts,
- installFontFamilies,
- installPatterns,
- updateGlobalStylesWithDefaultValues,
- enableTracking,
- updateShowOnFront,
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/state-machine.tsx b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/state-machine.tsx
deleted file mode 100644
index b82722b419..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/state-machine.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-/**
- * External dependencies
- */
-import { createMachine } from 'xstate';
-import { getQuery } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-
-import { ApiCallLoader, AssembleHubLoader } from './pages/ApiCallLoader';
-
-import { DesignWithoutAIStateMachineContext } from './types';
-import { services } from './services';
-import { actions } from './actions';
-import { isFontLibraryAvailable } from './guards';
-
-export const hasStepInUrl = (
- _ctx: unknown,
- _evt: unknown,
- { cond }: { cond: unknown }
-) => {
- const { path = '' } = getQuery() as { path: string };
- const pathFragments = path.split( '/' );
- return (
- pathFragments[ 2 ] === // [0] '', [1] 'customize-store', [2] design step slug
- ( cond as { step: string | undefined } ).step
- );
-};
-
-export const hasFontInstallInUrl = () => {
- const { path = '' } = getQuery() as { path: string };
- const pathFragments = path.split( '/' );
- return (
- pathFragments[ 2 ] === 'design' &&
- pathFragments[ 3 ] === 'install-fonts'
- );
-};
-
-export const hasPatternInstallInUrl = () => {
- const { path = '' } = getQuery() as { path: string };
- const pathFragments = path.split( '/' );
- return (
- pathFragments[ 2 ] === 'design' &&
- pathFragments[ 3 ] === 'install-patterns'
- );
-};
-
-const installFontFamiliesState = {
- initial: 'checkFontLibrary',
- states: {
- checkFontLibrary: {
- always: [
- {
- cond: {
- type: 'isFontLibraryAvailable',
- },
- target: 'pending',
- },
- { target: 'success' },
- ],
- },
- pending: {
- invoke: {
- src: 'installFontFamilies',
- onDone: {
- target: 'success',
- },
- onError: {
- actions: 'redirectToIntroWithError',
- },
- },
- },
- success: {
- type: 'final',
- },
- },
-};
-
-export type DesignWithoutAIStateMachineEvents =
- | { type: 'EXTERNAL_URL_UPDATE' }
- | { type: 'INSTALL_FONTS' }
- | { type: 'NO_AI_FLOW_ERROR'; payload: { hasError: boolean } };
-
-export const designWithNoAiStateMachineDefinition = createMachine(
- {
- id: 'designWithoutAI',
- predictableActionArguments: true,
- preserveActionOrder: true,
- schema: {
- context: {} as DesignWithoutAIStateMachineContext,
- events: {} as DesignWithoutAIStateMachineEvents,
- },
- invoke: {
- src: 'browserPopstateHandler',
- },
- on: {
- EXTERNAL_URL_UPDATE: {
- target: 'navigate',
- },
- INSTALL_FONTS: {
- target: 'installFontFamilies',
- },
- },
- context: {
- startLoadingTime: null,
- apiCallLoader: {
- hasErrors: false,
- },
- isFontLibraryAvailable: false,
- isPTKPatternsAPIAvailable: false,
- isBlockTheme: false,
- },
- initial: 'navigate',
- states: {
- navigate: {
- always: [
- {
- cond: {
- type: 'hasFontInstallInUrl',
- step: 'design',
- },
- target: 'installFontFamilies',
- },
- {
- cond: {
- type: 'hasPatternInstallInUrl',
- step: 'design',
- },
- target: 'installPatterns',
- },
- {
- cond: {
- type: 'hasStepInUrl',
- step: 'design',
- },
- target: 'preAssembleSite',
- },
- ],
- },
- installFontFamilies: {
- meta: {
- component: ApiCallLoader,
- },
- initial: 'enableTracking',
- states: {
- enableTracking: {
- invoke: {
- src: 'enableTracking',
- onDone: {
- target: 'checkFontLibrary',
- },
- },
- },
- checkFontLibrary:
- installFontFamiliesState.states.checkFontLibrary,
- pending: installFontFamiliesState.states.pending,
- success: {
- type: 'final',
- },
- },
- onDone: {
- target: '#designWithoutAI.showAssembleHubTypography',
- },
- },
- installPatterns: {
- meta: {
- component: ApiCallLoader,
- },
- initial: 'enableTracking',
- states: {
- enableTracking: {
- invoke: {
- src: 'enableTracking',
- onDone: {
- target: 'fetchPatterns',
- },
- },
- },
- fetchPatterns: {
- invoke: {
- src: 'installPatterns',
- onDone: {
- target: 'success',
- },
- onError: {
- actions: 'redirectToIntroWithError',
- },
- },
- },
- success: {
- type: 'final',
- },
- },
- onDone: {
- target: '#designWithoutAI.showAssembleHubHomepage',
- },
- },
- preAssembleSite: {
- initial: 'preApiCallLoader',
- id: 'preAssembleSite',
- states: {
- preApiCallLoader: {
- meta: {
- // @todo: Move the current component in a common folder or create a new one dedicated to this flow.
- component: ApiCallLoader,
- },
- type: 'parallel',
- states: {
- updateShowOnFront: {
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'updateShowOnFront',
- onDone: {
- target: 'success',
- },
- onError: {
- actions:
- 'redirectToIntroWithError',
- },
- },
- },
- success: { type: 'final' },
- },
- },
- installAndActivateTheme: {
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'installAndActivateTheme',
- onDone: {
- target: 'success',
- },
- onError: {
- actions:
- 'redirectToIntroWithError',
- },
- },
- },
- success: { type: 'final' },
- },
- },
- createProducts: {
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'createProducts',
- onDone: {
- target: 'success',
- },
- onError: {
- actions:
- 'redirectToIntroWithError',
- },
- },
- },
- success: {
- type: 'final',
- },
- },
- },
- installFontFamilies: {
- initial: installFontFamiliesState.initial,
- states: {
- checkFontLibrary:
- installFontFamiliesState.states
- .checkFontLibrary,
- pending:
- installFontFamiliesState.states.pending,
- success: {
- type: 'final',
- },
- },
- },
- installPatterns: {
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'installPatterns',
- onDone: {
- target: 'success',
- },
- onError: {
- target: 'success',
- },
- },
- },
- success: {
- type: 'final',
- },
- },
- },
- },
- onDone: {
- target: 'assembleSite',
- },
- },
- assembleSite: {
- meta: {
- component: ApiCallLoader,
- },
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'assembleSite',
- onDone: {
- target: 'success',
- },
- onError: {
- actions: 'redirectToIntroWithError',
- },
- },
- },
- success: {
- type: 'final',
- },
- },
- onDone: {
- target: '#designWithoutAI.showAssembleHub',
- },
- },
- },
- },
- showAssembleHub: {
- id: 'showAssembleHub',
- meta: {
- component: AssembleHubLoader,
- },
- entry: [ 'redirectToAssemblerHub' ],
- },
- showAssembleHubHomepage: {
- entry: [
- {
- type: 'redirectToAssemblerHubSection',
- section: 'homepage',
- },
- ],
- },
- showAssembleHubTypography: {
- entry: [
- {
- type: 'redirectToAssemblerHubSection',
- section: 'typography',
- },
- ],
- },
- },
- },
- {
- actions,
- services,
- guards: {
- hasStepInUrl,
- isFontLibraryAvailable,
- hasFontInstallInUrl,
- hasPatternInstallInUrl,
- },
- }
-);
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/test/state-machine.test.ts b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/test/state-machine.test.ts
deleted file mode 100644
index aa93a6ad9d..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/test/state-machine.test.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-/**
- * External dependencies
- */
-import { interpret } from 'xstate';
-import { waitFor } from 'xstate/lib/waitFor';
-
-/**
- * Internal dependencies
- */
-import { designWithNoAiStateMachineDefinition } from '../state-machine';
-
-const createMockMachine = ( {
- services,
- guards,
- actions,
-}: Parameters<
- typeof designWithNoAiStateMachineDefinition.withConfig
->[ 0 ] ) => {
- const machineWithConfig = designWithNoAiStateMachineDefinition.withConfig( {
- services,
- guards,
- actions,
- } );
-
- return machineWithConfig;
-};
-
-jest.mock( '@wordpress/api-fetch', () => jest.fn() );
-jest.mock(
- '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider',
- () => jest.fn()
-);
-
-describe( 'Design Without AI state machine', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- describe( 'navigate state', () => {
- it( 'should start with the navigate state', async () => {
- const expectedValue = 'navigate';
-
- const actualState =
- designWithNoAiStateMachineDefinition.initialState;
-
- expect( actualState.matches( expectedValue ) ).toBeTruthy();
- } );
-
- it( 'should check the url', () => {
- const hasStepInUrl = jest.fn( () => true );
- const machine = designWithNoAiStateMachineDefinition.withConfig( {
- guards: {
- hasStepInUrl,
- },
- } );
-
- const machineInterpret = interpret( machine ).start();
-
- expect( hasStepInUrl ).toBeCalled();
- machineInterpret.stop();
- } );
-
- it( 'should transit to preAssembleSite state when the url is /design', () => {
- const hasStepInUrl = jest.fn( () => true );
- const machine = designWithNoAiStateMachineDefinition.withConfig( {
- guards: {
- hasStepInUrl,
- },
- } );
-
- const machineInterpret = interpret( machine ).start();
-
- expect(
- machineInterpret.getSnapshot().matches( 'preAssembleSite' )
- ).toBeTruthy();
-
- machineInterpret.stop();
- } );
-
- it( "should not transit to preAssembleSite state when the url isn't /design", () => {
- const hasStepInUrl = jest.fn( () => false );
- const machine = designWithNoAiStateMachineDefinition.withConfig( {
- guards: {
- hasStepInUrl,
- },
- } );
-
- const machineInterpret = interpret( machine ).start();
-
- expect(
- machineInterpret.getSnapshot().matches( 'preAssembleSite' )
- ).toBeFalsy();
- } );
- } );
-
- describe( 'preAssembleSite state', () => {
- it( 'should invoke `redirectToIntroWithError` when `installAndActivateTheme` service fails', async () => {
- const initialState =
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme';
-
- const installAndActivateThemeMock = jest.fn( () =>
- Promise.reject()
- );
- const assembleSiteMock = jest.fn( () => Promise.resolve() );
- const createProductsMock = jest.fn( () =>
- Promise.resolve( {
- success: true,
- } )
- );
- const redirectToIntroWithErrorMock = jest.fn();
-
- const machine = createMockMachine( {
- services: {
- installAndActivateTheme: installAndActivateThemeMock,
- assembleSite: assembleSiteMock,
- createProducts: createProductsMock,
- },
- actions: {
- redirectToIntroWithError: redirectToIntroWithErrorMock,
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme.pending'
- );
- } );
-
- expect( installAndActivateThemeMock ).toHaveBeenCalled();
- expect( redirectToIntroWithErrorMock ).toHaveBeenCalled();
- } );
- it( 'should invoke `installAndActivateTheme` service', async () => {
- const initialState =
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme';
- const installAndActivateThemeMock = jest.fn( () =>
- Promise.resolve()
- );
- const assembleSiteMock = jest.fn( () => Promise.resolve() );
- const createProductsMock = jest.fn( () =>
- Promise.resolve( {
- success: true,
- } )
- );
-
- const machine = createMockMachine( {
- services: {
- installAndActivateTheme: installAndActivateThemeMock,
- assembleSite: assembleSiteMock,
- createProducts: createProductsMock,
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme.pending'
- );
- } );
-
- expect( installAndActivateThemeMock ).toHaveBeenCalled();
-
- const finalState = await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme.success'
- );
- } );
-
- expect(
- finalState.matches(
- 'preAssembleSite.preApiCallLoader.installAndActivateTheme.success'
- )
- ).toBeTruthy();
- } );
-
- it( 'should invoke `redirectToIntroWithError` when `assembleSite` service fails', async () => {
- const initialState = 'preAssembleSite.assembleSite';
-
- const assembleSiteMock = jest.fn( () => Promise.reject() );
- const createProductsMock = jest.fn( () => {
- return Promise.resolve( {
- success: true,
- } );
- } );
- const installAndActivateThemeMock = jest.fn( () =>
- Promise.resolve()
- );
-
- const redirectToIntroWithErrorMock = jest.fn();
-
- const machine = createMockMachine( {
- services: {
- assembleSite: assembleSiteMock,
- createProducts: createProductsMock,
- installAndActivateTheme: installAndActivateThemeMock,
- },
- actions: {
- redirectToIntroWithError: redirectToIntroWithErrorMock,
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.assembleSite.pending'
- );
- } );
-
- expect( assembleSiteMock ).toHaveBeenCalled();
- expect( redirectToIntroWithErrorMock ).toHaveBeenCalled();
- } );
-
- it( 'should invoke `assembleSite` service', async () => {
- const initialState = 'preAssembleSite.assembleSite';
-
- const assembleSiteMock = jest.fn( () => Promise.resolve() );
- const installAndActivateThemeMock = jest.fn( () =>
- Promise.resolve()
- );
- const createProductsMock = jest.fn( () =>
- Promise.resolve( {
- success: true,
- } )
- );
-
- const machine = createMockMachine( {
- services: {
- assembleSite: assembleSiteMock,
- createProducts: createProductsMock,
- installAndActivateTheme: installAndActivateThemeMock,
- },
- actions: {
- redirectToAssemblerHub: jest.fn(),
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- const finalState = await waitFor( actor, ( currentState ) => {
- return currentState.matches( 'showAssembleHub' );
- } );
-
- expect( assembleSiteMock ).toHaveBeenCalled();
-
- expect( finalState.matches( 'showAssembleHub' ) ).toBeTruthy();
- } );
-
- it( 'should invoke `redirectToIntroWithError` when `createProducts` service fails', async () => {
- const initialState =
- 'preAssembleSite.preApiCallLoader.createProducts';
-
- const createProductsMock = jest.fn( () => Promise.reject() );
- const assembleSiteMock = jest.fn( () => Promise.resolve() );
- const installAndActivateThemeMock = jest.fn( () =>
- Promise.resolve()
- );
-
- const redirectToIntroWithErrorMock = jest.fn();
-
- const machine = createMockMachine( {
- services: {
- createProducts: createProductsMock,
- assembleSite: assembleSiteMock,
- installAndActivateTheme: installAndActivateThemeMock,
- },
- actions: {
- redirectToIntroWithError: redirectToIntroWithErrorMock,
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.createProducts.pending'
- );
- } );
-
- expect( createProductsMock ).toHaveBeenCalled();
- expect( redirectToIntroWithErrorMock ).toHaveBeenCalled();
- } );
-
- it( 'should invoke `createProducts` service', async () => {
- const initialState =
- 'preAssembleSite.preApiCallLoader.createProducts';
-
- const createProductsMock = jest.fn( () =>
- Promise.resolve( {
- success: true,
- } )
- );
-
- const machine = createMockMachine( {
- services: {
- createProducts: createProductsMock,
- },
- } );
-
- const state = machine.getInitialState( initialState );
-
- const actor = interpret( machine ).start( state );
-
- await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.createProducts.pending'
- );
- } );
-
- expect( createProductsMock ).toHaveBeenCalled();
-
- const finalState = await waitFor( actor, ( currentState ) => {
- return currentState.matches(
- 'preAssembleSite.preApiCallLoader.createProducts.success'
- );
- } );
-
- expect(
- finalState.matches(
- 'preAssembleSite.preApiCallLoader.createProducts.success'
- )
- ).toBeTruthy();
- } );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/types.ts b/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/types.ts
deleted file mode 100644
index 7c4dcbb19a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/design-without-ai/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type DesignWithoutAIStateMachineContext = {
- startLoadingTime: number | null;
- apiCallLoader: {
- hasErrors: boolean;
- };
- isFontLibraryAvailable: boolean;
- isPTKPatternsAPIAvailable: boolean;
- isBlockTheme: boolean;
-};
-
-export interface Theme {
- _links: {
- 'wp:user-global-styles': { href: string }[];
- };
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/global.d.ts b/plugins/woocommerce/client/admin/client/customize-store/global.d.ts
deleted file mode 100644
index 5a01dab9a7..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/global.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-declare global {
- interface Window {
- wcBlockSettings: {
- [ key: string ]: unknown;
- };
- }
-}
-
-/*~ If your module exports nothing, you'll need this line. Otherwise, delete it */
-export {};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/hooks/use-body-class.ts b/plugins/woocommerce/client/admin/client/customize-store/hooks/use-body-class.ts
deleted file mode 100644
index 3d6c70e6b8..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/hooks/use-body-class.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-// Counter to keep track of the number of components using a particular class
-const classCounter: Record< string, number > = {};
-
-const useBodyClass = ( className: string ) => {
- useEffect( () => {
- if ( typeof document === 'undefined' ) return;
-
- // Initialize or increment the counter for this class
- classCounter[ className ] = ( classCounter[ className ] || 0 ) + 1;
-
- // Add the class if this is the first component to request it
- if ( classCounter[ className ] === 1 ) {
- document.body.classList.add( className );
- }
-
- // Cleanup: Decrement the counter and remove the class if this is the last component to use it
- return () => {
- classCounter[ className ]--;
- if ( classCounter[ className ] === 0 ) {
- document.body.classList.remove( className );
- }
- };
- }, [ className ] );
-};
-
-export default useBodyClass;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/index.tsx
index dc951c8027..a2af5df160 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/index.tsx
+++ b/plugins/woocommerce/client/admin/client/customize-store/index.tsx
@@ -25,13 +25,13 @@ import { chevronRight, chevronLeft } from '@wordpress/icons';
import { useFullScreen } from '~/utils';
import { isWooExpress } from '~/utils/is-woo-express';
import { isFeatureEnabled } from '~/utils/features';
-import { SiteHub } from './assembler-hub/site-hub';
+import { SiteHub } from './site-hub';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { useDispatch, useSelect } from '@wordpress/data';
-import banner1Shape from './assets/images/banner-1-shape.svg';
-import banner2Shape from './assets/images/banner-2-shape.svg';
-import banner1Illu from './assets/images/banner-1-illu.svg';
-import banner2Illu from './assets/images/banner-2-illu.svg';
+import banner1Shape from './assets/banner-1-shape.svg';
+import banner2Shape from './assets/banner-2-shape.svg';
+import banner1Illu from './assets/banner-1-illu.svg';
+import banner2Illu from './assets/banner-2-illu.svg';
import './style.scss';
const CustomizeStoreController = () => {
@@ -278,43 +278,3 @@ const CustomizeStoreController = () => {
};
export default CustomizeStoreController;
-
-// ============================================================================
-// Stub exports for backwards compatibility with old flow code (intro, design-without-ai, etc.)
-// These will be removed in Phase 2 cleanup (see https://github.com/woocommerce/woocommerce/pull/61991).
-// ============================================================================
-
-/**
- * Stub event type for backwards compatibility.
- * The old state machine code references this type.
- */
-export type customizeStoreStateMachineEvents =
- | { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' }
- | { type: 'EXTERNAL_URL_UPDATE' }
- | { type: 'INSTALL_FONTS' }
- | { type: 'NO_AI_FLOW_ERROR'; payload: { hasError: boolean } }
- | { type: 'IS_FONT_LIBRARY_AVAILABLE'; payload: boolean }
- | { type: 'FINISH_CUSTOMIZATION' }
- | { type: 'SELECTED_BROWSE_ALL_THEMES' }
- | { type: 'DESIGN_WITHOUT_AI' }
- | { type: 'CLICKED_ON_BREADCRUMB' }
- | { type: 'JETPACK_OFFLINE_HOWTO' }
- | { type: 'SELECTED_NEW_THEME'; payload: { theme: string } }
- | { type: 'SELECTED_ACTIVE_THEME'; payload: { theme: string } };
-
-/**
- * Global window type declaration for backwards compatibility.
- * The old flow code sets/reads this global object.
- */
-declare global {
- interface Window {
- __wcCustomizeStore: {
- isFontLibraryAvailable: boolean | null;
- isPTKPatternsAPIAvailable: boolean | null;
- activeThemeHasMods: boolean | undefined;
- sendEventToIntroMachine: (
- typeEvent: customizeStoreStateMachineEvents
- ) => void;
- };
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/README.md b/plugins/woocommerce/client/admin/client/customize-store/intro/README.md
deleted file mode 100644
index 9158d274cb..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/README.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Intro page
-
-The logic for the Intro page is complex, and it varies based on multiple factors like:
-
-- The active theme
-- The status of the `Customize your store` tasks (completed or not)
-- The flow type (AI flow or not)
-
-## Core flow (no AI)
-
-| Theme | Task completed | Intro page |
-|---------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| TT4 | No |  |
-| TT4 | Yes | The "Customize your theme" and "Use the store designer" buttons go to the assembler.  |
-| Block | - | The "Go to the Editor" button opens the Editor (wp-admin/site-editor.php). "Use the store designer" opens a modal to inform the user their theme will change if they accept and it will start the CYS flow.  |
-| Classic | - | The "Go to the Customizer" button opens the Customizer (wp-admin/customize.php). "Use the store designer" opens a modal to inform the user their theme will change if they accept and it will start the flow.  |
-
-## AI flow
-
-| AI generated theme | Task completed | Intro page |
-|--------------------|----------------|--------------------------------------------------------------------------------------------------------------|
-| - | No |  |
-| No | Yes | The "Use the store designer" button shows a modal to warn about a theme switch.  |
-| Yes | Yes | The "Use the store designer" button shows a modal to warn about a theme switch.  |
-
-## Other
-
-### Network offline
-
-
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/actions.ts b/plugins/woocommerce/client/admin/client/customize-store/intro/actions.ts
deleted file mode 100644
index c2e9834806..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/actions.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * External dependencies
- */
-import { assign, DoneInvokeEvent } from 'xstate';
-import { TaskReferralRecord } from '@woocommerce/onboarding';
-
-/**
- * Internal dependencies
- */
-import { customizeStoreStateMachineEvents } from '..';
-import { customizeStoreStateMachineContext } from '../types';
-import { events } from './';
-import { isIframe } from '~/customize-store/utils';
-import { trackEvent } from '../tracking';
-
-export const assignActiveTheme = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- intro: ( context, event ) => {
- const activeTheme = (
- event as DoneInvokeEvent< {
- activeTheme: string;
- } >
- ).data.activeTheme;
- return { ...context.intro, activeTheme };
- },
-} );
-
-export const assignTaskReferral = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- intro: ( context, event ) => {
- const taskReferral = (
- event as DoneInvokeEvent< {
- taskReferral: TaskReferralRecord | null;
- } >
- ).data.taskReferral;
- return { ...context.intro, taskReferral };
- },
-} );
-
-export const recordTracksDesignWithoutAIClicked = () => {
- trackEvent( 'customize_your_store_intro_design_without_ai_click' );
-};
-
-export const recordTracksThemeSelected = (
- _context: customizeStoreStateMachineContext,
- event: Extract<
- events,
- { type: 'SELECTED_ACTIVE_THEME' | 'SELECTED_NEW_THEME' }
- >
-) => {
- trackEvent( 'customize_your_store_intro_theme_select', {
- theme: event.payload.theme,
- is_active: event.type === 'SELECTED_ACTIVE_THEME' ? 'yes' : 'no',
- } );
-};
-
-export const recordTracksBrowseAllThemesClicked = () => {
- trackEvent( 'customize_your_store_intro_browse_all_themes_click' );
-};
-
-export const assignCustomizeStoreCompleted = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- intro: ( context, event ) => {
- const customizeStoreTaskCompleted = (
- event as DoneInvokeEvent< {
- customizeStoreTaskCompleted: boolean;
- } >
- ).data.customizeStoreTaskCompleted;
- return { ...context.intro, customizeStoreTaskCompleted };
- },
-} );
-
-export const assignFetchIntroDataError = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents // this is actually the wrong type for the event but I still don't know how to type this properly
->( {
- intro: ( context ) => {
- return { ...context.intro, hasErrors: true };
- },
-} );
-
-export const assignNoAIFlowError = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- intro: ( context, event: unknown ) => {
- const { errorStatus } = event as { errorStatus: number | undefined };
- return {
- ...context.intro,
- hasErrors: true,
- errorStatus,
- };
- },
-} );
-
-export const assignIsFontLibraryAvailable = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- isFontLibraryAvailable: ( context, event: unknown ) => {
- return (
- event as {
- payload: boolean;
- }
- ).payload;
- },
-} );
-
-export const assignIsPTKPatternsAPIAvailable = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- isPTKPatternsAPIAvailable: ( context, event: unknown ) => {
- return (
- event as {
- payload: boolean;
- }
- ).payload;
- },
-} );
-
-export const assignActiveThemeHasMods = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- activeThemeHasMods: ( context, event: unknown ) => {
- return (
- event as DoneInvokeEvent< {
- activeThemeHasMods: boolean;
- } >
- ).data.activeThemeHasMods;
- },
-} );
-
-export const assignFlags = assign<
- customizeStoreStateMachineContext,
- customizeStoreStateMachineEvents
->( {
- activeThemeHasMods: () => {
- if ( ! isIframe( window ) ) {
- return window.__wcCustomizeStore.activeThemeHasMods;
- }
-
- return window.parent.__wcCustomizeStore.activeThemeHasMods;
- },
- isFontLibraryAvailable: () => {
- if ( ! isIframe( window ) ) {
- return window.__wcCustomizeStore.isFontLibraryAvailable;
- }
- const isFontLibraryAvailable =
- window.parent.__wcCustomizeStore.isFontLibraryAvailable || false;
- return isFontLibraryAvailable;
- },
- isPTKPatternsAPIAvailable: () => {
- if ( ! isIframe( window ) ) {
- return window.__wcCustomizeStore.isPTKPatternsAPIAvailable;
- }
- const isPTKPatternsAPIAvailable =
- window.parent.__wcCustomizeStore.isPTKPatternsAPIAvailable || false;
- return isPTKPatternsAPIAvailable;
- },
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/intro/index.tsx
deleted file mode 100644
index deef72017a..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/index.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { chevronLeft } from '@wordpress/icons';
-import interpolateComponents from '@automattic/interpolate-components';
-import { getNewPath } from '@woocommerce/navigation';
-import { Sender } from 'xstate';
-import { Notice } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { CustomizeStoreComponent } from '../types';
-import { SiteHub } from '../assembler-hub/site-hub';
-import { ThemeSwitchWarningModal } from './warning-modals';
-import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
-import './intro.scss';
-import {
- NetworkOfflineBanner,
- JetpackOfflineBanner,
- NoAIBanner,
- ExistingNoAiThemeBanner,
- ClassicThemeBanner,
- NonDefaultBlockThemeBanner,
- PickYourThemeBanner,
-} from './intro-banners';
-import welcomeTourImg from '../assets/images/design-your-own.svg';
-import professionalThemeImg from '../assets/images/professional-theme.svg';
-import { navigateOrParent } from '~/customize-store/utils';
-import { customizeStoreStateMachineEvents } from '~/customize-store';
-import { trackEvent } from '~/customize-store/tracking';
-
-export type events =
- | { type: 'JETPACK_OFFLINE_HOWTO' }
- | { type: 'CLICKED_ON_BREADCRUMB' }
- | { type: 'SELECTED_BROWSE_ALL_THEMES' }
- | { type: 'SELECTED_ACTIVE_THEME'; payload: { theme: string } }
- | { type: 'SELECTED_NEW_THEME'; payload: { theme: string } }
- | { type: 'DESIGN_WITHOUT_AI' };
-
-export * as actions from './actions';
-export * as services from './services';
-
-type BannerStatus = keyof typeof BANNER_COMPONENTS;
-
-const BANNER_COMPONENTS = {
- 'network-offline': NetworkOfflineBanner,
- 'jetpack-offline': JetpackOfflineBanner,
- 'no-ai': NoAIBanner,
- 'existing-no-ai-theme': ExistingNoAiThemeBanner,
- 'classic-theme': ClassicThemeBanner,
- 'non-default-block-theme': NonDefaultBlockThemeBanner,
-};
-
-const CustomizedThemeBanners = ( {
- isBlockTheme,
- isDefaultTheme,
- sendEvent,
-}: {
- isBlockTheme: boolean | undefined;
- isDefaultTheme: boolean | undefined;
- sendEvent: Sender< customizeStoreStateMachineEvents >;
-} ) => {
- const [ isModalOpen, setIsModalOpen ] = useState( false );
-
- return (
- <>
- <p className="select-theme-text">
- { __( 'Design or choose a new theme', 'woocommerce' ) }
- </p>
-
- <div className="woocommerce-customize-store-cards">
- <div className="intro-card">
- <img
- src={ welcomeTourImg }
- alt={ __( 'Design your own theme', 'woocommerce' ) }
- />
-
- <div>
- <h2 className="intro-card__title">
- { __( 'Design your own theme', 'woocommerce' ) }
- </h2>
-
- <button
- className="intro-card__link"
- onClick={ () => {
- trackEvent(
- 'customize_your_store_intro_design_theme',
- {
- theme_type: isBlockTheme
- ? 'block'
- : 'classic',
- }
- );
- if ( isDefaultTheme ) {
- navigateOrParent(
- window,
- getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub',
- {}
- )
- );
- } else {
- setIsModalOpen( true );
- }
- } }
- >
- { __( 'Use the store designer', 'woocommerce' ) }
- </button>
- </div>
- </div>
-
- <div className="intro-card">
- <img
- src={ professionalThemeImg }
- alt={ __(
- 'Choose a professionally designed theme',
- 'woocommerce'
- ) }
- />
-
- <div>
- <h2 className="intro-card__title">
- { __(
- 'Choose a professionally designed theme',
- 'woocommerce'
- ) }
- </h2>
-
- <button
- className="intro-card__link"
- onClick={ () => {
- trackEvent(
- 'customize_your_store_intro_browse_themes'
- );
- sendEvent( {
- type: 'SELECTED_BROWSE_ALL_THEMES',
- } );
- } }
- >
- { __( 'Browse themes', 'woocommerce' ) }
- </button>
- </div>
- </div>
- </div>
- { isModalOpen && (
- <ThemeSwitchWarningModal
- setIsModalOpen={ setIsModalOpen }
- redirectToCYSFlow={ () =>
- sendEvent( {
- type: 'DESIGN_WITHOUT_AI',
- } )
- }
- />
- ) }
- </>
- );
-};
-
-export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
- const {
- intro: { activeTheme, customizeStoreTaskCompleted },
- } = context;
-
- const isJetpackOffline = false;
-
- const isNetworkOffline = useNetworkStatus();
-
- const [ showError, setShowError ] = useState( context.intro.hasErrors );
-
- const errorMessage =
- context.intro.errorStatus === 403
- ? __(
- "Sorry, you don't have permission to update the theme.",
- 'woocommerce'
- )
- : __(
- 'Oops! We encountered a problem while setting up the foundations. {{anchor}}Please try again{{/anchor}} or start with a theme.',
- 'woocommerce'
- );
-
- let bannerStatus: BannerStatus = 'no-ai';
-
- const isDefaultTheme = activeTheme === 'twentytwentyfour';
- interface Theme {
- is_block_theme?: boolean;
- }
-
- const currentTheme = useSelect( ( select ) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- return select( 'core' ).getCurrentTheme() as Theme;
- }, [] );
-
- const isBlockTheme = currentTheme?.is_block_theme;
-
- switch ( true ) {
- case isNetworkOffline:
- bannerStatus = 'network-offline';
- break;
- case isJetpackOffline as boolean:
- bannerStatus = 'jetpack-offline';
- break;
- case ! isBlockTheme:
- bannerStatus = 'classic-theme';
- break;
- case isBlockTheme && ! isDefaultTheme:
- bannerStatus = 'non-default-block-theme';
- break;
- case ! customizeStoreTaskCompleted:
- bannerStatus = 'no-ai';
- break;
- case customizeStoreTaskCompleted:
- bannerStatus = 'existing-no-ai-theme';
- break;
- }
-
- const BannerComponent = BANNER_COMPONENTS[
- bannerStatus
- ] as React.ComponentType< {
- redirectToCYSFlow: () => void;
- sendEvent: Sender< customizeStoreStateMachineEvents >;
- } >;
-
- const sidebarMessage = __(
- 'Design a store that reflects your brand and business. Customize your active theme, select a professionally designed theme, or create a new look using our store designer.',
- 'woocommerce'
- );
-
- return (
- <>
- <div className="woocommerce-customize-store-header">
- <SiteHub
- isTransparent={ false }
- className="woocommerce-customize-store__content"
- />
- </div>
-
- <div className="woocommerce-customize-store-container">
- <div className="woocommerce-customize-store-sidebar">
- <div className="woocommerce-customize-store-sidebar__title">
- <button
- onClick={ () => {
- sendEvent( 'CLICKED_ON_BREADCRUMB' );
- } }
- >
- { chevronLeft }
- </button>
- { __( 'Customize your store', 'woocommerce' ) }
- </div>
- <p>{ sidebarMessage }</p>
- </div>
-
- <div className="woocommerce-customize-store-main">
- { showError && (
- <Notice
- onRemove={ () => setShowError( false ) }
- className="woocommerce-cys-design-with-ai__error-notice"
- status="error"
- >
- { interpolateComponents( {
- mixedString: errorMessage,
- components: {
- anchor: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid
- <a
- className="woocommerce-customize-store-error-link"
- onClick={ () =>
- sendEvent( 'DESIGN_WITHOUT_AI' )
- }
- />
- ),
- },
- } ) }
- </Notice>
- ) }
- <BannerComponent
- redirectToCYSFlow={ () =>
- sendEvent( 'DESIGN_WITHOUT_AI' )
- }
- sendEvent={ sendEvent }
- />
-
- { isDefaultTheme && ! customizeStoreTaskCompleted ? (
- <PickYourThemeBanner sendEvent={ sendEvent } />
- ) : (
- <CustomizedThemeBanners
- isBlockTheme={ isBlockTheme }
- isDefaultTheme={ isDefaultTheme }
- sendEvent={ sendEvent }
- />
- ) }
- </div>
- </div>
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce/client/admin/client/customize-store/intro/intro-banners.tsx
deleted file mode 100644
index 449d56bc58..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/intro-banners.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-/**
- * External dependencies
- */
-import { Sender } from 'xstate';
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import { Button } from '@wordpress/components';
-import { getNewPath } from '@woocommerce/navigation';
-import interpolateComponents from '@automattic/interpolate-components';
-import { Link } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { IntroSiteIframe } from './intro-site-iframe';
-import type { customizeStoreStateMachineEvents } from '~/customize-store';
-import { ADMIN_URL, getAdminSetting } from '~/utils/admin-settings';
-import { navigateOrParent } from '../utils';
-import { trackEvent } from '../tracking';
-
-export const BaseIntroBanner = ( {
- bannerTitle,
- bannerText,
- bannerClass,
- showAIDisclaimer,
- buttonIsLink,
- bannerButtonOnClick,
- bannerButtonText,
- secondaryButton,
- previewBanner,
- children,
- isSecondaryBanner,
-}: {
- bannerTitle: string;
- bannerText: string | React.ReactNode;
- bannerClass: string;
- showAIDisclaimer: boolean;
- buttonIsLink?: boolean;
- bannerButtonOnClick?: () => void;
- bannerButtonText?: string;
- secondaryButton?: React.ReactNode;
- previewBanner?: React.ReactNode;
- children?: React.ReactNode;
- isSecondaryBanner?: boolean;
-} ) => {
- const TextTag = typeof bannerText === 'string' ? 'p' : 'div';
- const TitleTag = isSecondaryBanner ? 'h2' : 'h1';
- return (
- <div
- className={ clsx(
- 'woocommerce-customize-store-banner',
- bannerClass
- ) }
- >
- <div className={ `woocommerce-customize-store-banner-content` }>
- <div className="banner-actions">
- <TitleTag>{ bannerTitle }</TitleTag>
- <TextTag>{ bannerText }</TextTag>
- { bannerButtonText && (
- <Button
- onClick={ () =>
- bannerButtonOnClick && bannerButtonOnClick()
- }
- variant={ buttonIsLink ? 'link' : 'primary' }
- >
- { bannerButtonText }
- </Button>
- ) }
- { secondaryButton }
- { showAIDisclaimer && (
- <p className="ai-disclaimer">
- { interpolateComponents( {
- mixedString: __(
- 'Powered by experimental AI. {{link}}Learn more{{/link}}',
- 'woocommerce'
- ),
- components: {
- link: (
- <Link
- href="https://automattic.com/ai-guidelines"
- target="_blank"
- type="external"
- />
- ),
- },
- } ) }
- </p>
- ) }
- </div>
- { children }
- </div>
- { previewBanner }
- </div>
- );
-};
-
-export const NetworkOfflineBanner = () => {
- return (
- <BaseIntroBanner
- bannerTitle={ __(
- 'Looking to design your store using AI?',
- 'woocommerce'
- ) }
- bannerText={ __(
- "Unfortunately, the [AI Store designer] isn't available right now as we can't detect your network. Please check your internet connection.",
- 'woocommerce'
- ) }
- bannerClass="offline-banner"
- bannerButtonOnClick={ () => {} }
- showAIDisclaimer={ true }
- />
- );
-};
-
-export const JetpackOfflineBanner = ( {
- sendEvent,
-}: {
- sendEvent: Sender< customizeStoreStateMachineEvents >;
-} ) => {
- return (
- <BaseIntroBanner
- bannerTitle={ __(
- 'Looking to design your store using AI?',
- 'woocommerce'
- ) }
- bannerText={ __(
- "It looks like you're using Jetpack's offline mode — switch to online mode to start designing with AI.",
- 'woocommerce'
- ) }
- bannerClass="offline-banner"
- buttonIsLink={ false }
- bannerButtonOnClick={ () => {
- sendEvent( {
- type: 'JETPACK_OFFLINE_HOWTO',
- } );
- } }
- bannerButtonText={ __( 'Find out how', 'woocommerce' ) }
- showAIDisclaimer={ true }
- />
- );
-};
-
-export const NoAIBanner = ( {
- redirectToCYSFlow,
-}: {
- redirectToCYSFlow: () => void;
-} ) => {
- return (
- <BaseIntroBanner
- bannerTitle={ __( 'Design your own', 'woocommerce' ) }
- bannerText={ __(
- 'Quickly create a beautiful store using our built-in store designer. Choose your layout, select a style, and much more.',
- 'woocommerce'
- ) }
- bannerClass="no-ai-banner"
- bannerButtonText={ __( 'Start designing', 'woocommerce' ) }
- bannerButtonOnClick={ () => {
- redirectToCYSFlow();
- } }
- showAIDisclaimer={ false }
- />
- );
-};
-
-export const ExistingNoAiThemeBanner = () => {
- const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
-
- return (
- <BaseIntroBanner
- bannerTitle={ __( 'Customize your theme', 'woocommerce' ) }
- bannerText={ __(
- 'Customize everything from the color palette and the fonts to the page layouts, making sure every detail aligns with your brand.',
- 'woocommerce'
- ) }
- bannerClass="existing-no-ai-theme-banner"
- buttonIsLink={ false }
- bannerButtonOnClick={ () => {
- trackEvent( 'customize_your_store_intro_customize_click', {
- theme_type: 'block',
- } );
- navigateOrParent(
- window,
- getNewPath(
- { customizing: true },
- '/customize-store/assembler-hub',
- {}
- )
- );
- } }
- bannerButtonText={ __( 'Customize your store', 'woocommerce' ) }
- showAIDisclaimer={ false }
- previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
- ></BaseIntroBanner>
- );
-};
-
-export const ClassicThemeBanner = () => {
- const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
-
- return (
- <BaseIntroBanner
- bannerTitle={ __( 'Customize your theme', 'woocommerce' ) }
- bannerText={ __(
- 'Customize everything from the color palette and the fonts to the page layouts, making sure every detail aligns with your brand.',
- 'woocommerce'
- ) }
- bannerClass="existing-no-ai-theme-banner"
- buttonIsLink={ false }
- bannerButtonOnClick={ () => {
- trackEvent( 'customize_your_store_intro_customize_click', {
- theme_type: 'classic',
- } );
- navigateOrParent(
- window,
- 'customize.php?return=/wp-admin/themes.php'
- );
- } }
- bannerButtonText={ __( 'Go to the Customizer', 'woocommerce' ) }
- showAIDisclaimer={ false }
- previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
- ></BaseIntroBanner>
- );
-};
-
-export const NonDefaultBlockThemeBanner = () => {
- const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
-
- return (
- <BaseIntroBanner
- bannerTitle={ __( 'Customize your theme', 'woocommerce' ) }
- bannerText={ __(
- 'Customize everything from the color palette and the fonts to the page layouts, making sure every detail aligns with your brand.',
- 'woocommerce'
- ) }
- bannerClass="existing-no-ai-theme-banner"
- buttonIsLink={ false }
- bannerButtonOnClick={ () => {
- trackEvent( 'customize_your_store_intro_customize_click', {
- theme_type: 'block',
- } );
- navigateOrParent( window, `${ ADMIN_URL }site-editor.php` );
- } }
- bannerButtonText={ __( 'Go to the Editor', 'woocommerce' ) }
- showAIDisclaimer={ false }
- previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
- ></BaseIntroBanner>
- );
-};
-
-export const PickYourThemeBanner = ( {
- sendEvent,
-}: {
- sendEvent: Sender< customizeStoreStateMachineEvents >;
-} ) => {
- return (
- <BaseIntroBanner
- isSecondaryBanner
- bannerTitle={ __( 'Pick your perfect theme', 'woocommerce' ) }
- bannerText={
- <div className="pick-your-theme-banner__content">
- <p>
- { __(
- 'Bring your vision to life — no coding required. Explore hundreds of free and paid ecommerce-optimized themes.',
- 'woocommerce'
- ) }
- </p>
- <ul>
- <li>
- { __( 'Themes for every industry', 'woocommerce' ) }
- </li>
- <li>
- { __(
- 'Ready to use out of the box',
- 'woocommerce'
- ) }
- </li>
- <li>
- { __(
- '30-day money-back guarantee',
- 'woocommerce'
- ) }
- </li>
- </ul>
- </div>
- }
- bannerButtonText={ __( 'Browse the Marketplace', 'woocommerce' ) }
- bannerButtonOnClick={ () => {
- sendEvent( {
- type: 'SELECTED_BROWSE_ALL_THEMES',
- } );
- } }
- showAIDisclaimer={ false }
- bannerClass="pick-your-theme-banner"
- />
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/intro-site-iframe.tsx b/plugins/woocommerce/client/admin/client/customize-store/intro/intro-site-iframe.tsx
deleted file mode 100644
index 0632570bce..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/intro-site-iframe.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const IntroSiteIframe = ( { siteUrl }: { siteUrl: string } ) => {
- return (
- <iframe
- className="preview-iframe"
- src={ siteUrl }
- title="Preview"
- tabIndex={ -1 }
- ></iframe>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/intro.scss b/plugins/woocommerce/client/admin/client/customize-store/intro/intro.scss
deleted file mode 100644
index 1dfd621d76..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/intro.scss
+++ /dev/null
@@ -1,287 +0,0 @@
-.woocommerce-customize-store__container {
- display: flex;
- flex-direction: column;
-
- button {
- cursor: pointer;
- }
-}
-
-.woocommerce-customize-store-error-link {
- cursor: pointer;
-}
-
-.woocommerce-customize-store-header {
- min-height: 64px;
- padding: 1rem;
- width: 100%;
-
- .woocommerce-edit-site-site-hub__view-mode-toggle-container {
- background-color: transparent;
- height: 32px;
- width: 32px;
- }
-
- .edit-site-site-icon {
- line-height: 0;
-
- svg {
- height: 32px;
- width: 32px;
- }
- }
-
- .woocommerce-edit-site-site-hub__site-title {
- font-size: 0.8125rem;
- font-weight: 500;
- margin: 0;
- padding: 0 0 0 0.75rem;
- line-height: 2rem;
- color: $gray-900;
- }
-}
-
-.woocommerce-customize-store-container {
- display: flex;
- flex-direction: row;
-}
-
-.woocommerce-customize-store-sidebar {
- flex: 0 0 380px;
- padding: 1rem;
-
- .woocommerce-customize-store-sidebar__title {
- color: #1e1e1e;
- font-size: 1rem;
- font-weight: 600;
- margin: 0;
- padding: 0;
- line-height: 2.5;
- }
-
- button {
- background-color: transparent;
- border: none;
- line-height: 1;
- padding-right: 0;
- vertical-align: middle;
- }
-
- svg {
- color: inherit;
- height: 24px;
- width: 24px;
- margin: 0.25rem;
- }
-
- p {
- padding: 0 1rem;
- color: #757575;
- max-width: 20rem;
- }
-}
-
-.woocommerce-customize-store-main {
- margin-right: 2.5rem;
- width: 100%;
- min-width: 820px;
-
- p {
- color: #2f2f2f;
- font-size: 0.813rem;
- line-height: 1.5;
- margin: 0;
- padding: 0;
-
- &.select-theme-text {
- font-size: 1rem;
- font-weight: 500;
- color: #1e1e1e;
- margin-bottom: 24px;
- }
- }
-
- .woocommerce-cys-design-with-ai__error-notice {
- margin: 0 0 24px;
- }
-}
-
-.woocommerce-customize-store-banner {
- background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-background.svg) no-repeat center right;
- background-size: auto 218px;
- background-position-y: 29px;
- border-radius: 4px;
- display: flex;
- margin: 1.25rem 0 3.375rem;
- min-height: 248px;
- width: 100%;
- align-items: center;
- padding-left: 50px;
- padding-right: 40px;
- position: relative;
-
- &.offline-banner {
- background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right;
- background-size: auto 218px;
- background-position-y: 29px;
- }
-
- &.no-ai-banner {
- background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-no-ai.svg) no-repeat center right;
- }
-
- &.pick-your-theme-banner {
- background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-themes.svg) no-repeat center right;
- background-size: contain;
-
- .woocommerce-customize-store-banner-content {
- width: 550px;
-
- @media only screen and (min-width: 1400px) {
- width: 710px;
- }
- }
- }
-
- &.existing-ai-theme-banner,
- &.existing-no-ai-theme-banner {
- background: rgba(246, 247, 247, 1);
-
- .woocommerce-customize-store-banner-content {
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .banner-actions {
- width: 50%;
- }
- }
-
- .preview-iframe {
- pointer-events: none;
- position: absolute;
- bottom: -497px;
- right: 50px;
- width: 1100px;
- height: 710px;
- -moz-transform: scale(0.3);
- -moz-transform-origin: top right;
- -o-transform: scale(0.3);
- -o-transform-origin: top right;
- -webkit-transform: scale(0.3);
- -webkit-transform-origin: top right;
- border-top-left-radius: 28px;
- border-top-right-radius: 28px;
- }
- }
-
- .woocommerce-customize-store-banner-content {
- width: 450px;
-
- @media only screen and (min-width: 1400px) {
- width: 710px;
- }
-
- button.is-link {
- color: var(--wp-admin-theme-color, #3858e9);
- text-decoration: none;
- font-weight: 500;
- }
-
- button.components-button {
- padding: 8px 16px;
- height: 40px;
- }
-
- button.components-button + button.components-button { // add left margin for all buttons with another button to its left
- margin-left: 12px;
- }
-
- h1,
- h2 {
- font-size: 1.25rem;
- line-height: 23.87px;
- font-weight: 500;
- color: #000;
- padding: 0;
- }
-
- p {
- margin: 12px 0 28px 0;
- color: #2f2f2f;
- line-height: 16px;
-
- &.ai-disclaimer {
- color: #757575;
- font-size: 12px;
- margin-top: 10px;
- margin-bottom: 0;
- line-height: 18px;
-
- a {
- text-decoration: none;
- }
- }
- }
-
- .pick-your-theme-banner__content {
- display: flex;
- gap: 1rem;
- flex-direction: row;
-
- ul {
- flex: 1 1 50%;
- list-style: disc;
- padding-left: 1rem;
-
- li {
- margin-bottom: 0;
- line-height: 1.5;
- }
- }
-
- p {
- line-height: 1.5;
- max-width: 255px;
- }
- }
- }
-}
-
-.woocommerce-customize-store-cards {
- display: flex;
- flex-wrap: wrap;
- gap: 32px;
- margin-bottom: 40px;
-
- .intro-card {
- border-radius: 4px;
- border: 1px solid #e9e9e9;
- text-align: center;
- padding: 36px 51px;
- margin-top: 0;
- width: 390px;
- max-height: 320px;
-
- img {
- width: 100%;
- height: 170px;
- margin-bottom: 20px;
- }
-
- div {
- text-align: left;
- .intro-card__title {
- font-size: 14px;
- }
-
- .intro-card__link {
- background-color: #fff;
- border: 0;
- padding: 0;
- color: #3858e9;
- font-size: 13px;
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai1.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai1.png
deleted file mode 100644
index 2c5a2ebc82..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai1.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai2.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai2.png
deleted file mode 100644
index 69251badb6..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai2.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai3.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai3.png
deleted file mode 100644
index c7c81d4080..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/ai3.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai1.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai1.png
deleted file mode 100644
index 97ef10a893..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai1.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai2.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai2.png
deleted file mode 100644
index cb595b876c..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai2.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai3.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai3.png
deleted file mode 100644
index c56a7decc2..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai3.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai4.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai4.png
deleted file mode 100644
index 6108dbebd6..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/noai4.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/offline.png b/plugins/woocommerce/client/admin/client/customize-store/intro/readme/offline.png
deleted file mode 100644
index d89cd0480c..0000000000
Binary files a/plugins/woocommerce/client/admin/client/customize-store/intro/readme/offline.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/services.ts b/plugins/woocommerce/client/admin/client/customize-store/intro/services.ts
deleted file mode 100644
index 9ac1a2bdc3..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/services.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * External dependencies
- */
-import { resolveSelect } from '@wordpress/data';
-import { onboardingStore } from '@woocommerce/data';
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import { aiStatusResponse } from '../types';
-import { isIframe } from '~/customize-store/utils';
-
-export const fetchAiStatus = async (): Promise< aiStatusResponse > => {
- const response = await fetch(
- 'https://status.openai.com/api/v2/status.json'
- );
- const data = await response.json();
- return data;
-};
-
-export const fetchCustomizeStoreCompleted = async () => {
- const task = await resolveSelect( onboardingStore ).getTask(
- 'customize-store'
- );
-
- return {
- customizeStoreTaskCompleted: task?.isComplete,
- };
-};
-
-export const fetchIntroData = async () => {
- const task = await resolveSelect( onboardingStore ).getTask(
- 'customize-store'
- );
-
- const customizeStoreTaskCompleted = task?.isComplete;
-
- interface Theme {
- stylesheet?: string;
- }
-
- const theme = ( await resolveSelect( 'core' ).getCurrentTheme() ) as Theme;
-
- return {
- customizeStoreTaskCompleted,
- activeTheme: theme.stylesheet || '',
- };
-};
-
-const fetchIsFontLibraryAvailable = async () => {
- try {
- await apiFetch( {
- path: '/wp/v2/font-collections?_fields=slug',
- method: 'GET',
- } );
-
- return true;
- } catch ( err ) {
- return false;
- }
-};
-
-const fetchIsPTKPatternsAPIAvailable = async () => {
- try {
- await apiFetch( {
- path: '/wc/private/patterns',
- method: 'GET',
- } );
-
- return true;
- } catch ( err ) {
- return false;
- }
-};
-
-export const setFlags = async () => {
- if ( ! isIframe( window ) ) {
- // To improve the readability of the code, we want to use a dictionary
- // where the key is the feature flag name and the value is the
- // function to retrieve flag value.
-
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const _featureFlags = {
- FONT_LIBRARY_AVAILABLE: ( async () => {
- const isFontLibraryAvailable =
- await fetchIsFontLibraryAvailable();
- window.__wcCustomizeStore = {
- ...window.__wcCustomizeStore,
- isFontLibraryAvailable,
- };
- } )(),
- PTK_PATTERNS_API_AVAILABLE: ( async () => {
- const isPTKPatternsAPIAvailable =
- await fetchIsPTKPatternsAPIAvailable();
- window.__wcCustomizeStore = {
- ...window.__wcCustomizeStore,
- isPTKPatternsAPIAvailable,
- };
- } )(),
- };
-
- // Since the _featureFlags values are promises, we need to wait for
- // all of them to resolve before returning.
- await Promise.all( Object.values( _featureFlags ) );
- }
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/test/intro-banner.test.tsx b/plugins/woocommerce/client/admin/client/customize-store/intro/test/intro-banner.test.tsx
deleted file mode 100644
index d912c6329f..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/test/intro-banner.test.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import { AnyInterpreter } from 'xstate';
-
-/**
- * Internal dependencies
- */
-import { Intro } from '../';
-import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
-
-jest.mock( '../../assembler-hub/site-hub', () => ( {
- SiteHub: jest.fn( () => null ),
-} ) );
-jest.mock( '~/utils/react-hooks/use-network-status', () => ( {
- useNetworkStatus: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/data', () => {
- const originalModule = jest.requireActual( '@wordpress/data' );
- return {
- ...originalModule,
- useSelect: jest.fn( () => ( {
- is_block_theme: true,
- } ) ),
- };
-} );
-describe( 'Intro Banners', () => {
- it( 'should display NetworkOfflineBanner when network is offline', () => {
- ( useNetworkStatus as jest.Mock ).mockImplementation( () => true );
- render(
- <Intro
- sendEvent={ jest.fn() }
- context={ {
- intro: {
- hasErrors: false,
- errorStatus: undefined,
- activeTheme: '',
- customizeStoreTaskCompleted: false,
- },
- themeConfiguration: {},
- isFontLibraryAvailable: false,
- isPTKPatternsAPIAvailable: false,
- activeThemeHasMods: false,
- } }
- currentState={ 'intro' }
- parentMachine={ null as unknown as AnyInterpreter }
- />
- );
-
- expect(
- screen.getByText( /Please check your internet connection./i )
- ).toBeInTheDocument();
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/intro/warning-modals.tsx b/plugins/woocommerce/client/admin/client/customize-store/intro/warning-modals.tsx
deleted file mode 100644
index a06ecc5790..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/intro/warning-modals.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Link } from '@woocommerce/components';
-import { createInterpolateElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ADMIN_URL } from '~/utils/admin-settings';
-import { trackEvent } from '../tracking';
-
-export const ThemeSwitchWarningModal = ( {
- isNoAiFlow = true,
- setIsModalOpen,
- redirectToCYSFlow,
-}: {
- isNoAiFlow?: boolean;
- setIsModalOpen: ( arg0: boolean ) => void;
- redirectToCYSFlow: () => void;
-} ) => {
- return (
- <Modal
- className={
- 'woocommerce-customize-store__theme-switch-warning-modal'
- }
- title={ __(
- 'Are you sure you want to design a new theme?',
- 'woocommerce'
- ) }
- onRequestClose={ () => setIsModalOpen( false ) }
- shouldCloseOnClickOutside={ false }
- >
- <p>
- { isNoAiFlow
- ? __(
- 'Your active theme will be changed and you could lose any changes you’ve made to it.',
- 'woocommerce'
- )
- : createInterpolateElement(
- __(
- "The Store Designer will create a new store design for you, and you'll lose any changes you've made to your active theme. If you'd prefer to continue editing your theme, you can do so via the <EditorLink>Editor</EditorLink>.",
- 'woocommerce'
- ),
- {
- EditorLink: (
- <Link
- onClick={ () => {
- window.open(
- `${ ADMIN_URL }site-editor.php`,
- '_blank'
- );
- return false;
- } }
- href=""
- />
- ),
- }
- ) }
- </p>
- <div className="woocommerce-customize-store__theme-switch-warning-modal-footer">
- <Button
- onClick={ () => {
- setIsModalOpen( false );
- } }
- variant="link"
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- onClick={ () => {
- setIsModalOpen( false );
- trackEvent(
- 'customize_your_store_agree_to_theme_switch_click'
- );
- redirectToCYSFlow();
- } }
- variant="primary"
- >
- { __( 'Design a new theme', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/entrepreneur-flow.ts b/plugins/woocommerce/client/admin/client/customize-store/site-hub/entrepreneur-flow.ts
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/entrepreneur-flow.ts
rename to plugins/woocommerce/client/admin/client/customize-store/site-hub/entrepreneur-flow.ts
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/site-hub.tsx b/plugins/woocommerce/client/admin/client/customize-store/site-hub/index.tsx
similarity index 97%
rename from plugins/woocommerce/client/admin/client/customize-store/assembler-hub/site-hub.tsx
rename to plugins/woocommerce/client/admin/client/customize-store/site-hub/index.tsx
index a06bd94df7..01d01a4f36 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/site-hub.tsx
+++ b/plugins/woocommerce/client/admin/client/customize-store/site-hub/index.tsx
@@ -24,8 +24,8 @@ import WordPressLogo from '~/lib/wordpress-logo';
/**
* Internal dependencies
*/
-import './gutenberg-styles/site-hub.scss';
-import { isEntrepreneurFlow } from '../entrepreneur-flow';
+import './site-hub.scss';
+import { isEntrepreneurFlow } from './entrepreneur-flow';
const HUB_ANIMATION_DURATION = 0.3;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/site-hub.scss b/plugins/woocommerce/client/admin/client/customize-store/site-hub/site-hub.scss
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/site-hub.scss
rename to plugins/woocommerce/client/admin/client/customize-store/site-hub/site-hub.scss
diff --git a/plugins/woocommerce/client/admin/client/customize-store/test/utils.test.js b/plugins/woocommerce/client/admin/client/customize-store/test/utils.test.js
deleted file mode 100644
index b7eadc82d6..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/test/utils.test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Internal dependencies
- */
-import { setLogoWidth } from '../utils';
-
-describe( 'setLogoWidth', () => {
- it( 'should replace the width value in the JSON object with 60', () => {
- const input = `<!-- wp:site-logo {"shouldSyncIcon":false} /-->`;
- const expectedOutput = `<!-- wp:site-logo {"shouldSyncIcon":false,"width":60} /-->`;
- expect( setLogoWidth( input ) ).toEqual( expectedOutput );
- } );
-
- it( 'should add a width value of 60 to the JSON object if it does not exist', () => {
- const input = `<!-- wp:site-logo /-->`;
- const expectedOutput = `<!-- wp:site-logo {"width":60} /-->`;
- expect( setLogoWidth( input ) ).toEqual( expectedOutput );
- } );
-
- it( 'should replace the width value in the JSON object for multiple instances', () => {
- const input = `
- <!-- wp:site-logo {"width":120} /-->
- <!-- wp:site-logo /-->
- `;
- const expectedOutput = `
- <!-- wp:site-logo {"width":60} /-->
- <!-- wp:site-logo {"width":60} /-->
- `;
- expect( setLogoWidth( input ) ).toEqual( expectedOutput );
- } );
-
- it( 'should handle other properties in the JSON object', () => {
- const input = `<!-- wp:site-logo {"width":120,"height":80} /-->`;
- const expectedOutput = `<!-- wp:site-logo {"width":60,"height":80} /-->`;
- expect( setLogoWidth( input ) ).toEqual( expectedOutput );
- } );
-
- it( 'should not modify other comments in the input', () => {
- const input = `
- <!-- wp:site-logo {"width":120} /-->
- <!-- Some other comment -->
- `;
- const expectedOutput = `
- <!-- wp:site-logo {"width":60} /-->
- <!-- Some other comment -->
- `;
- expect( setLogoWidth( input ) ).toEqual( expectedOutput );
- } );
-
- it( 'should use the provided width if specified', () => {
- const input = `<!-- wp:site-logo {"width":120} /-->`;
- const customWidth = 80;
- const expectedOutput = `<!-- wp:site-logo {"width":80} /-->`;
- expect( setLogoWidth( input, customWidth ) ).toEqual( expectedOutput );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/tracking/index.ts b/plugins/woocommerce/client/admin/client/customize-store/tracking/index.ts
deleted file mode 100644
index 2f0c15af1f..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/tracking/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import {
- ENTREPRENEUR_FLOW_QUERY_PARAM_VALUE,
- isEntrepreneurFlow,
-} from '../entrepreneur-flow';
-import { isWooExpress } from '~/utils/is-woo-express';
-
-export const trackEvent = (
- eventName: string,
- properties?: Record< string, unknown >
-) => {
- if ( isWooExpress() && isEntrepreneurFlow() ) {
- recordEvent( eventName, {
- ...properties,
- ref: ENTREPRENEUR_FLOW_QUERY_PARAM_VALUE,
- } );
- return;
- }
-
- recordEvent( eventName, properties );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/tracking/test/track-event.test.ts b/plugins/woocommerce/client/admin/client/customize-store/tracking/test/track-event.test.ts
deleted file mode 100644
index 08c3535680..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/tracking/test/track-event.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { trackEvent } from '..';
-import { isWooExpress } from '~/utils/is-woo-express';
-import { isEntrepreneurFlow } from '~/customize-store/entrepreneur-flow';
-
-jest.mock( '@woocommerce/tracks', () => ( {
- recordEvent: jest.fn(),
-} ) );
-
-jest.mock( '~/utils/is-woo-express', () => ( {
- isWooExpress: jest.fn().mockReturnValue( false ),
-} ) );
-
-jest.mock( '~/customize-store/entrepreneur-flow', () => {
- const originalModule = jest.requireActual(
- '~/customize-store/entrepreneur-flow'
- );
- return {
- ...originalModule,
- isEntrepreneurFlow: jest.fn().mockReturnValue( false ),
- };
-} );
-
-describe( 'recordEvent', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should invoke recordEvent without additional parameter - no Woo Express env', async () => {
- trackEvent( 'test_event', {
- key: 'value',
- } );
-
- expect( recordEvent ).toBeCalledWith( 'test_event', {
- key: 'value',
- } );
- } );
-
- it( 'should invoke recordEvent without additional parameter - Woo Express env', async () => {
- ( isWooExpress as jest.Mock ).mockReturnValue( true );
-
- trackEvent( 'test_event', {
- key: 'value',
- } );
-
- expect( recordEvent ).toBeCalledWith( 'test_event', {
- key: 'value',
- } );
- } );
-
- it( 'should invoke recordEvent with additional parameter', async () => {
- ( isWooExpress as jest.Mock ).mockReturnValue( true );
- ( isEntrepreneurFlow as jest.Mock ).mockReturnValue( true );
- trackEvent( 'test_event', {
- key: 'value',
- } );
-
- expect( recordEvent ).toBeCalledWith( 'test_event', {
- key: 'value',
- ref: 'entrepreneur-signup',
- } );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/transitional/index.tsx
deleted file mode 100644
index 93ecd54df2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/index.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { getSetting } from '@woocommerce/settings';
-import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { SiteHub } from '../assembler-hub/site-hub';
-import { ADMIN_URL } from '~/utils/admin-settings';
-
-import './style.scss';
-import { WooCYSSecondaryButtonSlot } from './secondary-button-slot';
-import lessonPlan from '../assets/icons/lesson-plan.js';
-import { Icon, brush, tag } from '@wordpress/icons';
-import { trackEvent } from '../tracking';
-import { isEntrepreneurFlow } from '../entrepreneur-flow';
-
-export * as services from './services';
-
-export const Transitional = () => {
- const homeUrl: string = getSetting( 'homeUrl', '' );
- const adminUrl = getNewPath( getPersistedQuery(), '/', {} );
-
- return (
- <div className="woocommerce-customize-store__transitional">
- <SiteHub
- isTransparent={ false }
- className="woocommerce-edit-site-layout__hub"
- />
- <div className="woocommerce-customize-store__transitional-content">
- <h1 className="woocommerce-customize-store__transitional-heading">
- { __( 'Your store looks great!', 'woocommerce' ) }
- </h1>
- <h2 className="woocommerce-customize-store__transitional-subheading">
- { isEntrepreneurFlow()
- ? __(
- "Congratulations! You've successfully designed your store. Now you can go back to the Home screen to complete your store setup and start selling.",
- 'woocommerce'
- )
- : __(
- "Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
- 'woocommerce'
- ) }
- </h2>
-
- <WooCYSSecondaryButtonSlot />
- <div className="woocommerce-customize-store__transitional-buttons">
- <Button
- href={ homeUrl }
- className="woocommerce-customize-store__transitional-preview-button"
- variant={
- isEntrepreneurFlow() ? 'secondary' : 'primary'
- }
- onClick={ () => {
- trackEvent(
- 'customize_your_store_transitional_preview_store_click'
- );
- } }
- >
- { __( 'View store', 'woocommerce' ) }
- </Button>
-
- { isEntrepreneurFlow() && (
- <Button
- variant="primary"
- href={ adminUrl }
- onClick={ () => {
- trackEvent(
- 'customize_your_store_entrepreneur_home_click'
- );
- } }
- >
- { __( 'Back to Home', 'woocommerce' ) }
- </Button>
- ) }
- </div>
- { ! isEntrepreneurFlow() && (
- <>
- <h2 className="woocommerce-customize-store__transitional-main-actions-title">
- { __( "What's next?", 'woocommerce' ) }
- </h2>
- <div className="woocommerce-customize-store__transitional-main-actions">
- <div className="woocommerce-customize-store__transitional-action">
- <Icon
- className={
- 'woocommerce-customize-store__transitional-action__icon'
- }
- icon={ tag }
- />
- <div className="woocommerce-customize-store__transitional-action__content">
- <h3>
- { __(
- 'Add your products',
- 'woocommerce'
- ) }
- </h3>
- <p>
- { __(
- 'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.',
- 'woocommerce'
- ) }
- </p>
- <Button
- variant="link"
- href={ `${ ADMIN_URL }edit.php?post_type=product` }
- onClick={ () => {
- trackEvent(
- 'customize_your_store_transitional_product_list_click'
- );
- } }
- >
- { __(
- 'Go to Products',
- 'woocommerce'
- ) }
- </Button>
- </div>
- </div>
-
- <div className="woocommerce-customize-store__transitional-action">
- <Icon
- className={
- 'woocommerce-customize-store__transitional-action__icon'
- }
- icon={ brush }
- />
- <div className="woocommerce-customize-store__transitional-action__content">
- <h3>
- { __(
- 'Fine-tune your design',
- 'woocommerce'
- ) }
- </h3>
- <p>
- { __(
- 'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
- 'woocommerce'
- ) }
- </p>
- <Button
- variant="link"
- href={ `${ ADMIN_URL }site-editor.php` }
- onClick={ () => {
- trackEvent(
- 'customize_your_store_transitional_editor_click'
- );
- } }
- >
- { __(
- 'Go to the Editor',
- 'woocommerce'
- ) }
- </Button>
- </div>
- </div>
-
- <div className="woocommerce-customize-store__transitional-action">
- <Icon
- className={
- 'woocommerce-customize-store__transitional-action__icon'
- }
- icon={ lessonPlan }
- />
- <div className="woocommerce-customize-store__transitional-action__content">
- <h3>
- { __(
- 'Continue setting up your store',
- 'woocommerce'
- ) }
- </h3>
- <p>
- { __(
- 'Go back to the Home screen to complete your store setup and start selling',
- 'woocommerce'
- ) }
- </p>
- <Button
- variant="link"
- href={ adminUrl }
- onClick={ () => {
- trackEvent(
- 'customize_your_store_transitional_home_click'
- );
- } }
- >
- { __( 'Back to Home', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- </div>
- </>
- ) }
- </div>
- </div>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/index.tsx
deleted file mode 100644
index 3d9c094f81..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { useSlot } from '@woocommerce/experimental';
-
-/**
- * Internal dependencies
- */
-import {
- EXPERIMENTAL_WC_CYS_TRANSITIONAL_PAGE_SECONDARY_BUTTON_SLOT_NAME,
- WooCYSSecondaryButton,
-} from './utils';
-
-export const WooCYSSecondaryButtonSlot = () => {
- const slot = useSlot(
- EXPERIMENTAL_WC_CYS_TRANSITIONAL_PAGE_SECONDARY_BUTTON_SLOT_NAME
- );
-
- const hasFills = Boolean( slot?.fills?.length );
- if ( ! hasFills ) {
- return null;
- }
-
- return <WooCYSSecondaryButton.Slot />;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/utils.tsx b/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/utils.tsx
deleted file mode 100644
index c7826c0ad5..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/secondary-button-slot/utils.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import { Slot, Fill } from '@wordpress/components';
-import {
- sortFillsByOrder,
- createOrderedChildren,
-} from '@woocommerce/components';
-
-export const EXPERIMENTAL_WC_CYS_TRANSITIONAL_PAGE_SECONDARY_BUTTON_SLOT_NAME =
- 'customize_your_store_transitional_page_secondary_button';
-
-/**
- * Create a Fill for extensions to add a secondary button to the transitional page.
- *
- * @slotFill WooCYSSecondaryButton
- * @scope woocommerce-admin
- * @example
- * const MyButton = () => (
- * <Fill name="__experimental_customize_your_store_transitional_page_secondary_button">
- * <Button className="woocommerce-experiments-button-slotfill">
- * Slotfill goes in here!
- * </Button>
- * </Fill>
- * );
- *
- * registerPlugin( 'my-extension', {
- * render: MyButton,
- * scope: 'woocommerce-admin',
- * } );
- * @param {Object} param0
- * @param {Array} param0.children - Node children.
- * @param {Array} param0.order - Node order.
- */
-export const WooCYSSecondaryButton = ( {
- children,
- order = 1,
-}: {
- children?: React.ReactNode;
- order?: number;
-} ) => {
- return (
- <Fill
- name={
- EXPERIMENTAL_WC_CYS_TRANSITIONAL_PAGE_SECONDARY_BUTTON_SLOT_NAME
- }
- >
- { ( fillProps ) => {
- return createOrderedChildren( children, order, fillProps );
- } }
- </Fill>
- );
-};
-
-WooCYSSecondaryButton.Slot = ( {
- fillProps,
-}: {
- fillProps?: React.ComponentProps< typeof Slot >[ 'fillProps' ];
-} ) => (
- <Slot
- name={
- EXPERIMENTAL_WC_CYS_TRANSITIONAL_PAGE_SECONDARY_BUTTON_SLOT_NAME
- }
- fillProps={ fillProps }
- >
- { sortFillsByOrder }
- </Slot>
-);
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/services.tsx b/plugins/woocommerce/client/admin/client/customize-store/transitional/services.tsx
deleted file mode 100644
index 4a219afdd2..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/services.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import { resolveSelect } from '@wordpress/data';
-
-export const fetchSurveyCompletedOption = async () =>
- resolveSelect( optionsStore ).getOption(
- 'woocommerce_admin_customize_store_survey_completed'
- );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/style.scss b/plugins/woocommerce/client/admin/client/customize-store/transitional/style.scss
deleted file mode 100644
index 7372a13350..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/style.scss
+++ /dev/null
@@ -1,248 +0,0 @@
-.woocommerce-customize-store__transitional {
- display: flex;
- flex-direction: column;
- width: 100vw;
- height: 100vh;
-
- .woocommerce-edit-site-site-hub.woocommerce-edit-site-layout__hub {
- height: 64px;
- padding: 16px;
- gap: 12px;
- width: 100%;
- position: initial;
-
- .woocommerce-edit-site-site-hub__view-mode-toggle-container,
- .edit-site-site-icon__image,
- svg {
- height: 32px;
- width: 32px;
- background: transparent;
- }
-
- .woocommerce-edit-site-site-hub__site-title {
- margin-left: 12px;
- color: $gray-900;
- font-size: 13px;
- font-style: normal;
- font-weight: 500;
- line-height: 20px; /* 153.846% */
- }
- }
-
- .woocommerce-customize-store__transitional-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 40px;
-
- .woocommerce-customize-store__transitional-buttons {
- display: flex;
- align-items: center;
- margin-top: 20px;
- gap: 20px;
-
- .woocommerce-customize-store__transitional-preview-button {
- flex: 1;
- }
- }
- }
-
- .woocommerce-customize-store__transitional-heading {
- color: $gray-900;
- text-align: center;
- font-feature-settings: "clig" off, "liga" off;
- font-size: 32px;
- font-style: normal;
- font-weight: 400;
- line-height: 60px; /* 187.5% */
- letter-spacing: -0.32px;
- margin: 0;
- }
-
- .woocommerce-customize-store__transitional-subheading {
- color: $gray-700;
- text-align: center;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 24px; /* 150% */
- letter-spacing: -0.1px;
- margin: 4px 0 0;
- max-width: 560px;
- }
-
- .woocommerce-customize-store__transitional-main-actions-title {
- font-size: 20px;
- font-style: normal;
- font-weight: 500;
- line-height: 24px; /* 120% */
- margin-top: 100px;
- margin-bottom: 40px;
- }
-
- .woocommerce-customize-store__transitional-main-actions {
- display: flex;
- gap: 40px;
- flex-direction: row;
-
- @media only screen and (max-width: 600px) {
- flex-direction: column;
- }
-
- h3 {
- margin: 0;
- font-size: 16px;
- font-style: normal;
- font-weight: 500;
- line-height: 24px; /* 150% */
- letter-spacing: -0.32px;
- }
-
- .components-button {
- text-decoration: none;
- }
-
- .woocommerce-customize-store__transitional-action {
- display: flex;
- }
-
- .woocommerce-customize-store__transitional-action__icon,
- .woocommerce-customize-store__transitional-action__content {
- flex: 1;
- }
-
- .woocommerce-customize-store__transitional-action__icon {
- text-align: right;
- max-width: 40px;
- padding-right: 16px;
- }
-
- .woocommerce-customize-store__transitional-action__content {
- max-width: 250px;
- padding-right: 2px;
-
- p {
- margin-top: 5px;
- margin-bottom: 16px;
- }
- }
- }
-}
-
-.woocommerce-ai-survey-modal {
- max-height: 100%;
- max-width: 620px;
- color: var(--gutenberg-gray-900, #1e1e1e);
-
- .components-modal__header {
- padding: 32px 32px 8px 32px;
-
- .components-modal__header-heading {
- font-size: 20px;
- font-style: normal;
- font-weight: 400;
- line-height: 28px; /* 140% */
- }
- }
-
- .components-modal__content {
- padding: 0 0 16px;
- }
-
-
- hr {
- margin-top: 24px;
- margin-bottom: 16px;
- color: var(--gutenberg-gray-100, #f0f0f0);
- border-bottom: 0;
- }
-}
-
-.woocommerce-ai-survey-form {
- .content {
- padding-left: 32px;
- padding-right: 32px;
-
- hr {
- margin: 20px 0;
- }
- }
-
- .woocommerce-ai-survey-form__description {
- margin: 0 0 24px;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px; /* 153.846% */
- }
-
- h4 {
- font-size: 13px;
- font-style: normal;
- font-weight: 600;
- line-height: 16px; /* 123.077% */
- margin-top: 0;
- margin-bottom: 12px;
-
- span {
- color: #cc1818;
- margin-left: 3px;
- }
- }
-
- .woocommerce-survey-star-rating {
- button {
- background-color: transparent;
- border: none;
- outline: none;
- cursor: pointer;
- padding: 0 6px 0 0;
- font-size: 20px;
- }
-
- .woocommerce-survey-star-rating__button-on {
- color: #000;
- }
-
- .woocommerce-survey-star-rating__button-off {
- color: var(--gray-gray-5, #dcdcde);
- }
- }
-
- .components-checkbox-control__input-container {
- margin-right: 16px;
-
- .components-checkbox-control__input {
- border: 1px solid $gray-600;
- border-radius: 2px;
- }
- }
-
- .components-checkbox-control:last-child {
- margin-bottom: 4px;
- }
-
- .buttons {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- padding-left: 32px;
- padding-right: 32px;
-
- .components-button {
- padding: 8px 16px;
- }
- }
-
- .components-textarea-control__input {
- resize: none;
- height: 72px;
- margin-bottom: 20px;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 16px; /* 123.077% */
- color: $gray-900;
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/transitional/test/index.test.tsx b/plugins/woocommerce/client/admin/client/customize-store/transitional/test/index.test.tsx
deleted file mode 100644
index 8dad50ef75..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/transitional/test/index.test.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-/**
- * Internal dependencies
- */
-import { Transitional } from '../index';
-import { trackEvent } from '~/customize-store/tracking';
-
-jest.mock( '../../assembler-hub/site-hub', () => ( {
- __esModule: true,
- SiteHub: () => {
- return <div />;
- },
-} ) );
-
-jest.mock(
- '@wordpress/edit-site/build-module/components/layout/hooks',
- () => ( {
- __esModule: true,
- useIsSiteEditorLoading: jest.fn().mockReturnValue( false ),
- } )
-);
-
-jest.mock( '~/customize-store/tracking', () => ( { trackEvent: jest.fn() } ) );
-
-describe( 'Transitional', () => {
- let props: {
- sendEvent: jest.Mock;
- };
-
- beforeEach( () => {
- props = {
- sendEvent: jest.fn(),
- };
- } );
-
- it( 'should render Transitional page', () => {
- // @ts-ignore
- render( <Transitional { ...props } /> );
-
- expect(
- screen.getByText( /Your store looks great!/i )
- ).toBeInTheDocument();
-
- expect(
- screen.getByRole( 'link', {
- name: /View store/i,
- } )
- ).toBeInTheDocument();
-
- expect(
- screen.getByRole( 'link', {
- name: /Go to Products/i,
- } )
- ).toBeInTheDocument();
- expect(
- screen.getByRole( 'link', {
- name: /Go to the Editor/i,
- } )
- ).toBeInTheDocument();
-
- expect(
- screen.getByRole( 'link', {
- name: /Back to Home/i,
- } )
- ).toBeInTheDocument();
- } );
-
- it( 'should record an event when clicking on "View store" button', () => {
- window.open = jest.fn();
- // @ts-ignore
- render( <Transitional { ...props } /> );
-
- screen
- .getByRole( 'link', {
- name: /View store/i,
- } )
- .click();
-
- expect( trackEvent ).toHaveBeenCalledWith(
- 'customize_your_store_transitional_preview_store_click'
- );
- } );
-
- it( 'should record an event when clicking on "Go to the Editor" button', () => {
- // @ts-ignore Mocking window location
- delete window.location;
- window.location = {
- // @ts-ignore Mocking window location href
- href: jest.fn(),
- };
-
- // @ts-ignore
- render( <Transitional { ...props } /> );
-
- screen
- .getByRole( 'link', {
- name: /Go to the Editor/i,
- } )
- .click();
-
- expect( trackEvent ).toHaveBeenCalledWith(
- 'customize_your_store_transitional_editor_click'
- );
- } );
-
- it( 'should track "customize_your_store_transitional_home_click" event when clicking on "Back to Home" button', () => {
- // @ts-ignore
- render( <Transitional { ...props } /> );
-
- screen
- .getByRole( 'link', {
- name: /Back to Home/i,
- } )
- .click();
-
- expect( trackEvent ).toHaveBeenCalledWith(
- 'customize_your_store_transitional_home_click'
- );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/customize-store/types.ts b/plugins/woocommerce/client/admin/client/customize-store/types.ts
deleted file mode 100644
index 00dbb3a8f4..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { AnyInterpreter, Sender, StateValue } from 'xstate';
-
-/**
- * Internal dependencies
- */
-import { customizeStoreStateMachineEvents } from '.';
-
-export type CustomizeStoreComponent = ( props: {
- parentMachine: AnyInterpreter;
- sendEvent: Sender< customizeStoreStateMachineEvents >;
- context: customizeStoreStateMachineContext;
- currentState: StateValue;
-} ) => React.ReactElement | null;
-
-export type CustomizeStoreComponentMeta = {
- component: CustomizeStoreComponent;
-};
-
-export type aiStatusResponse = {
- status: {
- indicator: 'major' | 'critical' | 'ok';
- };
-};
-
-export type customizeStoreStateMachineContext = {
- themeConfiguration: Record< string, unknown >; // placeholder for theme configuration until we know what it looks like
- intro: {
- hasErrors: boolean;
- errorStatus: number | undefined;
- activeTheme: string;
- customizeStoreTaskCompleted: boolean;
- };
- isFontLibraryAvailable: boolean | null;
- isPTKPatternsAPIAvailable: boolean | null;
- activeThemeHasMods: boolean | undefined;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/types/font.ts b/plugins/woocommerce/client/admin/client/customize-store/types/font.ts
deleted file mode 100644
index 7c8128be4d..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/types/font.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export type FontFamiliesToInstall = {
- [ slug: string ]: {
- fontFamily: string;
- fontWeights: Array< string >;
- fontStyles: Array< string >;
- };
-};
-
-export type FontFamily = {
- fontFace: Array< FontFace >;
- fontFamily: string;
- name: string;
- slug: string;
- preview: string;
-};
-
-export type FontFace = {
- fontFamily: string;
- fontStretch?: string;
- fontStyle: string;
- fontWeight: string;
- src: Array< string > | string;
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/types/pattern.ts b/plugins/woocommerce/client/admin/client/customize-store/types/pattern.ts
deleted file mode 100644
index 4ada88dcaa..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/types/pattern.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-export type Pattern = {
- blockTypes: string[];
- categories: string[];
- content: string;
- name: string;
- source: string;
- title: string;
-};
-
-export type PatternWithBlocks = Pattern & {
- blocks: BlockInstance[];
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/utils.js b/plugins/woocommerce/client/admin/client/customize-store/utils.js
deleted file mode 100644
index 7c6c7d9723..0000000000
--- a/plugins/woocommerce/client/admin/client/customize-store/utils.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/**
- * External dependencies
- */
-import { parseAdminUrl } from '@woocommerce/navigation';
-import { captureException } from '@woocommerce/remote-logging';
-import { getAdminLink } from '@woocommerce/settings';
-
-/**
- * Internal dependencies
- */
-import { isWooExpress } from '~/utils/is-woo-express';
-import { getAdminSetting } from '~/utils/admin-settings';
-import { isFeatureEnabled } from '~/utils/features';
-import { DEFAULT_LOGO_WIDTH } from './assembler-hub/sidebar/constants';
-
-export function isIframe( windowObject ) {
- return (
- windowObject.document !== windowObject.parent.document &&
- windowObject.parent.document.body.querySelector(
- '.woocommerce-customize-store__container'
- ) !== null
- );
-}
-
-export function editorIsLoaded() {
- window.parent.postMessage(
- { type: 'iframe-loaded' },
- getAdminSetting( 'homeUrl' )
- );
-}
-
-export function onIframeLoad( callback ) {
- window.addEventListener( 'message', ( event ) => {
- if ( event.data.type === 'iframe-loaded' ) {
- callback();
- }
- } );
-}
-
-export function onBackButtonClicked( callback ) {
- window.addEventListener( 'message', ( event ) => {
- if ( event.data.type === 'assemberBackButtonClicked' ) {
- callback();
- }
- } );
-}
-
-/**
- * Attach a listener to the window object to listen for messages from the parent window.
- *
- * @return {() => void} Remove listener function
- */
-export function attachParentListeners() {
- const allowedOrigins = [ getAdminSetting( 'homeUrl' ) ];
-
- function handleMessage( event ) {
- // Validate the origin.
- if ( ! allowedOrigins.includes( event.origin ) ) {
- // Blocked message from untrusted origin: event.origin.
- return;
- }
-
- // Validate the structure of event.data.
- if (
- ! event.data ||
- typeof event.data.type !== 'string' ||
- typeof event.data.url !== 'string'
- ) {
- // Invalid message structure: event.data.
- return;
- }
-
- // Only allow the 'navigate' type.
- if ( event.data.type === 'navigate' ) {
- // Validate the URL format.
- try {
- const url = parseAdminUrl( event.data.url );
- // Further restrict navigation to trusted domains.
- if (
- ! allowedOrigins.some( ( origin ) => url.origin === origin )
- ) {
- throw new Error(
- `Blocked navigation to untrusted URL: ${ url.href }`
- );
- }
-
- window.location.href = url.href;
- } catch ( error ) {
- // Invalid URL: event.data.url.
- captureException( error );
- }
- }
- }
-
- window.addEventListener( 'message', handleMessage, false );
-
- return function removeListener() {
- window.removeEventListener( 'message', handleMessage, false );
- };
-}
-
-/**
- * If iframe, post message. Otherwise, navigate to a URL.
- *
- * @param {*} windowObject
- * @param {*} url
- */
-export function navigateOrParent( windowObject, url ) {
- try {
- if ( isIframe( windowObject ) ) {
- windowObject.parent.postMessage(
- { type: 'navigate', url },
- getAdminSetting( 'homeUrl' )
- );
- } else {
- const fullUrl = parseAdminUrl( url );
- windowObject.location.href = fullUrl.href;
- }
- } catch ( error ) {
- captureException( error );
- }
-}
-
-/**
- * Attach listeners to an iframe to intercept and redirect navigation events.
- *
- * @param {HTMLIFrameElement} iframe
- */
-export function attachIframeListeners( iframe ) {
- const iframeDocument =
- iframe.contentDocument || iframe.contentWindow?.document;
-
- // Intercept external link clicks
- iframeDocument?.addEventListener( 'click', function ( event ) {
- if ( event.target ) {
- const anchor = event.target?.closest( 'a' );
- if ( anchor && anchor.target === '_blank' ) {
- event.preventDefault();
- window.open( anchor.href, '_blank' ); // Open in new tab in parent
- } else if ( anchor ) {
- event.preventDefault();
- window.location.href = anchor.href; // Navigate parent to new URL
- }
- }
- } );
-}
-
-export const setLogoWidth = ( content, width = DEFAULT_LOGO_WIDTH ) => {
- const logoPatternReg = /<!-- wp:site-logo\s*(\{.*?\})?\s*\/-->/g;
-
- // Replace the logo width with the default width.
- return content.replaceAll( logoPatternReg, ( match, group ) => {
- if ( group ) {
- const json = JSON.parse( group );
- json.width = width;
- return `<!-- wp:site-logo ${ JSON.stringify( json ) } /-->`;
- }
- return `<!-- wp:site-logo {"width":${ width }} /-->`;
- } );
-};
-
-/**
- * Create augmented steps for animation
- *
- * @param {Array} steps
- * @param {number} numOfDupes
- * @return {Array} augmentedSteps
- *
- */
-export const createAugmentedSteps = ( steps, numOfDupes ) => {
- // Duplicate each step, so we can animate each one
- // (e.g. each step will be duplicated 3 times, and each duplicate will
- // have different progress)
- const augmentedSteps = steps
- .map( ( item, index, array ) => {
- // Get the next item in the array
- const nextItem = array[ index + 1 ];
- // If there is no next item, we're at the end of the array
- // so just return the current item
- if ( ! nextItem ) return [ item ];
-
- // If there is a next item, we're not at the end of the array
- // so return the current item, plus duplicates
- const duplicates = [ item ];
- const progressIncreaseBy =
- ( nextItem.progress - item.progress ) / numOfDupes;
-
- for ( let i = 0; i < numOfDupes; i++ ) {
- duplicates.push( {
- ...item,
- progress: item.progress + ( i + 1 ) * progressIncreaseBy,
- } );
- }
-
- return duplicates;
- } )
- .flat();
-
- return augmentedSteps;
-};
-
-export const redirectToThemes = () => {
- if ( isWooExpress() ) {
- window.location.href = getAdminLink( 'themes.php' );
- } else if ( isFeatureEnabled( 'marketplace' ) ) {
- window.location.href = getAdminLink(
- 'admin.php?page=wc-admin&tab=themes&path=%2Fextensions'
- );
- } else {
- window.location.href =
- 'https://woocommerce.com/product-category/themes/';
- }
-};
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/resizable-frame.jsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/components/resizable-frame.jsx
similarity index 99%
rename from plugins/woocommerce/client/admin/client/customize-store/assembler-hub/resizable-frame.jsx
rename to plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/components/resizable-frame.jsx
index 7b8c957d26..a79f161533 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/resizable-frame.jsx
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/components/resizable-frame.jsx
@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import './gutenberg-styles/resizable-frame.scss';
+import './resizable-frame.scss';
// Removes the inline styles in the drag handles.
const HANDLE_STYLES_OVERRIDE = {
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/resizable-frame.scss b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/components/resizable-frame.scss
similarity index 100%
rename from plugins/woocommerce/client/admin/client/customize-store/assembler-hub/gutenberg-styles/resizable-frame.scss
rename to plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/components/resizable-frame.scss
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
index dc2ba4d090..6937d81a61 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
@@ -16,7 +16,7 @@ import {
* Internal dependencies
*/
import { getAdminSetting } from '~/utils/admin-settings';
-import ResizableFrame from '~/customize-store/assembler-hub/resizable-frame';
+import ResizableFrame from '../components/resizable-frame';
import type { MainContentComponentProps } from '../xstate';
import './site-preview.scss';
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
index 782887e94f..bd03701535 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
@@ -31,7 +31,7 @@ import {
import type { SidebarComponentProps } from '../xstate';
import { SidebarContainer } from './sidebar-container';
import { taskCompleteIcon } from './icons';
-import { SiteHub } from '~/customize-store/assembler-hub/site-hub';
+import { SiteHub } from '~/customize-store/site-hub';
import { CompletedTaskItem, IncompleteTaskItem } from '../tasklist';
export const LaunchYourStoreHubSidebar = ( props: SidebarComponentProps ) => {
const {
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx
index 998bf47bbe..da15662247 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx
@@ -23,7 +23,7 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import type { SidebarComponentProps } from '../xstate';
import { SidebarContainer } from './sidebar-container';
-import { SiteHub } from '~/customize-store/assembler-hub/site-hub';
+import { SiteHub } from '~/customize-store/site-hub';
import { taskIcons, taskCompleteIcon } from './icons';
import { StepPlaceholder } from './step-placeholder';
import { useSetUpPaymentsContext } from '~/launch-your-store/data/setup-payments-context';
diff --git a/plugins/woocommerce/phpstan-baseline.neon b/plugins/woocommerce/phpstan-baseline.neon
index 64290f3e98..434f762e83 100644
--- a/plugins/woocommerce/phpstan-baseline.neon
+++ b/plugins/woocommerce/phpstan-baseline.neon
@@ -54861,36 +54861,6 @@ parameters:
count: 1
path: src/Admin/Features/OnboardingTasks/Tasks/Appearance.php
- -
- message: '#^Cannot call method is_block_editor\(\) on WP_Screen\|null\.$#'
- identifier: method.nonObject
- count: 1
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\OnboardingTasks\\Tasks\\CustomizeStore\:\:possibly_add_site_editor_scripts\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\OnboardingTasks\\Tasks\\CustomizeStore\:\:possibly_hide_wp_admin_bar\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
- -
- message: '#^Negated boolean expression is always false\.$#'
- identifier: booleanNot.alwaysFalse
- count: 1
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
- -
- message: '#^Parameter \#1 \$haystack of function str_starts_with expects string\|null, array\|string given\.$#'
- identifier: argument.type
- count: 2
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
-
message: '#^Parameter \#1 \$task_list of method Automattic\\WooCommerce\\Admin\\Features\\OnboardingTasks\\Task\:\:__construct\(\) expects Automattic\\WooCommerce\\Admin\\Features\\OnboardingTasks\\TaskList\|null, Automattic\\WooCommerce\\Admin\\Features\\OnboardingTasks\\Tasks\\TaskList given\.$#'
identifier: argument.type
@@ -54903,12 +54873,6 @@ parameters:
count: 1
path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
- -
- message: '#^Result of && is always false\.$#'
- identifier: booleanAnd.alwaysFalse
- count: 1
- path: src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
-
-
message: '#^Call to function method_exists\(\) with ''\\\\Automattic\\\\Jetpack…'' and ''is_active'' will always evaluate to true\.$#'
identifier: function.alreadyNarrowedType
@@ -67587,54 +67551,6 @@ parameters:
count: 1
path: src/Internal/Admin/Onboarding/Onboarding.php
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Admin\\Onboarding\\OnboardingFonts\:\:init\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Admin\\Onboarding\\OnboardingFonts\:\:install_font_faces\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Admin\\Onboarding\\OnboardingFonts\:\:start_install_fonts_async_job\(\) should return string but empty return statement found\.$#'
- identifier: return.empty
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Admin\\Onboarding\\OnboardingFonts\:\:start_install_fonts_async_job\(\) should return string but return statement is missing\.$#'
- identifier: return.missing
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Offset ''fontFamily'' might not exist on array\|null\.$#'
- identifier: offsetAccess.notFound
- count: 2
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Offset ''name'' might not exist on array\|null\.$#'
- identifier: offsetAccess.notFound
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Offset ''preview'' might not exist on array\|null\.$#'
- identifier: offsetAccess.notFound
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
- -
- message: '#^Offset ''slug'' might not exist on array\|null\.$#'
- identifier: offsetAccess.notFound
- count: 1
- path: src/Internal/Admin/Onboarding/OnboardingFonts.php
-
-
message: '#^Method Automattic\\WooCommerce\\Internal\\Admin\\Onboarding\\OnboardingHelper\:\:add_help_tab\(\) has no return type specified\.$#'
identifier: missingType.return
@@ -73704,72 +73620,6 @@ parameters:
count: 1
path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:download_file\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:get_installed_font_faces_by_slug\(\) should return WP_Post\|null but returns int\|WP_Post\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:handle_font_file_upload_error\(\) has invalid return type Automattic\\WooCommerce\\Internal\\Font\\WP_Error\.$#'
- identifier: class.notFound
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:handle_font_file_upload_error\(\) should return Automattic\\WooCommerce\\Internal\\Font\\WP_Error but returns WP_Error\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:insert_font_face\(\) should return WP_Error\|WP_Post but return statement is missing\.$#'
- identifier: return.missing
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFace\:\:validate_font_face\(\) should return WP_Error\|null but return statement is missing\.$#'
- identifier: return.missing
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Parameter \#1 \$postarr of function wp_insert_post expects array\{ID\?\: int, post_author\?\: int, post_date\?\: string, post_date_gmt\?\: string, post_content\?\: string, post_content_filtered\?\: string, post_title\?\: string, post_excerpt\?\: string, \.\.\.\}, array\{post_type\: ''wp_font_face'', post_parent\: int, post_title\: string, post_name\: string, post_content\: non\-empty\-string\|false, post_status\: ''publish''\} given\.$#'
- identifier: argument.type
- count: 1
- path: src/Internal/Font/FontFace.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFamily\:\:get_font_family_by_name\(\) should return WP_Post\|null but returns int\|WP_Post\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Font/FontFamily.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFamily\:\:insert_font_family\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Font/FontFamily.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Font\\FontFamily\:\:validate_font_family\(\) should return WP_Error\|null but return statement is missing\.$#'
- identifier: return.missing
- count: 1
- path: src/Internal/Font/FontFamily.php
-
- -
- message: '#^Parameter \#1 \$postarr of function wp_insert_post expects array\{ID\?\: int, post_author\?\: int, post_date\?\: string, post_date_gmt\?\: string, post_content\?\: string, post_content_filtered\?\: string, post_title\?\: string, post_excerpt\?\: string, \.\.\.\}, array\{post_type\: ''wp_font_family'', post_title\: mixed, name\: mixed, post_content\: non\-empty\-string\|false, post_status\: ''publish''\} given\.$#'
- identifier: argument.type
- count: 1
- path: src/Internal/Font/FontFamily.php
-
-
message: '#^Call to function is_object\(\) with ''''\|''0''\|array will always evaluate to false\.$#'
identifier: function.impossibleType
diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
index 280931044e..5b4061553e 100644
--- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
+++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
@@ -116,156 +116,6 @@ class CustomizeStore extends Task {
return admin_url( 'admin.php?page=wc-admin&path=%2Fcustomize-store' );
}
-
- /**
- * Possibly add site editor scripts.
- */
- public function possibly_add_site_editor_scripts() {
- // phpcs:disable WordPress.Security.NonceVerification.Recommended
- $is_wc_admin_page = (
- isset( $_GET['page'] ) &&
- 'wc-admin' === $_GET['page'] &&
- isset( $_GET['path'] )
- );
-
- $is_assembler_hub = $is_wc_admin_page && str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store/assembler-hub' );
- $is_transitional_page = $is_wc_admin_page && str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store/transitional' );
- // phpcs:enable WordPress.Security.NonceVerification.Recommended
-
- if ( ! ( $is_assembler_hub || $is_transitional_page ) ) {
- return;
- }
-
- // See: https://github.com/WordPress/WordPress/blob/master/wp-admin/site-editor.php.
- if ( ! wp_is_block_theme() ) {
- wp_die( esc_html__( 'The theme you are currently using is not compatible.', 'woocommerce' ) );
- }
- global $editor_styles;
-
- // Flag that we're loading the block editor.
- $current_screen = get_current_screen();
- $current_screen->is_block_editor( true );
-
- // Default to is-fullscreen-mode to avoid jumps in the UI.
- add_filter(
- 'admin_body_class',
- static function ( $classes ) {
- return "$classes is-fullscreen-mode";
- }
- );
-
- $block_editor_context = new \WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
- $indexed_template_types = array();
- foreach ( get_default_block_template_types() as $slug => $template_type ) {
- $template_type['slug'] = (string) $slug;
- $indexed_template_types[] = $template_type;
- }
-
- $custom_settings = array(
- 'siteUrl' => site_url(),
- 'postsPerPage' => get_option( 'posts_per_page' ),
- 'styles' => get_block_editor_theme_styles(),
- 'defaultTemplateTypes' => $indexed_template_types,
- 'defaultTemplatePartAreas' => get_allowed_block_template_part_areas(),
- 'supportsLayout' => wp_theme_has_theme_json(),
- 'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
- );
-
- // Add additional back-compat patterns registered by `current_screen` et al.
- $custom_settings['__experimentalAdditionalBlockPatterns'] = \WP_Block_Patterns_Registry::get_instance()->get_all_registered( true );
- $custom_settings['__experimentalAdditionalBlockPatternCategories'] = \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered( true );
-
- $editor_settings = get_block_editor_settings( $custom_settings, $block_editor_context );
- $active_global_styles_id = \WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
- $active_theme = get_stylesheet();
- $preload_paths = array(
- array( '/wp/v2/media', 'OPTIONS' ),
- '/wp/v2/types?context=view',
- '/wp/v2/types/wp_template?context=edit',
- '/wp/v2/types/wp_template-part?context=edit',
- '/wp/v2/templates?context=edit&per_page=-1',
- '/wp/v2/template-parts?context=edit&per_page=-1',
- '/wp/v2/themes?context=edit&status=active',
- '/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
- '/wp/v2/global-styles/' . $active_global_styles_id,
- '/wp/v2/global-styles/themes/' . $active_theme,
- );
-
- block_editor_rest_api_preload( $preload_paths, $block_editor_context );
-
- wp_add_inline_script(
- 'wp-blocks',
- sprintf(
- 'window.wcBlockSettings = %s;',
- wp_json_encode( $editor_settings, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
- )
- );
-
- // Preload server-registered block schemas.
- wp_add_inline_script(
- 'wp-blocks',
- 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) . ');'
- );
-
- wp_add_inline_script(
- 'wp-blocks',
- sprintf(
- 'wp.blocks.setCategories( %s );',
- wp_json_encode(
- ( isset( $editor_settings['blockCategories'] ) ? $editor_settings['blockCategories'] : array() ),
- JSON_HEX_TAG | JSON_UNESCAPED_SLASHES
- )
- ),
- 'after'
- );
-
- wp_enqueue_script( 'wp-editor' );
- wp_enqueue_script( 'wp-format-library' ); // Not sure if this is needed.
- wp_enqueue_script( 'wp-router' );
- wp_enqueue_style( 'wp-editor' );
- wp_enqueue_style( 'wp-format-library' );
- wp_enqueue_media();
-
- if (
- current_theme_supports( 'wp-block-styles' ) &&
- ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 )
- ) {
- wp_enqueue_style( 'wp-block-library-theme' );
- }
- /** This action is documented in wp-admin/edit-form-blocks.php
- *
- * @since 8.0.3
- */
- do_action( 'enqueue_block_editor_assets' );
- }
-
- /**
- * Appends a small style to hide admin bar
- *
- * @param bool $show Whether to show the admin bar.
- */
- public function possibly_hide_wp_admin_bar( $show ) {
- if ( isset( $_GET['cys-hide-admin-bar'] ) ) { // @phpcs:ignore
- return false;
- }
- return $show;
- }
-
- /**
- * Runs script and add styles to remove unwanted elements and hide scrollbar
- * when users are viewing with ?cys-hide-admin-bar=true.
- *
- * @return void
- */
- public function possibly_remove_unwanted_ui_elements() {
- if ( isset( $_GET['cys-hide-admin-bar'] ) ) { // @phpcs:ignore
- echo '
- <style type="text/css">
- body { overflow: hidden; }
- </style>';
- }
- }
-
/**
* Checks if the post has custom global styles stored (if it is different from the default global styles).
*
diff --git a/plugins/woocommerce/src/Internal/Admin/Onboarding/Onboarding.php b/plugins/woocommerce/src/Internal/Admin/Onboarding/Onboarding.php
index 5ed62b2395..cb8caf9188 100644
--- a/plugins/woocommerce/src/Internal/Admin/Onboarding/Onboarding.php
+++ b/plugins/woocommerce/src/Internal/Admin/Onboarding/Onboarding.php
@@ -22,6 +22,5 @@ class Onboarding {
OnboardingProfile::init();
OnboardingSetupWizard::instance()->init();
OnboardingSync::instance()->init();
- OnboardingFonts::init();
}
}
diff --git a/plugins/woocommerce/src/Internal/Admin/Onboarding/OnboardingFonts.php b/plugins/woocommerce/src/Internal/Admin/Onboarding/OnboardingFonts.php
deleted file mode 100644
index d2805d05ec..0000000000
--- a/plugins/woocommerce/src/Internal/Admin/Onboarding/OnboardingFonts.php
+++ /dev/null
@@ -1,260 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Internal\Admin\Onboarding;
-
-use Automattic\WooCommerce\Internal\Font\FontFace;
-use Automattic\WooCommerce\Internal\Font\FontFamily;
-
-
-/**
- * Class to install fonts for the Assembler.
- *
- * @internal
- */
-class OnboardingFonts {
-
- /**
- * Initialize the class.
- *
- * @internal This method is for internal purposes only.
- */
- final public static function init() {
- add_action( 'woocommerce_install_assembler_fonts', array( __CLASS__, 'install_fonts' ) );
- add_filter( 'update_option_woocommerce_allow_tracking', array( self::class, 'start_install_fonts_async_job' ), 10, 2 );
- }
-
- const SOURCE_LOGGER = 'font_loader';
-
- /**
- * Font families to install.
- * PHP version of https://github.com/woocommerce/woocommerce/blob/45923dc5f38150c717210ae9db10045cd9582331/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts/#L13-L74
- *
- * @var array
- */
- const FONT_FAMILIES_TO_INSTALL = array(
- 'inter' => array(
- 'fontFamily' => 'Inter',
- 'fontWeights' => array( '400', '500', '600' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'bodoni-moda' => array(
- 'fontFamily' => 'Bodoni Moda',
- 'fontWeights' => array( '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'overpass' => array(
- 'fontFamily' => 'Overpass',
- 'fontWeights' => array( '300', '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'albert-sans' => array(
- 'fontFamily' => 'Albert Sans',
- 'fontWeights' => array( '700' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'lora' => array(
- 'fontFamily' => 'Lora',
- 'fontWeights' => array( '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'montserrat' => array(
- 'fontFamily' => 'Montserrat',
- 'fontWeights' => array( '500', '700' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'arvo' => array(
- 'fontFamily' => 'Arvo',
- 'fontWeights' => array( '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'rubik' => array(
- 'fontFamily' => 'Rubik',
- 'fontWeights' => array( '400', '800' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'newsreader' => array(
- 'fontFamily' => 'Newsreader',
- 'fontWeights' => array( '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'cormorant' => array(
- 'fontFamily' => 'Cormorant',
- 'fontWeights' => array( '400', '500' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'work-sans' => array(
- 'fontFamily' => 'Work Sans',
- 'fontWeights' => array( '400' ),
- 'fontStyles' => array( 'normal' ),
- ),
- 'raleway' => array(
- 'fontFamily' => 'Raleway',
- 'fontWeights' => array( '700' ),
- 'fontStyles' => array( 'normal' ),
- ),
- );
-
- /**
- * Start install fonts async job.
- *
- * @param string $old_value Old option value.
- * @param string $value Option value.
- * @return string
- */
- public static function start_install_fonts_async_job( $old_value, $value ) {
- if ( 'yes' !== $value || ! class_exists( 'WP_Font_Library' ) ) {
- return;
- }
- WC()->call_function(
- 'as_schedule_single_action',
- WC()->call_function( 'time' ),
- 'woocommerce_install_assembler_fonts',
- );
- }
-
-
- /**
- * Create Font Families and Font Faces.
- *
- * @return void
- */
- public static function install_fonts() {
- $collections = \WP_Font_Library::get_instance()->get_font_collections();
- $google_fonts = $collections['google-fonts']->get_data();
- $font_collection = $google_fonts['font_families'];
- $slug_font_families_to_install = array_keys( self::FONT_FAMILIES_TO_INSTALL );
- $installed_font_families = self::install_font_families( $slug_font_families_to_install, $font_collection );
-
- if ( ! empty( $installed_font_families ) ) {
- $font_faces_from_collection = self::get_font_faces_data_from_font_collection( $slug_font_families_to_install, $font_collection );
- self::install_font_faces( $slug_font_families_to_install, $installed_font_families, $font_faces_from_collection );
- }
-
- }
-
- /**
- * Install font families.
- *
- * @param array $slug_font_families_to_install Font families to install.
- * @param array $font_collection Font collection.
- * @return array
- */
- private static function install_font_families( $slug_font_families_to_install, $font_collection ) {
- return array_reduce(
- $slug_font_families_to_install,
- function( $carry, $slug ) use ( $font_collection ) {
- $font_family_from_collection = self::get_font_family_by_slug_from_font_collection( $slug, $font_collection );
- $font_family_name = $font_family_from_collection['fontFamily'];
- $font_family_installed = FontFamily::get_font_family_by_name( $font_family_name );
- if ( $font_family_installed ) {
- return array_merge( $carry, array( $slug => $font_family_installed ) );
- }
-
- $font_family_settings = array(
- 'fontFamily' => $font_family_from_collection['fontFamily'],
- 'preview' => $font_family_from_collection['preview'],
- 'slug' => $font_family_from_collection['slug'],
- 'name' => $font_family_from_collection['name'],
- );
-
- $font_family_id = FontFamily::insert_font_family( $font_family_settings );
- if ( is_wp_error( $font_family_id ) ) {
- if ( 'duplicate_font_family' !== $font_family_id->get_error_code() ) {
- wc_get_logger()->error(
- sprintf(
- 'Font Family installation error: %s',
- $font_family_id->get_error_message(),
- ),
- array( 'source' => self::SOURCE_LOGGER )
- );
- }
-
- return $carry;
- }
- return array_merge( $carry, array( $slug => get_post( $font_family_id ) ) );
- },
- array(),
- );
- }
-
- /**
- * Install font faces.
- *
- * @param array $slug_font_families_to_install Font families to install.
- * @param array $installed_font_families Installed font families.
- * @param array $font_faces_from_collection Font faces from collection.
- */
- private static function install_font_faces( $slug_font_families_to_install, $installed_font_families, $font_faces_from_collection ) {
- foreach ( $slug_font_families_to_install as $slug ) {
- $font_family = $installed_font_families[ $slug ];
- $font_faces = $font_faces_from_collection[ $slug ];
- $font_faces_to_install = self::FONT_FAMILIES_TO_INSTALL[ $slug ]['fontWeights'];
-
- foreach ( $font_faces as $font_face ) {
- if ( ! in_array( $font_face['fontWeight'], $font_faces_to_install, true ) ) {
- continue;
- }
-
- $slug = \WP_Font_Utils::get_font_face_slug( $font_face );
- $font_face_installed = FontFace::get_installed_font_faces_by_slug( $slug );
- if ( $font_face_installed ) {
- continue;
- }
-
- $wp_error = FontFace::insert_font_face( $font_face, $font_family->ID );
-
- if ( is_wp_error( $wp_error ) ) {
- wc_get_logger()->error(
- sprintf(
- /* translators: %s: error message */
- __( 'Font Face installation error: %s', 'woocommerce' ),
- $wp_error->get_error_message()
- ),
- array( 'source' => self::SOURCE_LOGGER )
- );
- }
- }
- }
- }
-
- /**
- * Get font faces data from font collection.
- *
- * @param array $slug_font_families_to_install Font families to install.
- * @param array $font_collection Font collection.
- * @return array
- */
- private static function get_font_faces_data_from_font_collection( $slug_font_families_to_install, $font_collection ) {
- return array_reduce(
- $slug_font_families_to_install,
- function( $carry, $slug ) use ( $font_collection ) {
- $font_family = self::get_font_family_by_slug_from_font_collection( $slug, $font_collection );
- if ( ! $font_family ) {
- return $carry;
- }
- return array_merge( $carry, array( $slug => $font_family['fontFace'] ) );
- },
- array()
- );
- }
-
- /**
- * Get font family by slug from font collection.
- *
- * @param string $slug Font slug.
- * @param array $font_families_collection Font families collection.
- * @return array|null
- */
- private static function get_font_family_by_slug_from_font_collection( $slug, $font_families_collection ) {
- $font_family = null;
-
- foreach ( $font_families_collection as $font_family ) {
- if ( $font_family['font_family_settings']['slug'] === $slug ) {
- $font_family = $font_family['font_family_settings'];
- break;
- }
- }
- return $font_family;
- }
-
-}
diff --git a/plugins/woocommerce/src/Internal/Font/FontFace.php b/plugins/woocommerce/src/Internal/Font/FontFace.php
deleted file mode 100644
index f8d7b09f0e..0000000000
--- a/plugins/woocommerce/src/Internal/Font/FontFace.php
+++ /dev/null
@@ -1,247 +0,0 @@
-<?php
-/**
- * FontFace class file
- */
-
-namespace Automattic\WooCommerce\Internal\Font;
-
-// IMPORTANT: We have to switch to the WordPress API to create the FontFace post type when they will be implemented: https://github.com/WordPress/gutenberg/issues/58670!
-
-/**
- * Helper class for font face related functionality.
- *
- * @internal Just for internal use.
- */
-class FontFace {
-
- const POST_TYPE = 'wp_font_face';
-
- /**
- * Gets the installed font face by slug.
- *
- * @param string $slug The font face slug.
- * @return \WP_Post|null The font face post or null if not found.
- */
- public static function get_installed_font_faces_by_slug( $slug ) {
- $query = new \WP_Query(
- array(
- 'post_type' => self::POST_TYPE,
- 'update_post_meta_cache' => false,
- 'update_post_term_cache' => false,
- 'name' => $slug,
- )
- );
-
- if ( ! empty( $query->get_posts() ) ) {
- return $query->get_posts()[0];
- }
- return null;
- }
-
- /**
- * Sanitizes a single src value for a font face.
- *
- * Copied from Gutenberg: https://github.com/WordPress/gutenberg/blob/8d94c3bd7af977d998466b56bd773f9b19de8d03/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php/#L837-L840
- *
- * @param string $value Font face src that is a URL or the key for a $_FILES array item.
- *
- * @return string Sanitized value.
- */
- private static function sanitize_src( $value ) {
- $value = ltrim( $value );
- return false === wp_http_validate_url( $value ) ? (string) $value : esc_url_raw( $value );
- }
-
- /**
- * Handles file upload error.
- *
- * Copied from Gutenberg: https://github.com/WordPress/gutenberg/blob/b283c47dba96d74dd7589a823d8ab84c9e5a4765/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php/#L859-L883
- *
- * @param array $file File upload data.
- * @param string $message Error message from wp_handle_upload().
- * @return WP_Error WP_Error object.
- */
- private static function handle_font_file_upload_error( $file, $message ) {
- $status = 500;
- $code = 'rest_font_upload_unknown_error';
-
- if ( __( 'Sorry, you are not allowed to upload this file type.', 'woocommerce' ) === $message ) {
- $status = 400;
- $code = 'rest_font_upload_invalid_file_type';
- }
-
- return new \WP_Error( $code, $message, array( 'status' => $status ) );
- }
-
- /**
- * Handles the upload of a font file using wp_handle_upload().
- *
- * Copied from Gutenberg: https://github.com/WordPress/gutenberg/blob/f4889bf58ddeb8470c8d2a765f1b57229c515eda/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php/#L859-L896
- *
- * @param array $file Single file item from $_FILES.
- * @return array Array containing uploaded file attributes on success, or error on failure.
- */
- private static function handle_font_file_upload( $file ) {
- add_filter( 'upload_mimes', array( 'WP_Font_Utils', 'get_allowed_font_mime_types' ) );
-
- /*
- * Set the upload directory to the fonts directory.
- *
- * wp_get_font_dir() contains the 'font_dir' hook, whose callbacks are
- * likely to call wp_get_upload_dir().
- *
- * To avoid an infinite loop, don't hook wp_get_font_dir() to 'upload_dir'.
- * Instead, just pass its return value to the 'upload_dir' callback.
- */
- $font_dir = wp_get_font_dir();
- $set_upload_dir = function () use ( $font_dir ) {
- return $font_dir;
- };
- add_filter( 'upload_dir', $set_upload_dir );
-
- $overrides = array(
- 'upload_error_handler' => array( self::class, 'handle_font_file_upload_error' ),
- // Arbitrary string to avoid the is_uploaded_file() check applied
- // when using 'wp_handle_upload'.
- 'action' => 'wp_handle_font_upload',
- // Not testing a form submission.
- 'test_form' => false,
- // Seems mime type for files that are not images cannot be tested.
- // See wp_check_filetype_and_ext().
- 'test_type' => true,
- // Only allow uploading font files for this request.
- 'mimes' => \WP_Font_Utils::get_allowed_font_mime_types(),
- );
-
- $uploaded_file = wp_handle_upload( $file, $overrides );
- remove_filter( 'upload_dir', $set_upload_dir );
- remove_filter( 'upload_mimes', array( 'WP_Font_Utils', 'get_allowed_font_mime_types' ) );
-
- return $uploaded_file;
- }
-
- /**
- * Downloads a file from a URL.
- *
- * @param string $file_url The file URL.
- **/
- private static function download_file( $file_url ) {
- if ( ! function_exists( 'download_url' ) ) {
- require_once ABSPATH . 'wp-admin/includes/file.php';
- }
-
- $allowed_extensions = array( 'ttf', 'otf', 'woff', 'woff2', 'eot' );
-
- $allowed_extensions = array_map( 'preg_quote', $allowed_extensions );
-
- // Set variables for storage, fix file filename for query strings.
- preg_match( '/[^\?]+\.(' . implode( '|', $allowed_extensions ) . ')\b/i', $file_url, $matches );
- $file_array = array();
- $file_array['name'] = wp_basename( $matches[0] );
-
- // Download file to temp location.
- $file_array['tmp_name'] = download_url( $file_url );
- return $file_array;
- }
-
- /**
- * Inserts a font face.
- *
- * @param array $font_face The font face settings.
- * @param int $parent_font_family_id The parent font family ID.
- * @return \WP_Error|\WP_Post The inserted font face post or an error if the font face already exists.
- */
- public static function insert_font_face( array $font_face, int $parent_font_family_id ) {
- $slug = \WP_Font_Utils::get_font_face_slug( $font_face );
-
- // Check that the font face slug is unique.
- $query = new \WP_Query(
- array(
- 'post_type' => self::POST_TYPE,
- 'posts_per_page' => 1,
- 'name' => $slug,
- 'update_post_meta_cache' => false,
- 'update_post_term_cache' => false,
- )
- );
-
- if ( ! empty( $query->get_posts() ) ) {
- return new \WP_Error(
- 'duplicate_font_face',
- /* translators: %s: Font face slug. */
- sprintf( __( 'A font face with slug "%s" already exists.', 'woocommerce' ), $slug ),
- );
- }
-
- // Validate the font face settings.
-
- $validation_error = self::validate_font_face( $font_face );
- if ( is_wp_error( $validation_error ) ) {
- return $validation_error;
- }
-
- $parsed_font_face['fontFamily'] = addslashes( \WP_Font_Utils::sanitize_font_family( $font_face['fontFamily'] ) );
- $parsed_font_face['fontStyle'] = sanitize_text_field( $font_face['fontStyle'] );
- $parsed_font_face['fontWeight'] = sanitize_text_field( $font_face['fontWeight'] );
- $file = self::download_file( $font_face['src'] );
-
- $uploaded_file = self::handle_font_file_upload( $file );
-
- $parsed_font_face['src'] = self::sanitize_src( $uploaded_file['url'] );
- $parsed_font_face['preview'] = esc_url_raw( $font_face['preview'] );
-
- // Insert the font face.
- wp_insert_post(
- array(
- 'post_type' => self::POST_TYPE,
- 'post_parent' => $parent_font_family_id,
- 'post_title' => $slug,
- 'post_name' => sanitize_title( $slug ),
- 'post_content' => wp_json_encode( $parsed_font_face ),
- 'post_status' => 'publish',
- )
- );
- }
-
-
- /**
- * Validates a font face.
- *
- * @param array $font_face The font face settings.
- * @return \WP_Error|null The error if the font family is invalid, null otherwise.
- */
- private static function validate_font_face( $font_face ) {
- // Validate the font face family name.
- if ( empty( $font_face['fontFamily'] ) ) {
- return new \WP_Error(
- 'invalid_font_face_font_family',
- __( 'The font face family name is required.', 'woocommerce' ),
- );
- }
-
- // Validate the font face font style.
- if ( empty( $font_face['fontStyle'] ) ) {
- return new \WP_Error(
- 'invalid_font_face_font_style',
- __( 'The font face font style is required.', 'woocommerce' ),
- );
- }
-
- // Validate the font face weight.
- if ( empty( $font_face['fontWeight'] ) ) {
- return new \WP_Error(
- 'invalid_font_face_font_weight',
- __( 'The font face weight is required.', 'woocommerce' ),
- );
- }
-
- // Validate the font face src.
- if ( empty( $font_face['src'] ) ) {
- return new \WP_Error(
- 'invalid_font_face_src',
- __( 'The font face src is required.', 'woocommerce' ),
- );
- }
- }
-
-}
diff --git a/plugins/woocommerce/src/Internal/Font/FontFamily.php b/plugins/woocommerce/src/Internal/Font/FontFamily.php
deleted file mode 100644
index be9562d18e..0000000000
--- a/plugins/woocommerce/src/Internal/Font/FontFamily.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-/**
- * FontFamily class file
- */
-
-namespace Automattic\WooCommerce\Internal\Font;
-
-// IMPORTANT: We have to switch to the WordPress API to create the FontFamily post type when they will be implemented: https://github.com/WordPress/gutenberg/issues/58670!
-
-/**
- * Helper class for font family related functionality.
- *
- * @internal Just for internal use.
- */
-class FontFamily {
-
- const POST_TYPE = 'wp_font_family';
-
- /**
- * Validates a font family.
- *
- * @param array $font_family The font family settings.
- * @return \WP_Error|null The error if the font family is invalid, null otherwise.
- */
- private static function validate_font_family( $font_family ) {
- // Validate the font family name.
- if ( empty( $font_family['fontFamily'] ) ) {
- return new \WP_Error(
- 'invalid_font_family_name',
- __( 'The font family name is required.', 'woocommerce' ),
- );
- }
-
- // Validate the font family slug.
- if ( empty( $font_family['preview'] ) ) {
- return new \WP_Error(
- 'invalid_font_family_name_preview',
- __( 'The font family preview is required.', 'woocommerce' ),
- );
- }
- }
-
-
-
- /**
- * Registers the font family post type.
- *
- * @param array $font_family_settings The font family settings.
- */
- public static function insert_font_family( array $font_family_settings ) {
- $font_family = $font_family_settings;
- // Check that the font family slug is unique.
- $query = new \WP_Query(
- array(
- 'post_type' => self::POST_TYPE,
- 'posts_per_page' => 1,
- 'name' => $font_family['slug'],
- 'update_post_meta_cache' => false,
- 'update_post_term_cache' => false,
- )
- );
-
- if ( ! empty( $query->get_posts() ) ) {
- return new \WP_Error(
- 'duplicate_font_family',
- /* translators: %s: Font family slug. */
- sprintf( __( 'A font family with slug "%s" already exists.', 'woocommerce' ), $font_family['slug'] )
- );
- }
-
- // Validate the font family settings.
- $validation_error = self::validate_font_family( $font_family );
- if ( is_wp_error( $validation_error ) ) {
- return $validation_error;
- }
-
- $post['fontFamily'] = addslashes( \WP_Font_Utils::sanitize_font_family( $font_family['fontFamily'] ) );
- $post['preview'] = $font_family['preview'];
-
- // Insert the font family.
- return wp_insert_post(
- array(
- 'post_type' => self::POST_TYPE,
- 'post_title' => $font_family['name'],
- 'name' => $font_family['slug'],
- 'post_content' => wp_json_encode( $post ),
- 'post_status' => 'publish',
- )
- );
-
- }
-
- /**
- * Gets a font family by name.
- *
- * @param string $name The font family slug.
- * @return \WP_Post|null The font family post or null if not found.
- */
- public static function get_font_family_by_name( $name ) {
- $query = new \WP_Query(
- array(
- 'post_type' => self::POST_TYPE,
- 'posts_per_page' => 1,
- 'title' => $name,
- 'update_post_meta_cache' => false,
- 'update_post_term_cache' => false,
- )
- );
-
- if ( ! empty( $query->get_posts() ) ) {
- return $query->get_posts()[0];
- }
- return null;
- }
-}
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
index 12b79c0499..ca1e6b60ff 100644
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
@@ -19,11 +19,7 @@ config = {
},
{
name: 'e2e-pressable',
- testIgnore: [
- '**/api-tests/**',
- '**/customize-store/**',
- '**/js-file-monitor/**',
- ],
+ testIgnore: [ '**/api-tests/**', '**/js-file-monitor/**' ],
grepInvert,
dependencies: [ 'reset', 'site setup' ],
},
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js
index db0bfb5457..3ebde179b4 100644
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js
@@ -19,11 +19,7 @@ config = {
},
{
name: 'e2e-wpcom',
- testIgnore: [
- '**/api-tests/**',
- '**/customize-store/**',
- '**/js-file-monitor/**',
- ],
+ testIgnore: [ '**/api-tests/**', '**/js-file-monitor/**' ],
grepInvert,
dependencies: [ 'reset', 'site setup' ],
},