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

101 lines
3.3 KiB
TypeScript
Raw Normal View History

// 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 classnames from 'classnames';
import { useMemo } from '@wordpress/element';
// @ts-ignore No types for this exist yet.
import { EntityProvider } from '@wordpress/core-data';
// @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 useEditedEntityRecord from '@wordpress/edit-site/build-module/components/use-edited-entity-record';
// @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 { BlockEditor } from './block-editor';
export const Editor = ( { isLoading }: { isLoading: boolean } ) => {
const { record: template } = useEditedEntityRecord();
const { id: templateId, type: templateType } = template;
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 ] );
return (
<>
{ isLoading ? <CanvasSpinner /> : null }
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ templateType }
id={ templateId }
>
<BlockContextProvider value={ blockContext }>
<InterfaceSkeleton
enableRegionNavigation={ false }
className={ classnames(
'woocommerce-customize-store__edit-site-editor',
'edit-site-editor__interface-skeleton',
{
'show-icon-labels': false,
'is-loading': isLoading,
}
) }
content={
<>
<GlobalStylesRenderer />
<BlockEditor />
</>
}
/>
</BlockContextProvider>
</EntityProvider>
</EntityProvider>
</>
);
};