diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index b7cd30462e3594..2008cbc6b03ee6 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -79,7 +79,6 @@ function InbetweenInsertionPointPopover( { isInserterShown: insertionPoint?.__unstableWithInserter, }; }, [] ); - const isVertical = orientation === 'vertical'; const disableMotion = useReducedMotion(); @@ -105,65 +104,22 @@ function InbetweenInsertionPointPopover( { } } - // Define animation variants for the line element. - const horizontalLine = { - start: { - width: 0, - top: '50%', - bottom: '50%', - x: 0, - }, - rest: { - width: 4, - top: 0, - bottom: 0, - x: -2, - }, - hover: { - width: 4, - top: 0, - bottom: 0, - x: -2, - }, - }; - const verticalLine = { - start: { - height: 0, - left: '50%', - right: '50%', - y: 0, - }, - rest: { - height: 4, - left: 0, - right: 0, - y: -2, - }, - hover: { - height: 4, - left: 0, - right: 0, - y: -2, - }, - }; const lineVariants = { // Initial position starts from the center and invisible. start: { - ...( ! isVertical ? horizontalLine.start : verticalLine.start ), opacity: 0, + scale: 0, }, // The line expands to fill the container. If the inserter is visible it // is delayed so it appears orchestrated. rest: { - ...( ! isVertical ? horizontalLine.rest : verticalLine.rest ), opacity: 1, - borderRadius: '2px', + scale: 1, transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' }, }, hover: { - ...( ! isVertical ? horizontalLine.hover : verticalLine.hover ), opacity: 1, - borderRadius: '2px', + scale: 1, transition: { delay: 0.5, type: 'tween' }, }, }; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index e301859c165491..4bb2e07fcabb0f 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -13,17 +13,22 @@ .block-editor-block-list__insertion-point-indicator { position: absolute; background: var(--wp-admin-theme-color); + border-radius: 2px; + transform-origin: center; + opacity: 0; + will-change: transform, opacity; .block-editor-block-list__insertion-point.is-vertical > & { - top: 50%; - height: $border-width; + top: calc(50% - 2px); + height: 4px; + width: 100%; } .block-editor-block-list__insertion-point.is-horizontal > & { top: 0; - right: 0; - left: 50%; - width: $border-width; + bottom: 0; + left: calc(50% - 2px); + width: 4px; } } @@ -32,6 +37,8 @@ // Don't show on mobile. display: none; position: absolute; + will-change: transform; + @include break-mobile() { display: flex; } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 9c30798830dae3..a95588c72d9214 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -197,15 +197,13 @@ @include reduce-motion("transition"); > * { + will-change: opacity; opacity: 0; } // Show on hover, visible, and show above to keep the hit area size. &:hover, &.is-visible { - position: relative; - z-index: 1; - > * { opacity: 1; @include edit-post__fade-in-animation; diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap index 3011c99d73f8d4..a2e7c33ecb8487 100644 --- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index a557454da6f139..b772ec3aee7c94 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -2,6 +2,7 @@ $arrow-triangle-base-size: 14px; .components-popover { z-index: z-index(".components-popover"); + will-change: transform; &.is-expanded { position: fixed; diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 6badc505b799a6..eed13578b3f0c4 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -54,6 +54,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M right: calc(50% - 1px); transition: transform 0.1s ease-in; @include reduce-motion("transition"); + will-change: transform; opacity: 0; } diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap index 03b9ce1ae4baae..cb9e56c25bf4a9 100644 --- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap +++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`DotTip should render correctly 1`] = ` aria-label="Editor tips" class="components-popover nux-dot-tip" role="dialog" - style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;" + style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;" tabindex="-1" >