Skip to content

Commit

Permalink
Move the edit button in the site editor sidebar to a contextual hub (#…
Browse files Browse the repository at this point in the history 
…46700)

Co-authored-by: James Koster <[email protected]>
  • Loading branch information
@youknowriad @jameskoster
youknowriad and jameskoster authored Dec 23, 2022
1 parent 0bfdfe8 commit 0bcb3e6
Show file tree
Hide file tree
Showing 9 changed files with 231 additions and 290 deletions.
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ $button-size: 36px;
$button-size-small: 24px;
$header-height: 60px;
$panel-header-height: $grid-unit-60;
$nav-sidebar-width: 300px;
$nav-sidebar-width: 320px;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
Expand Down
6 changes: 6 additions & 0 deletions packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,12 @@ $z-layers: (

// Appear under the topbar.
".customize-widgets__block-toolbar": 7,

// Site editor layout
".edit-site-layout__hub": 3,
".edit-site-layout__header": 2,
".edit-site-layout__canvas-container": 2,
".edit-site-layout__sidebar": 1,
);

@function z-index( $key ) {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/header-edit-mode/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px;
width: 100%;
justify-content: space-between;
border-bottom: $border-width solid $gray-200;
padding-left: $header-height;

.edit-site-header-edit-mode__start {
display: flex;
Expand Down
257 changes: 129 additions & 128 deletions packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import classnames from 'classnames';
import { useSelect, useDispatch } from '@wordpress/data';
import {
Button,
__experimentalHStack as HStack,
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
__unstableUseNavigateRegions as useNavigateRegions,
Expand Down Expand Up @@ -37,10 +36,10 @@ import { useLocation } from '../routes';
import getIsListPage from '../../utils/get-is-list-page';
import Header from '../header-edit-mode';
import SiteIcon from '../site-icon';
import SiteTitle from '../site-title';
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';

const ANIMATION_DURATION = 0.5;
const HUB_ANIMATION_DURATION = 0.3;

export default function Layout( { onError } ) {
// This ensures the edited entity id and type are initialized properly.
Expand Down Expand Up @@ -86,13 +85,14 @@ export default function Layout( { onError } ) {
const showFrame =
! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
const showEditButton =
isEditorPage &&
isMobileViewport &&
canvasMode === 'view' &&
isMobileCanvasVisible;
( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
const isBackToDashboardButton =
( ! isMobileViewport && canvasMode === 'view' ) ||
( isMobileViewport && ! isMobileCanvasVisible );
const isFullCanvas =
( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
isMobileCanvasVisible;
// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
const [ canvasResizer, canvasSize ] = useResizeObserver();
const [ fullResizer, fullSize ] = useResizeObserver();
Expand Down Expand Up @@ -129,155 +129,133 @@ export default function Layout( { onError } ) {
'edit-site-layout',
navigateRegionsProps.className,
{
'is-full-canvas':
( isEditorPage &&
canvasMode === 'edit' &&
! isMobileViewport ) ||
isMobileCanvasVisible,
'is-full-canvas': isFullCanvas,
'is-edit-mode': canvasMode === 'edit',
}
) }
>
<div className="edit-site-layout__header">
<div className="edit-site-layout__logo">
<motion.div
className="edit-site-layout__hub"
layout
transition={ {
type: 'tween',
duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<motion.div
className="edit-site-layout__view-mode-toggle-container"
layout
transition={ {
type: 'tween',
duration: disableMotion
? 0
: HUB_ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<Button
{ ...siteIconButtonProps }
className="edit-site-layout__view-mode-toggle"
>
<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
</Button>
<AnimatePresence initial={ false }>
{ ( isBackToDashboardButton || showEditButton ) && (
<motion.div
initial={ { opacity: 0 } }
exit={ { opacity: 0 } }
animate={ { opacity: 1 } }
style={ {
position: 'absolute',
left: 60,
} }
>
<HStack>
{ isBackToDashboardButton && (
<SiteTitle />
) }
</motion.div>
{ showEditButton && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
variant="primary"
>
{ __( 'Edit' ) }
</Button>
) }

{ showEditButton && (
<Button
className="edit-site-layout__edit-button"
label={ __(
'Open the editor'
) }
onClick={ () => {
__unstableSetCanvasMode(
'edit'
);
} }
>
{ __( 'Edit' ) }
</Button>
) }
</HStack>
</motion.div>
) }
</AnimatePresence>
{ isMobileViewport && ! isMobileCanvasVisible && (
<Button
onClick={ () => setIsMobileCanvasVisible( true ) }
variant="primary"
>
{ __( 'View Editor' ) }
</Button>
) }
</motion.div>

{ isMobileViewport && ! isMobileCanvasVisible && (
<Button
onClick={ () =>
setIsMobileCanvasVisible( true )
}
style={ { position: 'fixed', right: 0 } }
>
{ __( 'View Editor' ) }
</Button>
) }
</div>
<AnimatePresence>
{ isEditorPage && canvasMode === 'edit' && (
<AnimatePresence initial={ false }>
{ isEditorPage &&
( canvasMode === 'edit' || isMobileCanvasVisible ) && (
<NavigableRegion
className="edit-site-layout__header"
ariaLabel={ __( 'Editor top bar' ) }
as={ motion.div }
initial={ { y: -60 } }
animate={ { y: 0 } }
exit={ { y: -60 } }
animate={ {
y: 0,
} }
initial={ {
y: '-100%',
} }
exit={ {
y: '-100%',
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__editor-header"
ariaLabel={ __( 'Editor top bar' ) }
>
<Header />
{ canvasMode === 'edit' && <Header /> }
</NavigableRegion>
) }
</AnimatePresence>
</div>

<AnimatePresence initial={ false }>
{ showSidebar && (
<NavigableRegion
as={ motion.div }
initial={ {
opacity: 0,
} }
animate={ {
opacity: 1,
} }
exit={ {
opacity: 0,
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
ariaLabel={ __( 'Navigation sidebar' ) }
>
<Sidebar />
</NavigableRegion>
) }
</AnimatePresence>

{ showCanvas && (
<div
className="edit-site-layout__canvas-container"
style={ {
paddingTop: showFrame ? canvasPadding : 0,
paddingBottom: showFrame ? canvasPadding : 0,
} }
>
{ canvasResizer }
{ !! canvasSize.width && (
<motion.div
initial={ false }
layout="position"
className="edit-site-layout__canvas"
<div className="edit-site-layout__content">
<AnimatePresence initial={ false }>
{ showSidebar && (
<NavigableRegion
as={ motion.div }
initial={ {
opacity: 0,
} }
animate={ {
opacity: 1,
} }
exit={ {
opacity: 0,
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
ariaLabel={ __( 'Navigation sidebar' ) }
>
<Sidebar />
</NavigableRegion>
) }
</AnimatePresence>

{ showCanvas && (
<div
className="edit-site-layout__canvas-container"
style={ {
paddingTop: showFrame ? canvasPadding : 0,
paddingBottom: showFrame ? canvasPadding : 0,
} }
>
{ canvasResizer }
{ !! canvasSize.width && (
<motion.div
style={ {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
} }
initial={ false }
animate={ {
width: showFrame
? canvasSize.width - canvasPadding
: fullSize.width,
} }
layout="position"
className="edit-site-layout__canvas"
transition={ {
type: 'tween',
duration: disableMotion
Expand All @@ -286,15 +264,38 @@ export default function Layout( { onError } ) {
ease: 'easeOut',
} }
>
<ErrorBoundary onError={ onError }>
{ isEditorPage && <Editor /> }
{ isListPage && <ListPage /> }
</ErrorBoundary>
<motion.div
style={ {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
} }
initial={ false }
animate={ {
width: showFrame
? canvasSize.width -
canvasPadding
: fullSize.width,
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<ErrorBoundary onError={ onError }>
{ isEditorPage && <Editor /> }
{ isListPage && <ListPage /> }
</ErrorBoundary>
</motion.div>
</motion.div>
</motion.div>
) }
</div>
) }
) }
</div>
) }
</div>
</div>
</>
);
Expand Down
Loading

1 comment on commit 0bcb3e6

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3766234371
📝 Reported issues:

Please sign in to comment.