woocommerce/plugins/woocommerce-admin/client/customize-store/assembler-hub/index.tsx

189 lines
6.3 KiB
TypeScript
Raw Normal View History

// 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 { PreloadFonts } from './preload-fonts';
import { GoBackWarningModal } from './go-back-warning-modal';
import { onBackButtonClicked } from '../utils';
import { getNewPath } from '@woocommerce/navigation';
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 =
// @ts-ignore No types for this exist yet.
dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters || // GB < 16.6
// @ts-ignore No types for this exist yet.
dispatch( blocksStore ).reapplyBlockTypeFilters; // GB >= 16.6
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 );
if ( ! isInitializedRef.current ) {
initializeAssembleHub();
isInitializedRef.current = true;
}
const [ showExitModal, setShowExitModal ] = useState( false );
useEffect( () => {
onBackButtonClicked( () => setShowExitModal( true ) );
}, [] );
2023-12-06 12:49:28 +00:00
// @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%' } }>
<GlobalStylesProvider>
<RouterProvider>
<Layout />
</RouterProvider>
<PreloadFonts />
</GlobalStylesProvider>
</ShortcutProvider>
</CustomizeStoreContext.Provider>
</>
);
};