diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 2e6e7f95b715f3..3849eed24a4ea3 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -1,15 +1,4 @@ -/* 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)); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 96bf2fad4d6b68..28b4730c65cd5d 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,7 +7,6 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { Button } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { EditorKeyboardShortcutsRegister, @@ -41,11 +40,10 @@ 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, BackButton } = unlock( editorPrivateApis ); +const { Editor } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -122,7 +120,6 @@ export default function EditSiteEditor( { isLoading } ) { ], [ settings.styles, canvasMode, currentPostIsTrashed ] ); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { createSuccessNotice } = useDispatch( noticesStore ); const history = useHistory(); const onActionPerformed = useCallback( @@ -210,23 +207,6 @@ export default function EditSiteEditor( { isLoading } ) { ! isEditingPage && } > - { isEditMode && ( - - { ( { length } ) => - length <= 1 && ( - - ) - } - - ) } { supportsGlobalStyles && } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 72d48122057ac9..fa04a635f5eef3 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -16,10 +16,9 @@ import { useReducedMotion, useViewportMatch, useResizeObserver, - usePrevious, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { useState, useRef, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { CommandMenu } from '@wordpress/commands'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -56,7 +55,6 @@ export default function Layout( { route } ) { useSyncCanvasModeWithURL(); useCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - const toggleRef = useRef(); const { canvasMode, previousShortcut, nextShortcut } = useSelect( ( select ) => { const { getAllShortcutKeyCombinations } = select( @@ -79,7 +77,7 @@ export default function Layout( { route } ) { previous: previousShortcut, next: nextShortcut, } ); - const disableMotion = useReducedMotion(); + const reduceMotion = useReducedMotion(); const [ canvasResizer, canvasSize ] = useResizeObserver(); const [ fullResizer ] = useResizeObserver(); const isEditorLoading = useIsSiteEditorLoading(); @@ -92,14 +90,6 @@ export default function Layout( { route } ) { 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 @@ -135,6 +125,10 @@ export default function Layout( { route } ) { ariaLabel={ __( 'Navigation' ) } className="edit-site-layout__sidebar-region" > + { canvasMode === 'view' && ( - { areas.sidebar } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 01c31de0d65d6c..2b8f0626726183 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -18,26 +18,31 @@ } .edit-site-layout__sidebar-region { - z-index: z-index(".edit-site-layout__sidebar"); + /* z-index: z-index(".edit-site-layout__sidebar"); */ width: 100vw; flex-shrink: 0; + display: flex; + flex-direction: column; - @include break-medium { - width: $nav-sidebar-width; + &, + // Direct children’s width is also specified so they maintain it when the + // sidebar region collapses for full screen canvas. + & > * { + @include break-medium { + width: $nav-sidebar-width; + } } - // This is only necessary for the exit animation .edit-site-layout.is-full-canvas & { - position: fixed !important; - height: 100vh; - left: 0; - top: 0; + // Frees the space for the canvas. + width: 0; } .edit-site-layout__sidebar { display: flex; flex-direction: column; - height: 100%; + flex: 1; + overflow: hidden; } .resizable-editor__drag-handle { @@ -81,7 +86,7 @@ .edit-site-layout__canvas { position: absolute; top: 0; - left: 0; + left: auto; bottom: 0; width: 100%; display: flex; @@ -103,7 +108,8 @@ .edit-site-resizable-frame__inner-content { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8); - transition: border-radius 0.4s; + transition: border-radius 0.6s linear; + @include reduce-motion("transition"); // This ensure the radius work properly. overflow: hidden; @@ -132,20 +138,7 @@ 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; height: $header-height; @@ -168,24 +161,23 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { } &::before { - transition: box-shadow 0.1s ease; + opacity: 0; + transition: opacity 0.1s linear; @include reduce-motion("transition"); content: ""; display: block; position: absolute; - top: 9px; - right: 9px; - bottom: 9px; - left: 9px; + z-index: 1; + inset: 7px; border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: none; } - // Lightened spot color focus. - &:focus::before { + &:focus-visible::before { + opacity: 1; box-shadow: - inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), - inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), + inset 0 0 0 calc(var(--wp-admin-border-width-focus) + 0.5px) rgba($white, 0.5), + 0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) rgba($white, 0.5); } .edit-site-layout__view-mode-toggle-icon { @@ -197,6 +189,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { } } +.edit-site-editor__editor-interface .editor-header { + padding-inline: $header-height 0; +} + .edit-site-layout__actions { z-index: z-index(".edit-site-layout__actions"); position: fixed !important; // Need to override the default relative positioning diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index b53fed2d7a94f4..61a9d892bf21d9 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -7,13 +7,19 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { Button, __experimentalHStack as HStack } from '@wordpress/components'; +import { + Button, + __experimentalHStack as HStack, + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; -import { memo, forwardRef } from '@wordpress/element'; +import { memo } from '@wordpress/element'; import { search } from '@wordpress/icons'; import { store as commandsStore } from '@wordpress/commands'; +import { useReducedMotion } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; import { filterURLForDisplay } from '@wordpress/url'; @@ -24,82 +30,113 @@ import { store as editSiteStore } from '../../store'; import SiteIcon from '../site-icon'; import { unlock } from '../../lock-unlock'; -const SiteHub = memo( - forwardRef( ( { isTransparent }, ref ) => { - const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); +const SiteHub = memo( ( { isTransparent, canvasMode } ) => { + const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); - const { - getSite, - getUnstableBase, // Site index. - } = select( coreStore ); - const _site = getSite(); - return { - dashboardLink: - getSettings().__experimentalDashboardLink || 'index.php', - homeUrl: getUnstableBase()?.home, - siteTitle: - ! _site?.title && !! _site?.url - ? filterURLForDisplay( _site?.url ) - : _site?.title, - }; - }, [] ); - const { open: openCommandCenter } = useDispatch( commandsStore ); + const { + getSite, + getUnstableBase, // Site index. + } = select( coreStore ); + const _site = getSite(); + return { + dashboardLink: + getSettings().__experimentalDashboardLink || 'index.php', + homeUrl: getUnstableBase()?.home, + siteTitle: + ! _site?.title && !! _site?.url + ? filterURLForDisplay( _site?.url ) + : _site?.title, + }; + }, [] ); + const { open: openCommandCenter } = useDispatch( commandsStore ); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const reduceMotion = useReducedMotion(); - return ( -
- -
{ + event.preventDefault(); + setCanvasMode( 'view' ); + }, + label: __( 'Open Navigation' ), + } + : { + label: __( 'Go to the Dashboard' ), + }; + + return ( +
+ +
+ -
+ + +
- -
- -
+ + { canvasMode === 'view' && ( - +
+ +
- ); - } ) -); + ) } + + + + ); +} ); export default SiteHub; diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 7fae845d4d2030..b51b642bee4877 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -3,14 +3,17 @@ align-items: center; justify-content: space-between; gap: $grid-unit-10; - margin-right: $grid-unit-15; + padding-right: $grid-unit-15; } .edit-site-site-hub__actions { - flex-shrink: 0; + flex: 0 0 min-content; + margin-inline: auto 0; } .edit-site-site-hub__view-mode-toggle-container { + z-index: 3; // TODO: add and use: z-index(".edit-site-site-hub__view-mode-toggle-container"); + background: $gray-900; height: $header-height; width: $header-height; flex-shrink: 0; @@ -20,6 +23,22 @@ } } +.edit-site-layout__view-mode-toggle-icon { + transition: transform 0.3s ease-out; + @include reduce-motion("transition"); + + transform: scale(1); + + .is-exit > & { + // Scales so the svg path inside the default WP icon is 20px. + transform: scale(0.6667); + } + + :not(.is-exit):hover > & { + transform: scale(0.96); + } +} + .edit-site-site-hub__title .components-button { color: $gray-200; display: block; diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js index bd1fe63a50897c..e5eb5bfa2d4f17 100644 --- a/packages/edit-site/src/components/site-icon/index.js +++ b/packages/edit-site/src/components/site-icon/index.js @@ -23,10 +23,6 @@ function SiteIcon( { className } ) { }; }, [] ); - if ( isRequestingSite && ! siteIconUrl ) { - return
; - } - const icon = siteIconUrl ? ( - { icon } + { isRequestingSite ? null : icon }
); } diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss index a461b43476fe52..69df1b2f823cf9 100644 --- a/packages/edit-site/src/components/site-icon/style.scss +++ b/packages/edit-site/src/components/site-icon/style.scss @@ -1,15 +1,12 @@ .edit-site-site-icon__icon { fill: currentColor; - - .edit-site-layout.is-full-canvas & { - // Make the WordPress icon not so big in full canvas. - padding: $grid-unit-15 * 0.5; // 6px. - } + padding: $grid-unit-15 * 0.5; // 6px. } .edit-site-site-icon__image { width: 100%; height: 100%; + border-radius: $radius-block-ui * 2; object-fit: cover; background: #333; diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index bd56e30f10d11d..bc9c9769ae5848 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -13,67 +13,45 @@ import { store as editorStore } from '@wordpress/editor'; export const setCanvasMode = ( mode ) => ( { registry, dispatch } ) => { - const switchCanvasMode = () => { - registry.batch( () => { - const isMediumOrBigger = - window.matchMedia( '(min-width: 782px)' ).matches; - registry.dispatch( blockEditorStore ).clearSelectedBlock(); - registry.dispatch( editorStore ).setDeviceType( 'Desktop' ); - registry - .dispatch( blockEditorStore ) - .__unstableSetEditorMode( 'edit' ); - const isPublishSidebarOpened = registry - .select( editorStore ) - .isPublishSidebarOpened(); - dispatch( { - type: 'SET_CANVAS_MODE', - mode, - } ); - const isEditMode = mode === 'edit'; - if ( isPublishSidebarOpened && ! isEditMode ) { - registry.dispatch( editorStore ).closePublishSidebar(); - } - - // Check if the block list view should be open by default. - // If `distractionFree` mode is enabled, the block list view should not be open. - // This behavior is disabled for small viewports. - if ( - isMediumOrBigger && - isEditMode && - registry - .select( preferencesStore ) - .get( 'core', 'showListViewByDefault' ) && - ! registry - .select( preferencesStore ) - .get( 'core', 'distractionFree' ) - ) { - registry - .dispatch( editorStore ) - .setIsListViewOpened( true ); - } else { - registry - .dispatch( editorStore ) - .setIsListViewOpened( false ); - } - registry.dispatch( editorStore ).setIsInserterOpened( false ); + registry.batch( () => { + const isMediumOrBigger = + window.matchMedia( '(min-width: 782px)' ).matches; + registry.dispatch( blockEditorStore ).clearSelectedBlock(); + registry.dispatch( editorStore ).setDeviceType( 'Desktop' ); + registry + .dispatch( blockEditorStore ) + .__unstableSetEditorMode( 'edit' ); + const isPublishSidebarOpened = registry + .select( editorStore ) + .isPublishSidebarOpened(); + dispatch( { + type: 'SET_CANVAS_MODE', + mode, } ); - }; + const isEditMode = mode === 'edit'; + if ( isPublishSidebarOpened && ! isEditMode ) { + registry.dispatch( editorStore ).closePublishSidebar(); + } - if ( ! document.startViewTransition ) { - switchCanvasMode(); - } else { - document.documentElement.classList.add( - `canvas-mode-${ mode }-transition` - ); - const transition = document.startViewTransition( () => - switchCanvasMode() - ); - transition.finished.finally( () => { - document.documentElement.classList.remove( - `canvas-mode-${ mode }-transition` - ); - } ); - } + // Check if the block list view should be open by default. + // If `distractionFree` mode is enabled, the block list view should not be open. + // This behavior is disabled for small viewports. + if ( + isMediumOrBigger && + isEditMode && + registry + .select( preferencesStore ) + .get( 'core', 'showListViewByDefault' ) && + ! registry + .select( preferencesStore ) + .get( 'core', 'distractionFree' ) + ) { + registry.dispatch( editorStore ).setIsListViewOpened( true ); + } else { + registry.dispatch( editorStore ).setIsListViewOpened( false ); + } + registry.dispatch( editorStore ).setIsInserterOpened( false ); + } ); }; /** diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index e2efba2e9375aa..82f2f03f007a6a 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -196,8 +196,7 @@ } .editor-header { - background-color: $white; - border-bottom: 1px solid #e0e0e0; + box-shadow: inherit; position: absolute; width: 100%;