Skip to content

Commit

Permalink
Add animations for insertion point, dropzone, and site icon (#33132)
Browse files Browse the repository at this point in the history 
* Use animation to show insertion line and sibling inserter.
* Implement animation for dropzone component.
* Animate the site icon component in the header of the editor and site editor.
* Respect reduced motion across all animations.
  • Loading branch information
@mtias
mtias authored Oct 11, 2021
1 parent 5c6013a commit 39649d5
Show file tree
Hide file tree
Showing 9 changed files with 250 additions and 148 deletions.
19 changes: 13 additions & 6 deletions package-lock.json
View file

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
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
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
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

0 comments on commit 39649d5

Please sign in to comment.