Skip to content
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

Jump to bottom

Update the framer motion dependency to the latest version #49822

Merged
merged 7 commits into from
Apr 25, 2023
Merged

Update the framer motion dependency to the latest version #49822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e7d2d99
Update framer motion to the latest version
youknowriad Apr 14, 2023
a96aca2
Update changelog
youknowriad Apr 14, 2023
9f2c1e7
Fix types
youknowriad Apr 14, 2023
bda4d59
Popover: remove redundant hasAnimatedOnce state
jsnajdr Apr 14, 2023
93d706a
Update unit test snapshots
youknowriad Apr 14, 2023
de17901
Fix docs
youknowriad Apr 14, 2023
96c5353
Fix e2e test
youknowriad Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
168 changes: 8 additions & 160 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.

6 changes: 3 additions & 3 deletions packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
<span>
<div
class="components-popover block-editor-url-popover is-positioned"
style="position: absolute; top: 0px; left: 0px; transform: none;"
style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing this is an internal implementation details to framer motion animations change. Maybe perf related

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like it

tabindex="-1"
>
<div
Expand Down Expand Up @@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
<span>
<div
class="components-popover block-editor-url-popover is-positioned"
style="position: absolute; top: 0px; left: 0px; transform: none;"
style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
<span>
<div
class="components-popover block-editor-url-popover is-positioned"
style="position: absolute; top: 0px; left: 0px; transform: none;"
style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
tabindex="-1"
>
<div
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- Remove Lodash dependency from components package ([#49794](https://github.com/WordPress/gutenberg/pull/49794)).
- Tweak `WordPressComponent` type so `selector` property is optional ([#49960](https://github.com/WordPress/gutenberg/pull/49960)).
- Update `Modal` appearance on small screens ([#50039](https://github.com/WordPress/gutenberg/pull/50039)).
- Update the framer motion dependency to the latest version `10.11.6` ([#49822](https://github.com/WordPress/gutenberg/pull/49822)).

### Enhancements

Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"dom-scroll-into-view": "^1.2.1",
"downshift": "^6.0.15",
"fast-deep-equal": "^3.1.3",
"framer-motion": "^7.6.1",
"framer-motion": "^10.11.6",
"gradient-parser": "^0.1.5",
"highlight-words-core": "^1.2.2",
"is-plain-object": "^5.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/navigator/navigator-screen/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const animationExitDelay = 0;
// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
type Props = Omit<
WordPressComponentProps< NavigatorScreenProps, 'div', false >,
Exclude< keyof MotionProps, 'style' >
Exclude< keyof MotionProps, 'style' | 'children' >
>;

function UnconnectedNavigatorScreen(
Expand Down
17 changes: 2 additions & 15 deletions packages/components/src/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,22 +109,13 @@ const AnimatedWrapper = forwardRef(
}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
forwardedRef: ForwardedRef< any >
) => {
// When animating, animate only once (i.e. when the popover is opened), and
// do not animate on subsequent prop changes (as it conflicts with
// floating-ui's positioning updates).
const [ hasAnimatedOnce, setHasAnimatedOnce ] = useState( false );
const shouldReduceMotion = useReducedMotion();

const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
() => placementToMotionAnimationProps( placement ),
[ placement ]
);

const onAnimationComplete = useCallback(
() => setHasAnimatedOnce( true ),
[]
);

const computedAnimationProps: HTMLMotionProps< 'div' > =
shouldAnimate && ! shouldReduceMotion
? {
Expand All @@ -133,10 +124,6 @@ const AnimatedWrapper = forwardRef(
...receivedInlineStyles,
},
...otherMotionProps,
onAnimationComplete,
animate: hasAnimatedOnce
? false
: otherMotionProps.animate,
}
: {
animate: false,
Expand All @@ -160,8 +147,8 @@ const UnforwardedPopover = (
WordPressComponentProps< PopoverProps, 'div', false >,
// To avoid overlaps between the standard HTML attributes and the props
// expected by `framer-motion`, omit all framer motion props from popover
// props (except for `animate`, which is re-defined in `PopoverProps`).
keyof Omit< MotionProps, 'animate' >
// props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
keyof Omit< MotionProps, 'animate' | 'children' >
>,
forwardedRef: ForwardedRef< any >
) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export default function Layout() {
ease: 'easeOut',
} }
>
{ canvasMode === 'edit' && <Header /> }
<Header />
</NavigableRegion>
) }
</AnimatePresence>
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/template-details/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export default function TemplateDetails( { template, onClose } ) {
<Button
className="edit-site-template-details__show-all-button"
{ ...browseAllLinkProps }
onClick={ () => onClose() }
>
{ template?.type === 'wp_template'
? __( 'Manage all templates' )
Expand Down