Update the framer motion dependency to the latest version (#49822)

Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com> Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
WordPress · Apr 25, 2023 · d32a7b6 · d32a7b6
1 parent 39f322a
commit d32a7b6
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
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
@@ -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);"
       tabindex="-1"
     >
       <div
@@ -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
@@ -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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -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
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -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",

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -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(

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -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
 				? {
@@ -133,10 +124,6 @@ const AnimatedWrapper = forwardRef(
 							...receivedInlineStyles,
 						},
 						...otherMotionProps,
-						onAnimationComplete,
-						animate: hasAnimatedOnce
-							? false
-							: otherMotionProps.animate,
 				  }
 				: {
 						animate: false,
@@ -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 >
 ) => {

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -169,7 +169,7 @@ export default function Layout() {
 								ease: 'easeOut',
 							} }
 						>
-							{ canvasMode === 'edit' && <Header /> }
+							<Header />
 						</NavigableRegion>
 					) }
 				</AnimatePresence>

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
@@ -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' )