From e8315448032d11cad176178e75cf7f8d55cdd1d8 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 Jul 2024 11:21:15 -0500 Subject: [PATCH 01/14] Don't overlap canvas with inserter panel at large screens --- .../block-editor/src/components/inserter/style.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index c7398aadb56ba..b8edfc7a0f3f0 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,5 +1,6 @@ $block-inserter-preview-height: 350px; $block-inserter-width: 350px; +$block-inserter-panel-width: 300px; $block-inserter-tabs-height: 44px; .block-editor-inserter { @@ -14,8 +15,16 @@ $block-inserter-tabs-height: 44px; @include break-medium { position: relative; } + +} + +.block-editor-inserter__menu.show-panel { + @include break-large() { + width: $block-inserter-width + $block-inserter-panel-width; + } } + .block-editor-inserter__main-area { height: 100%; gap: $grid-unit-20; @@ -313,6 +322,10 @@ $block-inserter-tabs-height: 44px; padding: 0 $grid-unit-30 $grid-unit-20; } } + + @include break-large { + left: $block-inserter-width; + } } .block-editor-inserter__patterns-category-panel-header { From e433b166f3986ae40a9735380867175b62cdb636 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 Jul 2024 13:25:53 -0500 Subject: [PATCH 02/14] Always resize canvas --- packages/base-styles/_variables.scss | 2 +- .../src/components/inserter/style.scss | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index f5a9ec38824ff..f8623608be45d 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -79,7 +79,7 @@ $sidebar-width: 280px; $content-width: 840px; $wide-content-width: 1100px; $widget-area-width: 700px; - +$secondary-sidebar-width: 350px; /** * Block & Editor UI. diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index b8edfc7a0f3f0..62f746c801800 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,6 +1,5 @@ $block-inserter-preview-height: 350px; -$block-inserter-width: 350px; -$block-inserter-panel-width: 300px; +$block-quick-inserter-width: 350px; $block-inserter-tabs-height: 44px; .block-editor-inserter { @@ -19,8 +18,8 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__menu.show-panel { - @include break-large() { - width: $block-inserter-width + $block-inserter-panel-width; + @include break-medium() { + width: $secondary-sidebar-width + $sidebar-width; } } @@ -308,7 +307,7 @@ $block-inserter-tabs-height: 44px; @include break-medium { border-left: $border-width solid $gray-200; padding: 0; - left: 100%; + left: $secondary-sidebar-width; width: 300px; position: absolute; top: -$border-width; @@ -322,10 +321,6 @@ $block-inserter-tabs-height: 44px; padding: 0 $grid-unit-30 $grid-unit-20; } } - - @include break-large { - left: $block-inserter-width; - } } .block-editor-inserter__patterns-category-panel-header { @@ -379,7 +374,7 @@ $block-inserter-tabs-height: 44px; max-width: 100%; @include break-medium { - width: $block-inserter-width; + width: $block-quick-inserter-width; } } From aa4fd016c65d640f53cffd7b328b980b8c9440ae Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 Jul 2024 13:27:52 -0500 Subject: [PATCH 03/14] Cleanup --- packages/block-editor/src/components/inserter/style.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 62f746c801800..e742e05e4c64a 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -14,7 +14,6 @@ $block-inserter-tabs-height: 44px; @include break-medium { position: relative; } - } .block-editor-inserter__menu.show-panel { @@ -23,7 +22,6 @@ $block-inserter-tabs-height: 44px; } } - .block-editor-inserter__main-area { height: 100%; gap: $grid-unit-20; From d250bc8d364bb81c356c4fe55e76c71c40b1d5bc Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 Jul 2024 13:41:56 -0500 Subject: [PATCH 04/14] Refactor to share new -sidebar-width var --- .../src/components/inserter/style.scss | 20 ++++++++++++------- .../src/components/tabbed-sidebar/style.scss | 4 ---- .../components/list-view-sidebar/style.scss | 4 ++++ 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index e742e05e4c64a..0449d4e490238 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -16,12 +16,6 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__menu.show-panel { - @include break-medium() { - width: $secondary-sidebar-width + $sidebar-width; - } -} - .block-editor-inserter__main-area { height: 100%; gap: $grid-unit-20; @@ -30,6 +24,12 @@ $block-inserter-tabs-height: 44px; &.show-as-tabs { gap: 0; } + + .block-editor-tabbed-sidebar { + @include break-medium() { + width: $secondary-sidebar-width; + } + } } .block-editor-inserter__popover.is-quick { @@ -91,6 +91,12 @@ $block-inserter-tabs-height: 44px; height: 100%; position: relative; overflow: visible; + + &.show-panel { + @include break-medium() { + width: $secondary-sidebar-width + $sidebar-width; + } + } } .block-editor-inserter__inline-elements { @@ -306,7 +312,7 @@ $block-inserter-tabs-height: 44px; border-left: $border-width solid $gray-200; padding: 0; left: $secondary-sidebar-width; - width: 300px; + width: $sidebar-width; position: absolute; top: -$border-width; height: calc(100% + #{$border-width}); diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss index e392cf955ed06..e53ffc14a43a7 100644 --- a/packages/block-editor/src/components/tabbed-sidebar/style.scss +++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss @@ -4,10 +4,6 @@ flex-direction: column; flex-grow: 1; overflow: hidden; - - @include break-medium() { - width: 350px; - } } .block-editor-tabbed-sidebar__tablist-and-close-button { diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss index 3bf56b2c80760..54c7376d37485 100644 --- a/packages/editor/src/components/list-view-sidebar/style.scss +++ b/packages/editor/src/components/list-view-sidebar/style.scss @@ -1,5 +1,9 @@ .editor-list-view-sidebar { height: 100%; + + @include break-medium { + width: $secondary-sidebar-width; + } } .editor-list-view-sidebar__list-view-panel-content, From be2dbe7998a99cc8328978a34c811b7cdd967faf Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 Jul 2024 16:49:56 -0500 Subject: [PATCH 05/14] Try to improve animation -- still needs work --- .../components/interface-skeleton/index.js | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index ed4d98cdf7637..713eabdfb2524 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -178,6 +178,7 @@ function InterfaceSkeleton( { !! secondarySidebar && ( -
{ secondarySidebarResizeListener } { secondarySidebar } -
+ ) } { content } @@ -219,6 +235,7 @@ function InterfaceSkeleton( { sidebar } From c95391e40d2849c3c0f83790d4548c5192c081de Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 31 Jul 2024 13:51:06 +0100 Subject: [PATCH 06/14] animate the pattern category preview panel --- .../inserter/category-tabs/index.js | 43 +++++++++++++++---- .../src/components/inserter/style.scss | 3 ++ 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index a379f4719556b..d254cf3d211d7 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -1,11 +1,13 @@ /** * WordPress dependencies */ +import { useReducedMotion } from '@wordpress/compose'; import { isRTL } from '@wordpress/i18n'; import { __experimentalHStack as HStack, FlexBlock, privateApis as componentsPrivateApis, + __unstableMotion as motion, } from '@wordpress/components'; import { Icon, chevronRight, chevronLeft } from '@wordpress/icons'; @@ -22,6 +24,14 @@ function CategoryTabs( { onSelectCategory, children, } ) { + // Copied from InterfaceSkeleton. + const ANIMATION_DURATION = 0.25; + const disableMotion = useReducedMotion(); + const defaultTransition = { + type: 'tween', + duration: disableMotion ? 0 : ANIMATION_DURATION, + ease: [ 0.6, 0, 0.4, 1 ], + }; return ( ) ) } - { categories.map( ( category ) => ( - - { children } - - ) ) } + { categories.map( ( category ) => ( + + { children } + + ) ) } + + ) } ); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 0449d4e490238..2fb75f10bd928 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -26,6 +26,8 @@ $block-inserter-tabs-height: 44px; } .block-editor-tabbed-sidebar { + background-color: $white; + @include break-medium() { width: $secondary-sidebar-width; } @@ -319,6 +321,7 @@ $block-inserter-tabs-height: 44px; background: $gray-100; border-top: $border-width solid $gray-200; box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + z-index: -1; .block-editor-inserter__media-list, .block-editor-block-patterns-list { From 72c808aa5c833d74b3e8882fc8780e67633401a8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 31 Jul 2024 14:58:15 +0100 Subject: [PATCH 07/14] use the same animation for both elements --- .../components/interface-skeleton/index.js | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 713eabdfb2524..c173bbeb8f6f7 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -121,6 +121,19 @@ function InterfaceSkeleton( const mergedLabels = { ...defaultLabels, ...labels }; + const navigableRegionVariants = { + open: { + width: secondarySidebarSize.width, + }, + closed: { width: 0 }, + mobileOpen: { width: '100vw' }, + }; + const secondarySidebarVariants = { + open: { x: 0 }, + closed: { x: -100 }, + mobileOpen: { x: 0 }, + }; + return (
{ secondarySidebarResizeListener } From ae37927caa2d32543640a83694a7d1ec3f771416 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 31 Jul 2024 15:50:50 +0100 Subject: [PATCH 08/14] Add animate presence --- .../inserter/category-tabs/index.js | 53 ++++++++++--------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index d254cf3d211d7..228103aff7cd9 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -8,6 +8,7 @@ import { FlexBlock, privateApis as componentsPrivateApis, __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { Icon, chevronRight, chevronLeft } from '@wordpress/icons'; @@ -68,31 +69,33 @@ function CategoryTabs( { ) ) } { selectedCategory && ( - - { categories.map( ( category ) => ( - - { children } - - ) ) } - + + + { categories.map( ( category ) => ( + + { children } + + ) ) } + + ) } ); From bbf1b2e2adb68d68f3e11a4d1effb47add3deaae Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 31 Jul 2024 16:10:03 +0100 Subject: [PATCH 09/14] only use one animated div --- .../inserter/category-tabs/index.js | 8 ++--- .../src/components/inserter/style.scss | 2 -- .../src/components/tabbed-sidebar/style.scss | 1 + .../components/interface-skeleton/index.js | 34 +++++++------------ 4 files changed, 17 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 228103aff7cd9..2f90f2dcb202d 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -68,8 +68,8 @@ function CategoryTabs( { ) ) } - { selectedCategory && ( - + + { selectedCategory && ( ) ) } - - ) } + ) } + ); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 2fb75f10bd928..dc925dad1c70c 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -26,8 +26,6 @@ $block-inserter-tabs-height: 44px; } .block-editor-tabbed-sidebar { - background-color: $white; - @include break-medium() { width: $secondary-sidebar-width; } diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss index e53ffc14a43a7..374a012173e23 100644 --- a/packages/block-editor/src/components/tabbed-sidebar/style.scss +++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss @@ -1,4 +1,5 @@ .block-editor-tabbed-sidebar { + background-color: $white; height: 100%; display: flex; flex-direction: column; diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index c173bbeb8f6f7..61cf9f7661b11 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -121,19 +121,6 @@ function InterfaceSkeleton( const mergedLabels = { ...defaultLabels, ...labels }; - const navigableRegionVariants = { - open: { - width: secondarySidebarSize.width, - }, - closed: { width: 0 }, - mobileOpen: { width: '100vw' }, - }; - const secondarySidebarVariants = { - open: { x: 0 }, - closed: { x: -100 }, - mobileOpen: { x: 0 }, - }; - return (
{ !! secondarySidebar && ( - { secondarySidebarResizeListener } { secondarySidebar } - +
) } From 29314f8e48febcffbe68dba915291238919e472d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 31 Jul 2024 10:31:46 -0500 Subject: [PATCH 10/14] Pattern panel zindex --- .../src/components/inserter/category-tabs/index.js | 4 ++++ packages/block-editor/src/components/inserter/style.scss | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 2f90f2dcb202d..b1652feea3b73 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -78,9 +78,13 @@ function CategoryTabs( { variants={ { open: { transform: 'translateX( 0 )', + transitionEnd: { + zIndex: '1', + }, }, closed: { transform: 'translateX( -100% )', + zIndex: '-1', }, } } transition={ defaultTransition } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index dc925dad1c70c..0449d4e490238 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -319,7 +319,6 @@ $block-inserter-tabs-height: 44px; background: $gray-100; border-top: $border-width solid $gray-200; box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. - z-index: -1; .block-editor-inserter__media-list, .block-editor-block-patterns-list { From f6a84af323f0eb54997f14cea4100eb44e58d5df Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 31 Jul 2024 11:16:43 -0500 Subject: [PATCH 11/14] Animate pattern tab panel on open --- .../inserter/category-tabs/index.js | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index b1652feea3b73..6a02cf1a170c4 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -1,14 +1,13 @@ /** * WordPress dependencies */ -import { useReducedMotion } from '@wordpress/compose'; +import { usePrevious, useReducedMotion } from '@wordpress/compose'; import { isRTL } from '@wordpress/i18n'; import { __experimentalHStack as HStack, FlexBlock, privateApis as componentsPrivateApis, __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { Icon, chevronRight, chevronLeft } from '@wordpress/icons'; @@ -33,6 +32,9 @@ function CategoryTabs( { duration: disableMotion ? 0 : ANIMATION_DURATION, ease: [ 0.6, 0, 0.4, 1 ], }; + + const previousSelectedCategory = usePrevious( selectedCategory ); + return ( ) ) } - - { selectedCategory && ( + { categories.map( ( category ) => ( + - { categories.map( ( category ) => ( - - { children } - - ) ) } + { children } - ) } - + + ) ) } ); } From 86b42a20e8c67180e43019469376f448962508b2 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 31 Jul 2024 16:11:58 -0500 Subject: [PATCH 12/14] Try to smooth entrance and exit secondary sidebar animations --- .../components/interface-skeleton/index.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 61cf9f7661b11..419f55d79d5e9 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -180,22 +180,17 @@ function InterfaceSkeleton( -
{ secondarySidebarResizeListener } { secondarySidebar } -
+ ) } { content } @@ -222,7 +224,6 @@ function InterfaceSkeleton( { sidebar } From 2525a5f8cd617eb6d12a0ca5480cb77cf5c7a661 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 31 Jul 2024 22:41:03 +0100 Subject: [PATCH 13/14] remove unneeded properties so that the parent controls the animation --- packages/interface/src/components/interface-skeleton/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 419f55d79d5e9..14b2a87ba5203 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -199,9 +199,6 @@ function InterfaceSkeleton( height: '100%', left: 0, } } - initial="closed" - animate="open" - exit="closed" variants={ { open: { x: 0 }, closed: { x: '-100%' }, From f764e96ed9d482fa3e18eeddb912f4e78320bc2c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 31 Jul 2024 17:57:52 -0400 Subject: [PATCH 14/14] remove unneeded double shadow --- packages/block-editor/src/components/inserter/style.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 0449d4e490238..960ca8b48cdf9 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -318,7 +318,6 @@ $block-inserter-tabs-height: 44px; height: calc(100% + #{$border-width}); background: $gray-100; border-top: $border-width solid $gray-200; - box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. .block-editor-inserter__media-list, .block-editor-block-patterns-list { @@ -691,12 +690,6 @@ $block-inserter-tabs-height: 44px; height: 100%; } } - - // Remove doubled-up shadow that occurs when categories panel is opened, only in zoom out. - // Shadow cannot be removed from the source, as it is required when not zoomed out. - .block-editor-inserter__category-panel { - box-shadow: none; - } } .show-icon-labels {