Skip to content

Commit

Permalink
Site Editor Hub: Simplify (#61579)
Browse files Browse the repository at this point in the history 
Unlinked contributors: dereksmart.

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
  • Loading branch information
@youknowriad @draganescu
@richtabor @annezazu @Mamaduka @stokesman @ramonjd @ellatrix
10 people authored and ellatrix committed Jun 11, 2024
1 parent a2a0d91 commit 4e668dc
Show file tree
Hide file tree
Showing 13 changed files with 187 additions and 325 deletions.
2 changes: 0 additions & 2 deletions packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,6 @@ $z-layers: (
".customize-widgets__block-toolbar": 7,

// Site editor layout
".edit-site-layout__header-container": 4,
".edit-site-layout__hub": 3,
".edit-site-page-header": 2,
".edit-site-page-content": 1,
".edit-site-patterns__dataviews-list-pagination": 2,
Expand Down
11 changes: 11 additions & 0 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
::view-transition-old(frame),
::view-transition-new(frame) {
animation-duration: 0;
}
/* stylelint-enable */

.edit-site-visual-editor__editor-canvas {
/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
view-transition-name: frame;
/* stylelint-enable */

&.is-focused {
outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
Expand Down
22 changes: 21 additions & 1 deletion packages/edit-site/src/components/editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { Button } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import {
EditorKeyboardShortcutsRegister,
Expand Down Expand Up @@ -40,10 +41,11 @@ import {
} from '../editor-canvas-container';
import SaveButton from '../save-button';
import SiteEditorMoreMenu from '../more-menu';
import SiteIcon from '../site-icon';
import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
import useEditorTitle from './use-editor-title';

const { Editor } = unlock( editorPrivateApis );
const { Editor, BackButton } = unlock( editorPrivateApis );
const { useHistory } = unlock( routerPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );

Expand Down Expand Up @@ -125,6 +127,7 @@ export default function EditSiteEditor( { isLoading } ) {
],
[ settings.styles, canvasMode, currentPostIsTrashed ]
);
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { createSuccessNotice } = useDispatch( noticesStore );
const history = useHistory();
const onActionPerformed = useCallback(
Expand Down Expand Up @@ -213,6 +216,23 @@ export default function EditSiteEditor( { isLoading } ) {
! isEditingPage && <PluginTemplateSettingPanel.Slot />
}
>
{ isEditMode && (
<BackButton>
{ ( { length } ) =>
length <= 1 && (
<Button
label={ __( 'Open Navigation' ) }
className="edit-site-layout__view-mode-toggle"
onClick={ () =>
setCanvasMode( 'view' )
}
>
<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
</Button>
)
}
</BackButton>
) }
<SiteEditorMoreMenu />
{ supportsGlobalStyles && <GlobalStylesSidebar /> }
</Editor>
Expand Down
4 changes: 0 additions & 4 deletions packages/edit-site/src/components/editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,3 @@
display: flex;
justify-content: center;
}

.editor-header {
padding-left: $header-height;
}
75 changes: 17 additions & 58 deletions packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ import {
useReducedMotion,
useViewportMatch,
useResizeObserver,
usePrevious,
} from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useState, useRef, useEffect } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import {
CommandMenu,
Expand Down Expand Up @@ -72,7 +73,7 @@ export default function Layout() {
useCommonCommands();

const isMobileViewport = useViewportMatch( 'medium', '<' );

const toggleRef = useRef();
const {
isDistractionFree,
hasFixedToolbar,
Expand Down Expand Up @@ -120,27 +121,6 @@ export default function Layout() {
triggerAnimationOnChange: canvasMode + '__' + routeKey,
} );

// This determines which animation variant should apply to the header.
// There is also a `isDistractionFreeHovering` state that gets priority
// when hovering the `edit-site-layout__header-container` in distraction
// free mode. It's set via framer and trickles down to all the children
// so they can use this variant state too.
//
// TODO: The issue with this is we want to have the hover state stick when hovering
// a popover opened via the header. We'll probably need to lift this state to
// handle it ourselves. Also, focusWithin the header needs to be handled.
let headerAnimationState;

if ( canvasMode === 'view' ) {
// We need 'view' to always take priority so 'isDistractionFree'
// doesn't bleed over into the view (sidebar) state
headerAnimationState = 'view';
} else if ( isDistractionFree ) {
headerAnimationState = 'isDistractionFree';
} else {
headerAnimationState = canvasMode; // edit, view, init
}

// Sets the right context for the command palette
let commandContext = 'site-editor';

Expand All @@ -154,6 +134,14 @@ export default function Layout() {

const [ backgroundColor ] = useGlobalStyle( 'color.background' );
const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
const previousCanvaMode = usePrevious( canvasMode );
useEffect( () => {
if ( previousCanvaMode === 'edit' ) {
toggleRef.current?.focus();
}
// Should not depend on the previous canvas mode value but the next.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ canvasMode ] );

// Synchronizing the URL with the store value of canvasMode happens in an effect
// This condition ensures the component is only rendered after the synchronization happens
Expand Down Expand Up @@ -183,41 +171,6 @@ export default function Layout() {
}
) }
>
<motion.div
className="edit-site-layout__header-container"
variants={ {
isDistractionFree: {
opacity: 0,
transition: {
type: 'tween',
delay: 0.8,
delayChildren: 0.8,
}, // How long to wait before the header exits
},
isDistractionFreeHovering: {
opacity: 1,
transition: {
type: 'tween',
delay: 0.2,
delayChildren: 0.2,
}, // How long to wait before the header shows
},
view: { opacity: 1 },
edit: { opacity: 1 },
} }
whileHover={
isDistractionFree
? 'isDistractionFreeHovering'
: undefined
}
animate={ headerAnimationState }
>
<SiteHub
isTransparent={ isResizableFrameOversized }
className="edit-site-layout__hub"
/>
</motion.div>

<div className="edit-site-layout__content">
{ /*
The NavigableRegion must always be rendered and not use
Expand Down Expand Up @@ -246,6 +199,12 @@ export default function Layout() {
} }
className="edit-site-layout__sidebar"
>
<SiteHub
ref={ toggleRef }
isTransparent={
isResizableFrameOversized
}
/>
<SidebarContent routeKey={ routeKey }>
{ areas.sidebar }
</SidebarContent>
Expand Down
75 changes: 15 additions & 60 deletions packages/edit-site/src/components/layout/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,6 @@
}
}

.edit-site-layout__hub {
position: fixed;
top: 0;
left: 0;
width: calc(100vw - #{$canvas-padding * 2});
height: $header-height;
z-index: z-index(".edit-site-layout__hub");

@include break-medium {
width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
}

.edit-site-layout.is-full-canvas & {
padding-right: 0;
border-radius: 0;
width: $header-height;
box-shadow: none;
}
}

.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
margin-bottom: $header-height;
@include break-medium {
margin-bottom: 0;
}
}

.edit-site-layout__header-container {
z-index: z-index(".edit-site-layout__header-container");
}

.edit-site-layout__content {
height: 100%;
flex-grow: 1;
Expand Down Expand Up @@ -163,17 +132,31 @@
height: 100%;
}

/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
html.canvas-mode-edit-transition::view-transition-group(toggle) {
animation-delay: 255ms;
}
/* stylelint-enable */

.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
display: none;
}

.edit-site-layout__view-mode-toggle.components-button {
/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
view-transition-name: toggle;
/* stylelint-enable */
position: relative;
color: $white;
border-radius: 0;
height: $header-height;
width: $header-height;
overflow: hidden;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: $gray-900;
border-radius: 0;

&:hover,
&:active {
Expand Down Expand Up @@ -207,7 +190,6 @@

.edit-site-layout__view-mode-toggle-icon {
display: flex;
border-radius: $radius-block-ui;
height: $grid-unit-80;
width: $grid-unit-80;
justify-content: center;
Expand Down Expand Up @@ -244,33 +226,6 @@
}
}

.edit-site-layout.is-distraction-free {
.edit-site-layout__header-container {
height: $header-height;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: z-index(".edit-site-layout__header-container");
width: 100%;

// We need ! important because we override inline styles
// set by the motion component.
&:focus-within {
opacity: 1 !important;
div {
transform: translateX(0) translateY(0) translateZ(0) !important;
}
}
}

.edit-site-site-hub {
position: absolute;
top: 0;
z-index: z-index(".edit-site-layout__hub");
}
}

.edit-site-layout__area {
flex-grow: 1;
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
position: sticky;
top: 0;
background: $gray-900;
padding-top: $grid-unit-60 + $header-height;
padding-top: $grid-unit-60;
margin-bottom: $grid-unit-10;
padding-bottom: $grid-unit-10;
z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
Expand Down
Loading

0 comments on commit 4e668dc

Please sign in to comment.