From 87f2d3c74bbcacf6b686545278b15c52dbac06db Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 May 2024 16:43:21 +0100 Subject: [PATCH 01/22] Site Editor Hub: Simplify --- packages/base-styles/_z-index.scss | 2 - .../edit-site/src/components/editor/index.js | 13 +- .../edit-site/src/components/layout/index.js | 61 +----- .../src/components/layout/style.scss | 58 ----- .../src/components/site-hub/index.js | 201 +++++------------- .../src/components/site-hub/style.scss | 1 + 6 files changed, 72 insertions(+), 264 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 0e3dddf70632b3..c8c35acfce4867 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -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, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 779b69cdeeef21..3573f521d54482 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -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, @@ -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 ); @@ -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( @@ -213,6 +216,14 @@ export default function EditSiteEditor( { isLoading } ) { ! isEditingPage && } > + + + { supportsGlobalStyles && } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 4bbf29cced39ea..2340ced5d54bac 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -120,27 +120,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'; @@ -183,41 +162,6 @@ export default function Layout() { } ) } > - - - -
{ /* The NavigableRegion must always be rendered and not use @@ -246,6 +190,11 @@ export default function Layout() { } } className="edit-site-layout__sidebar" > + { areas.sidebar } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0c5412b6d765bb..9ceeabf69c4613 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -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; @@ -244,33 +213,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; diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 160015a4bf3b15..b492b8242b7522 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -7,17 +7,9 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { - Button, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, - __experimentalHStack as HStack, -} from '@wordpress/components'; -import { useReducedMotion } from '@wordpress/compose'; +import { Button, __experimentalHStack as HStack } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; import { memo } from '@wordpress/element'; import { search } from '@wordpress/icons'; @@ -32,164 +24,79 @@ import { store as editSiteStore } from '../../store'; import SiteIcon from '../site-icon'; import { unlock } from '../../lock-unlock'; -const HUB_ANIMATION_DURATION = 0.3; +const SiteHub = memo( ( { isTransparent } ) => { + const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); -const SiteHub = memo( ( { isTransparent, className } ) => { - const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect( - ( select ) => { - const { getCanvasMode, getSettings } = unlock( - select( editSiteStore ) - ); - - const { - getSite, - getUnstableBase, // Site index. - } = select( coreStore ); - const _site = getSite(); - return { - canvasMode: getCanvasMode(), - dashboardLink: - getSettings().__experimentalDashboardLink || 'index.php', - homeUrl: getUnstableBase()?.home, - siteTitle: - ! _site?.title && !! _site?.url - ? filterURLForDisplay( _site?.url ) - : _site?.title, - }; - }, - [] - ); + 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 disableMotion = useReducedMotion(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const { setDeviceType } = useDispatch( editorStore ); - const isBackToDashboardButton = canvasMode === 'view'; - const siteIconButtonProps = isBackToDashboardButton - ? { - href: dashboardLink, - label: __( 'Go to the Dashboard' ), - } - : { - href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a ` - +
- - { canvasMode === 'view' && ( - +
+ { decodeEntities( siteTitle ) } +
+ + - - - + + diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index c40e1c5fc366af..171aca86cfbc88 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -13,39 +13,51 @@ import { store as editorStore } from '@wordpress/editor'; export const setCanvasMode = ( mode ) => ( { registry, dispatch } ) => { - const isMediumOrBigger = - window.matchMedia( '(min-width: 782px)' ).matches; - 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 && + const switchCanvasMode = () => { + const isMediumOrBigger = + window.matchMedia( '(min-width: 782px)' ).matches; registry - .select( preferencesStore ) - .get( 'core', 'showListViewByDefault' ) && - ! registry - .select( preferencesStore ) - .get( 'core', 'distractionFree' ) - ) { - registry.dispatch( editorStore ).setIsListViewOpened( true ); + .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 ); + }; + + if ( ! document.startViewTransition ) { + switchCanvasMode(); } else { - registry.dispatch( editorStore ).setIsListViewOpened( false ); + document.startViewTransition( () => { + switchCanvasMode(); + } ); } - registry.dispatch( editorStore ).setIsInserterOpened( false ); }; /** From a0f9a67d6f41e915bbf91c4f05f080444d10141b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 10:26:42 +0100 Subject: [PATCH 04/22] Hide original icon when going into full editor --- packages/edit-site/src/components/layout/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index d40a8cb1ea934b..0031d415738da9 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -140,6 +140,9 @@ view-transition-name: toggle; } /* 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 { position: relative; From 96d796870eb9a89bf98998284a0c03a6c3df14a7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 11:10:12 +0100 Subject: [PATCH 05/22] Fix sidebar padding --- .../src/components/sidebar-navigation-screen/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 7691f9ba2cdb0b..43b789d669ba4d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -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"); From 8338eea56a4bf3ed2a468e0594c87cf8f62c4a0a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 11:10:25 +0100 Subject: [PATCH 06/22] Fix border radius --- packages/edit-site/src/components/layout/style.scss | 2 -- packages/edit-site/src/components/site-hub/index.js | 2 +- packages/edit-site/src/components/site-icon/style.scss | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0031d415738da9..567e244cbade1d 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -147,7 +147,6 @@ .edit-site-layout__view-mode-toggle.components-button { position: relative; color: $white; - border-radius: 0; height: $header-height; width: $header-height; overflow: hidden; @@ -189,7 +188,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; diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 7dce466a7ceb17..94024c7d00a5a1 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -60,7 +60,7 @@ const SiteHub = memo( ( { isTransparent } ) => { href={ dashboardLink } label={ __( 'Go to the Dashboard' ) } className="edit-site-layout__view-mode-toggle" - style={ { transform: 'scale(0.5)' } } + style={ { transform: 'scale(0.5)', borderRadius: 4 } } > diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss index d8b5e3f9b51dee..1fe551a7945f85 100644 --- a/packages/edit-site/src/components/site-icon/style.scss +++ b/packages/edit-site/src/components/site-icon/style.scss @@ -13,7 +13,6 @@ .edit-site-site-icon__image { width: 100%; height: 100%; - border-radius: $radius-block-ui * 2; object-fit: cover; background: #333; From dd84987f17b448132eafe7a737d76b93fe90e8d4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 11:56:02 +0100 Subject: [PATCH 07/22] No fadein/fadeout animation for the frame --- .../src/components/block-editor/style.scss | 13 +++++++++++++ .../edit-site/src/components/editor/index.js | 18 ++++++++++-------- .../edit-site/src/components/editor/style.scss | 4 ---- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 3849eed24a4ea3..a2daba3e0a024a 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -4,3 +4,16 @@ outline-offset: calc(-2 * var(--wp-admin-border-width-focus)); } } + +/* stylelint-disable */ +::view-transition-old(frame), +::view-transition-new(frame) { + animation-duration: 0; +} +/* stylelint-enable */ + +.edit-site-visual-editor__editor-canvas { + /* stylelint-disable */ + view-transition-name: frame; + /* stylelint-enable */ +} \ No newline at end of file diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 3573f521d54482..33a43629f21d72 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -216,14 +216,16 @@ export default function EditSiteEditor( { isLoading } ) { ! isEditingPage && } > - - - + { isEditMode && ( + + + + ) } { supportsGlobalStyles && } diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index f44b5a6f02ce20..b157057062c9d1 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -17,7 +17,3 @@ display: flex; justify-content: center; } - -.editor-header { - padding-left: $header-height; -} From 2259ce5431317eb612298213b48ac296c0e020d6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 12:03:09 +0100 Subject: [PATCH 08/22] Delay the site icon animation --- packages/edit-site/src/components/layout/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 567e244cbade1d..a20c363909c9fe 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -133,6 +133,9 @@ } /* stylelint-disable */ +::view-transition-group(toggle) { + animation-delay: 250ms; +} .edit-site-layout:not(.is-full-canvas) .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle { view-transition-name: toggle; } From 178a1750ead1782fa5bbc7c8d0127798a99f5056 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 12:07:39 +0100 Subject: [PATCH 09/22] Fix border radius --- packages/edit-site/src/components/layout/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index a20c363909c9fe..bbb5c710357ac2 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -158,6 +158,7 @@ align-items: center; justify-content: center; background: $gray-900; + border-radius: 0; &:hover, &:active { From ef1f5f81e30eaf6ab6ca54fd7a903f1439dcc88d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 May 2024 13:37:02 +0100 Subject: [PATCH 10/22] Delay only one direction of the animation --- packages/edit-site/src/components/layout/style.scss | 11 +++++++---- packages/edit-site/src/store/private-actions.js | 7 +++++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index bbb5c710357ac2..69b784032f34e6 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -132,9 +132,11 @@ height: 100%; } -/* stylelint-disable */ -::view-transition-group(toggle) { - animation-delay: 250ms; +/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ +html:active-view-transition-type(canvas-mode-edit) { + &::view-transition-group(toggle) { + animation-delay: 250ms; + } } .edit-site-layout:not(.is-full-canvas) .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle { view-transition-name: toggle; @@ -142,7 +144,8 @@ .edit-site-layout.is-full-canvas .edit-site-layout__canvas .edit-site-layout__view-mode-toggle { view-transition-name: toggle; } -/* stylelint-enable */ +/* stylelint-enable */ + .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle { display: none; } diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index 171aca86cfbc88..66d53a75e81e16 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -54,8 +54,11 @@ export const setCanvasMode = if ( ! document.startViewTransition ) { switchCanvasMode(); } else { - document.startViewTransition( () => { - switchCanvasMode(); + document.startViewTransition( { + update: () => { + switchCanvasMode(); + }, + types: [ 'canvas-mode-' + mode ], } ); } }; From 555ae9b5b6e0df995e8d8c3f74651f8b22c38892 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 May 2024 18:53:07 +0100 Subject: [PATCH 11/22] Fix linting issue --- packages/edit-site/src/components/block-editor/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index a2daba3e0a024a..82a130e22a1a11 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -5,7 +5,7 @@ } } -/* stylelint-disable */ +/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ ::view-transition-old(frame), ::view-transition-new(frame) { animation-duration: 0; @@ -13,7 +13,7 @@ /* stylelint-enable */ .edit-site-visual-editor__editor-canvas { - /* stylelint-disable */ + /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ view-transition-name: frame; /* stylelint-enable */ } \ No newline at end of file From 953107a474740494379f4ffd5ccc055432e7279f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 May 2024 08:40:31 +0100 Subject: [PATCH 12/22] Handle focus properly when leaving edit mode --- .../edit-site/src/components/layout/index.js | 14 +- .../src/components/site-hub/index.js | 139 +++++++++--------- 2 files changed, 84 insertions(+), 69 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 2340ced5d54bac..58de32d4b46878 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -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, @@ -72,7 +73,7 @@ export default function Layout() { useCommonCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - + const toggleRef = useRef(); const { isDistractionFree, hasFixedToolbar, @@ -133,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 @@ -191,6 +200,7 @@ export default function Layout() { className="edit-site-layout__sidebar" > { - const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); +const SiteHub = memo( + forwardRef( ( { isTransparent }, ref ) => { + 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 ); - return ( -
- -
- -
- - -
- { decodeEntities( siteTitle ) } -
- + +
+
-
- ); -} ); + + ); + } ) +); export default SiteHub; From fe80e5ecc174894216ed52194febcc4452b7d52a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 31 May 2024 07:11:13 +0100 Subject: [PATCH 13/22] Fix hub post rebase --- .../src/components/site-hub/index.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index bc987c16c630d0..b53fed2d7a94f4 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -12,7 +12,7 @@ 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 { search, external } from '@wordpress/icons'; +import { search } from '@wordpress/icons'; import { store as commandsStore } from '@wordpress/commands'; import { displayShortcut } from '@wordpress/keycodes'; import { filterURLForDisplay } from '@wordpress/url'; @@ -73,22 +73,20 @@ const SiteHub = memo(
- { decodeEntities( siteTitle ) } +
- + { ( { length } ) => + length <= 1 && ( + + ) + } ) } From 81dbd5ee9d111167e9aca7d8e5d88cd7118d3100 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 6 Jun 2024 15:11:07 +0100 Subject: [PATCH 21/22] Fix e2e tests --- packages/edit-site/src/components/editor/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 71d781f62bb01e..cd6b7198752392 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -221,6 +221,7 @@ export default function EditSiteEditor( { isLoading } ) { { ( { length } ) => length <= 1 && (