2023-08-28 01:28:05 +00:00
|
|
|
// 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 classnames from 'classnames';
|
|
|
|
import {
|
|
|
|
useReducedMotion,
|
|
|
|
useResizeObserver,
|
|
|
|
useViewportMatch,
|
|
|
|
} from '@wordpress/compose';
|
|
|
|
import { __ } from '@wordpress/i18n';
|
2023-10-05 12:36:08 +00:00
|
|
|
import { useState, useContext } from '@wordpress/element';
|
2023-08-28 01:28:05 +00:00
|
|
|
import {
|
|
|
|
// @ts-ignore No types for this exist yet.
|
|
|
|
__unstableMotion as motion,
|
|
|
|
} from '@wordpress/components';
|
|
|
|
import {
|
|
|
|
privateApis as blockEditorPrivateApis,
|
|
|
|
// @ts-ignore No types for this exist yet.
|
|
|
|
} from '@wordpress/block-editor';
|
|
|
|
// @ts-ignore 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-ignore No types for this exist yet.
|
|
|
|
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
|
|
|
|
// @ts-ignore No types for this exist yet.
|
|
|
|
import ErrorBoundary from '@wordpress/edit-site/build-module/components/error-boundary';
|
|
|
|
// @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 { NavigableRegion } from '@wordpress/interface';
|
2023-09-14 08:24:46 +00:00
|
|
|
// @ts-ignore No types for this exist yet.
|
|
|
|
import { EntityProvider } from '@wordpress/core-data';
|
|
|
|
// @ts-ignore No types for this exist yet.
|
|
|
|
import useEditedEntityRecord from '@wordpress/edit-site/build-module/components/use-edited-entity-record';
|
2023-09-05 06:21:19 +00:00
|
|
|
|
2023-08-28 01:28:05 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import { Editor } from './editor';
|
|
|
|
import Sidebar from './sidebar';
|
|
|
|
import { SiteHub } from './site-hub';
|
2023-09-05 06:21:19 +00:00
|
|
|
import { LogoBlockContext } from './logo-block-context';
|
|
|
|
import ResizableFrame from './resizable-frame';
|
2023-09-05 07:12:04 +00:00
|
|
|
import { OnboardingTour, useOnboardingTour } from './onboarding-tour';
|
2023-09-14 08:24:46 +00:00
|
|
|
import { HighlightedBlockContextProvider } from './context/highlighted-block-context';
|
2023-10-05 12:36:08 +00:00
|
|
|
import { Transitional } from '../transitional';
|
|
|
|
import { CustomizeStoreContext } from './';
|
2023-08-28 01:28:05 +00:00
|
|
|
|
|
|
|
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
|
|
|
|
|
|
|
|
const ANIMATION_DURATION = 0.5;
|
|
|
|
|
|
|
|
export const Layout = () => {
|
2023-10-25 04:20:42 +00:00
|
|
|
const [ logoBlockIds, setLogoBlockIds ] = useState< Array< string > >( [] );
|
2023-08-28 01:28:05 +00:00
|
|
|
// This ensures the edited entity id and type are initialized properly.
|
|
|
|
useInitEditedEntityFromURL();
|
2023-10-26 10:15:30 +00:00
|
|
|
const { shouldTourBeShown, isResizeHandleVisible, ...onboardingTourProps } =
|
|
|
|
useOnboardingTour();
|
2023-08-28 01:28:05 +00:00
|
|
|
|
|
|
|
const isMobileViewport = useViewportMatch( 'medium', '<' );
|
|
|
|
const disableMotion = useReducedMotion();
|
|
|
|
const [ canvasResizer, canvasSize ] = useResizeObserver();
|
|
|
|
const isEditorLoading = useIsSiteEditorLoading();
|
2023-09-05 06:21:19 +00:00
|
|
|
const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
|
|
|
|
useState( false );
|
2023-08-28 01:28:05 +00:00
|
|
|
const [ backgroundColor ] = useGlobalStyle( 'color.background' );
|
|
|
|
const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
|
|
|
|
|
2023-09-14 08:24:46 +00:00
|
|
|
const { record: template } = useEditedEntityRecord();
|
|
|
|
const { id: templateId, type: templateType } = template;
|
|
|
|
|
2023-10-05 12:36:08 +00:00
|
|
|
const { sendEvent, currentState } = useContext( CustomizeStoreContext );
|
|
|
|
|
|
|
|
const editor = <Editor isLoading={ isEditorLoading } />;
|
|
|
|
|
|
|
|
if ( currentState === 'transitionalScreen' ) {
|
|
|
|
return (
|
|
|
|
<EntityProvider kind="root" type="site">
|
|
|
|
<EntityProvider
|
|
|
|
kind="postType"
|
|
|
|
type={ templateType }
|
|
|
|
id={ templateId }
|
|
|
|
>
|
|
|
|
<Transitional sendEvent={ sendEvent } editor={ editor } />
|
|
|
|
</EntityProvider>
|
|
|
|
</EntityProvider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-08-28 01:28:05 +00:00
|
|
|
return (
|
2023-09-05 06:21:19 +00:00
|
|
|
<LogoBlockContext.Provider
|
|
|
|
value={ {
|
2023-10-25 04:20:42 +00:00
|
|
|
logoBlockIds,
|
|
|
|
setLogoBlockIds,
|
2023-09-05 06:21:19 +00:00
|
|
|
} }
|
|
|
|
>
|
2023-09-14 08:24:46 +00:00
|
|
|
<HighlightedBlockContextProvider>
|
|
|
|
<EntityProvider kind="root" type="site">
|
|
|
|
<EntityProvider
|
|
|
|
kind="postType"
|
|
|
|
type={ templateType }
|
|
|
|
id={ templateId }
|
2023-08-28 01:28:05 +00:00
|
|
|
>
|
2023-09-14 08:24:46 +00:00
|
|
|
<div className={ classnames( 'edit-site-layout' ) }>
|
|
|
|
<motion.div
|
|
|
|
className="edit-site-layout__header-container"
|
|
|
|
animate={ 'view' }
|
|
|
|
>
|
|
|
|
<SiteHub
|
|
|
|
as={ motion.div }
|
|
|
|
variants={ {
|
|
|
|
view: { x: 0 },
|
2023-09-05 06:21:19 +00:00
|
|
|
} }
|
2023-09-14 08:24:46 +00:00
|
|
|
isTransparent={ false }
|
|
|
|
className="edit-site-layout__hub"
|
|
|
|
/>
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
<div className="edit-site-layout__content">
|
|
|
|
<NavigableRegion
|
|
|
|
ariaLabel={ __(
|
|
|
|
'Navigation',
|
|
|
|
'woocommerce'
|
2023-09-05 06:21:19 +00:00
|
|
|
) }
|
2023-09-14 08:24:46 +00:00
|
|
|
className="edit-site-layout__sidebar-region"
|
2023-09-05 06:21:19 +00:00
|
|
|
>
|
2023-09-14 08:24:46 +00:00
|
|
|
<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="edit-site-layout__sidebar"
|
|
|
|
>
|
|
|
|
<Sidebar />
|
|
|
|
</motion.div>
|
|
|
|
</NavigableRegion>
|
|
|
|
|
|
|
|
{ ! isMobileViewport && (
|
2023-11-03 05:57:41 +00:00
|
|
|
<div className="edit-site-layout__canvas-container">
|
2023-09-14 08:24:46 +00:00
|
|
|
{ canvasResizer }
|
|
|
|
{ !! canvasSize.width && (
|
|
|
|
<motion.div
|
|
|
|
initial={ false }
|
|
|
|
layout="position"
|
|
|
|
className={ classnames(
|
|
|
|
'edit-site-layout__canvas'
|
|
|
|
) }
|
|
|
|
>
|
|
|
|
<ErrorBoundary>
|
|
|
|
<ResizableFrame
|
|
|
|
isReady={
|
|
|
|
! isEditorLoading
|
|
|
|
}
|
2023-10-26 10:15:30 +00:00
|
|
|
isHandleVisibleByDefault={
|
|
|
|
! onboardingTourProps.showWelcomeTour &&
|
|
|
|
isResizeHandleVisible
|
2023-09-14 08:24:46 +00:00
|
|
|
}
|
|
|
|
isFullWidth={ false }
|
|
|
|
defaultSize={ {
|
|
|
|
width:
|
|
|
|
canvasSize.width -
|
|
|
|
24 /* $canvas-padding */,
|
|
|
|
height: canvasSize.height,
|
|
|
|
} }
|
|
|
|
isOversized={
|
|
|
|
isResizableFrameOversized
|
|
|
|
}
|
|
|
|
setIsOversized={
|
|
|
|
setIsResizableFrameOversized
|
|
|
|
}
|
|
|
|
innerContentStyle={ {
|
|
|
|
background:
|
|
|
|
gradientValue ??
|
|
|
|
backgroundColor,
|
|
|
|
} }
|
|
|
|
>
|
2023-10-05 12:36:08 +00:00
|
|
|
{ editor }
|
2023-09-14 08:24:46 +00:00
|
|
|
</ResizableFrame>
|
|
|
|
</ErrorBoundary>
|
|
|
|
</motion.div>
|
|
|
|
) }
|
|
|
|
</div>
|
|
|
|
) }
|
|
|
|
</div>
|
2023-09-05 06:21:19 +00:00
|
|
|
</div>
|
2023-10-26 10:15:30 +00:00
|
|
|
{ ! isEditorLoading && shouldTourBeShown && (
|
2023-09-14 08:24:46 +00:00
|
|
|
<OnboardingTour { ...onboardingTourProps } />
|
|
|
|
) }
|
|
|
|
</EntityProvider>
|
|
|
|
</EntityProvider>
|
|
|
|
</HighlightedBlockContextProvider>
|
2023-09-05 06:21:19 +00:00
|
|
|
</LogoBlockContext.Provider>
|
2023-08-28 01:28:05 +00:00
|
|
|
);
|
|
|
|
};
|