Skip to content

Commit

Permalink
Site Editor: Initial routing refactoring to separate preview from lis…
Browse files Browse the repository at this point in the history
…t view (#57938)

Co-authored-by: André Maneiro <583546+oandregal@users.noreply.github.com>
  • Loading branch information
youknowriad and oandregal authored Jan 19, 2024
1 parent 90d7f56 commit 7105a03
Show file tree
Hide file tree
Showing 11 changed files with 363 additions and 359 deletions.
176 changes: 80 additions & 96 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,14 @@ import {
useBlockCommands,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';

/**
* Internal dependencies
*/
import Sidebar from '../sidebar';
import Editor from '../editor';
import ErrorBoundary from '../error-boundary';
import { store as editSiteStore } from '../../store';
import getIsListPage from '../../utils/get-is-list-page';
import Header from '../header-edit-mode';
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
import SiteHub from '../site-hub';
Expand All @@ -53,12 +50,11 @@ import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
import { useCommonCommands } from '../../hooks/commands/use-common-commands';
import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
import PageMain from '../page-main';
import { useIsSiteEditorLoading } from './hooks';
import useLayoutAreas from './router';

const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );
const { useLocation } = unlock( routerPrivateApis );
const { useGlobalStyle } = unlock( blockEditorPrivateApis );

const ANIMATION_DURATION = 0.5;
Expand All @@ -72,10 +68,7 @@ export default function Layout() {
useCommonCommands();
useBlockCommands();

const { params } = useLocation();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isListPage = getIsListPage( params, isMobileViewport );
const isEditorPage = ! isListPage;

const {
isDistractionFree,
Expand Down Expand Up @@ -109,26 +102,17 @@ export default function Layout() {
select( blockEditorStore ).getBlockSelectionStart(),
};
}, [] );
const isEditing = canvasMode === 'edit';
const navigateRegionsProps = useNavigateRegions( {
previous: previousShortcut,
next: nextShortcut,
} );
const disableMotion = useReducedMotion();
const showSidebar =
( isMobileViewport && canvasMode === 'view' && ! isListPage ) ||
( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
const showCanvas =
( isMobileViewport && isEditorPage && isEditing ) ||
! isMobileViewport ||
! isEditorPage;
const isFullCanvas =
( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
const [ canvasResizer, canvasSize ] = useResizeObserver();
const [ fullResizer ] = useResizeObserver();
const isEditorLoading = useIsSiteEditorLoading();
const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
useState( false );
const { areas, widths } = useLayoutAreas();

// This determines which animation variant should apply to the header.
// There is also a `isDistractionFreeHovering` state that gets priority
Expand All @@ -154,7 +138,7 @@ export default function Layout() {
// Sets the right context for the command palette
let commandContext = 'site-editor';

if ( canvasMode === 'edit' && isEditorPage ) {
if ( canvasMode === 'edit' ) {
commandContext = 'site-editor-edit';
}
if ( hasBlockSelected ) {
Expand Down Expand Up @@ -185,9 +169,9 @@ export default function Layout() {
'edit-site-layout',
navigateRegionsProps.className,
{
'is-distraction-free': isDistractionFree && isEditing,
'is-full-canvas': isFullCanvas,
'is-edit-mode': isEditing,
'is-distraction-free':
isDistractionFree && canvasMode === 'edit',
'is-full-canvas': canvasMode === 'edit',
'has-fixed-toolbar': hasFixedToolbar,
'is-block-toolbar-visible': hasBlockSelected,
}
Expand Down Expand Up @@ -228,7 +212,7 @@ export default function Layout() {
/>

<AnimatePresence initial={ false }>
{ isEditorPage && isEditing && (
{ canvasMode === 'edit' && (
<NavigableRegion
key="header"
className="edit-site-layout__header"
Expand Down Expand Up @@ -272,7 +256,7 @@ export default function Layout() {
className="edit-site-layout__sidebar-region"
>
<AnimatePresence>
{ showSidebar && (
{ canvasMode === 'view' && (
<motion.div
initial={ { opacity: 0 } }
animate={ { opacity: 1 } }
Expand All @@ -296,82 +280,82 @@ export default function Layout() {

<SavePanel />

{ showCanvas && (
<>
{ isListPage && <PageMain /> }
{ isEditorPage && (
<div className="edit-site-layout__canvas-container">
{ canvasResizer }
{ !! canvasSize.width && (
<motion.div
whileHover={
isEditorPage &&
canvasMode === 'view'
? {
scale: 1.005,
transition: {
duration:
disableMotion
? 0
: 0.5,
ease: 'easeOut',
},
}
: {}
{ areas.content && canvasMode !== 'edit' && (
<div
className="edit-site-layout__area"
style={ {
maxWidth: widths?.content,
} }
>
{ areas.content }
</div>
) }

{ areas.preview && (
<div className="edit-site-layout__canvas-container">
{ canvasResizer }
{ !! canvasSize.width && (
<motion.div
whileHover={
canvasMode === 'view'
? {
scale: 1.005,
transition: {
duration: disableMotion
? 0
: 0.5,
ease: 'easeOut',
},
}
: {}
}
initial={ false }
layout="position"
className={ classnames(
'edit-site-layout__canvas',
{
'is-right-aligned':
isResizableFrameOversized,
}
) }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<ErrorBoundary>
<ResizableFrame
isReady={ ! isEditorLoading }
isFullWidth={
canvasMode === 'edit'
}
initial={ false }
layout="position"
className={ classnames(
'edit-site-layout__canvas',
{
'is-right-aligned':
isResizableFrameOversized,
}
) }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
defaultSize={ {
width:
canvasSize.width -
24 /* $canvas-padding */,
height: canvasSize.height,
} }
isOversized={
isResizableFrameOversized
}
setIsOversized={
setIsResizableFrameOversized
}
innerContentStyle={ {
background:
gradientValue ??
backgroundColor,
} }
>
<ErrorBoundary>
<ResizableFrame
isReady={
! isEditorLoading
}
isFullWidth={ isEditing }
defaultSize={ {
width:
canvasSize.width -
24 /* $canvas-padding */,
height: canvasSize.height,
} }
isOversized={
isResizableFrameOversized
}
setIsOversized={
setIsResizableFrameOversized
}
innerContentStyle={ {
background:
gradientValue ??
backgroundColor,
} }
>
<Editor
isLoading={
isEditorLoading
}
/>
</ResizableFrame>
</ErrorBoundary>
</motion.div>
) }
</div>
{ areas.preview }
</ResizableFrame>
</ErrorBoundary>
</motion.div>
) }
</>
</div>
) }
</div>
</div>
Expand Down
103 changes: 103 additions & 0 deletions packages/edit-site/src/components/layout/router.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
/**
* WordPress dependencies
*/
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { useIsSiteEditorLoading } from './hooks';
import Editor from '../editor';
import DataviewsPatterns from '../page-patterns/dataviews-patterns';
import PagePages from '../page-pages';
import PagePatterns from '../page-patterns';
import PageTemplateParts from '../page-template-parts';
import PageTemplates from '../page-templates';

const { useLocation } = unlock( routerPrivateApis );

export default function useLayoutAreas() {
const isSiteEditorLoading = useIsSiteEditorLoading();
const { params } = useLocation();
const { postType, postId, path, layout, isCustom } = params ?? {};

// Regular page
if ( path === '/page' ) {
const isListLayout =
isCustom !== 'true' && ( ! layout || layout === 'list' );
return {
areas: {
content: window.__experimentalAdminViews ? (
<PagePages />
) : undefined,
preview: ( isListLayout ||
! window.__experimentalAdminViews ) && (
<Editor isLoading={ isSiteEditorLoading } />
),
},
widths: {
content:
window.__experimentalAdminViews && isListLayout
? 380
: undefined,
},
};
}

// Regular other post types
if ( postType && postId ) {
return {
areas: {
preview: <Editor isLoading={ isSiteEditorLoading } />,
},
};
}

// Templates
if (
path === '/wp_template/all' ||
( path === '/wp_template' && window?.__experimentalAdminViews )
) {
const isListLayout =
isCustom !== 'true' && ( ! layout || layout === 'list' );
return {
areas: {
content: <PageTemplates />,
preview: isListLayout && (
<Editor isLoading={ isSiteEditorLoading } />
),
},
widths: {
content: isListLayout ? 380 : undefined,
},
};
}

// Template parts
if ( path === '/wp_template_part/all' ) {
return {
areas: {
content: <PageTemplateParts />,
},
};
}

// Patterns
if ( path === '/patterns' ) {
return {
areas: {
content: window?.__experimentalAdminViews ? (
<DataviewsPatterns />
) : (
<PagePatterns />
),
},
};
}

// Fallback shows the home page preview
return {
areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },
};
}
Loading

0 comments on commit 7105a03

Please sign in to comment.