From 9bb06cd848347cb1880188fab40a4abec2e5cbf7 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Wed, 4 Aug 2021 09:35:05 -0700 Subject: [PATCH] Export motion from wordpress/components as __unstable --- package-lock.json | 3 +-- packages/components/package.json | 2 +- packages/components/src/animation/index.js | 13 +++++++++++++ packages/components/src/index.js | 5 +++++ packages/components/src/snackbar/list.js | 5 ++++- packages/edit-post/package.json | 1 - .../edit-post/src/components/visual-editor/index.js | 3 +-- 7 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 packages/components/src/animation/index.js diff --git a/package-lock.json b/package-lock.json index 67764a631dbf7b..26cb192adf729e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14681,7 +14681,7 @@ "classnames": "^2.3.1", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", - "framer-motion": "^4.1.3", + "framer-motion": "^4.1.17", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "lodash": "^4.17.21", @@ -14956,7 +14956,6 @@ "@wordpress/viewport": "file:packages/viewport", "@wordpress/warning": "file:packages/warning", "classnames": "^2.3.1", - "framer-motion": "^4.1.3", "lodash": "^4.17.21", "memize": "^1.1.0", "rememo": "^3.0.0", diff --git a/packages/components/package.json b/packages/components/package.json index 5646e4138b4a95..c131e5b6ea52a3 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -52,7 +52,7 @@ "classnames": "^2.3.1", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", - "framer-motion": "^4.1.3", + "framer-motion": "^4.1.17", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "lodash": "^4.17.21", diff --git a/packages/components/src/animation/index.js b/packages/components/src/animation/index.js new file mode 100644 index 00000000000000..44132b237de0be --- /dev/null +++ b/packages/components/src/animation/index.js @@ -0,0 +1,13 @@ +/** + * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so + * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility + * in trying animation options, we avoid making this public API. + * + * @see https://www.framer.com/docs/animation/ + */ + +export { + motion as __unstableMotion, + AnimatePresence as __unstableAnimatePresence, + AnimateSharedLayout as __unstableAnimateSharedLayout, +} from 'framer-motion'; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 639b4fa704af48..877e399a6e567a 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -16,6 +16,11 @@ export { default as Animate, getAnimateClassName as __unstableGetAnimateClassName, } from './animate'; +export { + __unstableMotion, + __unstableAnimatePresence, + __unstableAnimateSharedLayout, +} from './animation'; export { default as AnglePickerControl } from './angle-picker-control'; export { default as Autocomplete, diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js index a9c1bb4fbb627a..d3e24571d420a6 100644 --- a/packages/components/src/snackbar/list.js +++ b/packages/components/src/snackbar/list.js @@ -3,7 +3,6 @@ */ import classnames from 'classnames'; import { omit, noop } from 'lodash'; -import { motion, AnimatePresence } from 'framer-motion'; /** * WordPress dependencies @@ -14,6 +13,10 @@ import { useReducedMotion } from '@wordpress/compose'; * Internal dependencies */ import Snackbar from './'; +import { + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, +} from '../animation'; const SNACKBAR_VARIANTS = { init: { diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 197b568d20102c..b5fe7f1c5e301c 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -53,7 +53,6 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/warning": "file:../warning", "classnames": "^2.3.1", - "framer-motion": "^4.1.3", "lodash": "^4.17.21", "memize": "^1.1.0", "rememo": "^3.0.0", diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index eced55ecdc0a8c..a845de6d7a3403 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { motion } from 'framer-motion'; /** * WordPress dependencies @@ -32,7 +31,7 @@ import { __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, } from '@wordpress/block-editor'; import { useRef, useMemo } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { Button, __unstableMotion as motion } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { arrowLeft } from '@wordpress/icons';