From 6b0290fe81401d33d22645ea1907ac40349a9b07 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Mon, 12 Feb 2024 17:19:20 +1000 Subject: [PATCH 1/9] try animate frame --- .../block-library/src/navigation/editor.scss | 2 - packages/components/src/navigator/styles.ts | 6 +- .../edit-site/src/components/editor/index.js | 18 +- .../src/components/header-edit-mode/index.js | 184 +++++++++++------- .../components/header-edit-mode/style.scss | 12 +- .../edit-site/src/components/layout/index.js | 118 +---------- .../src/components/layout/style.scss | 53 +---- .../src/components/resizable-frame/style.scss | 1 + .../sidebar-navigation-item/style.scss | 2 +- .../sidebar-navigation-screen/style.scss | 4 +- .../edit-site/src/components/sidebar/index.js | 2 + .../src/components/sidebar/style.scss | 3 - .../src/components/site-hub/index.js | 136 +++---------- .../src/components/site-icon/index.js | 2 +- .../src/components/site-icon/style.scss | 9 - .../src/components/document-bar/index.js | 6 +- .../src/components/document-bar/style.scss | 11 +- 17 files changed, 214 insertions(+), 355 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index eb796ae6965412..0fc26721a33042 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -637,8 +637,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op } .wp-block-navigation__menu-inspector-controls { - overflow-x: auto; - @include custom-scrollbars-on-hover(transparent, $gray-600); } diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts index 0203edbdf1816a..096d7f89b4c22d 100644 --- a/packages/components/src/navigator/styles.ts +++ b/packages/components/src/navigator/styles.ts @@ -5,12 +5,12 @@ import { css, keyframes } from '@emotion/react'; export const navigatorProviderWrapper = css` /* Prevents horizontal overflow while animating screen transitions */ - overflow-x: hidden; + overflow: visible; /* Mark this subsection of the DOM as isolated, providing performance benefits * by limiting calculations of layout, style and paint to a DOM subtree rather * than the entire page. */ - contain: content; + /* contain: content; */ `; const fadeInFromRight = keyframes( { @@ -62,8 +62,6 @@ const navigatorScreenAnimation = ( { }; export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css` - /* Ensures horizontal overflow is visually accessible */ - overflow-x: auto; /* In case the root has a height, it should not be exceeded */ max-height: 100%; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 9c95755db28031..7095e5baa11eab 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,7 +7,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { Notice } from '@wordpress/components'; +import { + Notice, + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, +} from '@wordpress/components'; import { useInstanceId, useViewportMatch } from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -20,6 +24,7 @@ import { import { InterfaceSkeleton, ComplementaryArea, + NavigableRegion, store as interfaceStore, } from '@wordpress/interface'; import { @@ -55,6 +60,7 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; +import Header from '../header-edit-mode'; const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis ); const { @@ -195,6 +201,16 @@ export default function Editor( { isLoading } ) { return ( <> + + +
+ + { ! isReady ? : null } { isEditMode && } { hasLoadedPost && ! editedPost && ( diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 5b8b44f63efe74..14f58883c98b5d 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -11,15 +11,17 @@ import { BlockToolbar, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef, useState } from '@wordpress/element'; import { PinnedItems } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; import { next, previous } from '@wordpress/icons'; import { Button, - __unstableMotion as motion, + SVG, + Path, Popover, + __unstableMotion as motion, } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -92,6 +94,16 @@ export default function HeaderEditMode() { const hasBlockSelected = !! blockSelectionStart; + const { canvasMode } = useSelect( ( select ) => { + const { getCanvasMode } = unlock( select( editSiteStore ) ); + + return { + canvasMode: getCanvasMode(), + }; + }, [] ); + + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + useEffect( () => { // If we have a new block selection, show the block tools if ( blockSelectionStart ) { @@ -124,46 +136,82 @@ export default function HeaderEditMode() { variants={ toolbarVariants } transition={ toolbarTransition } > - - { isTopToolbar && ( - <> -
- -
- - { hasBlockSelected && ( - + +
- - - - - - { decodeEntities( siteTitle ) } - - - { canvasMode === 'view' && ( -
+ { - const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect( - ( select ) => { - const { getCanvasMode, getSettings } = unlock( - select( editSiteStore ) - ); + const { homeUrl, siteTitle } = useSelect( ( select ) => { + const { + getSite, + getUnstableBase, // Site index. + } = select( coreStore ); - const { - getSite, - getUnstableBase, // Site index. - } = select( coreStore ); - - return { - canvasMode: getCanvasMode(), - dashboardLink: - getSettings().__experimentalDashboardLink || 'index.php', - homeUrl: getUnstableBase()?.home, - siteTitle: getSite()?.title, - }; - }, - [] - ); + return { + homeUrl: getUnstableBase()?.home, + siteTitle: getSite()?.title, + }; + }, [] ); const { open: openCommandCenter } = useDispatch( commandsStore ); - 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 ` -
Date: Mon, 12 Feb 2024 21:44:09 +1000 Subject: [PATCH 3/9] try icon small --- packages/edit-site/src/components/layout/index.js | 10 +++++----- packages/edit-site/src/components/layout/style.scss | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 093e2f95a9e1ee..d5193b970753c4 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -160,17 +160,17 @@ export default function Layout() { const toggleVariants = { view: { - width: 48, - height: 48, - top: [ 0, 30, 22 ], - left: 16, + width: 32, + height: 32, + top: [ 0, 38, 30 ], + left: 24, borderRadius: '4px', boxShadow: '0px 6px 15px rgba(0,0,0,.3)', }, edit: { width: 60, height: 60, - top: [ 22, 30, 0 ], + top: [ 30, 38, 0 ], left: 0, borderRadius: '0px', boxShadow: 'none', diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 8aecc665f9ee2b..7b3a1fd9938c21 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -8,7 +8,7 @@ .edit-site-layout__hub { height: $header-height; - padding-left: $header-height + $grid-unit-05; + padding-left: $grid-unit-60; flex-shrink: 0; z-index: z-index(".edit-site-layout__hub"); } From 727cf70265018717178cc500733cfd8b8e1aa628 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 13 Feb 2024 13:51:47 +1000 Subject: [PATCH 4/9] try edit notice --- .../src/components/edit-overlay/index.js | 82 +++++++++++++++++++ .../src/components/edit-overlay/style.scss | 40 +++++++++ .../edit-site/src/components/editor/index.js | 34 +++++--- packages/edit-site/src/style.scss | 1 + 4 files changed, 147 insertions(+), 10 deletions(-) create mode 100644 packages/edit-site/src/components/edit-overlay/index.js create mode 100644 packages/edit-site/src/components/edit-overlay/style.scss diff --git a/packages/edit-site/src/components/edit-overlay/index.js b/packages/edit-site/src/components/edit-overlay/index.js new file mode 100644 index 00000000000000..15b70454875885 --- /dev/null +++ b/packages/edit-site/src/components/edit-overlay/index.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; +import { + Button, + SVG, + Path, + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, +} from '@wordpress/components'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useGlobalStyle } = unlock( blockEditorPrivateApis ); + +const EditOverlay = ( { onClick, label } ) => { + const [ isVisible, setIsVisible ] = useState( true ); + const [ backgroundColor ] = useGlobalStyle( 'color.background' ); + + useEffect( () => { + const timeout = setTimeout( () => { + setIsVisible( false ); + }, 4000 ); + + return () => clearTimeout( timeout ); + }, [ backgroundColor ] ); + + return ( + + { isVisible && ( + + + + + { /* Your content here */ } + + ) } + + ); +}; + +export default EditOverlay; diff --git a/packages/edit-site/src/components/edit-overlay/style.scss b/packages/edit-site/src/components/edit-overlay/style.scss new file mode 100644 index 00000000000000..becafabea71162 --- /dev/null +++ b/packages/edit-site/src/components/edit-overlay/style.scss @@ -0,0 +1,40 @@ +.edit-site-layout__edit-overlay { + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: flex-end; + padding-bottom: $grid-unit-40; + color: $white; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%); + + .edit-site-layout__edit-overlay-button { + position: relative; + z-index: 10; + background: rgba(255, 255, 255, 0.6); + color: $gray-900; + border: 0; + border-radius: 999px; + cursor: pointer; + transition: background-color ease 0.1s; + box-shadow: 0 2px 4px rgba($black, 0.1); + + &:hover { + background-color: $gray-100; + } + } + + .edit-site-layout__edit-overlay-backdrop { + z-index: 5; + opacity: 0.7; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +} diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7095e5baa11eab..44ebcb14ab88e2 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { Notice, __unstableMotion as motion, @@ -61,6 +61,7 @@ import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; import Header from '../header-edit-mode'; +import EditOverlay from '../edit-overlay'; const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis ); const { @@ -157,6 +158,8 @@ export default function Editor( { isLoading } ) { }; }, [] ); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const isViewMode = canvasMode === 'view'; const isEditMode = canvasMode === 'edit'; const showVisualEditor = isViewMode || editorMode === 'visual'; @@ -201,15 +204,26 @@ export default function Editor( { isLoading } ) { return ( <> - - -
- + { ! isLoading && canvasMode !== 'edit' && ( + setCanvasMode( 'edit' ) } + /> + ) } + + { ! isLoading && ( + +
+ + ) } { ! isReady ? : null } { isEditMode && } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index e6cb953b0b1861..1b26b4b8a49699 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -45,6 +45,7 @@ @import "./components/site-icon/style.scss"; @import "./components/style-book/style.scss"; @import "./components/editor-canvas-container/style.scss"; +@import "./components/edit-overlay/style.scss"; @import "./components/resizable-frame/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; @import "./components/global-styles/font-library-modal/style.scss"; From 762ec8b63d4525dd11b047594ff748176383c076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Tue, 13 Feb 2024 12:48:01 +0100 Subject: [PATCH 5/9] Add home icon hover effect and tweak animations --- .../edit-site/src/components/layout/index.js | 45 ++++++++++++++++--- .../src/components/site-icon/style.scss | 21 ++++++++- 2 files changed, 59 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d5193b970753c4..a338b3e2bf1ac9 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -18,6 +18,7 @@ import { useViewportMatch, useResizeObserver, } from '@wordpress/compose'; +import { Icon, home } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; @@ -162,18 +163,44 @@ export default function Layout() { view: { width: 32, height: 32, - top: [ 0, 38, 30 ], + top: [ 0, 58, 30 ], left: 24, borderRadius: '4px', boxShadow: '0px 6px 15px rgba(0,0,0,.3)', + transition: { + duration: 0.7, + type: 'spring', + bounce: 0.4, + }, }, edit: { width: 60, height: 60, - top: [ 30, 38, 0 ], + top: [ 30, 0 ], left: 0, borderRadius: '0px', boxShadow: 'none', + transition: { + delay: 0.2, + duration: 0.2, + type: 'tween', + stiffness: 400, + }, + }, + hover: { + scale: canvasMode === 'edit' ? 0.7 : 1, + borderRadius: '4px', + }, + }; + + const toggleHomeIconVariants = { + initial: { + opacity: 0, + scale: 0.5, + }, + hover: { + opacity: 1, + scale: 1.2, }, }; @@ -214,14 +241,20 @@ export default function Layout() { className="edit-site-layout__view-mode-toggle" variants={ toggleVariants } animate={ canvasMode } - transition={ { - duration: ANIMATION_DURATION, - type: 'sprint', - } } + initial="initial" + whileHover="hover" > + { canvasMode === 'edit' && ( + + + + ) } Date: Tue, 13 Feb 2024 15:31:09 +0100 Subject: [PATCH 6/9] Add movement, match hover icon size, and adjust initial conditions --- .../edit-site/src/components/layout/index.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index a338b3e2bf1ac9..37a7d09d346a01 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -163,7 +163,7 @@ export default function Layout() { view: { width: 32, height: 32, - top: [ 0, 58, 30 ], + top: 30, left: 24, borderRadius: '4px', boxShadow: '0px 6px 15px rgba(0,0,0,.3)', @@ -174,33 +174,37 @@ export default function Layout() { }, }, edit: { - width: 60, - height: 60, - top: [ 30, 0 ], + width: [ 32, 32, 60 ], + height: [ 32, 32, 60 ], + top: [ 30, 40, 0 ], left: 0, borderRadius: '0px', boxShadow: 'none', transition: { - delay: 0.2, - duration: 0.2, + delay: 0, + duration: 0.4, type: 'tween', stiffness: 400, }, }, hover: { - scale: canvasMode === 'edit' ? 0.7 : 1, + scale: canvasMode === 'edit' ? 0.6 : 1, borderRadius: '4px', }, }; const toggleHomeIconVariants = { - initial: { + view: { + opacity: 0, + scale: 0.5, + }, + edit: { opacity: 0, scale: 0.5, }, hover: { opacity: 1, - scale: 1.2, + scale: 1.3, }, }; @@ -241,7 +245,7 @@ export default function Layout() { className="edit-site-layout__view-mode-toggle" variants={ toggleVariants } animate={ canvasMode } - initial="initial" + initial={ canvasMode } whileHover="hover" > { canvasMode === 'edit' && ( From 185cfc1cb9eff522fba7744b8b83364f046c1c79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 14 Feb 2024 14:08:26 +0100 Subject: [PATCH 8/9] Animation updates --- packages/edit-site/src/components/layout/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index b9661896c787b2..d17978c34d2787 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -174,15 +174,15 @@ export default function Layout() { }, }, edit: { - width: [ 32, 32, 60 ], - height: [ 32, 32, 60 ], - top: [ 30, 40, 0 ], + width: [ 32, 60 ], + height: [ 32, 60 ], + top: [ 30, 0 ], left: 0, borderRadius: '0px', boxShadow: 'none', transition: { - delay: 0, - duration: 0.4, + delay: 0.1, + duration: 0.2, type: 'tween', stiffness: 400, }, From f6a8ea5674589583f14c6462d61e16bda3ca255c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Tue, 20 Feb 2024 17:10:48 +0100 Subject: [PATCH 9/9] Use clip path to animate so button area remains the same --- .../edit-site/src/components/layout/index.js | 59 +++++++++++++------ .../src/components/layout/style.scss | 1 - 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d17978c34d2787..620e29b479fd99 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -18,7 +18,7 @@ import { useViewportMatch, useResizeObserver, } from '@wordpress/compose'; -import { Icon, home } from '@wordpress/icons'; +import { Icon, chevronLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; @@ -187,24 +187,49 @@ export default function Layout() { stiffness: 400, }, }, + }; + + const siteIconVariants = { + view: { + clipPath: 'inset(0% round 0)', + }, + edit: { + clipPath: 'inset(0% round 0)', + }, hover: { - scale: canvasMode === 'edit' ? 0.6 : 1, - borderRadius: '4px', + clipPath: + canvasMode === 'edit' + ? 'inset( 22% round 2px )' + : 'inset(0% round 0)', + transition: { + duration: 0.2, + }, + }, + tap: { + // scale: canvasMode === 'edit' ? 0.6 : 1, + clipPath: 'inset(0% round 0)', + transition: { + delay: 0.1, + }, }, }; const toggleHomeIconVariants = { view: { opacity: 0, - scale: 0.5, + scale: 0.2, }, edit: { opacity: 0, - scale: 0.5, + scale: 0.2, }, hover: { - opacity: 1, - scale: 1.3, + opacity: canvasMode === 'edit' ? 1 : 0, + scale: 1, + clipPath: + canvasMode === 'edit' + ? 'inset( 22% round 2px )' + : 'inset(0% round 0)', }, }; @@ -247,23 +272,23 @@ export default function Layout() { animate={ canvasMode } initial={ canvasMode } whileHover="hover" + whileTap="tap" > - { canvasMode === 'edit' && ( - - + + - ) } + + + +