Skip to content

Add animations for insertion point, dropzone, and other elements #33132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtias merged 22 commits into from
Oct 11, 2021
Merged

Add animations for insertion point, dropzone, and other elements #33132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
e018ea6
Use animation to show insertion line and sibling inserter.
mtias Jul 1, 2021
1541268
Implement animation for dropzone component.
mtias Jul 1, 2021
92d2034
Animate the site icon component in the header of the editor.
mtias Jul 1, 2021
b078ed2
Update hover design of block inserter items and animate on tap.
mtias Jul 1, 2021
70c699f
Update package files.
mtias Jul 1, 2021
3b106ce
Apply fixes after rebase.
mtias Oct 4, 2021
7fbc7f9
Small fixes.
jasmussen Oct 5, 2021
deea2bb
Fix import statements.
mtias Oct 5, 2021
d5cf741
Remove "inserter list item" design update and animation
mtias Oct 5, 2021
7b21b75
Address some issues with the site icon animation.
mtias Oct 5, 2021
0fbdc8d
Remove border from selection chip math.
jasmussen Oct 5, 2021
785d6b5
Improve display of cover dropzone background.
mtias Oct 5, 2021
52b15b8
Remove most of the separate Cover rules. Will follow up separately.
jasmussen Oct 5, 2021
01defe1
Add explicit transparent overlay.
jasmussen Oct 5, 2021
846c184
Remove rtl comment todo.
mtias Oct 5, 2021
1d46571
Add pointer-events rule to icon.
jasmussen Oct 5, 2021
ead6a1a
Unifiy horizontal/vertical line checks.
mtias Oct 5, 2021
e787914
Add site icon animation to the site editor as well.
mtias Oct 5, 2021
5624e48
Tweak e2e tests.
mtias Oct 6, 2021
c5af9a1
Consider reduced motion for insertion line.
mtias Oct 11, 2021
9d2c860
Disable site icon animation on reduced motion.
mtias Oct 11, 2021
f010b26
Consider reduce motion setting for media drag and drop placeholder.
mtias Oct 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

103 changes: 94 additions & 9 deletions packages/block-editor/src/components/block-tools/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import {
createContext,
useContext,
} from '@wordpress/element';
import { Popover } from '@wordpress/components';
import { Popover, __unstableMotion as motion } from '@wordpress/components';
import { useReducedMotion } from '@wordpress/compose';
import { isRTL } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -79,7 +80,7 @@ function InsertionPointPopover( {
}, [] );
const previousElement = useBlockElement( previousClientId );
const nextElement = useBlockElement( nextClientId );

