Block Editor: update react-spring to 9.2.4 #30979
Conversation
Can we get some testing here. It would be cool to get this issue fixed for 5.8 |
I'm still able to reproduce the original issue. Tested on macOS Big Sur / Firefox 88 CleanShot.2021-05-05.at.15.12.42.mp4 |
Also looking at the tests, it seems this PR might not be building properly. |
2e67823
to
6edb026
The |
So with FF + React Spring 9.1.2 animations do work, but it looks like there's quite a bit of jank going on when v9.1.2.mp4 |
Size Change: +7.81 kB (+1%) Total Size: 1.06 MB
|
Filename | Size |
---|---|
build/a11y/index.min.js |
931 B |
build/admin-manifest/index.min.js |
1.09 kB |
build/annotations/index.min.js |
2.7 kB |
build/api-fetch/index.min.js |
2.19 kB |
build/autop/index.min.js |
2.08 kB |
build/blob/index.min.js |
459 B |
build/block-directory/index.min.js |
6.2 kB |
build/block-directory/style-rtl.css |
1.01 kB |
build/block-directory/style.css |
1.01 kB |
build/block-editor/default-editor-styles-rtl.css |
378 B |
build/block-editor/default-editor-styles.css |
378 B |
build/block-editor/style-rtl.css |
13.8 kB |
build/block-editor/style.css |
13.8 kB |
build/block-library/blocks/archives/editor-rtl.css |
61 B |
build/block-library/blocks/archives/editor.css |
60 B |
build/block-library/blocks/archives/style-rtl.css |
65 B |
build/block-library/blocks/archives/style.css |
65 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B |
build/block-library/blocks/audio/editor.css |
58 B |
build/block-library/blocks/audio/style-rtl.css |
111 B |
build/block-library/blocks/audio/style.css |
111 B |
build/block-library/blocks/audio/theme-rtl.css |
125 B |
build/block-library/blocks/audio/theme.css |
125 B |
build/block-library/blocks/block/editor-rtl.css |
161 B |
build/block-library/blocks/block/editor.css |
161 B |
build/block-library/blocks/button/editor-rtl.css |
474 B |
build/block-library/blocks/button/editor.css |
474 B |
build/block-library/blocks/button/style-rtl.css |
600 B |
build/block-library/blocks/button/style.css |
600 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B |
build/block-library/blocks/buttons/editor.css |
315 B |
build/block-library/blocks/buttons/style-rtl.css |
370 B |
build/block-library/blocks/buttons/style.css |
370 B |
build/block-library/blocks/calendar/style-rtl.css |
207 B |
build/block-library/blocks/calendar/style.css |
207 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B |
build/block-library/blocks/categories/editor.css |
83 B |
build/block-library/blocks/categories/style-rtl.css |
79 B |
build/block-library/blocks/categories/style.css |
79 B |
build/block-library/blocks/code/style-rtl.css |
90 B |
build/block-library/blocks/code/style.css |
90 B |
build/block-library/blocks/code/theme-rtl.css |
131 B |
build/block-library/blocks/code/theme.css |
131 B |
build/block-library/blocks/columns/editor-rtl.css |
206 B |
build/block-library/blocks/columns/editor.css |
205 B |
build/block-library/blocks/columns/style-rtl.css |
497 B |
build/block-library/blocks/columns/style.css |
496 B |
build/block-library/blocks/cover/editor-rtl.css |
666 B |
build/block-library/blocks/cover/editor.css |
670 B |
build/block-library/blocks/cover/style-rtl.css |
1.23 kB |
build/block-library/blocks/cover/style.css |
1.23 kB |
build/block-library/blocks/embed/editor-rtl.css |
488 B |
build/block-library/blocks/embed/editor.css |
488 B |
build/block-library/blocks/embed/style-rtl.css |
417 B |
build/block-library/blocks/embed/style.css |
417 B |
build/block-library/blocks/embed/theme-rtl.css |
124 B |
build/block-library/blocks/embed/theme.css |
124 B |
build/block-library/blocks/file/editor-rtl.css |
300 B |
build/block-library/blocks/file/editor.css |
300 B |
build/block-library/blocks/file/style-rtl.css |
255 B |
build/block-library/blocks/file/style.css |
255 B |
build/block-library/blocks/file/view.min.js |
322 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.44 kB |
build/block-library/blocks/freeform/editor.css |
2.44 kB |
build/block-library/blocks/gallery/editor-rtl.css |
983 B |
build/block-library/blocks/gallery/editor.css |
988 B |
build/block-library/blocks/gallery/style-rtl.css |
1.6 kB |
build/block-library/blocks/gallery/style.css |
1.59 kB |
build/block-library/blocks/gallery/theme-rtl.css |
122 B |
build/block-library/blocks/gallery/theme.css |
122 B |
build/block-library/blocks/group/editor-rtl.css |
159 B |
build/block-library/blocks/group/editor.css |
159 B |
build/block-library/blocks/group/style-rtl.css |
57 B |
build/block-library/blocks/group/style.css |
57 B |
build/block-library/blocks/group/theme-rtl.css |
70 B |
build/block-library/blocks/group/theme.css |
70 B |
build/block-library/blocks/heading/style-rtl.css |
114 B |
build/block-library/blocks/heading/style.css |
114 B |
build/block-library/blocks/home-link/style-rtl.css |
247 B |
build/block-library/blocks/home-link/style.css |
247 B |
build/block-library/blocks/html/editor-rtl.css |
332 B |
build/block-library/blocks/html/editor.css |
333 B |
build/block-library/blocks/image/editor-rtl.css |
728 B |
build/block-library/blocks/image/editor.css |
728 B |
build/block-library/blocks/image/style-rtl.css |
482 B |
build/block-library/blocks/image/style.css |
487 B |
build/block-library/blocks/image/theme-rtl.css |
124 B |
build/block-library/blocks/image/theme.css |
124 B |
build/block-library/blocks/latest-comments/style-rtl.css |
284 B |
build/block-library/blocks/latest-comments/style.css |
284 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B |
build/block-library/blocks/latest-posts/editor.css |
137 B |
build/block-library/blocks/latest-posts/style-rtl.css |
528 B |
build/block-library/blocks/latest-posts/style.css |
527 B |
build/block-library/blocks/list/style-rtl.css |
94 B |
build/block-library/blocks/list/style.css |
94 B |
build/block-library/blocks/media-text/editor-rtl.css |
266 B |
build/block-library/blocks/media-text/editor.css |
263 B |
build/block-library/blocks/media-text/style-rtl.css |
488 B |
build/block-library/blocks/media-text/style.css |
485 B |
build/block-library/blocks/more/editor-rtl.css |
431 B |
build/block-library/blocks/more/editor.css |
431 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
489 B |
build/block-library/blocks/navigation-link/editor.css |
488 B |
build/block-library/blocks/navigation-link/style-rtl.css |
94 B |
build/block-library/blocks/navigation-link/style.css |
94 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
300 B |
build/block-library/blocks/navigation-submenu/editor.css |
299 B |
build/block-library/blocks/navigation-submenu/style-rtl.css |
298 B |
build/block-library/blocks/navigation-submenu/style.css |
298 B |
build/block-library/blocks/navigation-submenu/view.min.js |
343 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.72 kB |
build/block-library/blocks/navigation/editor.css |
1.72 kB |
build/block-library/blocks/navigation/style-rtl.css |
1.44 kB |
build/block-library/blocks/navigation/style.css |
1.44 kB |
build/block-library/blocks/navigation/view.min.js |
2.52 kB |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B |
build/block-library/blocks/nextpage/editor.css |
395 B |
build/block-library/blocks/page-list/editor-rtl.css |
310 B |
build/block-library/blocks/page-list/editor.css |
310 B |
build/block-library/blocks/page-list/style-rtl.css |
241 B |
build/block-library/blocks/page-list/style.css |
241 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B |
build/block-library/blocks/paragraph/editor.css |
157 B |
build/block-library/blocks/paragraph/style-rtl.css |
273 B |
build/block-library/blocks/paragraph/style.css |
273 B |
build/block-library/blocks/post-author/editor-rtl.css |
210 B |
build/block-library/blocks/post-author/editor.css |
210 B |
build/block-library/blocks/post-author/style-rtl.css |
182 B |
build/block-library/blocks/post-author/style.css |
181 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
140 B |
build/block-library/blocks/post-comments-form/style.css |
140 B |
build/block-library/blocks/post-comments/style-rtl.css |
360 B |
build/block-library/blocks/post-comments/style.css |
359 B |
build/block-library/blocks/post-content/editor-rtl.css |
138 B |
build/block-library/blocks/post-content/editor.css |
138 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B |
build/block-library/blocks/post-excerpt/style.css |
69 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
398 B |
build/block-library/blocks/post-featured-image/editor.css |
398 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
143 B |
build/block-library/blocks/post-featured-image/style.css |
143 B |
build/block-library/blocks/post-template/editor-rtl.css |
99 B |
build/block-library/blocks/post-template/editor.css |
98 B |
build/block-library/blocks/post-template/style-rtl.css |
378 B |
build/block-library/blocks/post-template/style.css |
379 B |
build/block-library/blocks/post-terms/style-rtl.css |
73 B |
build/block-library/blocks/post-terms/style.css |
73 B |
build/block-library/blocks/post-title/style-rtl.css |
60 B |
build/block-library/blocks/post-title/style.css |
60 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B |
build/block-library/blocks/preformatted/style.css |
103 B |
build/block-library/blocks/pullquote/editor-rtl.css |
198 B |
build/block-library/blocks/pullquote/editor.css |
198 B |
build/block-library/blocks/pullquote/style-rtl.css |
378 B |
build/block-library/blocks/pullquote/style.css |
378 B |
build/block-library/blocks/pullquote/theme-rtl.css |
167 B |
build/block-library/blocks/pullquote/theme.css |
167 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
301 B |
build/block-library/blocks/query-pagination/editor.css |
292 B |
build/block-library/blocks/query-pagination/style-rtl.css |
259 B |
build/block-library/blocks/query-pagination/style.css |
257 B |
build/block-library/blocks/query-title/editor-rtl.css |
85 B |
build/block-library/blocks/query-title/editor.css |
85 B |
build/block-library/blocks/query/editor-rtl.css |
131 B |
build/block-library/blocks/query/editor.css |
132 B |
build/block-library/blocks/quote/style-rtl.css |
187 B |
build/block-library/blocks/quote/style.css |
187 B |
build/block-library/blocks/quote/theme-rtl.css |
220 B |
build/block-library/blocks/quote/theme.css |
222 B |
build/block-library/blocks/rss/editor-rtl.css |
202 B |
build/block-library/blocks/rss/editor.css |
204 B |
build/block-library/blocks/rss/style-rtl.css |
289 B |
build/block-library/blocks/rss/style.css |
288 B |
build/block-library/blocks/search/editor-rtl.css |
165 B |
build/block-library/blocks/search/editor.css |
165 B |
build/block-library/blocks/search/style-rtl.css |
374 B |
build/block-library/blocks/search/style.css |
375 B |
build/block-library/blocks/search/theme-rtl.css |
64 B |
build/block-library/blocks/search/theme.css |
64 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B |
build/block-library/blocks/separator/editor.css |
99 B |
build/block-library/blocks/separator/style-rtl.css |
250 B |
build/block-library/blocks/separator/style.css |
250 B |
build/block-library/blocks/separator/theme-rtl.css |
172 B |
build/block-library/blocks/separator/theme.css |
172 B |
build/block-library/blocks/shortcode/editor-rtl.css |
474 B |
build/block-library/blocks/shortcode/editor.css |
474 B |
build/block-library/blocks/site-logo/editor-rtl.css |
462 B |
build/block-library/blocks/site-logo/editor.css |
464 B |
build/block-library/blocks/site-logo/style-rtl.css |
153 B |
build/block-library/blocks/site-logo/style.css |
153 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
86 B |
build/block-library/blocks/site-tagline/editor.css |
86 B |
build/block-library/blocks/site-title/editor-rtl.css |
84 B |
build/block-library/blocks/site-title/editor.css |
84 B |
build/block-library/blocks/social-link/editor-rtl.css |
165 B |
build/block-library/blocks/social-link/editor.css |
165 B |
build/block-library/blocks/social-links/editor-rtl.css |
812 B |
build/block-library/blocks/social-links/editor.css |
811 B |
build/block-library/blocks/social-links/style-rtl.css |
1.3 kB |
build/block-library/blocks/social-links/style.css |
1.3 kB |
build/block-library/blocks/spacer/editor-rtl.css |
307 B |
build/block-library/blocks/spacer/editor.css |
307 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B |
build/block-library/blocks/spacer/style.css |
48 B |
build/block-library/blocks/table/editor-rtl.css |
471 B |
build/block-library/blocks/table/editor.css |
472 B |
build/block-library/blocks/table/style-rtl.css |
481 B |
build/block-library/blocks/table/style.css |
481 B |
build/block-library/blocks/table/theme-rtl.css |
188 B |
build/block-library/blocks/table/theme.css |
188 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
146 B |
build/block-library/blocks/tag-cloud/style.css |
146 B |
build/block-library/blocks/template-part/editor-rtl.css |
636 B |
build/block-library/blocks/template-part/editor.css |
635 B |
build/block-library/blocks/template-part/theme-rtl.css |
101 B |
build/block-library/blocks/template-part/theme.css |
101 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B |
build/block-library/blocks/term-description/editor.css |
90 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B |
build/block-library/blocks/text-columns/editor.css |
95 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B |
build/block-library/blocks/text-columns/style.css |
166 B |
build/block-library/blocks/verse/style-rtl.css |
87 B |
build/block-library/blocks/verse/style.css |
87 B |
build/block-library/blocks/video/editor-rtl.css |
571 B |
build/block-library/blocks/video/editor.css |
572 B |
build/block-library/blocks/video/style-rtl.css |
173 B |
build/block-library/blocks/video/style.css |
173 B |
build/block-library/blocks/video/theme-rtl.css |
124 B |
build/block-library/blocks/video/theme.css |
124 B |
build/block-library/common-rtl.css |
853 B |
build/block-library/common.css |
849 B |
build/block-library/editor-rtl.css |
9.69 kB |
build/block-library/editor.css |
9.68 kB |
build/block-library/index.min.js |
153 kB |
build/block-library/reset-rtl.css |
527 B |
build/block-library/reset.css |
527 B |
build/block-library/style-rtl.css |
10.3 kB |
build/block-library/style.css |
10.3 kB |
build/block-library/theme-rtl.css |
658 B |
build/block-library/theme.css |
663 B |
build/block-serialization-default-parser/index.min.js |
1.09 kB |
build/block-serialization-spec-parser/index.min.js |
2.79 kB |
build/blocks/index.min.js |
46.9 kB |
build/components/index.min.js |
209 kB |
build/components/style-rtl.css |
15.8 kB |
build/components/style.css |
15.8 kB |
build/compose/index.min.js |
10.2 kB |
build/core-data/index.min.js |
12.3 kB |
build/customize-widgets/index.min.js |
11.1 kB |
build/customize-widgets/style-rtl.css |
1.5 kB |
build/customize-widgets/style.css |
1.49 kB |
build/data-controls/index.min.js |
614 B |
build/data/index.min.js |
7.1 kB |
build/date/index.min.js |
31.5 kB |
build/deprecated/index.min.js |
428 B |
build/dom-ready/index.min.js |
304 B |
build/dom/index.min.js |
4.45 kB |
build/edit-navigation/index.min.js |
15.4 kB |
build/edit-navigation/style-rtl.css |
3.41 kB |
build/edit-navigation/style.css |
3.41 kB |
build/edit-post/classic-rtl.css |
492 B |
build/edit-post/classic.css |
494 B |
build/edit-post/index.min.js |
29 kB |
build/edit-post/style-rtl.css |
7.2 kB |
build/edit-post/style.css |
7.2 kB |
build/edit-site/index.min.js |
26.6 kB |
build/edit-site/style-rtl.css |
5.07 kB |
build/edit-site/style.css |
5.07 kB |
build/edit-widgets/index.min.js |
16.1 kB |
build/edit-widgets/style-rtl.css |
4.06 kB |
build/edit-widgets/style.css |
4.06 kB |
build/editor/index.min.js |
37.7 kB |
build/editor/style-rtl.css |
3.74 kB |
build/editor/style.css |
3.73 kB |
build/element/index.min.js |
3.17 kB |
build/escape-html/index.min.js |
517 B |
build/format-library/index.min.js |
5.34 kB |
build/format-library/style-rtl.css |
668 B |
build/format-library/style.css |
670 B |
build/hooks/index.min.js |
1.55 kB |
build/html-entities/index.min.js |
424 B |
build/i18n/index.min.js |
3.6 kB |
build/is-shallow-equal/index.min.js |
501 B |
build/keyboard-shortcuts/index.min.js |
1.72 kB |
build/keycodes/index.min.js |
1.3 kB |
build/list-reusable-blocks/index.min.js |
1.85 kB |
build/list-reusable-blocks/style-rtl.css |
838 B |
build/list-reusable-blocks/style.css |
838 B |
build/media-utils/index.min.js |
2.88 kB |
build/notices/index.min.js |
845 B |
build/nux/index.min.js |
2.03 kB |
build/nux/style-rtl.css |
747 B |
build/nux/style.css |
743 B |
build/plugins/index.min.js |
1.83 kB |
build/primitives/index.min.js |
921 B |
build/priority-queue/index.min.js |
582 B |
build/react-i18n/index.min.js |
671 B |
build/redux-routine/index.min.js |
2.63 kB |
build/reusable-blocks/index.min.js |
2.28 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/rich-text/index.min.js |
10.6 kB |
build/server-side-render/index.min.js |
1.32 kB |
build/shortcode/index.min.js |
1.48 kB |
build/token-list/index.min.js |
562 B |
build/url/index.min.js |
1.74 kB |
build/viewport/index.min.js |
1.02 kB |
build/warning/index.min.js |
248 B |
build/widgets/index.min.js |
7.27 kB |
build/widgets/style-rtl.css |
1.17 kB |
build/widgets/style.css |
1.18 kB |
build/wordcount/index.min.js |
1.04 kB |
@talldan how do we enable the block navigator movers UI (or is this no longer exposed?) #18014 @youknowriad do you know who'd be good to ping to double check what's going on with package.json and source map issues? |
packages/block-editor/package.json
Outdated
"@react-spring/core": "^9.1.2", | ||
"@react-spring/shared": "^9.1.2", | ||
"@react-spring/types": "^9.1.2", | ||
"@react-spring/web": "^9.1.2", |
Why do we need all these dependencies here since we're only using the "web" package directly?
We probably don't. I was having trouble getting a plain react-spring import working vs pointing at the web package. I can revisit.
Sorry missed the comments here. I think @gziolo would be the best person for package and package-lock related things |
https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#reduced_time_precision We might need to test if we need to add the following headers to enable higher precision:
|
This one is ready for review. Dusting this one off since it may be harder to replace the last two usages of React Spring in favor of framer at the moment. (We'll need other performance improvements to do so). |
"redux-multi": "^0.1.12", | ||
"rememo": "^3.0.0", | ||
"tinycolor2": "^1.4.2", | ||
"traverse": "^0.6.6" | ||
}, | ||
"dependencies": { |
I'm not sure why it is here. It looks like it can be removed.
Good catch, updated in 317f1d8.
The only dependencies for web should be the following:
Maybe it was a stray item from when I was testing other imports. To fix this, I removed the entry for "@react-spring/web": "^9.2.4",
in package.json, npm install
, then added it back with another npm install
and it didn't appear to return.
It looks good, thank you for bringing this dependency up to date.
Thanks for the review @gziolo I'll land once tests are green |
Thanks, I ended up needing to restart almost all the jobs. I'd be curious to see what the bug turns out to be for the cb issue. It smells like a cache issue, but sounds like it may be on the network layer. Have folks reproduced this on a local docker env? |
The jobs that fail have npm cache primed, so it’s rather related to installation process. One thing we suspect is related to forked packages that use git urls. Anyway, it might be everything |
gwwar commentedApr 19, 2021
•
edited
closes #32398
This PR updates react-spring to 9.2.4. This should fix overlapping blocks in FF #19476 when
privacy.resistFingerprinting
is set to true inabout:config
. Note that whenprivacy.resistFingerprinting
is enabled, animations will not be as smooth due to the reduced time precision 100ms or more (https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#reduced_time_precision).There are a few breaking changes from React Spring 8 -> 9, most notably in the refactor of useTransition and rename of onFrame -> onChange. We'll want to verify that block moving animations still work in the list view and editor block list.
https://aleclarson.github.io/react-spring/v9/
https://aleclarson.github.io/react-spring/v9/breaking-changes/
Testing Instructions
CleanShot.2021-09-09.at.14.48.56.mp4
The text was updated successfully, but these errors were encountered: