Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Site editor: revert layout.js changes from Update frame resizing #52311

Closed
wants to merge 2 commits into from
Closed

Site editor: revert layout.js changes from Update frame resizing #52311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd3fefe
Reverting changes from https://github.com/WordPress/gutenberg/pull/49910
ramonjd Jul 5, 2023
1541fbf
Trying to harmonize trunk and rollback
ramonjd Jul 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 150 additions & 40 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
__unstableUseNavigateRegions as useNavigateRegions,
ResizableBox,
} from '@wordpress/components';
import {
useReducedMotion,
Expand Down Expand Up @@ -41,7 +42,7 @@ 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';
import ResizableFrame from '../resizable-frame';
import ResizeHandle from '../block-editor/resize-handle';
import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
import { unlock } from '../../lock-unlock';
import SavePanel from '../save-panel';
Expand All @@ -58,6 +59,17 @@ const { useLocation } = unlock( routerPrivateApis );
const { useGlobalStyle } = unlock( blockEditorPrivateApis );

const ANIMATION_DURATION = 0.5;
const emptyResizeHandleStyles = {
position: undefined,
userSelect: undefined,
cursor: undefined,
width: undefined,
height: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined,
};

export default function Layout() {
// This ensures the edited entity id and type are initialized properly.
Expand Down Expand Up @@ -108,18 +120,30 @@ export default function Layout() {
next: nextShortcut,
} );
const disableMotion = useReducedMotion();
const canvasPadding = isMobileViewport ? 0 : 24;
const showSidebar =
( isMobileViewport && ! isListPage ) ||
( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
const showCanvas =
( isMobileViewport && isEditorPage && isEditing ) ||
! isMobileViewport ||
! isEditorPage;
const showFrame =
( ! isEditorPage && ! isMobileViewport ) ||
( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
const isFullCanvas =
( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
const [ canvasResizer, canvasSize ] = useResizeObserver();
const [ fullResizer ] = useResizeObserver();
const [ isResizing ] = useState( false );
const isResizingEnabled = ! isMobileViewport && canvasMode === 'view';
const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
const [ isResizing, setIsResizing ] = useState( false );
const [ fullResizer, fullSize ] = useResizeObserver();
const [ forcedWidth, setForcedWidth ] = useState( null );
let canvasWidth = isResizing ? '100%' : fullSize.width;
if ( showFrame && ! isResizing ) {
canvasWidth = canvasSize.width - canvasPadding;
}

const isEditorLoading = useIsSiteEditorLoading();

// This determines which animation variant should apply to the header.
Expand Down Expand Up @@ -257,28 +281,94 @@ export default function Layout() {
</motion.div>

<div className="edit-site-layout__content">
<motion.div
// The sidebar is needed for routing on mobile
// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
// so we can't remove the element entirely. Using `inert` will make
// it inaccessible to screen readers and keyboard navigation.
inert={ showSidebar ? undefined : 'inert' }
animate={ { opacity: showSidebar ? 1 : 0 } }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion || isMobileViewport
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
>
<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
<Sidebar />
</NavigableRegion>
</motion.div>
<AnimatePresence initial={ false }>
{ showSidebar && (
<ResizableBox
as={ motion.div }
// The sidebar is needed for routing on mobile
// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
// so we can't remove the element entirely. Using `inert` will make
// it inaccessible to screen readers and keyboard navigation.
inert={ showSidebar ? undefined : 'inert' }
initial={ {
opacity: 0,
} }
animate={ {
opacity: 1,
} }
exit={ {
opacity: 0,
} }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion ||
isResizing ||
isMobileViewport
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
size={ {
height: '100%',
width:
isResizingEnabled && forcedWidth
? forcedWidth
: defaultSidebarWidth,
} }
className="edit-site-layout__sidebar"
enable={ {
right: isResizingEnabled,
} }
onResizeStop={ ( event, direction, elt ) => {
setForcedWidth( elt.clientWidth );
setIsResizing( false );
} }
onResizeStart={ () => {
setIsResizing( true );
} }
onResize={ ( event, direction, elt ) => {
// This is a performance optimization
// We set the width imperatively to avoid re-rendering
// the whole component while resizing.
hubRef.current.style.width =
elt.clientWidth - 48 + 'px';
} }
handleComponent={ {
right: (
<ResizeHandle
direction="right"
variation="separator"
resizeWidthBy={ ( delta ) => {
setForcedWidth(
( forcedWidth ??
defaultSidebarWidth ) +
delta
);
} }
/>
),
} }
handleClasses={ undefined }
handleStyles={ {
right: emptyResizeHandleStyles,
} }
minWidth={ isResizingEnabled ? 320 : undefined }
maxWidth={
isResizingEnabled && fullSize
? fullSize.width - 360
: undefined
}
>
<NavigableRegion
ariaLabel={ __( 'Navigation' ) }
>
<Sidebar />
</NavigableRegion>
</ResizableBox>
) }
</AnimatePresence>

<SavePanel />

Expand All @@ -293,6 +383,14 @@ export default function Layout() {
'is-resizing': isResizing,
}
) }
style={ {
paddingTop: showFrame
? canvasPadding
: 0,
paddingBottom: showFrame
? canvasPadding
: 0,
} }
>
{ canvasResizer }
{ !! canvasSize.width && (
Expand Down Expand Up @@ -325,26 +423,38 @@ export default function Layout() {
ease: 'easeOut',
} }
>
<ErrorBoundary>
<ResizableFrame
isReady={
! isEditorLoading
}
isFullWidth={ isEditing }
oversizedClassName="edit-site-layout__resizable-frame-oversized"
innerContentStyle={ {
background:
gradientValue ??
backgroundColor,
} }
>
<motion.div
style={ {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
background:
gradientValue ??
backgroundColor,
} }
initial={ false }
animate={ {
width: canvasWidth,
} }
transition={ {
type: 'tween',
duration:
disableMotion ||
isResizing
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<ErrorBoundary>
<Editor
isLoading={
isEditorLoading
}
/>
</ResizableFrame>
</ErrorBoundary>
</ErrorBoundary>
</motion.div>
</motion.div>
) }
</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,13 @@

.resizable-editor__drag-handle {
right: 0;
&.is-variation-separator {
height: 150px;
&::after {
width: 5px;
border-radius: 5px;
}
}
}
}

Expand Down Expand Up @@ -127,6 +134,7 @@
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
Expand Down