const isVertical = orientation === 'vertical';
const style = useMemo( () => {
if ( ! previousElement && ! nextElement ) {
return {};
Expand All @@ -92,7 +93,7 @@ function InsertionPointPopover( {
? nextElement.getBoundingClientRect()
: null;

if ( orientation === 'vertical' ) {
if ( isVertical ) {
return {
width: previousElement
? previousElement.offsetWidth
Expand Down Expand Up @@ -133,7 +134,7 @@ function InsertionPointPopover( {
? nextElement.getBoundingClientRect()
: null;

if ( orientation === 'vertical' ) {
if ( isVertical ) {
if ( isRTL() ) {
return {
top: previousRect ? previousRect.bottom : nextRect.top,
Expand Down Expand Up @@ -173,6 +174,7 @@ function InsertionPointPopover( {
}, [ previousElement, nextElement ] );

const popoverScrollRef = usePopoverScroll( __unstableContentRef );
const disableMotion = useReducedMotion();

const className = classnames(
'block-editor-block-list__insertion-point',
Expand All @@ -198,6 +200,79 @@ function InsertionPointPopover( {
const showInsertionPointInserter =
previousElement && nextElement && isInserterShown;

// 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,
},
// 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',
transition: { delay: showInsertionPointInserter ? 0.4 : 0 },
},
hover: {
...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
opacity: 1,
borderRadius: '2px',
transition: { delay: 0.4 },
},
};

const inserterVariants = {
start: {
scale: disableMotion ? 1 : 0,
},
rest: {
scale: 1,
transition: { delay: 0.2 },
},
};

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
// While ideally it would be enough to capture the
// bubbling focus event from the Inserter, due to the
Expand All @@ -217,7 +292,13 @@ function InsertionPointPopover( {
// otherwise render in place (not in the the default popover slot).
__unstableSlotName={ __unstablePopoverSlot || null }
>
<div
<motion.div
layout={ ! disableMotion }
initial={ disableMotion ? 'rest' : 'start' }
animate="rest"
whileHover="hover"
whileTap="pressed"
exit="start"
ref={ ref }
tabIndex={ -1 }
onClick={ onClick }
Expand All @@ -227,9 +308,13 @@ function InsertionPointPopover( {
} ) }
style={ style }
>
<div className="block-editor-block-list__insertion-point-indicator" />
<motion.div
variants={ lineVariants }
className="block-editor-block-list__insertion-point-indicator"
/>
{ showInsertionPointInserter && (
<div
<motion.div
variants={ inserterVariants }
className={ classnames(
'block-editor-block-list__insertion-point-inserter'
) }
Expand All @@ -246,9 +331,9 @@ function InsertionPointPopover( {
openRef.current = false;
} }
/>
</div>
</motion.div>
) }
</div>
</motion.div>
</Popover>
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
Expand Down
39 changes: 4 additions & 35 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,15 @@
position: absolute;
background: var(--wp-admin-theme-color);

// Provide a muted animation that isn't too noisy.
animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");

.block-editor-block-list__insertion-point.is-vertical > & {
top: 50%;
right: 0;
left: 0;
height: $border-width;
}

.block-editor-block-list__insertion-point.is-horizontal > & {
top: 0;
right: 0;
left: 50%;
height: 100%;
width: $border-width;
}
}
Expand All @@ -42,8 +34,8 @@

justify-content: center;

top: calc(50% - #{ $button-size-small * 0.5 });
left: calc(50% - #{ $button-size-small * 0.5 });
top: calc(50% - #{$button-size-small * 0.5});
left: calc(50% - #{$button-size-small * 0.5});
}

.block-editor-block-list__block-popover-inserter {
Expand Down Expand Up @@ -86,29 +78,6 @@
}
}

.block-editor-block-list__insertion-point-inserter,
.block-editor-block-list__block-popover-inserter {
.block-editor-inserter__toggle.components-button {
// Fade it in after a delay.
animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}
}

@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/**
* Block Toolbar when contextual.
*/
Expand Down Expand Up @@ -181,7 +150,6 @@
}
}


/**
* Block Label for Navigation/Selection Mode
*/
Expand Down Expand Up @@ -270,7 +238,8 @@
}
}

.components-popover__content.components-popover__content { // Needs specificity.
.components-popover__content.components-popover__content {
// Needs specificity.
background: none;
border: none;
box-shadow: none;
Expand Down
41 changes: 3 additions & 38 deletions packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,44 +71,9 @@
height: auto !important;
}

// Only target direct dropzone.
.wp-block-cover > .components-drop-zone {
&.is-active {
transition: 0.2s opacity, 0.2s border;
@include reduce-motion("transition");
}

&.is-dragging-over-element {
background-color: transparent;
border: $grid-unit-60 solid var(--wp-admin-theme-color);

.components-drop-zone__content {
transform: none;
}
}

.components-drop-zone__content {
display: flex;
align-items: center;
top: -($grid-unit-15 * 3);
left: -($grid-unit-15 * 3);
transform: none;
}

.components-drop-zone__content-icon,
.components-drop-zone__content-text {
display: inline;
}

.components-drop-zone__content-icon {
// Reset margin.
margin: 0;
margin-right: $grid-unit;
}

.components-drop-zone__content-text {
font-size: $default-font-size;
}
// When uploading background images, show a transparent overlay.
.wp-block-cover > .components-drop-zone .components-drop-zone__content {
opacity: 0.8 !important;
}

// Remove the parallax fixed background when in the patterns preview panel as it
Expand Down
Loading